@purpurds/modal 5.10.1 → 5.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "5.10.1",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/modal.cjs.js",
   "types": "./dist/modal.d.ts",
@@ -16,36 +16,36 @@
   "dependencies": {
     "@radix-ui/react-dialog": "~1.0.5",
     "classnames": "~2.5.0",
-    "@purpurds/button": "5.10.1",
-    "@purpurds/icon": "5.10.1",
-    "@purpurds/paragraph": "5.10.1",
-    "@purpurds/heading": "5.10.1",
-    "@purpurds/tokens": "5.10.1",
-    "@purpurds/visually-hidden": "5.10.1",
-    "@purpurds/text-spacing": "5.10.1",
-    "@purpurds/notification": "5.10.1"
+    "@purpurds/button": "5.11.1",
+    "@purpurds/icon": "5.11.1",
+    "@purpurds/heading": "5.11.1",
+    "@purpurds/text-spacing": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/visually-hidden": "5.11.1",
+    "@purpurds/tokens": "5.11.1",
+    "@purpurds/notification": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/react": "^8.2.6",
+    "storybook": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0"
   },

package/src/modal-content.tsx

@@ -11,8 +11,8 @@ import c from "classnames/bind";
 
 import "@purpurds/notification/styles";
 import styles from "./modal-content.module.scss";
-export const primaryActionVariants = ["primary", "expressive", "destructive"] as const;
 
