feat(docs): update modal page to use new layout

bigcommerce · Feb 11, 2022 · cdb48ee · cdb48ee
1 parent 4ae6247
commit cdb48ee
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 15 deletions.
diff --git a/packages/docs/pages/button.tsx b/packages/docs/pages/button.tsx
@@ -12,7 +12,8 @@ const ButtonPage = () => {
 
       <Panel header="Overview" headerId="overview">
         <Text>
-          Buttons trigger an immediate action, which can continue within the current page, a new page or modal.
+          <Code primary>Buttons</Code> trigger an immediate action, which can continue within the current page, a new
+          page or modal.
         </Text>
         <Text bold>When to use:</Text>
         <List>
@@ -44,7 +45,9 @@ const ButtonPage = () => {
               title: 'Basic',
               render: () => (
                 <Fragment key="basic">
-                  <Text>Buttons are calls to action used throughout the product experience.</Text>
+                  <Text>
+                    <Code primary>Buttons</Code> are calls to action used throughout the product experience.
+                  </Text>
                   <CodePreview>
                     {/* jsx-to-string:start */}
                     <Button actionType="normal" isLoading={false} variant="primary">
@@ -85,7 +88,7 @@ const ButtonPage = () => {
                 <Fragment key="action-types">
                   <Text>
                     There are two action types: <Code>normal</Code> &amp; <Code>destructive</Code>. They are used to
-                    indicate the nature of the action when clicking on the button.
+                    indicate the nature of the action when clicking on the <Code primary>Button</Code>.
                   </Text>
 
                   <CodePreview>
@@ -104,7 +107,10 @@ const ButtonPage = () => {
               title: 'Loading',
               render: () => (
                 <Fragment key="loading">
-                  <Text>The loading state is used when clicking a button will perform a asyncronous action.</Text>
+                  <Text>
+                    The loading state is used when clicking a <Code primary>Button</Code> will perform a asyncronous
+                    action.
+                  </Text>
 
                   <CodePreview>
                     {/* jsx-to-string:start */}
@@ -142,8 +148,8 @@ const ButtonPage = () => {
               render: () => (
                 <Fragment key="disabled">
                   <Text>
-                    A disabled state is used to indicate no action can be done using the button by passing a{' '}
-                    <Code primary>disabled</Code> prop.
+                    A disabled state is used to indicate no action can be done using the <Code primary>Button</Code> by
+                    passing a <Code primary>disabled</Code> prop.
                   </Text>
 
                   <CodePreview>
@@ -168,8 +174,8 @@ const ButtonPage = () => {
               render: () => (
                 <Fragment key="icons">
                   <Text>
-                    A button can also include icons on either side of the text (or both). When using{' '}
-                    <Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp;{' '}
+                    A <Code primary>Button</Code> can also include icons on either side of the text (or both). When
+                    using <Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp;{' '}
                     <Code primary>iconRight</Code> components will be removed.
                   </Text>
 
@@ -201,7 +207,8 @@ const ButtonPage = () => {
           recommended={[
             <>Keep button labels short and concise.</>,
             <>
-              Where there are multiple buttons together, ensure the “default” action is the <Code>primary</Code> button.
+              Where there are multiple <Code primary>Buttons</Code> together, ensure the “default” action is the{' '}
+              <Code>primary</Code> button.
             </>,
             <>
               <Code>primary</Code> button should only appear once per page.

diff --git a/packages/docs/pages/modal.tsx b/packages/docs/pages/modal.tsx
@@ -1,7 +1,7 @@
 import { Button, H1, Modal, Panel, Text } from '@bigcommerce/big-design';
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 
-import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
 import { ModalPropTable } from '../PropTables';
 
 const ModalPage = () => {
@@ -29,7 +29,7 @@ const ModalPage = () => {
               id: 'modal',
               title: 'Modal',
               render: () => (
-                <>
+                <Fragment key="modal">
                   <Text>
                     A <Code primary>Modal</Code> appears as a layer on top of the primary interface.{' '}
                     <Code primary>Modals</Code> disrupt users from interacting with the page until they complete a
@@ -68,14 +68,14 @@ const ModalPage = () => {
                     }}
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
             {
               id: 'dialog',
               title: 'Dialog',
               render: () => (
-                <>
+                <Fragment key="dialog">
                   <Text>
                     Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a{' '}
                     <Code primary>Modal</Code>. The purpose of a dialog is to act as a safety net for a user attempting
@@ -113,7 +113,7 @@ const ModalPage = () => {
                     }}
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
           ]}
@@ -123,6 +123,38 @@ const ModalPage = () => {
       <Panel header="Props" headerId="props">
         <ModalPropTable renderPanel={false} />
       </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="props">
+        <GuidelinesTable
+          recommended={[
+            <>
+              <Code primary>Modals</Code> should require that users take an action.
+            </>,
+            <>
+              <Code primary>Modals</Code> should close when users press the Cancel or Primary button, not when merchants
+              click or tap the area outside the <Code primary>Modal</Code>.
+            </>,
+            <>
+              It should be clear why the <Code primary>Modal</Code> was opened.
+            </>,
+            <>
+              <Code primary>Modals</Code> should block other content on a page.
+            </>,
+            <>
+              User should have the option to come back without any <Code primary>actions</Code>.{' '}
+            </>,
+            <>Header and content should be left aligned, footer right aligned.</>,
+            <>
+              <Code primary>Modals</Code> should be positioned in the middle of the screen.
+            </>,
+          ]}
+          discouraged={[
+            <>
+              <Code primary>Modals</Code> shouldn’t have more than two buttons (primary and secondary) at the bottom.
+            </>,
+          ]}
+        />
+      </Panel>
     </>
   );
 };