add button variants to live modal preivew (carbon-design-system#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 <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]>
emyarod · May 24, 2021 · 3aaa4ea · 3aaa4ea
1 parent 6b16779
commit 3aaa4ea
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>