From a4d0b895c7005c1ac0d3a8f3bdb631b58174eedf Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 11 May 2021 17:03:27 -0500
Subject: [PATCH 1/3] docs(Modal): update modal live preview

---
 src/pages/components/modal/code.mdx  | 58 +++++++++++++++++++++++++++
 src/pages/components/modal/usage.mdx | 59 ++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+)

diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index e6d1a135afb..759af342962 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,55 @@ 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"
+    >
+      <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: action('onClick'),
+          },
+          {
+            buttonText: 'Rename',
+            onClick: action('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..424469191c7 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: action('onClick'),
+          },
+          {
+            buttonText: 'Rename',
+            onClick: action('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>
 

From 5e9a64f1816b283589ce623ea468ffaacbca5659 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 11 May 2021 17:08:38 -0500
Subject: [PATCH 2/3] docs(Modal): add solo button example to code docs

---
 src/pages/components/modal/code.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index 759af342962..14ef8c9b989 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -152,6 +152,7 @@ documentation, see the Storybooks for each framework below.
       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>

From d17be3175459474e92ff1734e2168bdbdef3dfcf Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Thu, 13 May 2021 09:51:05 -0500
Subject: [PATCH 3/3] docs(Modal): update action handler

---
 src/pages/components/modal/code.mdx  | 4 ++--
 src/pages/components/modal/usage.mdx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
index 14ef8c9b989..7004b3b8db3 100755
--- a/src/pages/components/modal/code.mdx
+++ b/src/pages/components/modal/code.mdx
@@ -176,11 +176,11 @@ documentation, see the Storybooks for each framework below.
         [
           {
             buttonText: 'Keep both',
-            onClick: action('onClick'),
+            onClick: () => {},
           },
           {
             buttonText: 'Rename',
-            onClick: action('onClick'),
+            onClick: () => {},
           }
         ]
       }
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index 424469191c7..32cf2d00127 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -197,11 +197,11 @@ destructive or irreversible then use a transactional danger modal.
         [
           {
             buttonText: 'Keep both',
-            onClick: action('onClick'),
+            onClick: () => {},
           },
           {
             buttonText: 'Rename',
-            onClick: action('onClick'),
+            onClick: () => {},
           }
         ]
       }