@purpurds/modal 5.24.2 → 5.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "5.24.2",
+  "version": "5.25.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/modal.cjs.js",
   "types": "./dist/modal.d.ts",
@@ -16,14 +16,14 @@
   "dependencies": {
     "@radix-ui/react-dialog": "~1.0.5",
     "classnames": "~2.5.0",
-    "@purpurds/button": "5.24.2",
-    "@purpurds/heading": "5.24.2",
-    "@purpurds/icon": "5.24.2",
-    "@purpurds/paragraph": "5.24.2",
-    "@purpurds/tokens": "5.24.2",
-    "@purpurds/text-spacing": "5.24.2",
-    "@purpurds/visually-hidden": "5.24.2",
-    "@purpurds/notification": "5.24.2"
+    "@purpurds/icon": "5.25.0",
+    "@purpurds/paragraph": "5.25.0",
+    "@purpurds/text-spacing": "5.25.0",
+    "@purpurds/heading": "5.25.0",
+    "@purpurds/button": "5.25.0",
+    "@purpurds/visually-hidden": "5.25.0",
+    "@purpurds/notification": "5.25.0",
+    "@purpurds/tokens": "5.25.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/modal-content.module.scss

@@ -1,4 +1,4 @@
-@import "@purpurds/tokens/breakpoint/variables";
+@use "@purpurds/tokens/breakpoint/variables" as *;
 
 $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
 
@@ -95,12 +95,14 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     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);
+    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);
     z-index: 1;
 
     @media (min-width: $purpur-breakpoint-md) {
-      padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300);
+      padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50))
+        0 var(--purpur-spacing-300);
     }
   }
 
@@ -246,4 +248,4 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
   to {
     opacity: 1;
   }
-}
+}

package/src/modal-content.tsx

@@ -19,7 +19,14 @@ export type DefaultProps = {
   /**
    * An array of actions to be displayed at the bottom of the modal in the form of buttons. A maximum of 3 buttons will be rendered,
    * */
-  actions?: Array<{ label: string; onClick: () => void; disabled?: boolean; loading?: boolean }>;
+  actions?: {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+  }[];
   children: ReactNode;
   className?: string;
   /**
@@ -302,7 +309,7 @@ export const ModalActions = ({
       <div className={cx(`${rootClassName}__actions-buttons`)} data-testid="modal actions">
         {actions
           .slice(0, MAX_NUMBER_OF_ACTIONS)
-          .map(({ label, onClick, disabled, loading }, index) => (
+          .map(({ label, onClick, disabled, loading, iconPosition = "right", icon }, index) => (
             <Button
               key={label}
               data-testid="modal actions button"
@@ -312,7 +319,9 @@ export const ModalActions = ({
               loading={loading}
               className={cx(`${rootClassName}__actions-button`)}
             >
+              {iconPosition === "left" && icon && icon}
               {label}
+              {iconPosition === "right" && icon && icon}
             </Button>
           ))}
       </div>

package/src/modal.stories.tsx

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { Button } from "@purpurds/button";
+import { IconAiRobot, IconBankid } from "@purpurds/icon";
 import { Notification } from "@purpurds/notification";
 import { Paragraph } from "@purpurds/paragraph";
 import { TextSpacing } from "@purpurds/text-spacing";
@@ -278,3 +280,37 @@ export const ModalContentWithNotification: Story = {
     );
   },
 };
+
+export const ModalContentWithCustomIcon: Story = {
+  render: () => (
+    <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: () => {}, icon: <IconAiRobot /> },
+            {
+              label: "I accept BankID",
+              onClick: () => {},
+              icon: <IconBankid />,
+              iconPosition: "left",
+            },
+          ]}
+          zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
+          title="Notification heading"
+        >
+          <TextSpacing>
+            <Paragraph>
+              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>
+          </TextSpacing>
+        </Modal.Content>
+      </Modal>
+    </div>
+  ),
+};