feat(ModalConfirm): Secondary action button for ModalConfirm (#410)

contentful · Feb 4, 2020 · 2840c44 · 2840c44
1 parent 5f734c9
commit 2840c44
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 1 deletion.
diff --git a/...ages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.stories.tsx b/...ages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.stories.tsx
@@ -22,6 +22,11 @@ function DefaultStory() {
           ['negative', 'positive', 'primary'],
           ModalConfirm.defaultProps.intent,
         )}
+        secondaryIntent={select('secondaryIntent', [
+          'negative',
+          'positive',
+          'primary',
+        ])}
         size={select(
           'size',
           ['small', 'medium', 'large', '300px', '1500px'],
@@ -39,20 +44,27 @@ function DefaultStory() {
           'confirmLabel',
           ModalConfirm.defaultProps.confirmLabel,
         )}
+        secondaryLabel={text('secondaryLabel')}
         cancelLabel={text('cancelLabel', ModalConfirm.defaultProps.cancelLabel)}
         isConfirmDisabled={boolean(
           'isConfirmDisabled',
           ModalConfirm.defaultProps.isConfirmDisabled,
         )}
+        isSecondaryDisabled={boolean('secondaryDisabled')}
         isConfirmLoading={boolean(
           'isConfirmLoading',
           ModalConfirm.defaultProps.isConfirmLoading,
         )}
+        isSecondaryLoading={boolean('isSecondaryLoading')}
         testId={text('testId', ModalConfirm.defaultProps.testId)}
         confirmTestId={text(
           'confirmTestId',
           ModalConfirm.defaultProps.confirmTestId,
         )}
+        secondaryTestId={text(
+          'secondaryTestId',
+          ModalConfirm.defaultProps.secondaryTestId,
+        )}
         cancelTestId={text(
           'cancelTextId',
           ModalConfirm.defaultProps.cancelTestId,
@@ -65,6 +77,10 @@ function DefaultStory() {
           setShown(false);
           action('onConfirm')();
         }}
+        onSecondary={() => {
+          setShown(false);
+          action('onSecondary')();
+        }}
       >
         <p>You are about to delete SOMETHING. Think twice!</p>
       </ModalConfirm>

diff --git a/packages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.test.tsx b/packages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.test.tsx
@@ -60,8 +60,10 @@ it('can accept custom labels', () => {
       isShown
       intent="negative"
       confirmLabel="Yes, delete"
+      secondaryLabel="Disable, instead"
       cancelLabel="No, I changed my mind"
       onConfirm={() => {}}
+      onSecondary={() => {}}
       onCancel={() => {}}
     >
       ModalConfirm

diff --git a/packages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.tsx b/packages/forma-36-react-components/src/components/Modal/ModalConfirm/ModalConfirm.tsx
@@ -15,6 +15,10 @@ export type ModalConfirmProps = {
    * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.
    */
   onConfirm: Function;
+  /**
+   * Function that will be called when the secondary button is clicked. This does not close the ModalConfirm.
+   */
+  onSecondary?: Function;
   /**
    * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.
    */
@@ -27,6 +31,10 @@ export type ModalConfirmProps = {
    * Label of the confirm button
    */
   confirmLabel?: string | false;
+  /**
+   * Label of the secondary button
+   */
+  secondaryLabel?: string | false;
   /**
    * Label of the cancel button
    */
@@ -35,6 +43,10 @@ export type ModalConfirmProps = {
    * The intent of the ModalConfirm. Used for the Button.
    */
   intent?: 'primary' | 'positive' | 'negative';
+  /**
+   * The intent of the ModalConfirm. Used for the secondary Button.
+   */
+  secondaryIntent?: 'primary' | 'positive' | 'negative';
   /**
       Size of the modal window
     */
@@ -51,11 +63,18 @@ export type ModalConfirmProps = {
    * When true, the confirm button is set to disabled.
    */
   isConfirmDisabled?: boolean;
+  /**
+   * When true, the secondary button is set to disabled.
+   */
+  isSecondaryDisabled?: boolean;
   /**
    * When true, the confirm button is set to loading.
    */
   isConfirmLoading?: boolean;
-
+  /**
+   * When true, the secondary button is set to loading.
+   */
+  isSecondaryLoading?: boolean;
   /**
    * Are modals higher than viewport allowed
    */
@@ -78,13 +97,15 @@ export type ModalConfirmProps = {
 
   testId?: string;
   confirmTestId?: string;
+  secondaryTestId?: string;
   cancelTestId?: string;
   children: React.ReactNode;
 } & typeof defaultProps;
 
 const defaultProps = {
   testId: 'cf-ui-modal-confirm',
   confirmTestId: 'cf-ui-modal-confirm-confirm-button',
+  secondaryTestId: 'cf-ui-modal-confirm-secondary-button',
   cancelTestId: 'cf-ui-modal-confirm-cancel-button',
   title: 'Are you sure?',
   confirmLabel: 'Confirm',
@@ -108,17 +129,23 @@ export class ModalConfirm extends Component<ModalConfirmProps> {
       isShown,
       title,
       onConfirm,
+      onSecondary,
       onCancel,
       size,
       confirmLabel,
+      secondaryLabel,
       cancelLabel,
       intent,
+      secondaryIntent,
       shouldCloseOnOverlayClick,
       shouldCloseOnEscapePress,
       allowHeightOverflow,
       isConfirmDisabled,
+      isSecondaryDisabled,
       isConfirmLoading,
+      isSecondaryLoading,
       confirmTestId,
+      secondaryTestId,
       cancelTestId,
     } = this.props;
 
@@ -150,6 +177,17 @@ export class ModalConfirm extends Component<ModalConfirmProps> {
                   {confirmLabel}
                 </Button>
               )}
+              {secondaryLabel && (
+                <Button
+                  testId={secondaryTestId}
+                  disabled={isSecondaryDisabled}
+                  loading={isSecondaryLoading}
+                  buttonType={secondaryIntent}
+                  onClick={() => onSecondary && onSecondary()}
+                >
+                  {secondaryLabel}
+                </Button>
+              )}
               {cancelLabel && (
                 <Button
                   testId={cancelTestId}

diff --git a/...act-components/src/components/Modal/ModalConfirm/__snapshots__/ModalConfirm.test.tsx.snap b/...act-components/src/components/Modal/ModalConfirm/__snapshots__/ModalConfirm.test.tsx.snap
@@ -50,6 +50,10 @@ exports[`can accept custom labels 1`] = `
           onClick={[Function]}
           testId="cf-ui-modal-confirm-confirm-button"
         />
+        <Button
+          onClick={[Function]}
+          testId="cf-ui-modal-confirm-secondary-button"
+        />
         <Button
           buttonType="muted"
           onClick={[Function]}

diff --git a/packages/forma-36-react-components/yarn.lock b/packages/forma-36-react-components/yarn.lock
@@ -1405,10 +1405,22 @@
     puppeteer "^1.2.0"
     yargs "^11.1.0"
 
+"@contentful/forma-36-fcss@^0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@contentful/forma-36-fcss/-/forma-36-fcss-0.0.34.tgz#afc4514e9b946c67339202ac61df94dc702b3bbe"
+  integrity sha512-AhK2QJn2pQ/MWR8d10H4B6g625MU1rz4lkakkw8/0E0KFpeow53XW2lbN0vTdOXDaNM1TeMOP0F700qFIoeMkA==
+  dependencies:
+    "@contentful/forma-36-tokens" "^0.5.1"
+
 "@contentful/forma-36-tokens@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@contentful/forma-36-tokens/-/forma-36-tokens-0.2.0.tgz#c4a1062e7acc2ae0ae5699e7c8606d5b5047a1c5"
 
+"@contentful/forma-36-tokens@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@contentful/forma-36-tokens/-/forma-36-tokens-0.5.1.tgz#427130f4e65f3aef4ec987873c4a1b61dab8cdaf"
+  integrity sha512-KeI181dInXcgSQw/ibPHEyshDFrEOPVEwHZ4a720yEJczT64zmKC/CLecsv3C7tUiQlnSnTZD1fcFBXmeOIThw==
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"