chore: add an ImageWidget component

4 files changed, 285 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss
new file mode 100644
index 0000000..78c0d26
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.module.scss
@@ -0,0 +1,43 @@
+@use "@styles/abstracts/functions" as fun;
+
+.img {
+  max-height: fun.convert-px(350);
+  margin: 0;
+}
+
+.txt {
+  padding: var(--spacing-sm);
+}
+
+.widget {
+  &--left {
+    .img {
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: left;
+    }
+  }
+
+  &--center {
+    .img {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .txt {
+      text-align: center;
+    }
+  }
+
+  &--right {
+    .img {
+      margin-left: auto;
+    }
+
+    .txt {
+      text-align: right;
+    }
+  }
+}
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
new file mode 100644
index 0000000..1c2397b
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -0,0 +1,113 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ImageWidgetComponent from './image-widget';
+
+export default {
+  title: 'Organisms/Widgets',
+  component: ImageWidgetComponent,
+  args: {
+    alignment: 'left',
+  },
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      description: 'The content alignment.',
+      options: ['left', 'center', 'right'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'left' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add a caption image.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    expanded: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'The state of the widget.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    img: {
+      description: 'An image object.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    level: {
+      control: {
+        type: 'number',
+      },
+      description: 'The widget title level (hn).',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The widget title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    url: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add a link to the image.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof ImageWidgetComponent>;
+
+const Template: ComponentStory<typeof ImageWidgetComponent> = (args) => (
+  <IntlProvider locale="en">
+    <ImageWidgetComponent {...args} />
+  </IntlProvider>
+);
+
+const img = {
+  alt: 'Et perferendis quaerat',
+  height: 480,
+  src: 'http://placeimg.com/640/480/nature',
+  width: 640,
+};
+
+export const ImageWidget = Template.bind({});
+ImageWidget.args = {
+  expanded: true,
+  img,
+  level: 2,
+  title: 'Quo et totam',
+};
diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx
new file mode 100644
index 0000000..8c24bd9
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from '@test-utils';
+import ImageWidget from './image-widget';
+
+const description = 'Ut vitae sit';
+
+const img = {
+  alt: 'Et perferendis quaerat',
+  height: 480,
+  src: 'http://placeimg.com/640/480/nature',
+  width: 640,
+};
+
+const title = 'Fugiat cumque et';
+const titleLevel = 2;
+
+const url = '/another-page';
+
+describe('ImageWidget', () => {
+  it('renders an image', () => {
+    render(
+      <ImageWidget expanded={true} img={img} title={title} level={titleLevel} />
+    );
+    expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument();
+  });
+
+  it('renders a link', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        img={img}
+        title={title}
+        level={titleLevel}
+        url={url}
+      />
+    );
+    expect(screen.getByRole('link', { name: img.alt })).toHaveAttribute(
+      'href',
+      url
+    );
+  });
+
+  it('renders a description', () => {
+    render(
+      <ImageWidget
+        expanded={true}
+        img={img}
+        description={description}
+        title={title}
+        level={titleLevel}
+      />
+    );
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
new file mode 100644
index 0000000..928d5ea
--- /dev/null
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -0,0 +1,75 @@
+import ResponsiveImage from '@components/molecules/images/responsive-image';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { VFC } from 'react';
+import styles from './image-widget.module.scss';
+
+export type Alignment = 'left' | 'center' | 'right';
+
+export type Image = {
+  /**
+   * An alternative text for the image.
+   */
+  alt: string;
+  /**
+   * The image height.
+   */
+  height: number;
+  /**
+   * The image source.
+   */
+  src: string;
+  /**
+   * The image width.
+   */
+  width: number;
+};
+
+export type ImageWidgetProps = Pick<
+  WidgetProps,
+  'expanded' | 'level' | 'title'
+> & {
+  /**
+   * The content alignment.
+   */
+  alignment?: Alignment;
+  /**
+   * Add a caption to the image.
+   */
+  description?: string;
+  /**
+   * An object describing the image.
+   */
+  img: Image;
+  /**
+   * Add a link to the image.
+   */
+  url?: string;
+};
+
+/**
+ * ImageWidget component
+ *
+ * Renders a widget that print an image and an optional text.
+ */
+const ImageWidget: VFC<ImageWidgetProps> = ({
+  alignment = 'left',
+  description,
+  img,
+  url,
+  ...props
+}) => {
+  const alignmentClass = `widget--${alignment}`;
+
+  return (
+    <Widget className={styles[alignmentClass]} {...props}>
+      <ResponsiveImage
+        target={url}
+        caption={description}
+        className={styles.img}
+        {...img}
+      />
+    </Widget>
+  );
+};
+
+export default ImageWidget;