OPHJOD-1149: Update MediaCard

Opetushallitus · Jan 13, 2025 · 0586540 · 0586540
1 parent 215e293
commit 0586540
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/lib/components/MediaCard/MediaCard.stories.tsx b/lib/components/MediaCard/MediaCard.stories.tsx
@@ -45,3 +45,31 @@ export const Horizontal: Story = {
     tags: ['Taglorem', 'Loremtag', 'Nonutag'],
   },
 };
+
+export const VerticalWithRating: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=2217-8529',
+    },
+  },
+  argTypes: {
+    rating: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 5,
+        step: 1,
+      },
+    },
+  },
+  args: {
+    rating: 3,
+    variant: 'vertical',
+    imageSrc: 'https://images.unsplash.com/photo-1523464862212-d6631d073194?q=80&w=260?q=80&w=260',
+    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'],
+  },
+};
diff --git a/lib/components/MediaCard/MediaCard.tsx b/lib/components/MediaCard/MediaCard.tsx
@@ -1,3 +1,4 @@
+import { MdOutlineStar } from 'react-icons/md';
 import { cx } from '../../cva';
 
 type Variant = 'vertical' | 'horizontal';
@@ -23,6 +24,9 @@ export type MediaCardProps = {
   label: string;
   description: string;
   tags: string[];
+  /** Rating between 0-5*/
+  rating?: number;
+  ratingAriaLabel?: string;
 } & LinkComponent;
 
 const getVariantContainerClassNames = ({ variant }: { variant: Variant }) => {
@@ -33,7 +37,7 @@ const getVariantContainerClassNames = ({ variant }: { variant: Variant }) => {
 };
 
 const getVariantImageClassNames = ({ variant }: { variant: Variant }) => {
-  return cx({
+  return cx('ds-object-cover', {
     'ds-min-h-[147px]': variant === 'vertical',
     'ds-h-full ds-min-w-[265px]': variant === 'horizontal',
   });
@@ -67,6 +71,23 @@ const LinkOrDiv = ({
   );
 };
 
+interface RatingElementProps {
+  /** Amount of the rating, possible values between 0-5 */
+  amount: number;
+  ariaLabel: string;
+}
+
+const RatingElement = ({ amount, ariaLabel }: RatingElementProps) => {
+  return (
+    <div role="figure" className="ds-flex ds-flex-row ds-gap-2" aria-label={ariaLabel}>
+      {Array.from({ length: 5 }).map((_, idx) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <MdOutlineStar key={idx} className={idx < amount ? 'ds-text-black' : 'ds-text-accent-25'} />
+      ))}
+    </div>
+  );
+};
+
 export const MediaCard = ({
   variant = 'vertical',
   imageSrc,
@@ -76,18 +97,25 @@ export const MediaCard = ({
   tags,
   linkComponent: Link,
   to,
+  rating,
+  ratingAriaLabel,
 }: MediaCardProps) => {
   const variantContainerClassNames = getVariantContainerClassNames({ variant });
   const variantImageClassNames = getVariantImageClassNames({ variant });
 
   return (
     <LinkOrDiv to={to} linkComponent={Link} className={variantContainerClassNames}>
-      <img className={`${variantImageClassNames}`} src={imageSrc} alt={imageAlt} />
+      {imageSrc ? (
+        <img className={`${variantImageClassNames}`} src={imageSrc} alt={imageAlt} />
+      ) : (
+        <span className="ds-w-full ds-h-full ds-bg-secondary-5"></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 sm:ds-text-heading-3">{label}</div>
           <div className="ds-text-body-sm-mobile sm:ds-text-body-sm ds-line-clamp-3">{description}</div>
         </div>
+        {rating !== undefined && <RatingElement amount={rating} ariaLabel={ratingAriaLabel ?? ''} />}
         <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) => (
             <Tag key={tag} label={tag} />

diff --git a/lib/components/MediaCard/__snapshots__/MediaCard.test.tsx.snap b/lib/components/MediaCard/__snapshots__/MediaCard.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`MediaCard > renders the MediaCard component with default vertical varia
 >
   <img
     alt="Image for default"
-    class="ds-min-h-[147px]"
+    class="ds-object-cover ds-min-h-[147px]"
     src="default.jpg"
   />
   <div