From 3aaa4eabc72766d3fd97678048ea50085abb370a Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Fri, 21 May 2021 11:22:36 -0500
Subject: [PATCH] add button variants to live modal preivew (#2299)

* docs(Modal): update modal live preview

* docs(Modal): add solo button example to code docs

* docs(Modal): update action handler

Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
---
 src/pages/components/modal/code.mdx  | 59 ++++++++++++++++++++++++++++
 src/pages/components/modal/usage.mdx | 59 ++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+)

diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index e6d1a135afb..7004b3b8db3 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -60,6 +60,14 @@ documentation, see the Storybooks for each framework below.
       id: 'scrolling-content',
       label: 'With scrolling content',
     },
+    {
+      id: 'with-one-button',
+      label: 'With one button',
+    },
+    {
+      id: 'with-three-buttons',
+      label: 'With three buttons',
+    },
   ]}>
   <ComponentVariant
     id="modal"
@@ -128,5 +136,56 @@ documentation, see the Storybooks for each framework below.
         </p>
       </>
     </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-one-button"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtonText={null}
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-three-buttons"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtons={
+        [
+          {
+            buttonText: 'Keep both',
+            onClick: () => {},
+          },
+          {
+            buttonText: 'Rename',
+            onClick: () => {},
+          }
+        ]
+      }
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
 `}</ComponentVariant>
 </ComponentDemo>
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 4254a09191c..32cf2d00127 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -81,6 +81,14 @@ destructive or irreversible then use a transactional danger modal.
       id: 'scrolling-content',
       label: 'With scrolling content',
     },
+    {
+      id: 'with-one-button',
+      label: 'With one button',
+    },
+    {
+      id: 'with-three-buttons',
+      label: 'With three buttons',
+    },
   ]}>
   <ComponentVariant
     id="modal"
@@ -149,6 +157,57 @@ destructive or irreversible then use a transactional danger modal.
         </p>
       </>
     </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-one-button"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtonText={null}
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
+`}</ComponentVariant>
+  <ComponentVariant
+    id="with-three-buttons"
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-modal--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-modal--basic',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal',
+    }}>{`
+    <ModalWrapper
+      buttonTriggerText="Launch modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      secondaryButtons={
+        [
+          {
+            buttonText: 'Keep both',
+            onClick: () => {},
+          },
+          {
+            buttonText: 'Rename',
+            onClick: () => {},
+          }
+        ]
+      }
+    >
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
+    </ModalWrapper>
 `}</ComponentVariant>
 </ComponentDemo>