[WNMGDS-260] Consolidate code examples (#536)

* Combine alert examples * Move example wrapper class to docs scss * Combine badge and list * Combine button * Combine size variant examples with main example, change example copy to match declarative style * Put hint and error outside of legend * Combine inverse examples for ChoiceList * Combine inverse examples for Textfield * Add new focus,active,hover classes to buttons, and make examples consistent with USWDS * Add new example style for inverse code examples * Fix e2e tests
CMSgov · Nov 1, 2019 · 9df8c88 · 9df8c88
1 parent bf8a769
commit 9df8c88
Show file tree

Hide file tree

Showing 25 changed files with 503 additions and 471 deletions.
diff --git a/packages/core/src/components/Alert/Alert.example.jsx b/packages/core/src/components/Alert/Alert.example.jsx
@@ -3,19 +3,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 ReactDOM.render(
-  <div>
+  <div className="example--wrapper">
     <Alert heading="Status heading">
       <p className="ds-c-alert__text">This is a React Alert component.</p>
     </Alert>
-    <Alert className={'ds-u-margin-top--2'}>
+    <Alert heading="Alert with only a heading" />
+    <Alert>
       <p className="ds-c-alert__text">
         This is a React Alert component without a heading.
       </p>
     </Alert>
-    <Alert
-      heading="Alert with only a heading"
-      className={'ds-u-margin-top--2'}
-    />
   </div>,
   document.getElementById('js-example')
 );
diff --git a/packages/core/src/components/Alert/_Alert.docs.scss b/packages/core/src/components/Alert/_Alert.docs.scss
@@ -5,14 +5,8 @@ Alert
 
 Alerts keep users informed of important and sometimes time-sensitive changes.
 
-.ds-c-alert--error - Error message
-.ds-c-alert--warn - Warning message
-.ds-c-alert--success - Success message
-.ds-c-alert--hide-icon - Hide icon
-
 Markup: alert.example.html
 
-
 Style guide: components.alert
 */
 

diff --git a/packages/core/src/components/Alert/alert.example-additional.html b/packages/core/src/components/Alert/alert.example-additional.html
@@ -1,21 +1,23 @@
-<div class="ds-c-alert">
-  <div class="ds-c-alert__body ds-u-measure--wide">
-    <p class="ds-c-alert__text">{{lorem-s}}</p>
+<div class="example--wrapper">
+  <div class="ds-c-alert">
+    <div class="ds-c-alert__body ds-u-measure--wide">
+      <p class="ds-c-alert__text">{{lorem-s}}</p>
+    </div>
   </div>
-</div>
-<div class="ds-c-alert ds-u-margin-top--2">
-  <div class="ds-c-alert__body ds-u-measure--wide">
-    <p class="ds-c-alert__text">{{lorem-l}}</p>
+  <div class="ds-c-alert">
+    <div class="ds-c-alert__body ds-u-measure--wide">
+      <p class="ds-c-alert__text">{{lorem-l}}</p>
+    </div>
   </div>
-</div>
-<div class="ds-c-alert ds-u-margin-top--2">
-  <div class="ds-c-alert__body ds-u-measure--wide">
-    <h3 class="ds-c-alert__heading">Status heading</h3>
-    <p class="ds-c-alert__text">{{lorem-m}}</p>
-    <ul class="ds-c-list">
-      <li>Alert list item</li>
-      <li>Alert list item</li>
-    </ul>
-    <a href="javascript:void(0);">Link text</a>
+  <div class="ds-c-alert">
+    <div class="ds-c-alert__body ds-u-measure--wide">
+      <h3 class="ds-c-alert__heading">Status heading</h3>
+      <p class="ds-c-alert__text">{{lorem-m}}</p>
+      <ul class="ds-c-list">
+        <li>Alert list item</li>
+        <li>Alert list item</li>
+      </ul>
+      <a href="javascript:void(0);">Link text</a>
+    </div>
   </div>
 </div>
diff --git a/packages/core/src/components/Alert/alert.example.html b/packages/core/src/components/Alert/alert.example.html
@@ -1,9 +1,47 @@
-<div class="ds-c-alert {{modifier}}">
-  <div class="ds-c-alert__body">
-    <h3 class="ds-c-alert__heading">Status heading</h3>
-    <p class="ds-c-alert__text">
-      Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-      consectetur adipiscing elit, sed do eiusmod.
-    </p>
+<div class="example--wrapper">
+  <div class="ds-c-alert">
+    <div class="ds-c-alert__body">
+      <h3 class="ds-c-alert__heading">Informative status</h3>
+      <p class="ds-c-alert__text">
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
+        consectetur adipiscing elit, sed do eiusmod.
+      </p>
+    </div>
+  </div>
+  <div class="ds-c-alert ds-c-alert--error">
+    <div class="ds-c-alert__body">
+      <h3 class="ds-c-alert__heading">Error status</h3>
+      <p class="ds-c-alert__text">
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
+        consectetur adipiscing elit, sed do eiusmod.
+      </p>
+    </div>
+  </div>
+  <div class="ds-c-alert ds-c-alert--warn">
+    <div class="ds-c-alert__body">
+      <h3 class="ds-c-alert__heading">Warning status</h3>
+      <p class="ds-c-alert__text">
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
+        consectetur adipiscing elit, sed do eiusmod.
+      </p>
+    </div>
+  </div>
+  <div class="ds-c-alert ds-c-alert--success">
+    <div class="ds-c-alert__body">
+      <h3 class="ds-c-alert__heading">Success status</h3>
+      <p class="ds-c-alert__text">
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
+        consectetur adipiscing elit, sed do eiusmod.
+      </p>
+    </div>
+  </div>
+  <div class="ds-c-alert ds-c-alert--hide-icon">
+    <div class="ds-c-alert__body">
+      <h3 class="ds-c-alert__heading">Status without icon</h3>
+      <p class="ds-c-alert__text">
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
+        consectetur adipiscing elit, sed do eiusmod.
+      </p>
+    </div>
   </div>
 </div>
diff --git a/packages/core/src/components/Badge/Badge.e2e.test.js b/packages/core/src/components/Badge/Badge.e2e.test.js
@@ -5,10 +5,6 @@ import assertNoAxeViolations from '../../helpers/e2e/assertNoAxeViolations';
 import { getElementByClassName } from '../../helpers/e2e';
 
 const rootURL = `${ROOT_URL}/example/components.badge/`;
-const infoURL = `${ROOT_URL}/example/components.badge..ds-c-badge--info/`;
-const successURL = `${ROOT_URL}/example/components.badge..ds-c-badge--success/`;
-const warnURL = `${ROOT_URL}/example/components.badge..ds-c-badge--warn/`;
-const alertURL = `${ROOT_URL}/example/components.badge..ds-c-badge--alert/`;
 
 describe('Badge component', () => {
   it('Badge should render', async() => {
@@ -18,51 +14,7 @@ describe('Badge component', () => {
     expect(el).toBeTruthy();
   });
 
-  it('Info badge should render', async() => {
-    await driver.get(infoURL);
-
-    const el = await getElementByClassName('ds-c-badge');
-    expect(el).toBeTruthy();
-  });
-
-  it('Success badge should render', async() => {
-    await driver.get(successURL);
-
-    const el = await getElementByClassName('ds-c-badge');
-    expect(el).toBeTruthy();
-  });
-
-  it('Warning badge should render', async() => {
-    await driver.get(warnURL);
-
-    const el = await getElementByClassName('ds-c-badge');
-    expect(el).toBeTruthy();
-  });
-
-  it('Alert badge should render', async() => {
-    await driver.get(alertURL);
-
-    const el = await getElementByClassName('ds-c-badge');
-    expect(el).toBeTruthy();
-  });
-
   it('Badge should have no accessibility violations', async() => {
     await assertNoAxeViolations(rootURL);
   });
-
-  it('Info badge should have no accessibility violations', async() => {
-    await assertNoAxeViolations(infoURL);
-  });
-
-  it('Success badge should have no accessibility violations', async() => {
-    await assertNoAxeViolations(successURL);
-  });
-
-  it('Warning badge should have no accessibility violations', async() => {
-    await assertNoAxeViolations(warnURL);
-  });
-
-  it('Alert badge should have no accessibility violations', async() => {
-    await assertNoAxeViolations(alertURL);
-  });
 });
diff --git a/packages/core/src/components/Badge/_Badge.docs.scss b/packages/core/src/components/Badge/_Badge.docs.scss
@@ -5,11 +5,6 @@ Badges hold small amounts of information and draw attention to new or important
 
 @uswds https://standards.usa.gov/components/labels/
 
-.ds-c-badge--info - Info badge
-.ds-c-badge--success - Success badge
-.ds-c-badge--warn - Warning badge
-.ds-c-badge--alert - Alert or error badge
-
 Markup: badge.example.html
 
 Style guide: components.badge

diff --git a/packages/core/src/components/Badge/badge.example.html b/packages/core/src/components/Badge/badge.example.html
@@ -1,3 +1,35 @@
-<span class="ds-c-badge {{modifier}}">5</span>
-<span class="ds-c-badge {{modifier}}">Badge label</span>
-<span class="ds-c-badge {{modifier}} ds-u-font-size--base">Badge label</span>
+<div class="example--wrapper">
+  <div>
+    <span class="ds-c-badge">1</span>
+    <span class="ds-c-badge">Badge label</span>
+    <span class="ds-c-badge ds-u-font-size--base">Larger badge label</span>
+  </div>
+  <div>
+    <span class="ds-c-badge ds-c-badge--info">2</span>
+    <span class="ds-c-badge ds-c-badge--info">Info badge</span>
+    <span class="ds-c-badge ds-c-badge--info ds-u-font-size--base"
+      >Larger info badge</span
+    >
+  </div>
+  <div>
+    <span class="ds-c-badge ds-c-badge--success">3</span>
+    <span class="ds-c-badge ds-c-badge--success">Success badge</span>
+    <span class="ds-c-badge ds-c-badge--success ds-u-font-size--base"
+      >Larger success badge</span
+    >
+  </div>
+  <div>
+    <span class="ds-c-badge ds-c-badge--warn">4</span>
+    <span class="ds-c-badge ds-c-badge--warn">Warning badge</span>
+    <span class="ds-c-badge ds-c-badge--warn ds-u-font-size--base"
+      >Larger warning badge</span
+    >
+  </div>
+  <div>
+    <span class="ds-c-badge ds-c-badge--alert">5</span>
+    <span class="ds-c-badge ds-c-badge--alert">Alert badge</span>
+    <span class="ds-c-badge ds-c-badge--alert ds-u-font-size--base"
+      >Larger alert badge</span
+    >
+  </div>
+</div>
diff --git a/packages/core/src/components/Button/Button.e2e.test.js b/packages/core/src/components/Button/Button.e2e.test.js
@@ -5,11 +5,6 @@ import assertNoAxeViolations from '../../helpers/e2e/assertNoAxeViolations';
 import { getElementByClassName } from '../../helpers/e2e';
 
 const rootURL = `${ROOT_URL}/example/components.button/`;
-const primaryURL = `${ROOT_URL}/example/components.button..ds-c-button--primary/`;
-const transparentURL = `${ROOT_URL}/example/components.button..ds-c-button--transparent/`;
-const dangerURL = `${ROOT_URL}/example/components.button..ds-c-button--danger/`;
-const successURL = `${ROOT_URL}/example/components.button..ds-c-button--success/`;
-const disabledURL = `${ROOT_URL}/example/components.button..ds-c-button--disabled/`;
 
 describe('Button component', () => {
   it('Button should render', async() => {
@@ -22,24 +17,4 @@ describe('Button component', () => {
   it('Button should have no accessibility violations', async() => {
     await assertNoAxeViolations(rootURL);
   });
-
-  it('Primary button should have no accessibility violations', async() => {
-    await assertNoAxeViolations(primaryURL);
-  });
-
-  it('Transparent button should have no accessibility violations', async() => {
-    await assertNoAxeViolations(transparentURL);
-  });
-
-  it('Danger button should have no accessibility violations', async() => {
-    await assertNoAxeViolations(dangerURL);
-  });
-
-  it('Success button should have no accessibility violations', async() => {
-    await assertNoAxeViolations(successURL);
-  });
-
-  it('Disabled button should have no accessibility violations', async() => {
-    await assertNoAxeViolations(disabledURL);
-  });
 });