refactor(components): rewrite Modal component

* add an optional close button
* add an icon prop

11 files changed, 735 insertions, 0 deletions

diff --git a/src/components/molecules/modals/index.ts b/src/components/molecules/modals/index.ts
new file mode 100644
index 0000000..595be13
--- /dev/null
+++ b/src/components/molecules/modals/index.ts
@@ -0,0 +1,2 @@
+export * from './modal';
+export * from './tooltip';
diff --git a/src/components/molecules/modals/modal/index.ts b/src/components/molecules/modals/modal/index.ts
new file mode 100644
index 0000000..133aa74
--- /dev/null
+++ b/src/components/molecules/modals/modal/index.ts
@@ -0,0 +1 @@
+export * from './modal';
diff --git a/src/components/molecules/modals/modal/modal.module.scss b/src/components/molecules/modals/modal/modal.module.scss
new file mode 100644
index 0000000..81047f3
--- /dev/null
+++ b/src/components/molecules/modals/modal/modal.module.scss
@@ -0,0 +1,159 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/mixins" as mix;
+
+.modal {
+  --btn-border-size: #{fun.convert-px(1)};
+  --header-size: #{fun.convert-px(44)};
+  --padding: clamp(var(--spacing-sm), 2.5vw, var(--spacing-md));
+
+  max-width: 100%;
+  padding: var(--padding);
+  position: relative;
+  box-shadow:
+    fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
+      var(--color-shadow),
+    fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
+      fun.convert-px(-0.3) var(--color-shadow),
+    fun.convert-px(4.7) fun.convert-px(4.7) fun.convert-px(8) fun.convert-px(-1)
+      var(--color-shadow);
+
+  &--primary {
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(3) solid;
+    border-image: radial-gradient(
+        ellipse at top,
+        var(--color-primary-lighter) 20%,
+        var(--color-primary) 100%
+      )
+      1;
+  }
+
+  &--secondary {
+    background: var(--color-bg);
+    border: fun.convert-px(2) solid var(--color-primary-dark);
+    border-radius: fun.convert-px(3);
+  }
+
+  &--primary#{&}--has-btn {
+    --btn-offset-y: #{fun.convert-px(-15)};
+
+    margin-top: calc(var(--btn-offset-y) * -1);
+  }
+
+  &--secondary#{&}--has-header {
+    margin-top: calc(var(--header-size) / 2);
+  }
+}
+
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+:where(.header) {
+  > .icon,
+  > .title {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+}
+
+.btn {
+  width: var(--header-size);
+  min-height: var(--header-size);
+  background: var(--color-bg);
+  border: var(--btn-border-size) solid var(--color-primary);
+  box-shadow:
+    fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
+      var(--color-shadow),
+    fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
+      fun.convert-px(-0.3) var(--color-shadow);
+}
+
+:where(.modal--primary) {
+  > .header {
+    align-items: center;
+    gap: var(--spacing-2xs);
+    margin-bottom: var(--spacing-2xs);
+  }
+
+  :where(.header) > .btn {
+    position: absolute;
+    top: var(--btn-offset-y);
+    right: fun.convert-px(-10);
+    border-image: radial-gradient(
+        ellipse at top,
+        var(--color-primary-lighter) 20%,
+        var(--color-primary) 100%
+      )
+      1;
+  }
+}
+
+:where(.modal--secondary) {
+  :where(.header) {
+    > .icon,
+    > .title {
+      min-height: var(--header-size);
+      border: fun.convert-px(1) solid var(--color-primary-dark);
+      box-shadow:
+        fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
+          var(--color-shadow),
+        fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
+          fun.convert-px(-0.3) var(--color-shadow);
+    }
+
+    > .icon,
+    > .btn {
+      flex: 0 0 var(--header-size);
+    }
+
+    > .icon {
+      display: flex;
+      place-content: center;
+      background: var(--color-primary);
+      color: var(--color-fg-inverted);
+
+      path {
+        fill: var(--color-fg-inverted);
+        stroke: var(--color-fg-inverted);
+      }
+    }
+
+    > .title {
+      min-height: var(--header-size);
+      padding-inline: var(--spacing-xs);
+      background: var(--color-bg);
+      color: var(--color-primary-darker);
+      font-variant: small-caps;
+
+      > * {
+        margin-block: 0;
+      }
+    }
+  }
+
+  > .header {
+    justify-content: center;
+    width: 100%;
+    margin: calc(var(--header-size) / -2 - var(--padding)) auto
+      var(--spacing-sm);
+
+    > * + * {
+      margin-inline-start: calc(var(--btn-border-size) * -1);
+    }
+  }
+}
+
+.btn:where(:hover, :focus) {
+  .icon {
+    transform: scale(1.2);
+  }
+}
+
+.btn:where(:active) {
+  .icon {
+    transform: scale(0.9);
+  }
+}
diff --git a/src/components/molecules/modals/modal/modal.stories.tsx b/src/components/molecules/modals/modal/modal.stories.tsx
new file mode 100644
index 0000000..744d21f
--- /dev/null
+++ b/src/components/molecules/modals/modal/modal.stories.tsx
@@ -0,0 +1,191 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading, Icon } from '../../../atoms';
+import { Modal } from './modal';
+
+/**
+ * Modals - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Modals/Modal',
+  component: Modal,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+
+/**
+ * Modal Stories - Primary
+ */
+export const Primary = Template.bind({});
+Primary.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+};
+
+/**
+ * Modal Stories - Primary with close button
+ */
+export const PrimaryWithCloseBtn = Template.bind({});
+PrimaryWithCloseBtn.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  closeBtnLabel: 'Close the modal',
+};
+
+/**
+ * Modal Stories - Primary with icon
+ */
+export const PrimaryWithIcon = Template.bind({});
+PrimaryWithIcon.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  icon: <Icon aria-hidden shape="help" />,
+};
+
+/**
+ * Modal Stories - Primary with heading
+ */
+export const PrimaryWithHeading = Template.bind({});
+PrimaryWithHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+};
+
+/**
+ * Modal Stories - Primary with icon and heading
+ */
+export const PrimaryWithIconAndHeading = Template.bind({});
+PrimaryWithIconAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  icon: <Icon aria-hidden shape="help" />,
+};
+
+/**
+ * Modal Stories - Primary with close button and heading
+ */
+export const PrimaryWithCloseBtnAndHeading = Template.bind({});
+PrimaryWithCloseBtnAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  closeBtnLabel: 'Close the modal',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+};
+
+/**
+ * Modal Stories - Primary with close button and icon
+ */
+export const PrimaryWithCloseBtnAndIcon = Template.bind({});
+PrimaryWithCloseBtnAndIcon.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  closeBtnLabel: 'Close the modal',
+  icon: <Icon aria-hidden shape="help" />,
+};
+
+/**
+ * Modal Stories - Primary with close button, icon and heading
+ */
+export const PrimaryWithCloseBtnIconAndHeading = Template.bind({});
+PrimaryWithCloseBtnIconAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  closeBtnLabel: 'Close the modal',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  icon: <Icon aria-hidden shape="help" />,
+};
+
+/**
+ * Modal Stories - Secondary
+ */
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  kind: 'secondary',
+};
+
+/**
+ * Modal Stories - Secondary with close button
+ */
+export const SecondaryWithCloseBtn = Template.bind({});
+SecondaryWithCloseBtn.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  kind: 'secondary',
+  closeBtnLabel: 'Close the modal',
+};
+
+/**
+ * Modal Stories - Secondary with heading
+ */
+export const SecondaryWithHeading = Template.bind({});
+SecondaryWithHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  kind: 'secondary',
+};
+
+/**
+ * Modal Stories - Secondary with icon
+ */
+export const SecondaryWithIcon = Template.bind({});
+SecondaryWithIcon.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  kind: 'secondary',
+  icon: <Icon aria-hidden shape="help" />,
+};
+
+/**
+ * Modal Stories - Secondary with close button and heading
+ */
+export const SecondaryWithCloseBtnAndHeading = Template.bind({});
+SecondaryWithCloseBtnAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  kind: 'secondary',
+  closeBtnLabel: 'Close the modal',
+};
+
+/**
+ * Modal Stories - Secondary with close button and icon
+ */
+export const SecondaryWithCloseBtnAndIcon = Template.bind({});
+SecondaryWithCloseBtnAndIcon.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  closeBtnLabel: 'Close the modal',
+  icon: <Icon aria-hidden shape="help" />,
+  kind: 'secondary',
+};
+
+/**
+ * Modal Stories - Secondary with icon and heading
+ */
+export const SecondaryWithIconAndHeading = Template.bind({});
+SecondaryWithIconAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  icon: <Icon aria-hidden shape="help" />,
+  kind: 'secondary',
+};
+
+/**
+ * Modal Stories - Secondary with close button, icon and heading
+ */
+export const SecondaryWithCloseBtnIconAndHeading = Template.bind({});
+SecondaryWithCloseBtnIconAndHeading.args = {
+  children:
+    'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+  closeBtnLabel: 'Close the modal',
+  icon: <Icon aria-hidden shape="help" />,
+  kind: 'secondary',
+};
diff --git a/src/components/molecules/modals/modal/modal.test.tsx b/src/components/molecules/modals/modal/modal.test.tsx
new file mode 100644
index 0000000..82b7487
--- /dev/null
+++ b/src/components/molecules/modals/modal/modal.test.tsx
@@ -0,0 +1,48 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Heading, Icon } from '../../../atoms';
+import { Modal } from './modal';
+
+const children =
+  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
+
+describe('Modal', () => {
+  it('renders the modal contents', () => {
+    render(<Modal>{children}</Modal>);
+
+    expect(rtlScreen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('can render a heading', () => {
+    const heading = 'A custom heading';
+    const level = 2;
+
+    render(
+      <Modal heading={<Heading level={level}>{heading}</Heading>}>
+        {children}
+      </Modal>
+    );
+
+    expect(rtlScreen.getByRole('heading', { level })).toHaveTextContent(
+      heading
+    );
+  });
+
+  it('can render an icon', () => {
+    const label = 'maxime ut eius';
+
+    render(
+      <Modal icon={<Icon aria-label={label} shape="arrow" />}>{children}</Modal>
+    );
+
+    expect(rtlScreen.getByLabelText(label)).toBeInTheDocument();
+  });
+
+  it('can render a close button', () => {
+    const btn = 'consequatur';
+
+    render(<Modal closeBtnLabel={btn}>{children}</Modal>);
+
+    expect(rtlScreen.getByRole('button', { name: btn })).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/modals/modal/modal.tsx b/src/components/molecules/modals/modal/modal.tsx
new file mode 100644
index 0000000..ed55488
--- /dev/null
+++ b/src/components/molecules/modals/modal/modal.tsx
@@ -0,0 +1,103 @@
+import {
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from 'react';
+import { Button, Icon } from '../../../atoms';
+import styles from './modal.module.scss';
+
+export type ModalProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The modal body.
+   */
+  children: ReactNode;
+  /**
+   * The close button label.
+   */
+  closeBtnLabel?: string;
+  /**
+   * The modal title.
+   */
+  heading?: ReactNode;
+  /**
+   * Define an icon to illustrate the modal.
+   */
+  icon?: ReactNode;
+  /**
+   * The modal kind.
+   *
+   * @default 'primary'
+   */
+  kind?: 'primary' | 'secondary';
+  /**
+   * A callback function to handle close button action.
+   */
+  onClose?: () => void;
+};
+
+const ModalWithRef: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  {
+    children,
+    className = '',
+    closeBtnLabel,
+    heading,
+    icon,
+    kind = 'primary',
+    onClose,
+    ...props
+  },
+  ref
+) => {
+  const hasHeader = !!heading || !!icon || !!closeBtnLabel;
+  const modalClass = [
+    styles.modal,
+    styles[hasHeader ? 'modal--has-header' : ''],
+    styles[closeBtnLabel ? 'modal--has-btn' : ''],
+    styles[`modal--${kind}`],
+    className,
+  ].join(' ');
+
+  return (
+    <div {...props} className={modalClass} ref={ref}>
+      {hasHeader ? (
+        <div className={styles.header}>
+          {icon ? (
+            <div aria-hidden className={styles.icon}>
+              {icon}
+            </div>
+          ) : null}
+          {heading ? <div className={styles.title}>{heading}</div> : null}
+          {closeBtnLabel ? (
+            <Button
+              aria-label={closeBtnLabel}
+              className={styles.btn}
+              onClick={onClose}
+              // eslint-disable-next-line react/jsx-no-literals
+              kind="neutral"
+              // eslint-disable-next-line react/jsx-no-literals
+              shape="initial"
+            >
+              <Icon
+                aria-hidden
+                className={styles.icon}
+                // eslint-disable-next-line react/jsx-no-literals
+                shape="cross"
+                // eslint-disable-next-line react/jsx-no-literals
+                size="xs"
+              />
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Modal component
+ *
+ * Render a modal component.
+ */
+export const Modal = forwardRef(ModalWithRef);
diff --git a/src/components/molecules/modals/tooltip/index.ts b/src/components/molecules/modals/tooltip/index.ts
new file mode 100644
index 0000000..ed8326d
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/index.ts
@@ -0,0 +1 @@
+export * from './tooltip';
diff --git a/src/components/molecules/modals/tooltip/tooltip.module.scss b/src/components/molecules/modals/tooltip/tooltip.module.scss
new file mode 100644
index 0000000..8e6f877
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/tooltip.module.scss
@@ -0,0 +1,46 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/mixins" as mix;
+@use "../../../../styles/abstracts/variables" as var;
+
+.btn {
+  margin-right: var(--spacing-xs);
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 10;
+  font-size: var(--font-size-sm);
+  transition: all 0.75s ease-in-out 0s;
+
+  @media screen and (max-height: #{var.get-breakpoint("2xs")}) {
+    width: calc(97.5vw - var(--spacing-md));
+    right: 0;
+  }
+
+  &--down {
+    top: calc(100% + var(--spacing-xs));
+    transform-origin: top;
+  }
+
+  &--up {
+    bottom: calc(100% + var(--spacing-2xs));
+    transform-origin: bottom;
+  }
+
+  &--hidden {
+    flex: 0 0 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0);
+  }
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+}
+
+.heading {
+  font-size: var(--font-size-sm);
+}
diff --git a/src/components/molecules/modals/tooltip/tooltip.stories.tsx b/src/components/molecules/modals/tooltip/tooltip.stories.tsx
new file mode 100644
index 0000000..0cff339
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/tooltip.stories.tsx
@@ -0,0 +1,43 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useBoolean } from '../../../../utils/hooks';
+import { Tooltip } from './tooltip';
+
+/**
+ * Switch - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Modals/Tooltip',
+  component: Tooltip,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = ({
+  isOpen,
+  onToggle: _onToggle,
+  ...args
+}) => {
+  const { deactivate, state: isOpened, toggle } = useBoolean(isOpen);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <Tooltip
+        {...args}
+        isOpen={isOpened}
+        onClickOutside={deactivate}
+        onToggle={toggle}
+      />
+    </div>
+  );
+};
+
+/**
+ * Tooltip Stories - Example
+ */
+export const Example = Template.bind({});
+Example.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+  heading: 'A title',
+  isOpen: false,
+};
diff --git a/src/components/molecules/modals/tooltip/tooltip.test.tsx b/src/components/molecules/modals/tooltip/tooltip.test.tsx
new file mode 100644
index 0000000..1596670
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/tooltip.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
+import { Tooltip } from './tooltip';
+
+const title = 'A custom title';
+const children =
+  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
+
+describe('Tooltip', () => {
+  it('renders a title and a body', () => {
+    render(<Tooltip heading={title}>{children}</Tooltip>);
+
+    expect(rtlScreen.getByText(title)).toBeInTheDocument();
+    expect(rtlScreen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('can render a hidden modal', () => {
+    render(
+      <Tooltip heading={title} isOpen={false}>
+        {children}
+      </Tooltip>
+    );
+
+    // Neither toBeVisible or toHaveStyle are working.
+    //expect(rtlScreen.getByText(children)).not.toBeVisible();
+    //expect(rtlScreen.getByText(children)).toHaveStyle({ visibility: 'hidden' });
+    expect(rtlScreen.getByText(children)).toHaveClass('tooltip--hidden');
+  });
+
+  it('can render a visible modal', () => {
+    render(
+      <Tooltip heading={title} isOpen>
+        {children}
+      </Tooltip>
+    );
+
+    expect(rtlScreen.getByText(children)).toBeVisible();
+    expect(rtlScreen.getByText(children)).toHaveStyle({
+      visibility: 'visible',
+    });
+  });
+});
diff --git a/src/components/molecules/modals/tooltip/tooltip.tsx b/src/components/molecules/modals/tooltip/tooltip.tsx
new file mode 100644
index 0000000..b3a3f5a
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/tooltip.tsx
@@ -0,0 +1,99 @@
+import { type FC, type MouseEventHandler, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useOnClickOutside } from '../../../../utils/hooks';
+import { Heading, Icon } from '../../../atoms';
+import { HelpButton } from '../../buttons';
+import { Modal, type ModalProps } from '../modal';
+import styles from './tooltip.module.scss';
+
+export type TooltipProps = Omit<ModalProps, 'heading'> & {
+  /**
+   * The tooltip direction when opening.
+   *
+   * @default "downwards"
+   */
+  direction?: 'downwards' | 'upwards';
+  /**
+   * The tooltip heading.
+   */
+  heading: string;
+  /**
+   * Should the tooltip be opened?
+   *
+   * @default false
+   */
+  isOpen?: boolean;
+  /**
+   * A callback function to trigger when clicking outside the modal.
+   */
+  onClickOutside?: () => void;
+  /**
+   * An event handler when clicking on the help button.
+   */
+  onToggle?: MouseEventHandler<HTMLButtonElement>;
+};
+
+/**
+ * Tooltip component
+ *
+ * Render a button and a modal. Note: you should add a CSS rule
+ * `position: relative;` on the consumer.
+ */
+export const Tooltip: FC<TooltipProps> = ({
+  children,
+  className = '',
+  direction = 'downwards',
+  heading,
+  isOpen,
+  onClickOutside,
+  onToggle,
+  ...props
+}) => {
+  const intl = useIntl();
+  const helpLabel = intl.formatMessage({
+    defaultMessage: 'Show help',
+    description: 'Tooltip: show help label',
+    id: '1Xgg7+',
+  });
+  const directionModifier =
+    direction === 'upwards' ? 'tooltip--up' : 'tooltip--down';
+  const visibilityModifier = isOpen ? 'tooltip--visible' : 'tooltip--hidden';
+  const tooltipClass = `${styles.tooltip} ${styles[directionModifier]} ${styles[visibilityModifier]} ${className}`;
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  const closeModal = (target: Node) => {
+    if (!onClickOutside) return;
+
+    if (btnRef.current && !btnRef.current.contains(target)) {
+      onClickOutside();
+    }
+  };
+
+  const modalRef = useOnClickOutside<HTMLDivElement>(closeModal);
+
+  return (
+    <>
+      <Modal
+        {...props}
+        className={tooltipClass}
+        heading={
+          <Heading className={styles.heading} isFake level={6}>
+            {heading}
+          </Heading>
+        }
+        icon={<Icon aria-hidden shape="help" size="sm" />}
+        kind="secondary"
+        ref={modalRef}
+      >
+        {children}
+      </Modal>
+      <HelpButton
+        className={styles.btn}
+        isPressed={isOpen}
+        label={helpLabel}
+        onClick={onToggle}
+        ref={btnRef}
+      />
+    </>
+  );
+};