fix/matter-title-overflow (#260)

Added state-based handling of excessively long titles

Co-authored-by: Brian Ledbetter <[email protected]>

Author: BrianL3

src/components/Details/Legislation/LegislationIntroduction.stories.tsx

@@ -10,6 +10,7 @@ import {
   adoptedMatterStatus,
   rejectedMatterStatus,
   inProgressMatterStatus,
+  longTitleMatterStatus,
 } from "../../../stories/model-mocks/matterStatus";
 
 import LegislationIntroduction, { LegislationIntroductionProps } from "./LegislationIntroduction";
@@ -34,6 +35,11 @@ const inProgressProps: LegislationIntroductionProps = {
   indexedMatterGrams: [basicIndexMatterGram, rentBasicMatterGram],
 };
 
+const longTitleProps: LegislationIntroductionProps = {
+  matterStatus: longTitleMatterStatus,
+  indexedMatterGrams: [basicIndexMatterGram, rentBasicMatterGram],
+};
+
 const Template: Story<LegislationIntroductionProps> = (args) => (
   <LegislationIntroduction {...args} />
 );
@@ -46,3 +52,6 @@ rejectedStory.args = rejectedProps;
 
 export const inProgressStory = Template.bind({});
 inProgressStory.args = inProgressProps;
+
+export const longTitleStory = Template.bind({});
+longTitleStory.args = longTitleProps;

src/components/Details/Legislation/LegislationIntroduction.tsx

@@ -1,21 +1,48 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
+import styled from "@emotion/styled";
+import { useMediaQuery } from "react-responsive";
+
 import MatterStatus from "../../../models/MatterStatus";
 import IndexedMatterGram from "../../../models/IndexedMatterGram";
 import { DecisionResult } from "../../Shared";
-
+import { screenWidths } from "../../../styles/mediaBreakpoints";
 export interface LegislationIntroductionProps {
   matterStatus: MatterStatus;
   indexedMatterGrams: IndexedMatterGram[];
 }
 
+const Title = styled.b<{ minified: boolean; linesToShow: number }>((props) => ({
+  overflow: "hidden",
+  "text-overflow": "ellipsis",
+  display: "-webkit-box",
+  "-webkit-line-clamp": props.minified
+    ? `${props.linesToShow}`
+    : "none" /* number of lines to show, 'none' means no limit */,
+  "line-clamp": props.minified ? `${props.linesToShow}` : "none",
+  "-webkit-box-orient": "vertical",
+}));
+
 const LegislationIntroduction: FC<LegislationIntroductionProps> = ({
   matterStatus,
   indexedMatterGrams,
 }: LegislationIntroductionProps) => {
+  const [fullTitleVisible, setFullTitleVisible] = useState(true);
+
+  const isMobile = useMediaQuery({ query: `(max-width: ${screenWidths.tablet})` });
+  const linesToShow = isMobile ? 4 : 2;
+
   return (
     <div>
       <h1 className="mzp-u-title-sm">{matterStatus.matter?.name}</h1>
-      <b>{matterStatus.matter?.title}</b>
+      <Title
+        onClick={() => {
+          setFullTitleVisible(!fullTitleVisible);
+        }}
+        minified={fullTitleVisible}
+        linesToShow={linesToShow}
+      >
+        {matterStatus.matter?.title}
+      </Title>
       <div
         style={{
           display: "flex",

src/stories/model-mocks/matter.ts

@@ -16,4 +16,13 @@ const basicMatter: Matter = {
     "AN ORDINANCE creating an Indigenous Advisory Council for tribal and urban Indian engagement; adding a new Chapter 3.75 to the Seattle Municipal Code; and amending Section 3.35.050 of the Seattle Municipal Code.",
 };
 
-export { basicMatter };
+const matterWithInordinatelyLongTitle = {
+  id: "matterWithInordinatelyLongTitle id",
+  external_source_id: "matterWithInordinatelyLongTitle external source id",
+  matter_type: "matterWithInordinatelyLongTitle type",
+  name: "VERY LONGLY-TITLED MATTER 123.44",
+  title:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut placerat orci nulla pellentesque dignissim enim sit. Ut porttitor leo a diam. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Vitae ultricies leo integer malesuada nunc vel risus commodo. Varius quam quisque id diam vel quam. Sed turpis tincidunt id aliquet risus feugiat in ante. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent. Nunc consequat interdum varius sit amet mattis. Tortor id aliquet lectus proin. Non odio euismod lacinia at quis risus sed vulputate odio. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Pretium lectus quam id leo in vitae turpis massa. Duis at tellus at urna condimentum mattis pellentesque id nibh. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Egestas fringilla phasellus faucibus scelerisque. Suscipit tellus mauris a diam maecenas sed enim. Dictumst quisque sagittis purus sit amet volutpat consequat. Imperdiet proin fermentum leo vel orci porta non. Diam quis enim lobortis scelerisque fermentum dui faucibus. Pellentesque id nibh tortor id. Augue ut lectus arcu bibendum at varius vel. Auctor augue mauris augue neque gravida in. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales. A iaculis at erat pellentesque. Nam at lectus urna duis. Suscipit tellus mauris a diam. Fermentum odio eu feugiat pretium nibh. Nulla at volutpat diam ut. Eu non diam phasellus vestibulum lorem. Amet risus nullam eget felis eget nunc lobortis mattis. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Adipiscing elit duis tristique sollicitudin nibh sit. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Eu consequat ac felis donec et odio pellentesque. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Enim ut sem viverra aliquet eget sit amet tellus cras. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Purus in mollis nunc sed id semper. Velit dignissim sodales ut eu sem integer. Sagittis eu volutpat odio facilisis mauris sit amet. Commodo viverra maecenas accumsan lacus. Convallis aenean et tortor at risus viverra. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Imperdiet nulla malesuada pellentesque elit. Leo duis ut diam quam. Id faucibus nisl tincidunt eget nullam non nisi est sit. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Massa tincidunt dui ut ornare. Viverra nam libero justo laoreet sit amet. At ultrices mi tempus imperdiet nulla malesuada. Dictum sit amet justo donec enim diam vulputate ut pharetra. Integer malesuada nunc vel risus. In eu mi bibendum neque egestas. In fermentum posuere urna nec tincidunt praesent semper feugiat. Egestas quis ipsum suspendisse ultrices. Aliquet bibendum enim facilisis gravida neque. Consectetur adipiscing elit ut aliquam purus. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Nunc aliquet bibendum enim facilisis gravida neque convallis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Lorem mollis aliquam ut porttitor leo a diam. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Nibh cras pulvinar mattis nunc. Ac orci phasellus egestas tellus rutrum. Habitant morbi tristique senectus et netus et malesuada fames. Vitae et leo duis ut diam quam nulla porttitor. Donec massa sapien faucibus et molestie ac feugiat sed. Nulla pharetra diam sit amet nisl suscipit adipiscing. Facilisis sed odio morbi quis. Sed risus pretium quam vulputate. Velit euismod in pellentesque massa. Lacus vel facilisis volutpat est velit egestas dui id. Amet mattis vulputate enim nulla. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero.  Enim eu turpis egestas pretium. Posuere sollicitudin aliquam ultrices sagittis orci a. Nulla facilisi cras fermentum odio. Curabitur vitae nunc sed velit dignissim sodales ut eu. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Aliquet bibendum enim facilisis gravida. Etiam sit amet nisl purus. Massa enim nec dui nunc. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Risus quis varius quam quisque. Phasellus vestibulum lorem sed risus. Eget aliquet nibh praesent tristique magna sit. Vestibulum rhoncus est pellentesque elit. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Habitant morbi tristique senectus et. Et netus et malesuada fames ac turpis egestas maecenas pharetra.  Fermentum dui faucibus in ornare quam. Donec massa sapien faucibus et molestie ac feugiat sed lectus. Integer feugiat scelerisque varius morbi. In nisl nisi scelerisque eu ultrices vitae. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Mi eget mauris pharetra et ultrices neque ornare aenean. Non diam phasellus vestibulum lorem sed risus. Dapibus ultrices in iaculis nunc sed. Facilisis magna etiam tempor orci eu. Convallis posuere morbi leo urna. Quam id leo in vitae turpis massa sed elementum. Lectus sit amet est placerat in egestas erat imperdiet. Parturient montes nascetur ridiculus mus. Risus ultricies tristique nulla aliquet enim tortor. Lobortis mattis aliquam faucibus purus in. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Malesuada proin libero nunc consequat interdum varius sit. Dolor sit amet consectetur adipiscing elit pellentesque. Tincidunt ornare massa eget egestas purus viverra accumsan. Sodales neque sodales ut etiam sit. Cras adipiscing enim eu turpis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Nunc lobortis mattis aliquam faucibus purus in. Mauris sit amet massa vitae tortor condimentum lacinia. Porttitor eget dolor morbi non arcu risus quis. Risus viverra adipiscing at in tellus. Accumsan sit amet nulla facilisi. Scelerisque purus semper eget duis at tellus at. At in tellus integer feugiat scelerisque varius morbi enim. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Scelerisque in dictum non consectetur a erat nam at lectus. Duis tristique sollicitudin nibh sit amet commodo. Non tellus orci ac auctor augue mauris augue neque gravida. Potenti nullam ac tortor vitae.",
+};
+
+export { basicMatter, matterWithInordinatelyLongTitle };

src/stories/model-mocks/matterStatus.ts

@@ -1,6 +1,6 @@
 import MatterStatus from "../../models/MatterStatus";
 import { MATTER_STATUS_DECISION } from "../../models/constants";
-import { basicMatter } from "./matter";
+import { basicMatter, matterWithInordinatelyLongTitle } from "./matter";
 import { basicPassEventMinutesItem } from "./eventMinutesItem";
 
 const adoptedMatterStatus: MatterStatus = {
@@ -36,4 +36,15 @@ const inProgressMatterStatus: MatterStatus = {
   update_datetime: new Date(),
 };
 
-export { adoptedMatterStatus, rejectedMatterStatus, inProgressMatterStatus };
+const longTitleMatterStatus: MatterStatus = {
+  id: "longTitleMatterStatus-test",
+  event_minutes_item_ref: "event_minutes_item_ref",
+  event_minutes_item: basicPassEventMinutesItem,
+  external_source_id: "external_source_id",
+  matter_ref: "matter_ref",
+  matter: matterWithInordinatelyLongTitle,
+  status: MATTER_STATUS_DECISION.ADOPTED,
+  update_datetime: new Date(),
+};
+
+export { adoptedMatterStatus, rejectedMatterStatus, inProgressMatterStatus, longTitleMatterStatus };