@indico-data/design-system 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/modal/ConfirmationModal.tsx

@@ -1,10 +1,12 @@
 import { Button } from '../button/Button';
 import { ButtonVariants } from '../button/types';
+import { Checkbox } from '../forms/checkbox/Checkbox';
 import { Col, Row } from '../grid';
 import { Icon } from '../icons/Icon';
 import { Modal } from './Modal';
 import { ConfirmationModalProps } from './types';
 import classNames from 'classnames';
+import { useState } from 'react';
 
 const defaultFooter = ({
   onCancelRequest,
@@ -12,14 +14,35 @@ const defaultFooter = ({
   confirmationButtonText,
   confirmationButtonVariant,
   cancelButtonText,
+  hasDontShowAgainCheckbox,
+  isChecked,
+  onDontShowAgainChange,
 }: {
   onCancelRequest?: () => void;
-  onConfirmRequest?: () => void;
+  onConfirmRequest?: ({
+    dontShowAgain,
+  }: {
+    dontShowAgain?: boolean;
+  }) => void | Promise<void> | Promise<boolean>;
   confirmationButtonText?: string;
   confirmationButtonVariant?: ButtonVariants;
   cancelButtonText?: string;
+  hasDontShowAgainCheckbox?: boolean;
+  isChecked?: boolean;
+  onDontShowAgainChange?: (checked: boolean) => void;
 }) => (
   <Row gutterWidth={12} justify="end" align="center">
+    {hasDontShowAgainCheckbox && (
+      <Col>
+        <Checkbox
+          label="Don't display this again."
+          onChange={(e) => onDontShowAgainChange?.(e.target.checked)}
+          isChecked={isChecked}
+          id="dont-show-again"
+          name="dont-show-again"
+        />
+      </Col>
+    )}
     <Col xs="content">
       <Button onClick={onCancelRequest} ariaLabel={cancelButtonText || 'Cancel'} variant="outline">
         {cancelButtonText}
@@ -27,7 +50,7 @@ const defaultFooter = ({
     </Col>
     <Col xs="content">
       <Button
-        onClick={onConfirmRequest}
+        onClick={() => onConfirmRequest?.({ dontShowAgain: isChecked })}
         ariaLabel={confirmationButtonText || 'Confirm'}
         variant={confirmationButtonVariant}
       >
@@ -61,7 +84,10 @@ export const ConfirmationModal = ({
   title,
   status = 'info',
   maxWidthInPixels,
+  hasDontShowAgainCheckbox,
 }: ConfirmationModalProps) => {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
   const modalFooter =
     footer ||
     defaultFooter({
@@ -70,6 +96,9 @@ export const ConfirmationModal = ({
       confirmationButtonText,
       cancelButtonText,
       confirmationButtonVariant,
+      hasDontShowAgainCheckbox,
+      isChecked: dontShowAgain,
+      onDontShowAgainChange: setDontShowAgain,
     });
 
   return (

package/src/components/modal/Modal.stories.tsx

@@ -244,6 +244,16 @@ const meta: Meta = {
         },
       },
     },
+    hasDontShowAgainCheckbox: {
+      control: 'boolean',
+      description: 'Whether the modal should have a checkbox to not show again',
+      table: {
+        category: 'Confirmation Modal',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
   },
 };
 
@@ -338,11 +348,13 @@ export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
     confirmationButtonVariant: 'destructive',
     cancelButtonText: 'Cancel',
     shouldCloseOnOverlayClick: true,
+    subtitle: '',
     icon: 'trash',
     status: 'error',
     shouldCloseOnEsc: true,
     parentSelector: () => document.body,
     maxWidthInPixels: 600,
+    hasDontShowAgainCheckbox: false,
   },
 
   render: (args) => {
@@ -375,3 +387,60 @@ export const ConfirmationModalStory: StoryObj<typeof ConfirmationModal> = {
     );
   },
 };
+
+export const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationModal> = {
+  args: {
+    className: '',
+    onRequestClose: () => {
+      console.log('closed');
+    },
+    title: 'Disable User',
+    confirmationButtonText: 'Delete',
+    confirmationButtonVariant: 'destructive',
+    cancelButtonText: 'Cancel',
+    shouldCloseOnOverlayClick: true,
+    icon: 'trash',
+    status: 'error',
+    shouldCloseOnEsc: true,
+    parentSelector: () => document.body,
+    maxWidthInPixels: 600,
+    hasDontShowAgainCheckbox: true,
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <ConfirmationModal
+              {...args}
+              isOpen={isOpen}
+              onConfirmRequest={({ dontShowAgain }) => {
+                console.log('confirmed', dontShowAgain);
+              }}
+              onRequestClose={handleClose}
+            >
+              <p>
+                Deleting user will no longer allow this person to have access to this organization.
+                You can always invite them again if you change your mind.
+              </p>
+            </ConfirmationModal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/modal/types.ts

@@ -19,13 +19,17 @@ export interface ModalProps {
   title?: string;
   subtitle?: string;
   footer?: React.ReactNode;
-
   maxWidthInPixels?: number;
 }
 
 export interface ConfirmationModalProps extends ModalProps {
-  onConfirmRequest?: () => void;
-  onCancelRequest?: () => void;
+  onConfirmRequest?: ({
+    dontShowAgain,
+  }: {
+    dontShowAgain?: boolean;
+  }) => void | Promise<void> | Promise<boolean>;
+  onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
+  hasDontShowAgainCheckbox?: boolean;
   confirmationButtonVariant?: ButtonVariants;
   confirmationButtonText?: string;
   cancelButtonText?: string;

package/src/styles/variables/themes/dark.scss

@@ -171,21 +171,21 @@
   --pf-teal-color-900: #101818;
 
   // Brand Color
-  --pf-brand-color: #2960a3;
+  --pf-brand-color: #2989ff;
 
   --pf-brand-color-50: #f6fafd;
   --pf-brand-color-100: #eef4fc;
-  --pf-brand-color-150: #dce9f9;
-  --pf-brand-color-200: #eef4fc;
-  --pf-brand-color-250: #accdf6;
-  --pf-brand-color-300: #8cbaf2;
-  --pf-brand-color-400: #3e8bea;
+  --pf-brand-color-150: #e5effa;
+  --pf-brand-color-200: #d8e9fd;
+  --pf-brand-color-250: #bbd8fb;
+  --pf-brand-color-300: #9ec7fa;
+  --pf-brand-color-400: #2989ff;
   --pf-brand-color-450: #0070f5;
-  --pf-brand-color-500: #2960a3;
-  --pf-brand-color-600: #264973;
-  --pf-brand-color-700: #233852;
-  --pf-brand-color-800: #1b2532;
-  --pf-brand-color-900: #101418;
+  --pf-brand-color-500: #005ccc;
+  --pf-brand-color-600: #004599;
+  --pf-brand-color-700: #06356f;
+  --pf-brand-color-800: #082345;
+  --pf-brand-color-900: #061323;
 
   // Purple Color
   --pf-purple-color: #5c29a3;

package/src/styles/variables/themes/light.scss

@@ -169,22 +169,21 @@
   --pf-teal-color-800: #1b3232;
   --pf-teal-color-900: #101818;
 
-  // Brand Color
-  --pf-brand-color: #2960a3;
+  --pf-brand-color: #2989ff;
 
   --pf-brand-color-50: #f6fafd;
   --pf-brand-color-100: #eef4fc;
-  --pf-brand-color-150: #dce9f9;
-  --pf-brand-color-200: #eef4fc;
-  --pf-brand-color-250: #accdf6;
-  --pf-brand-color-300: #8cbaf2;
-  --pf-brand-color-400: #3e8bea;
+  --pf-brand-color-150: #e5effa;
+  --pf-brand-color-200: #d8e9fd;
+  --pf-brand-color-250: #bbd8fb;
+  --pf-brand-color-300: #9ec7fa;
+  --pf-brand-color-400: #2989ff;
   --pf-brand-color-450: #0070f5;
-  --pf-brand-color-500: #2960a3;
-  --pf-brand-color-600: #264973;
-  --pf-brand-color-700: #233852;
-  --pf-brand-color-800: #1b2532;
-  --pf-brand-color-900: #101418;
+  --pf-brand-color-500: #005ccc;
+  --pf-brand-color-600: #004599;
+  --pf-brand-color-700: #06356f;
+  --pf-brand-color-800: #082345;
+  --pf-brand-color-900: #061323;
 
   // Purple Color
   --pf-purple-color: #5c29a3;