[Component] Well + List

src/components/List/List.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import List from './List';
+import ListItem from './ListItem';
+
+const meta: Meta<typeof List> = {
+  component: List,
+  argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Unordered: Story = {
+  args: {
+    children: (
+      <>
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </>
+    )
+  }
+};
+
+export const Ordered: Story = {
+  args: {
+    ...Unordered.args,
+    isOrdered: true
+  }
+};
+
+export const Unstyled: Story = {
+  args: {
+    ...Unordered.args,
+    isUnstyled: true
+  }
+};
+
+export const Horizontal: Story = {
+  args: {
+    ...Unordered.args,
+    isHorizontal: true
+  }
+};
+
+export const Spaced: Story = {
+  args: {
+    ...Unordered.args,
+    isSpaced: true
+  }
+};
+
+export const Links: Story = {
+  args: {
+    isLinks: true,
+    children: (
+      <>
+        <ListItem>
+          <a href='#'>First Link</a>
+        </ListItem>
+        <ListItem>
+          <a href='#'>Second Link</a>
+        </ListItem>
+        <ListItem>
+          <a href='#'>Third Link</a>
+        </ListItem>
+      </>
+    )
+  }
+};

src/components/List/List.tsx

@@ -0,0 +1,28 @@
+import classnames from 'classnames';
+
+interface ListProperties {
+  isHorizontal?: boolean;
+  isLinks?: boolean;
+  isOrdered?: boolean;
+  isUnstyled?: boolean;
+  isSpaced?: boolean;
+  children: JSX.Element | JSX.Element[];
+}
+
+export default function List({
+  children,
+  isHorizontal,
+  isLinks = false,
+  isOrdered,
+  isSpaced,
+  isUnstyled
+}: ListProperties): JSX.Element {
+  const cnames = ['m-list'];
+  if (isHorizontal) cnames.push('m-list__horizontal');
+  if (isLinks) cnames.push('m-list__links');
+  if (isSpaced) cnames.push('m-list__spaced');
+  if (isUnstyled) cnames.push('m-list__unstyled');
+
+  if (isOrdered) return <ol className={classnames(cnames)}>{children}</ol>;
+  return <ul className={classnames(cnames)}>{children}</ul>;
+}

src/components/List/ListItem.tsx

@@ -0,0 +1,9 @@
+interface ListItemProperties {
+  children: JSX.Element | string;
+}
+
+export default function ListItem({
+  children
+}: ListItemProperties): JSX.Element {
+  return <li className='m-list_item'>{children}</li>;
+}

src/components/Well/Well.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Well from './Well';
+
+const meta: Meta<typeof Well> = {
+  component: Well,
+  argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  args: {
+    heading: 'Well title',
+    text: (
+      <>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. At quae dolor
+        distinctio tenetur quibusdam rem debitis, voluptate nesciunt culpa
+        officiis quos perspiciatis nostrum illo libero autem beatae temporibus
+        ratione reprehenderit? <a href='#'>Example link</a>.
+      </>
+    )
+  }
+};
+
+export const CallToAction: Story = {
+  args: {
+    heading: 'Well title',
+    text: (
+      <>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. At quae dolor
+        distinctio tenetur quibusdam rem debitis, voluptate nesciunt culpa
+        officiis quos perspiciatis nostrum illo libero autem beatae temporibus
+        ratione reprehenderit?
+      </>
+    ),
+    links: [
+      <a href='#' key='example1'>
+        Example link
+      </a>
+    ]
+  }
+};

src/components/Well/Well.tsx

@@ -0,0 +1,31 @@
+import type { HeadingLevel } from '../../types/headingLevel';
+import List from '../List/List';
+import ListItem from '../List/ListItem';
+
+interface WellProperties {
+  heading: string;
+  text: JSX.Element | string;
+  links?: JSX.Element[];
+  headingLevel: HeadingLevel;
+}
+
+export default function Well({
+  heading,
+  headingLevel = 'h4',
+  links,
+  text
+}: WellProperties): JSX.Element {
+  const callsToAction = [];
+  if (links)
+    for (const link of links) {
+      callsToAction.push(<ListItem>{link}</ListItem>);
+    }
+
+  return (
+    <div className='o-well'>
+      <p className={headingLevel}>{heading}</p>
+      <p className='text'>{text}</p>
+      {callsToAction.length > 0 ? <List isLinks>{callsToAction}</List> : null}
+    </div>
+  );
+}