+export const primaryActionVariants = ["primary", "expressive", "destructive"] as const;
 export type PrimaryActionVariant = (typeof primaryActionVariants)[number];
 
 export type DefaultProps = {
@@ -45,6 +45,7 @@ export type DefaultProps = {
   notification?: ReactNode;
   /**
    * The variant for the primary action button.
+   * `type PrimaryActionVariant = "primary" | "expressive" | "destructive"`
    * */
   primaryActionVariant?: PrimaryActionVariant;
   /**
@@ -109,7 +110,7 @@ export const ModalContent = forwardRef(
       notification = undefined,
       zIndex,
       ...props
-    }: ModalContentProps,
+    }: ModalContentProps & { primaryActionVariant?: "primary" | "expressive" | "destructive" },
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const { closeButtonAllyLabel, showCloseButton, ...rest } = props;
@@ -299,7 +300,9 @@ export const ModalActions = ({
   actions,
   primaryActionVariant,
   notification,
-}: Pick<ModalContentProps, "actions" | "primaryActionVariant" | "notification">) => {
+}: Pick<ModalContentProps, "actions" | "notification"> & {
+  primaryActionVariant?: "primary" | "expressive" | "destructive";
+}) => {
   const notificationRef = useRef<HTMLDivElement>(null);
   const buttonVariants = [primaryActionVariant, "secondary", "text"];
 

package/src/modal.stories.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { Button } from "@purpurds/button";
+import { Notification } from "@purpurds/notification";
 import { Paragraph } from "@purpurds/paragraph";
 import { TextSpacing } from "@purpurds/text-spacing";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -7,18 +9,30 @@ import type { Meta, StoryObj } from "@storybook/react";
 import "@purpurds/button/styles";
 import "@purpurds/icon/styles";
 import "@purpurds/text-spacing/styles";
+import "@purpurds/notification/styles";
 import { Modal } from "./modal";
 
-const meta: Meta<typeof Modal> = {
+const Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK = 1;
+
+const meta = {
   title: "Components/Modal",
   component: Modal,
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-export const Showcase: Story = {
+  subcomponents: {
+    // @ts-ignore
+    "Modal.Content": Modal.Content,
+    // @ts-ignore
+    "Modal.Trigger": Modal.Trigger,
+  },
   parameters: {
+    docs: {
+      description: {
+        component: "This is the main Modal component",
+        subcomponents: {
+          "Modal.Content": "This is the Modal Content subcomponent",
+          "Modal.Trigger": "This is the Modal Trigger subcomponent",
+        },
+      },
+    },
     design: [
       {
         name: "Modal",
@@ -27,6 +41,12 @@ export const Showcase: Story = {
       },
     ],
   },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Showcase: Story = {
   render: () => {
     const cookieActions = [
       { label: "I accept cookies", onClick: () => {} },
@@ -55,6 +75,7 @@ export const Showcase: Story = {
             actions={cookieActions}
             description="Sticky buttons"
             stickyButtons
+            zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
           >
             <Paragraph variant="paragraph-100">
               By clicking &quot;I accept cookies&quot; you consent to the storage of cookies on your
@@ -68,7 +89,11 @@ export const Showcase: Story = {
           <Modal.Trigger>
             <Button variant="secondary">Open privacy policy</Button>
           </Modal.Trigger>
-          <Modal.Content title="Privacy policy for Telia Sverige AB" actions={privacyPolicyActions}>
+          <Modal.Content
+            title="Privacy policy for Telia Sverige AB"
+            actions={privacyPolicyActions}
+            zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
+          >
             <TextSpacing>
               <Paragraph variant="paragraph-100">
                 We are Telia Sverige AB (org. nr 556430-0142), (hereafter ‘Telia’). In this Privacy
@@ -118,6 +143,7 @@ export const Showcase: Story = {
             primaryActionVariant="destructive"
             description="Not sticky buttons"
             stickyButtons={false}
+            zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
           >
             <Paragraph variant="paragraph-100">
               Upon termination of the main subscription, all related data sims and e-sims are
@@ -129,3 +155,83 @@ export const Showcase: Story = {
     );
   },
 };
+
+export const ModalContentWithImage: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", gap: "var(--purpur-spacing-200)" }}>
+        <Modal>
+          <Modal.Trigger>
+            <Button variant="primary">Open</Button>
+          </Modal.Trigger>
+          <Modal.Content
+            zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
+            image={
+              // eslint-disable-next-line react/jsx-wrap-multilines
+              <img
+                src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?f=center&fit=fill&w=720&h=432&fm=webp&q=70"
+                alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
+              />
+            }
+            title="Modal with image"
+          >
+            <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>
+          </Modal.Content>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const ModalContentWithNotification: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", gap: "var(--purpur-spacing-200)" }}>
+        <Modal>
+          <Modal.Trigger>
+            <Button variant="primary">Open</Button>
+          </Modal.Trigger>
+          <Modal.Content
+            actions={[{ label: "I accept cookies", onClick: () => {} }]}
+            zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
+            notification={
+              // eslint-disable-next-line react/jsx-wrap-multilines
+              <Notification status="error" heading="Notification heading">
+                Notification text
+              </Notification>
+            }
+            title="Notification heading"
+          >
+            <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>
+          </Modal.Content>
+        </Modal>
+      </div>
+    );
+  },
+};

package/readme.mdx

@@ -1,71 +0,0 @@
-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/purpur": "^x.y.z"`
-
-In MyApp.tsx
-
-```tsx
-import "@purpurds/purpur/styles";
-```
-
-In MyComponent.tsx
-
-```tsx
-import { Button, Modal } from "@purpurds/purpur";
-
-export const MyComponent = () => {
-  const actions = [
-    {
-      label: "Primary action",
-      onClick: () => {
-        // click event handler
-      },
-    },
-  ];
-
-  return (
-    <Modal>
-      <Modal.Trigger>
-        <Button variant="primary">Open modal</Button>
-      </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/modal-content.stories.tsx

@@ -1,148 +0,0 @@
-import React from "react";
-import { Notification } from "@purpurds/notification";
-import { Paragraph } from "@purpurds/paragraph";
-import { TextSpacing } from "@purpurds/text-spacing";
-import * as RadixDialog from "@radix-ui/react-dialog";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import "@purpurds/button/styles";
-import "@purpurds/icon/styles";
-import "@purpurds/text-spacing/styles";
-import { ModalContent as ModalContentCmp, primaryActionVariants } from "./modal-content";
-
-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} />
-      </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>
-    );
-  },
-};
-
-export const ModalContentWithNotification: Story = {
-  args: {
-    ...defaultArgs,
-    notification: (
-      <Notification status="error" heading="Notification heading">
-        Notification text
-      </Notification>
-    ),
-  },
-  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>
-    );
-  },
-};