OPHJOD-1243: Update MediaCard styling

Opetushallitus · Feb 12, 2025 · b018884 · b018884
1 parent 50157a9
commit b018884
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 31 deletions.
diff --git a/lib/components/MediaCard/MediaCard.stories.tsx b/lib/components/MediaCard/MediaCard.stories.tsx
@@ -13,6 +13,7 @@ const meta = {
 export default meta;
 
 type Story = StoryObj<typeof meta>;
+const imageSrc = 'https://images.unsplash.com/photo-1523464862212-d6631d073194?q=80&w=260';
 
 export const Default: Story = {
   parameters: {
@@ -27,14 +28,49 @@ export const Default: Story = {
     },
   },
   args: {
-    imageSrc: 'https://images.unsplash.com/photo-1523464862212-d6631d073194?q=80&w=260?q=80&w=260',
+    imageSrc,
     imageAlt: 'Woman standing in front of a colourful wall',
     label: 'Tulevaisuusmatka',
     description: 'Tulevaisuusmatka on koulutus, joka auttaa sinua löytämään oman polkusi ja tavoitteesi.',
     tags: ['Taglorem', 'Loremtag', 'Nonutag'],
   },
 };
 
+export const Multiple: Story = {
+  render: (args) => {
+    const longTitle = 'Otsikko joka aina vain jatkuu ja jatkuu ja rivittyy';
+    const shortTitle = 'Lyhyt otsikko';
+    const longDescription = 'Teksti joka on tosi pitkä, eikä se mahdu millään yhdelle tai edes kahdelle riville.';
+    const shortDescription = 'Tosi vähän tekstiä';
+    return (
+      <div className="ds:flex ds:flex-row ds:gap-4">
+        <MediaCard {...args} label={longTitle} description={longDescription} />
+        <MediaCard {...args} label={longTitle} description={shortDescription} />
+        <MediaCard {...args} label={shortTitle} description={longDescription} tags={args.tags.slice(0, 3)} />
+        <MediaCard {...args} label={shortTitle} description={shortDescription} tags={[]} />
+      </div>
+    );
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=2217-8529',
+    },
+    docs: {
+      description: {
+        story: `Group of MediaCards with different lengths of title, description and tags.`,
+      },
+    },
+  },
+  args: {
+    imageSrc,
+    imageAlt: 'Woman standing in front of a colourful wall',
+    label: 'Otsikko joka aina vain jatkuu ja jatkuu ja rivittyy',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam adipiscin amet consectetur.',
+    tags: ['Taglorem', 'Loremtag', 'Nonutag', 'Dolortag', 'Tagamet', 'Nullatag'],
+  },
+};
+
 export const AbleToBeFavorited: Story = {
   parameters: {
     docs: {
@@ -59,7 +95,7 @@ export const AbleToBeFavorited: Story = {
     );
   },
   args: {
-    imageSrc: 'https://images.unsplash.com/photo-1523464862212-d6631d073194?q=80&w=260?q=80&w=260',
+    imageSrc,
     imageAlt: 'Woman standing in front of a colourful wall',
     label: 'Tulevaisuusmatka',
     description: 'Tulevaisuusmatka on koulutus, joka auttaa sinua löytämään oman polkusi ja tavoitteesi.',

diff --git a/lib/components/MediaCard/MediaCard.test.tsx b/lib/components/MediaCard/MediaCard.test.tsx
@@ -21,24 +21,6 @@ describe('MediaCard', () => {
     expect(screen.getByText('tag2')).toBeInTheDocument();
   });
 
-  it('renders the MediaCard component with horizontal variant', () => {
-    render(
-      <MediaCard
-        imageSrc="horizontal.jpg"
-        imageAlt="Image for horizontal"
-        label="Horizontal"
-        description="Horizontal description"
-        tags={['tag1', 'tag2']}
-      />,
-    );
-
-    expect(screen.getByAltText('Image for horizontal')).toBeInTheDocument();
-    expect(screen.getByText('Horizontal')).toBeInTheDocument();
-    expect(screen.getByText('Horizontal description')).toBeInTheDocument();
-    expect(screen.getByText('tag1')).toBeInTheDocument();
-    expect(screen.getByText('tag2')).toBeInTheDocument();
-  });
-
   it('renders the MediaCard component with default vertical variant', () => {
     const { container } = render(
       <MediaCard

diff --git a/lib/components/MediaCard/MediaCard.tsx b/lib/components/MediaCard/MediaCard.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
 
 type LinkComponent =
@@ -36,7 +37,7 @@ export type MediaCardProps = {
   FavoriteButtonProps;
 
 const Tag = ({ label }: { label: string }) => {
-  return <li className="ds:px-2 ds:first:pl-0 ds:last:pr-0">{label}</li>;
+  return <li className="ds:px-2 ds:pb-2 ds:last:pr-0">{label}</li>;
 };
 
 const LinkOrDiv = ({
@@ -92,24 +93,38 @@ export const MediaCard = ({
   favoriteLabel,
 }: MediaCardProps) => {
   const variantImageClassNames = 'ds:object-cover ds:min-h-[147px]';
+  const labelRef = React.useRef<HTMLDivElement>(null);
+  const SINGLE_LINE_LABEL_HEIGHT = 27;
+  const [lineClampClassNames, setLineClampClassNames] = React.useState('ds:line-clamp-3');
+
+  React.useEffect(() => {
+    const labelHeight = labelRef.current?.clientHeight ?? 0;
+    if (labelHeight > SINGLE_LINE_LABEL_HEIGHT) {
+      setLineClampClassNames('ds:line-clamp-2');
+    } else {
+      setLineClampClassNames('ds:line-clamp-3');
+    }
+  }, [label]);
 
   return (
-    <LinkOrDiv to={to} linkComponent={Link} className="ds:relative ds:flex ds:flex-col ds:w-[261px] ds:h-[299px]">
+    <LinkOrDiv to={to} linkComponent={Link} className="ds:relative ds:flex ds:flex-col ds:w-[261px] ds:min-h-[299px]">
       {imageSrc ? (
         <img className={`${variantImageClassNames}`} src={imageSrc} alt={imageAlt} />
       ) : (
         <span className={`ds:w-full ds:h-full ds:bg-secondary-5 ds:max-w-[265px] ${variantImageClassNames}`}></span>
       )}
       <div className="ds:px-5 ds:pt-4 ds:pb-5 ds:text-black ds:flex ds:flex-col ds:justify-between ds:h-full ds:flex-nowrap">
         <div className="ds:gap-3 ds:flex ds:flex-col">
-          <div className="ds:text-heading-3-mobile ds:sm:text-heading-3">{label}</div>
-          <div className="ds:text-body-sm-mobile ds:sm:text-body-sm ds:line-clamp-3">{description}</div>
+          <div className="ds:text-heading-3-mobile ds:sm:text-heading-3 ds:line-clamp-2" ref={labelRef}>
+            {label}
+          </div>
+          <div className={`ds:text-body-sm-mobile ds:sm:text-body-sm ${lineClampClassNames}`}>{description}</div>
         </div>
         {isFavorite !== undefined && (
           <FavoriteButton isFavorite={isFavorite} favoriteLabel={favoriteLabel} onFavoriteClick={onFavoriteClick} />
         )}
-        <ul className="ds:text-attrib-value ds:flex ds:flex-row ds:divide-x ds:flex-wrap ds:text-accent ds:pt-3">
-          {tags.map((tag) => (
+        <ul className="ds:text-attrib-value ds:flex ds:flex-row ds:divide-x ds:divide-secondary-5 ds:flex-wrap ds:text-accent ds:pt-3">
+          {tags.filter(Boolean).map((tag) => (
             <Tag key={tag} label={tag} />
           ))}
         </ul>

diff --git a/lib/components/MediaCard/__snapshots__/MediaCard.test.tsx.snap b/lib/components/MediaCard/__snapshots__/MediaCard.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`MediaCard > renders the MediaCard component with default vertical variant 1`] = `
 <div
-  class="ds:overflow-clip ds:rounded ds:shadow-border ds:bg-white ds:relative ds:flex ds:flex-col ds:w-[261px] ds:h-[299px]"
+  class="ds:overflow-clip ds:rounded ds:shadow-border ds:bg-white ds:relative ds:flex ds:flex-col ds:w-[261px] ds:min-h-[299px]"
 >
   <img
     alt="Image for default"
@@ -16,7 +16,7 @@ exports[`MediaCard > renders the MediaCard component with default vertical varia
       class="ds:gap-3 ds:flex ds:flex-col"
     >
       <div
-        class="ds:text-heading-3-mobile ds:sm:text-heading-3"
+        class="ds:text-heading-3-mobile ds:sm:text-heading-3 ds:line-clamp-2"
       >
         Default
       </div>
@@ -27,15 +27,15 @@ exports[`MediaCard > renders the MediaCard component with default vertical varia
       </div>
     </div>
     <ul
-      class="ds:text-attrib-value ds:flex ds:flex-row ds:divide-x ds:flex-wrap ds:text-accent ds:pt-3"
+      class="ds:text-attrib-value ds:flex ds:flex-row ds:divide-x ds:divide-secondary-5 ds:flex-wrap ds:text-accent ds:pt-3"
     >
       <li
-        class="ds:px-2 ds:first:pl-0 ds:last:pr-0"
+        class="ds:px-2 ds:pb-2 ds:last:pr-0"
       >
         tag1
       </li>
       <li
-        class="ds:px-2 ds:first:pl-0 ds:last:pr-0"
+        class="ds:px-2 ds:pb-2 ds:last:pr-0"
       >
         tag2
       </li>