@purpurds/modal 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-modal-content_1fnes_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary);animation:_fadeIn_1fnes_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_1fnes_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_1fnes_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px){._purpur-modal-content__overlay_1fnes_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_1fnes_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_1fnes_1 ._purpur-modal-content__close-button_1fnes_37{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_1fnes_1 ._purpur-modal-content__close-button_1fnes_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_1fnes_48{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_1fnes_48{display:flex;flex-direction:column;overflow:hidden}}._purpur-modal-content__wrapper-inner_1fnes_59{display:flex;flex-direction:column}@media (min-width: 600px){._purpur-modal-content__wrapper-inner_1fnes_59{overflow:hidden}}._purpur-modal-content__image-wrapper_1fnes_68{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_1fnes_68{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_1fnes_68 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_1fnes_91{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary)}@media (min-width: 600px){._purpur-modal-content__header_1fnes_91{position:static;padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_1fnes_104,._purpur-modal-content__description_1fnes_107{margin:0}._purpur-modal-content__body_1fnes_110{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_1fnes_110{height:100%;overflow:auto;padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_1fnes_120{position:relative;z-index:-2;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_1fnes_120{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions_1fnes_133{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions_1fnes_133{flex-direction:row-reverse;flex-grow:0}}._purpur-modal-content__button_1fnes_145{width:100%}@media (min-width: 600px){._purpur-modal-content__button_1fnes_145{width:auto}._purpur-modal-content__button_1fnes_145:nth-child(3){margin-right:auto}}._purpur-modal-content--with-image_1fnes_156:not(._purpur-modal-content--overflow_1fnes_156) ._purpur-modal-content__header_1fnes_91{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_1fnes_156:not(._purpur-modal-content--with-image_1fnes_156) ._purpur-modal-content__header_1fnes_91{position:relative}._purpur-modal-content--overflow_1fnes_156:not(._purpur-modal-content--with-image_1fnes_156) ._purpur-modal-content__close-button_1fnes_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_1fnes_156 ._purpur-modal-content__header_1fnes_91{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_1fnes_156 ._purpur-modal-content__body_1fnes_110{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_1fnes_156 ._purpur-modal-content__body_1fnes_110{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_1fnes_156 ._purpur-modal-content__actions_1fnes_133{position:relative}._purpur-modal-content--overflow_1fnes_156 ._purpur-modal-content__actions_1fnes_133:after{content:"";position:absolute;top:-40px;left:0;z-index:-1;width:100%;height:40px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--purpur-color-background-primary) 100%);pointer-events:none}._purpur-modal-content--overflow_1fnes_156._purpur-modal-content--sticky-footer_1fnes_194 ._purpur-modal-content__actions_1fnes_133{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_1fnes_194 ._purpur-modal-content__body-inner_1fnes_120{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_1fnes_194 ._purpur-modal-content__actions_1fnes_133{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_1fnes_194 ._purpur-modal-content__actions_1fnes_133{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}@keyframes _fadeIn_1fnes_1{0%{opacity:0}to{opacity:1}}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@purpurds/modal",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/modal.cjs.js",
+  "types": "./dist/modal.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/modal.cjs.js",
+      "systemjs": "./dist/modal.system.js",
+      "types": "./dist/modal.d.ts",
+      "default": "./dist/modal.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/modal.tsx",
+  "dependencies": {
+    "@radix-ui/react-dialog": "~1.0.5",
+    "classnames": "~2.5.0",
+    "@purpurds/button": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/heading": "3.0.0",
+    "@purpurds/text-spacing": "3.0.0",
+    "@purpurds/paragraph": "3.0.0",
+    "@purpurds/tokens": "3.0.0",
+    "@purpurds/visually-hidden": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,81 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as ModalStories from "./src/modal.stories";
+import * as ModalContentStories from "./src/modal-content.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Modal" of={ModalStories} />
+
+# Modal
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+#### Modal
+
+<ArgTypes of={ModalStories} />
+
+#### ModalContent
+
+<ArgTypes of={ModalContentStories} />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/modal": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/modal/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Modal } from "@purpurds/modal";
+
+export const MyComponent = () => {
+  const actions = [
+    {
+      label: "Primary action",
+      onClick: () => {
+        // click event handler
+      },
+    },
+  ];
+
+  return (
+    <Modal>
+      <Modal.Trigger>Open modal</Modal.Trigger>
+      <Modal.Content
+        title="A title"
+        description="A short optional description of the modal"
+        actions={actions}
+        showCloseButton
+        closeButtonAllyLabel="Close"
+      >
+        Some content
+      </Modal.Content>
+    </Modal>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/modal-content.module.scss

@@ -0,0 +1,251 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+$fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+
+.purpur-modal-content {
+  $root: &;
+
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background-color: var(--purpur-color-background-primary);
+  animation: $fadeIn;
+
+  &:focus {
+    outline: 0;
+  }
+
+  @media (min-width: $purpur-breakpoint-md) {
+    inset: unset;
+    top: 50%;
+    left: 50%;
+    width: 720px;
+    max-width: calc(100% - (var(--purpur-spacing-300) * 2));
+    min-height: 320px;
+    max-height: 80%;
+    overflow: hidden;
+    border-radius: var(--purpur-border-radius-lg);
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    box-shadow: var(--purpur-shadow-lg);
+  }
+
+  &__overlay {
+    @media (min-width: $purpur-breakpoint-md) {
+      position: fixed;
+      inset: 0;
+      background: var(--purpur-color-overlay-default);
+      animation: $fadeIn;
+    }
+  }
+
+  #{$root}__close-button {
+    position: absolute;
+    top: var(--purpur-spacing-100);
+    right: var(--purpur-spacing-100);
+    z-index: 2;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      top: var(--purpur-spacing-150);
+    }
+  }
+
+  &__wrapper {
+    height: 100%;
+    overflow: auto;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+
+  &__wrapper-inner {
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      overflow: hidden;
+    }
+  }
+
+  &__image-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    order: -1;
+    width: 100%;
+    aspect-ratio: 2 / 1;
+    overflow: hidden;
+
+    /* Shrink image height when it's too large on medium sized and large screens */
+    @media (((min-width: $purpur-breakpoint-md) and (max-width: 649px) and (max-height: 720px)) or
+      ((min-width: 650px) and (max-height: 820px))) {
+      aspect-ratio: 3 / 1;
+    }
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: 100%;
+      height: auto;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__header {
+    position: sticky;
+    top: 0;
+    flex-grow: 0;
+    padding: var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0
+      var(--purpur-spacing-200);
+    background: var(--purpur-color-background-primary);
+
+    @media (min-width: $purpur-breakpoint-md) {
+      position: static;
+      padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50))
+        0 var(--purpur-spacing-300);
+    }
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__description {
+    margin: 0;
+  }
+
+  &__body {
+    padding: var(--purpur-spacing-200) var(--purpur-spacing-200) 0;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      height: 100%;
+      overflow: auto;
+      padding: var(--purpur-spacing-250) var(--purpur-spacing-300) 0;
+    }
+  }
+
+  &__body-inner {
+    position: relative;
+    z-index: -2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-400);
+    padding-bottom: var(--purpur-spacing-250);
+
+    @media (min-width: $purpur-breakpoint-md) {
+      padding-bottom: var(--purpur-spacing-300);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-200);
+    margin-top: auto;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      flex-direction: row-reverse;
+      flex-grow: 0;
+    }
+  }
+
+  &__button {
+    width: 100%;
+
+    @media (min-width: $purpur-breakpoint-md) {
+      width: auto;
+
+      &:nth-child(3) {
+        margin-right: auto;
+      }
+    }
+  }
+
+  &--with-image:not(#{$root}--overflow) #{$root}__header {
+    padding-top: var(--purpur-spacing-250);
+  }
+
+  &--overflow {
+    &:not(#{$root}--with-image) {
+      @media (min-width: $purpur-breakpoint-md) {
+        #{$root}__header {
+          position: relative;
+        }
+
+        #{$root}__close-button {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+
+    #{$root}__header {
+      padding-bottom: var(--purpur-spacing-200);
+      border-bottom: 1px solid var(--purpur-color-border-weak);
+    }
+
+    #{$root}__body {
+      padding-top: var(--purpur-spacing-300);
+
+      @media (min-width: $purpur-breakpoint-md) {
+        padding-top: var(--purpur-spacing-400);
+      }
+    }
+
+    #{$root}__actions {
+      $overflowFaderHeight: 40px;
+
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: -$overflowFaderHeight;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: $overflowFaderHeight;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0) 0%,
+          var(--purpur-color-background-primary) 100%
+        );
+        pointer-events: none;
+      }
+    }
+
+    &#{$root}--sticky-footer #{$root}__actions {
+      border-top: 1px solid var(--purpur-color-border-weak);
+    }
+  }
+
+  &--sticky-footer {
+    #{$root}__body-inner {
+      padding-bottom: var(--purpur-spacing-300);
+    }
+
+    #{$root}__actions {
+      padding: var(--purpur-spacing-200);
+
+      @media (min-width: $purpur-breakpoint-md) {
+        padding-left: var(--purpur-spacing-300);
+        padding-right: var(--purpur-spacing-300);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/modal-content.stories.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paragraph } from "@purpurds/paragraph";
+
+import { ModalContent as ModalContentCmp, primaryActionVariants } from "./modal-content";
+import { TextSpacing } from "@purpurds/text-spacing";
+
+import "@purpurds/button/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/text-spacing/styles";
+
+const meta: Meta<typeof ModalContentCmp> = {
+  title: "Components/Modal",
+  component: ModalContentCmp,
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalContentCmp>;
+
+const defaultArgs = {
+  actions: [
+    {
+      label: "Primary button",
+      onClick: () => {},
+    },
+    {
+      label: "Secondary button",
+      onClick: () => {},
+    },
+    { label: "Tertiary text button", onClick: () => {} },
+  ],
+  description: "This is an optional description",
+  primaryActionVariant: primaryActionVariants[0],
+  stickyButtons: true,
+  title: "Title",
+};
+
+const argTypes = {
+  primaryActionVariant: { control: "select", options: primaryActionVariants },
+};
+
+export const ModalContent: Story = {
+  args: defaultArgs,
+  parameters: {
+    design: [
+      {
+        name: "Modal",
+        type: "figma",
+        url: "https://www.figma.com/file/TggtRkYyKpwgKTU0LxuYFN/Modal-redesign?type=design&node-id=104-731&mode=design&t=sm44NPLlG3tjpFQb-0",
+      },
+    ],
+  },
+  argTypes,
+  render: (args) => {
+    return (
+      <RadixDialog.Root open>
+        <ModalContentCmp {...args}>
+          <TextSpacing>
+            <Paragraph variant="paragraph-100">
+              Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam
+              faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
+              placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
+              faucibus diam faucibus eu.
+            </Paragraph>
+            <Paragraph variant="paragraph-100">
+              Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh placerat.Lorem
+              ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam faucibus
+              eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh placerat.
+            </Paragraph>
+          </TextSpacing>
+        </ModalContentCmp>
+      </RadixDialog.Root>
+    );
+  },
+};
+
+export const ModalContentWithImage: Story = {
+  args: {
+    ...defaultArgs,
+    description: undefined,
+    image: (
+      <img
+        src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg"
+        alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+      />
+    ),
+  },
+  parameters: {
+    design: [
+      {
+        name: "Modal",
+        type: "figma",
+        url: "https://www.figma.com/file/TggtRkYyKpwgKTU0LxuYFN/Modal-redesign?type=design&node-id=104-731&mode=design&t=sm44NPLlG3tjpFQb-0",
+      },
+    ],
+  },
+  argTypes,
+  render: (args) => {
+    return (
+      <RadixDialog.Root open>
+        <ModalContentCmp {...args}>
+          <TextSpacing>
+            <Paragraph variant="paragraph-100">
+              Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam
+              faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
+              placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
+              faucibus diam faucibus eu.
+            </Paragraph>
+            <Paragraph variant="paragraph-100">
+              Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh placerat.Lorem
+              ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam faucibus
+              eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh placerat.
+            </Paragraph>
+          </TextSpacing>
+        </ModalContentCmp>
+      </RadixDialog.Root>
+    );
+  },
+};

package/src/modal-content.test.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Modal } from "./modal";
+import { ModalActions, MAX_NUMBER_OF_ACTIONS } from "./modal-content";
+
+expect.extend(matchers);
+
+describe("ModalContent", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render title", () => {
+    render(
+      <Modal open>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content data-testid="modal content" title="Title">
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    expect(screen.getByTestId("modal content title")).toBeInTheDocument();
+  });
+
+  it("should render description", () => {
+    render(
+      <Modal open>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content
+          data-testid="modal content"
+          title="Title"
+          description="This is a description"
+        >
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    expect(screen.getByTestId("modal content description")).toBeInTheDocument();
+  });
+
+  it("should render image", () => {
+    render(
+      <Modal open>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content
+          data-testid="modal content"
+          title="Title"
+          image={<img src="image.jpg" alt="alt text" />}
+        >
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    expect(screen.getByTestId("modal content image")).toBeInTheDocument();
+  });
+
+  it("should render close button if showCloseButton is set to true", () => {
+    render(
+      <Modal open>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content
+          data-testid="modal content"
+          title="Title"
+          showCloseButton
+          closeButtonAllyLabel="Close"
+        >
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    expect(screen.getByTestId("modal content close-button")).toBeInTheDocument();
+  });
+});
+
+const testActions = [
+  {
+    label: "Primary",
+    onClick: vi.fn(),
+  },
+  {
+    label: "Secondary",
+    onClick: vi.fn(),
+  },
+  {
+    label: "Tertiary",
+    onClick: vi.fn(),
+  },
+];
+
+describe("ModalActions", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render a button for each action", () => {
+    render(<ModalActions actions={testActions} />);
+
+    expect(screen.getAllByTestId("modal actions button").length).toBe(3);
+  });
+
+  it(`should render a maximum of ${MAX_NUMBER_OF_ACTIONS} buttons`, () => {
+    render(
+      <ModalActions
+        actions={Array(MAX_NUMBER_OF_ACTIONS + 1)
+          .fill(null)
+          .map((_, i) => ({ label: i.toString(), onClick: vi.fn() }))}
+      />
+    );
+
+    expect(screen.getAllByTestId("modal actions button").length).toBe(MAX_NUMBER_OF_ACTIONS);
+  });
+
+  it("should trigger `onClick` callback function for each button", () => {
+    render(<ModalActions actions={testActions} primaryActionVariant="expressive" />);
+
+    const buttons = screen.getAllByTestId("modal actions button");
+
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[1]);
+    fireEvent.click(buttons[2]);
+
+    expect(testActions[0].onClick).toHaveBeenCalledTimes(1);
+    expect(testActions[1].onClick).toHaveBeenCalledTimes(1);
+    expect(testActions[2].onClick).toHaveBeenCalledTimes(1);
+  });
+});