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>
carbon-design-system · May 21, 2021 · 9af1e52 · 9af1e52
1 parent 10fab3b
commit 9af1e52
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 0 deletions.
diff --git 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
@@ -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>