Merge pull request #85 from fourkitchens/develop

Release - 05/21/2024
youonlylivetwice · May 21, 2024 · 68276ef · 68276ef
2 parents 0b1f29c + d031265
commit 68276ef
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 29 deletions.
diff --git a/docs/api/img.md b/docs/api/img.md
@@ -16,7 +16,7 @@ The component accepts the following props for configuration:
 |---|---|---|---|
 | `src` | `string` | `-` | Optional. A string with the path of the image to be rendered. |
 | `alt` | `string` | `-` | Optional. A string for the alt tag of the image. |
-| `description` | `string` | `-` | Optional. A string with the description of the image. |
+| `description` | `string` - `ReactNode` | `-` | Optional. A string or react node with the description of the image. |
 | `bgColor` | `string` | `light` | Optional. Accepted values are `light` or `dark`. It will set the text color of the image caption. |
 | `renderedImageComponent` | `ElementType` | `-` | Optional. Renders the image using an external component. |
 
@@ -25,7 +25,7 @@ The component accepts the following props for configuration:
 ```jsx
 import { Img } from 'forcepoint-shared-components';
 
-<Img 
+<Img
   src='./path/to/img'
   alt='String that describes the image'
   description='String that describes the image'

diff --git a/src/lib/components/01-elements/img/img.stories.tsx b/src/lib/components/01-elements/img/img.stories.tsx
@@ -4,20 +4,6 @@ import Img from './img';
 const meta = {
   title: 'Elements/Image',
   component: Img,
-  argTypes: {
-    alt: {
-      control: { type: 'text' },
-    },
-    src: {
-      control: { type: 'text' },
-    },
-    description: {
-      control: { type: 'text' },
-    },
-    bgColor: {
-      control: { type: 'select', options: ['dark', 'light'] },
-    },
-  },
 } satisfies Meta<typeof Img>;
 
 export default meta;

diff --git a/src/lib/components/01-elements/img/img.tsx b/src/lib/components/01-elements/img/img.tsx
@@ -1,21 +1,22 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { cn } from '../../../utils/tailwind-merge';
 import Typography from '../typography/typography';
 
-export type ImgProps = {
+export interface ImgProps extends ComponentPropsWithoutRef<'figure'> {
   src?: string;
   alt?: string;
-  description?: string;
+  description?: string | ReactNode;
   bgColor?: 'dark' | 'light';
   renderedImageComponent?: ReactNode;
-};
+}
 
 export default function Img({
   src,
   alt = '',
   description,
   bgColor = 'light',
   renderedImageComponent,
+  ...props
 }: ImgProps) {
   const renderedImage = renderedImageComponent ? (
     renderedImageComponent
@@ -24,18 +25,16 @@ export default function Img({
   ) : null;
 
   const renderedCaption = description && (
-    <figcaption>
-      <Typography
-        variant="body-4"
-        className={cn(bgColor === 'dark' ? 'text-azure' : 'text-black')}
-      >
-        {description}
-      </Typography>
-    </figcaption>
+    <Typography
+      component="figcaption"
+      variant="body-4"
+      className={cn(bgColor === 'dark' ? 'text-azure' : 'text-black')}>
+      {description}
+    </Typography>
   );
 
   return (
-    <figure className="relative">
+    <figure {...props}>
       {renderedImage}
       {renderedCaption}
     </figure>