From 9f086bf53d87a207b2892d58c189668208e7008f Mon Sep 17 00:00:00 2001
From: Bernard <bernardwang@users.noreply.github.com>
Date: Fri, 1 Nov 2019 11:38:04 -0500
Subject: [PATCH] [WNMGDS-293] Adjust prettier config (#539)

* Change prettier config

* Run prettier on files

* Rename Dropdown.example.html

* Remove outdated DateField.example.html naming
---
 .prettierrc                                   |  3 +-
 .../src/components/Alert/Alert.example.jsx    |  4 +-
 .../src/components/Alert/alert.example.html   | 20 +++----
 .../src/components/Badge/badge.example.html   | 16 ++---
 .../src/components/Button/button.example.html | 60 ++++---------------
 .../checkbox-radio-right-to-left.example.html |  8 +--
 .../checkbox-radio-size.example.html          | 41 +++++++++++++
 .../ChoiceList/checkbox-radio.example.html    | 24 ++------
 .../components/ChoiceList/select.example.html |  6 +-
 .../DateField/DateField.example.html          | 55 -----------------
 .../DateField/datefield.example.html          | 16 +----
 ...own.example.html => dropdown.example.html} | 10 +---
 .../FormLabel/form-label.example.html         |  3 +-
 .../HelpDrawer/help-drawer.example.html       | 37 +++++-------
 .../src/components/Review/review.example.html | 12 +---
 .../components/Spinner/spinner.example.html   | 12 +---
 .../components/StepList/steplist.example.html | 37 +++---------
 .../src/components/Tabs/tabs.example.html     | 10 +---
 .../TextField/TextField.example.jsx           | 20 +------
 .../TextField/textfield.example.html          | 40 ++-----------
 .../patterns/documentation-page.example.html  | 35 +++++------
 21 files changed, 138 insertions(+), 331 deletions(-)
 create mode 100644 packages/core/src/components/ChoiceList/checkbox-radio-size.example.html
 delete mode 100644 packages/core/src/components/DateField/DateField.example.html
 rename packages/core/src/components/Dropdown/{Dropdown.example.html => dropdown.example.html} (81%)

diff --git a/.prettierrc b/.prettierrc
index 544138be45..554f2a3baa 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 100
 }
diff --git a/packages/core/src/components/Alert/Alert.example.jsx b/packages/core/src/components/Alert/Alert.example.jsx
index f8651a144e..2dcef6d741 100644
--- a/packages/core/src/components/Alert/Alert.example.jsx
+++ b/packages/core/src/components/Alert/Alert.example.jsx
@@ -9,9 +9,7 @@ ReactDOM.render(
     </Alert>
     <Alert heading="Alert with only a heading" />
     <Alert>
-      <p className="ds-c-alert__text">
-        This is a React Alert component without a heading.
-      </p>
+      <p className="ds-c-alert__text">This is a React Alert component without a heading.</p>
     </Alert>
   </div>,
   document.getElementById('js-example')
diff --git a/packages/core/src/components/Alert/alert.example.html b/packages/core/src/components/Alert/alert.example.html
index 23c1459e7c..1e9737a368 100644
--- a/packages/core/src/components/Alert/alert.example.html
+++ b/packages/core/src/components/Alert/alert.example.html
@@ -3,8 +3,8 @@
     <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.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
@@ -12,8 +12,8 @@ <h3 class="ds-c-alert__heading">Informative status</h3>
     <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.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
@@ -21,8 +21,8 @@ <h3 class="ds-c-alert__heading">Error status</h3>
     <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.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
@@ -30,8 +30,8 @@ <h3 class="ds-c-alert__heading">Warning status</h3>
     <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.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
@@ -39,8 +39,8 @@ <h3 class="ds-c-alert__heading">Success status</h3>
     <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.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
diff --git a/packages/core/src/components/Badge/badge.example.html b/packages/core/src/components/Badge/badge.example.html
index 5aa2b64158..c28d39a53a 100644
--- a/packages/core/src/components/Badge/badge.example.html
+++ b/packages/core/src/components/Badge/badge.example.html
@@ -7,29 +7,21 @@
   <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
-    >
+    <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
-    >
+    <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
-    >
+    <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
-    >
+    <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.example.html b/packages/core/src/components/Button/button.example.html
index 04772781af..390677aaf4 100644
--- a/packages/core/src/components/Button/button.example.html
+++ b/packages/core/src/components/Button/button.example.html
@@ -16,22 +16,13 @@ <h6 class="preview__label">Primary button</h6>
 <button type="button" class="ds-c-button ds-c-button--primary">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--disabled">
   Disabled
 </button>
 
@@ -39,22 +30,13 @@ <h6 class="preview__label">Danger button</h6>
 <button type="button" class="ds-c-button ds-c-button--danger">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--disabled">
   Disabled
 </button>
 
@@ -62,22 +44,13 @@ <h6 class="preview__label">Success button</h6>
 <button type="button" class="ds-c-button ds-c-button--success">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--disabled">
   Disabled
 </button>
 
@@ -85,22 +58,13 @@ <h6 class="preview__label">Transparent button</h6>
 <button type="button" class="ds-c-button ds-c-button--transparent">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--disabled">
   Disabled
 </button>
 
diff --git a/packages/core/src/components/ChoiceList/checkbox-radio-right-to-left.example.html b/packages/core/src/components/ChoiceList/checkbox-radio-right-to-left.example.html
index b488e326bd..f25e4e348f 100644
--- a/packages/core/src/components/ChoiceList/checkbox-radio-right-to-left.example.html
+++ b/packages/core/src/components/ChoiceList/checkbox-radio-right-to-left.example.html
@@ -1,7 +1,5 @@
 <div class="ds-u-clearfix">
-  <div
-    class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left"
-  >
+  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left">
     <fieldset class="ds-c-fieldset ds-u-margin-top--0">
       <legend class="ds-c-label">Right to left</legend>
       <span class="ds-c-field__hint ds-u-margin-bottom--1">
@@ -47,9 +45,7 @@
   >
     <fieldset class="ds-c-fieldset ds-u-margin-top--0">
       <legend class="ds-c-label">Right to left</legend>
-      <span
-        class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1"
-      >
+      <span class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1">
         Select desired fruits
       </span>
       <input
diff --git a/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html b/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html
new file mode 100644
index 0000000000..212f37fd38
--- /dev/null
+++ b/packages/core/src/components/ChoiceList/checkbox-radio-size.example.html
@@ -0,0 +1,41 @@
+<div class="ds-u-clearfix">
+  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left">
+    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
+      <legend class="ds-c-label">Size variants</legend>
+      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
+      <input
+        class="ds-c-choice"
+        id="normal-1"
+        type="checkbox"
+        name="size-1"
+        value="normal"
+        checked
+      />
+      <label for="normal-1">Normal</label>
+      <input
+        class="ds-c-choice ds-c-choice--small"
+        id="small-1"
+        type="checkbox"
+        name="size-1"
+        value="small"
+      />
+      <label for="small-1">Small</label>
+    </fieldset>
+  </div>
+  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left ds-u-margin-left--2">
+    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
+      <legend class="ds-c-label">Size variants</legend>
+      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
+      <input class="ds-c-choice" id="normal-2" type="radio" name="size-2" value="normal" checked />
+      <label for="normal-2">Normal</label>
+      <input
+        class="ds-c-choice ds-c-choice--small"
+        id="small-2"
+        type="radio"
+        name="size-2"
+        value="small"
+      />
+      <label for="small-2">Small</label>
+    </fieldset>
+  </div>
+</div>
diff --git a/packages/core/src/components/ChoiceList/checkbox-radio.example.html b/packages/core/src/components/ChoiceList/checkbox-radio.example.html
index cb122c0db9..e6b7631750 100644
--- a/packages/core/src/components/ChoiceList/checkbox-radio.example.html
+++ b/packages/core/src/components/ChoiceList/checkbox-radio.example.html
@@ -48,21 +48,9 @@
       Radio 1
       <span class="ds-c-field__hint">Choice hint text</span>
     </label>
-    <input
-      class="ds-c-choice"
-      id="radio-2"
-      type="radio"
-      name="radio-choices"
-      value="radio-2"
-    />
+    <input class="ds-c-choice" id="radio-2" type="radio" name="radio-choices" value="radio-2" />
     <label for="radio-2">Radio 2</label>
-    <input
-      class="ds-c-choice"
-      id="radio-3"
-      type="radio"
-      name="radio-choices"
-      value="radio-3"
-    />
+    <input class="ds-c-choice" id="radio-3" type="radio" name="radio-choices" value="radio-3" />
     <label for="radio-3">Radio 3</label>
   </fieldset>
   <fieldset class="ds-c-fieldset">
@@ -88,12 +76,8 @@
   <div class="example--wrapper example--inverse ds-u-margin-top--2">
     <fieldset class="ds-c-fieldset">
       <legend class="ds-c-label">Inverse example</legend>
-      <span class="ds-c-field__hint ds-c-field__hint--inverse"
-        >Helpful hint text</span
-      >
-      <span class="ds-c-field__hint ds-u-color--error-light"
-        >Error message example</span
-      >
+      <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
+      <span class="ds-c-field__hint ds-u-color--error-light">Error message example</span>
       <input
         class="ds-c-choice ds-c-choice--inverse"
         id="inverse =1"
diff --git a/packages/core/src/components/ChoiceList/select.example.html b/packages/core/src/components/ChoiceList/select.example.html
index ba52bb929a..f6adf282c1 100644
--- a/packages/core/src/components/ChoiceList/select.example.html
+++ b/packages/core/src/components/ChoiceList/select.example.html
@@ -15,11 +15,7 @@
       Helpful hint text
     </span>
   </label>
-  <select
-    class="ds-c-field ds-c-field--inverse"
-    name="options-inverse"
-    id="options-inverse"
-  >
+  <select class="ds-c-field ds-c-field--inverse" name="options-inverse" id="options-inverse">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
diff --git a/packages/core/src/components/DateField/DateField.example.html b/packages/core/src/components/DateField/DateField.example.html
deleted file mode 100644
index 5fcf814187..0000000000
--- a/packages/core/src/components/DateField/DateField.example.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<fieldset class="ds-c-fieldset">
-  <legend class="ds-c-label">
-    <span class="ds-u-font-weight--bold">Date of birth</span>
-    <span class="ds-c-field__hint">For example: 4 / 28 / 1986</span>
-  </legend>
-  <div class="ds-l-form-row ds-u-align-items--end">
-    <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="month"
-        >Month</label
-      >
-      <input
-        class="ds-c-field ds-c-field--month"
-        type="number"
-        min="1"
-        max="12"
-        id="month"
-        name="birthdate[month]"
-      />
-    </div>
-    <span class="ds-c-datefield__separator">/</span>
-    <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="day"
-        >Day</label
-      >
-      <input
-        class="ds-c-field ds-c-field--day"
-        type="number"
-        min="1"
-        max="31"
-        id="day"
-        name="birthdate[day]"
-      />
-    </div>
-    <span class="ds-c-datefield__separator">/</span>
-    <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="year"
-        >Year</label
-      >
-      <input
-        class="ds-c-field ds-c-field--year"
-        type="number"
-        min="1900"
-        max="2000"
-        id="year"
-        name="birthdate[year]"
-      />
-    </div>
-  </div>
-</fieldset>
diff --git a/packages/core/src/components/DateField/datefield.example.html b/packages/core/src/components/DateField/datefield.example.html
index 5fcf814187..46d64bc188 100644
--- a/packages/core/src/components/DateField/datefield.example.html
+++ b/packages/core/src/components/DateField/datefield.example.html
@@ -5,9 +5,7 @@
   </legend>
   <div class="ds-l-form-row ds-u-align-items--end">
     <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="month"
+      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month"
         >Month</label
       >
       <input
@@ -21,11 +19,7 @@
     </div>
     <span class="ds-c-datefield__separator">/</span>
     <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="day"
-        >Day</label
-      >
+      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="day">Day</label>
       <input
         class="ds-c-field ds-c-field--day"
         type="number"
@@ -37,11 +31,7 @@
     </div>
     <span class="ds-c-datefield__separator">/</span>
     <div class="ds-l-col--auto">
-      <label
-        class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1"
-        for="year"
-        >Year</label
-      >
+      <label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="year">Year</label>
       <input
         class="ds-c-field ds-c-field--year"
         type="number"
diff --git a/packages/core/src/components/Dropdown/Dropdown.example.html b/packages/core/src/components/Dropdown/dropdown.example.html
similarity index 81%
rename from packages/core/src/components/Dropdown/Dropdown.example.html
rename to packages/core/src/components/Dropdown/dropdown.example.html
index bbb20d355d..fdb985da02 100644
--- a/packages/core/src/components/Dropdown/Dropdown.example.html
+++ b/packages/core/src/components/Dropdown/dropdown.example.html
@@ -1,6 +1,4 @@
-<label class="ds-c-label ds-u-margin-top--0" for="options"
-  >Dropdown label</label
->
+<label class="ds-c-label ds-u-margin-top--0" for="options">Dropdown label</label>
 <select class="ds-c-field" name="options" id="options">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
@@ -17,11 +15,7 @@
       Helpful hint text
     </span>
   </label>
-  <select
-    class="ds-c-field ds-c-field--inverse"
-    name="options-inverse"
-    id="options-inverse"
-  >
+  <select class="ds-c-field ds-c-field--inverse" name="options-inverse" id="options-inverse">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
diff --git a/packages/core/src/components/FormLabel/form-label.example.html b/packages/core/src/components/FormLabel/form-label.example.html
index 2014be1831..131956efa5 100644
--- a/packages/core/src/components/FormLabel/form-label.example.html
+++ b/packages/core/src/components/FormLabel/form-label.example.html
@@ -1,8 +1,7 @@
 <label class="ds-c-label" for="number-field-id">
   Phone number
   <span class="ds-c-field__hint">
-    Optional. We'll use this number as a backup if we need to contact you about
-    your application.
+    Optional. We'll use this number as a backup if we need to contact you about your application.
   </span>
   <span class="ds-c-field__hint ds-u-color--error" role="alert">
     Please enter a valid phone number.
diff --git a/packages/core/src/components/HelpDrawer/help-drawer.example.html b/packages/core/src/components/HelpDrawer/help-drawer.example.html
index 8f807d9db6..3a34f40f30 100644
--- a/packages/core/src/components/HelpDrawer/help-drawer.example.html
+++ b/packages/core/src/components/HelpDrawer/help-drawer.example.html
@@ -1,15 +1,14 @@
 <div>
   <p>
     <strong>
-      Note: This is just an example of the HTML markup. See the React example
-      for a functioning example.
+      Note: This is just an example of the HTML markup. See the React example for a functioning
+      example.
     </strong>
   </p>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
   </p>
   <span class="ds-u-display--block">
     <a href="javascript:void(0);">Toggle the help drawer.</a>
@@ -19,10 +18,7 @@
       <div
         class="ds-u-fill--gray-lightest ds-u-padding--2 ds-u-display--flex ds-u-align-items--start"
       >
-        <h3
-          tabindex="0"
-          class="ds-u-text--lead ds-u-margin-y--0 ds-u-margin-right--2"
-        >
+        <h3 tabindex="0" class="ds-u-text--lead ds-u-margin-y--0 ds-u-margin-right--2">
           Help Drawer Title
         </h3>
         <button
@@ -38,13 +34,11 @@
     >
       <strong>An Explanation</strong>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
     </div>
     <div
@@ -55,11 +49,10 @@ <h4 class="ds-text ds-u-margin--0">Footer title</h4>
     </div>
   </div>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
 </div>
diff --git a/packages/core/src/components/Review/review.example.html b/packages/core/src/components/Review/review.example.html
index b1db830454..a1fbab486f 100644
--- a/packages/core/src/components/Review/review.example.html
+++ b/packages/core/src/components/Review/review.example.html
@@ -2,9 +2,7 @@
   class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"
 >
   <div class="ds-u-margin-right--2">
-    <h3
-      class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
+    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
       Name
     </h3>
     <div>Jane Doe</div>
@@ -17,9 +15,7 @@
   class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"
 >
   <div class="ds-u-margin-right--2">
-    <h3
-      class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
+    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
       Date of Birth
     </h3>
     <div>December 3, 1981</div>
@@ -32,9 +28,7 @@
   class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"
 >
   <div class="ds-u-margin-right--2">
-    <h3
-      class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
+    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
       States Lived
     </h3>
     <div>
diff --git a/packages/core/src/components/Spinner/spinner.example.html b/packages/core/src/components/Spinner/spinner.example.html
index e4cd54a827..689315e887 100644
--- a/packages/core/src/components/Spinner/spinner.example.html
+++ b/packages/core/src/components/Spinner/spinner.example.html
@@ -1,11 +1,3 @@
-<span
-  class="ds-c-spinner ds-c-spinner--small"
-  aria-valuetext="Loading"
-  role="progressbar"
-></span>
+<span class="ds-c-spinner ds-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span>
 <span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span>
-<span
-  class="ds-c-spinner ds-c-spinner--big"
-  aria-valuetext="Loading"
-  role="progressbar"
-></span>
+<span class="ds-c-spinner ds-c-spinner--big" aria-valuetext="Loading" role="progressbar"></span>
diff --git a/packages/core/src/components/StepList/steplist.example.html b/packages/core/src/components/StepList/steplist.example.html
index ebe9d87912..a6f7eb23be 100644
--- a/packages/core/src/components/StepList/steplist.example.html
+++ b/packages/core/src/components/StepList/steplist.example.html
@@ -4,10 +4,7 @@
       <div class="ds-c-step__content">
         <h2 class="ds-c-step__title">Choose a tax year</h2>
       </div>
-      <div
-        class="ds-c-step__actions"
-        aria-label="Primary actions for Choose a tax year"
-      >
+      <div class="ds-c-step__actions" aria-label="Primary actions for Choose a tax year">
         <div class="ds-c-step__completed-text">Completed</div>
         <a href="#step-1">
           Edit<span class="ds-u-visibility--screen-reader">
@@ -19,19 +16,12 @@ <h2 class="ds-c-step__title">Choose a tax year</h2>
     <li class="ds-c-step ds-c-step--current">
       <div class="ds-c-step__content ds-c-step__content--with-content">
         <h2 class="ds-c-step__title">Enter household details</h2>
-        <div
-          class="ds-c-step__description"
-          aria-label="Description for Enter household details"
-        >
-          Answer questions about who in your household qualifies for a premium
-          tax credit and information on each person, including date of birth,
-          location(s) they lived in for the year, and months of marketplace
-          coverage.
+        <div class="ds-c-step__description" aria-label="Description for Enter household details">
+          Answer questions about who in your household qualifies for a premium tax credit and
+          information on each person, including date of birth, location(s) they lived in for the
+          year, and months of marketplace coverage.
         </div>
-        <ol
-          class="ds-c-step__substeps"
-          aria-label="Secondary actions for Enter household details"
-        >
+        <ol class="ds-c-step__substeps" aria-label="Secondary actions for Enter household details">
           <li class="ds-c-substep">
             <div class="ds-c-substep__title">Overall household</div>
             <a href="#step-2a" class="ds-c-substep__edit">
@@ -48,10 +38,7 @@ <h2 class="ds-c-step__title">Enter household details</h2>
           </li>
         </ol>
       </div>
-      <div
-        class="ds-c-step__actions"
-        aria-label="Primary actions for Enter household details"
-      >
+      <div class="ds-c-step__actions" aria-label="Primary actions for Enter household details">
         <a href="#step-2" class="ds-c-button ds-c-button--primary">
           Resume<span class="ds-u-visibility--screen-reader">
             {" "} "Enter household details"
@@ -63,19 +50,13 @@ <h2 class="ds-c-step__title">Enter household details</h2>
       <div class="ds-c-step__content">
         <h2 class="ds-c-step__title">Review your information</h2>
       </div>
-      <div
-        class="ds-c-step__actions"
-        aria-label="Primary actions for Review your information"
-      />
+      <div class="ds-c-step__actions" aria-label="Primary actions for Review your information" />
     </li>
     <li class="ds-c-step">
       <div class="ds-c-step__content">
         <h2 class="ds-c-step__title">View premium results</h2>
       </div>
-      <div
-        class="ds-c-step__actions"
-        aria-label="Primary actions for View premium results"
-      />
+      <div class="ds-c-step__actions" aria-label="Primary actions for View premium results" />
     </li>
   </ol>
 </div>
diff --git a/packages/core/src/components/Tabs/tabs.example.html b/packages/core/src/components/Tabs/tabs.example.html
index 9578e92997..fa54521d00 100644
--- a/packages/core/src/components/Tabs/tabs.example.html
+++ b/packages/core/src/components/Tabs/tabs.example.html
@@ -36,14 +36,8 @@
     Communication preferences
   </a>
 </div>
-<div
-  class="ds-c-tabs__panel"
-  id="panel-profile"
-  aria-labelledby="tab-profile"
-  role="tabpanel"
->
-  Note: This is just an example of the HTML markup. See the React example for a
-  functioning example.
+<div class="ds-c-tabs__panel" id="panel-profile" aria-labelledby="tab-profile" role="tabpanel">
+  Note: This is just an example of the HTML markup. See the React example for a functioning example.
 </div>
 <div
   class="ds-c-tabs__panel"
diff --git a/packages/core/src/components/TextField/TextField.example.jsx b/packages/core/src/components/TextField/TextField.example.jsx
index 30b42e2fed..edfb277db8 100644
--- a/packages/core/src/components/TextField/TextField.example.jsx
+++ b/packages/core/src/components/TextField/TextField.example.jsx
@@ -11,18 +11,9 @@ ReactDOM.render(
       name="single_example"
       requirementLabel="Optional"
     />
-    <TextField
-      defaultValue="123"
-      label="Number field"
-      name="number_example"
-      type="number"
-    />
+    <TextField defaultValue="123" label="Number field" name="number_example" type="number" />
     <TextField label="Small size modifier" name="small_example" size="small" />
-    <TextField
-      label="Medium size modifier"
-      name="medium_example"
-      size="medium"
-    />
+    <TextField label="Medium size modifier" name="medium_example" size="medium" />
     <TextField
       errorMessage="Error message example"
       hint="Example of a multiline field with an error"
@@ -30,12 +21,7 @@ ReactDOM.render(
       multiline
       name="multiline_example"
     />
-    <TextField
-      label="Disabled field"
-      disabled
-      name="disabled_example"
-      value="Example value"
-    />
+    <TextField label="Disabled field" disabled name="disabled_example" value="Example value" />
     <TextField
       label="Password field"
       name="disabled_example"
diff --git a/packages/core/src/components/TextField/textfield.example.html b/packages/core/src/components/TextField/textfield.example.html
index a83a4f5ddf..cceff46676 100644
--- a/packages/core/src/components/TextField/textfield.example.html
+++ b/packages/core/src/components/TextField/textfield.example.html
@@ -11,27 +11,11 @@
 <label class="ds-c-label" for="input-number">
   Number field
 </label>
-<input
-  class="ds-c-field"
-  id="input-number"
-  name="number"
-  value="123"
-  type="number"
-/>
+<input class="ds-c-field" id="input-number" name="number" value="123" type="number" />
 <label class="ds-c-label" for="input-small">Small size modifier</label>
-<input
-  class="ds-c-field ds-c-field--small"
-  id="input-small"
-  name="tinysize"
-  type="text"
-/>
+<input class="ds-c-field ds-c-field--small" id="input-small" name="tinysize" type="text" />
 <label class="ds-c-label" for="input-medium">Medium size modifier</label>
-<input
-  class="ds-c-field ds-c-field--medium"
-  id="input-medium"
-  name="mediumsize"
-  type="text"
-/>
+<input class="ds-c-field ds-c-field--medium" id="input-medium" name="mediumsize" type="text" />
 <label class="ds-c-label" for="input-multiline">
   Multiline field
   <span class="ds-c-field__hint">Helpful hint text</span>
@@ -46,12 +30,7 @@
   rows="4"
 ></textarea>
 <label class="ds-c-label" for="input-success">Success field</label>
-<input
-  class="ds-c-field ds-c-field--success"
-  id="input-success"
-  name="success"
-  type="text"
-/>
+<input class="ds-c-field ds-c-field--success" id="input-success" name="success" type="text" />
 <label class="ds-c-label" for="input-disabled">
   Disabled field
 </label>
@@ -76,15 +55,8 @@
 <div class="example--inverse ds-u-margin-top--3">
   <label class="ds-c-label ds-u-margin-top--0" for="input-inverse">
     Inverse field
-    <span class="ds-c-field__hint ds-c-field__hint--inverse"
-      >Helpful hint text</span
-    >
+    <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
     <span class="ds-c-field__hint ds-u-color--error-light">Error message</span>
   </label>
-  <input
-    class="ds-c-field ds-c-field--inverse"
-    id="input-inverse"
-    name="inverse"
-    type="text"
-  />
+  <input class="ds-c-field ds-c-field--inverse" id="input-inverse" name="inverse" type="text" />
 </div>
diff --git a/packages/docs/src/pages/patterns/documentation-page.example.html b/packages/docs/src/pages/patterns/documentation-page.example.html
index 9d0483c7a6..e7ad684e21 100644
--- a/packages/docs/src/pages/patterns/documentation-page.example.html
+++ b/packages/docs/src/pages/patterns/documentation-page.example.html
@@ -1,9 +1,7 @@
 <main class="ds-base ds-l-container">
   <a class="ds-c-skip-nav" href="#content">Skip to main content</a>
   <div class="ds-l-row">
-    <aside
-      class="ds-u-margin-bottom--4 ds-u-md-margin-bottom--0 ds-l-md-col--4 ds-l-lg-col--3"
-    >
+    <aside class="ds-u-margin-bottom--4 ds-u-md-margin-bottom--0 ds-l-md-col--4 ds-l-lg-col--3">
       <ul class="ds-c-vertical-nav">
         <li class="ds-c-vertical-nav__item">
           <a class="ds-c-vertical-nav__label" href="javascript:void(0);">
@@ -45,34 +43,31 @@
     <article id="content" class="ds-l-md-col--8 ds-l-lg-col--9">
       <h1 class="ds-h1">Page heading (h1)</h1>
       <p class="ds-text--lead">
-        The page heading communicates the main focus of the page. Make your page
-        heading descriptive and keep it succinct.
+        The page heading communicates the main focus of the page. Make your page heading descriptive
+        and keep it succinct.
       </p>
       <h2 class="ds-h2" id="section-heading-h2">Section heading (h2)</h2>
       <p class="ds-text">
-        These headings introduce, respectively, sections and subsections within
-        your body copy. As you create these headings, follow the same guidelines
-        that you use when writing section headings: Be succinct, descriptive,
-        and precise.
+        These headings introduce, respectively, sections and subsections within your body copy. As
+        you create these headings, follow the same guidelines that you use when writing section
+        headings: Be succinct, descriptive, and precise.
       </p>
       <h3 class="ds-h3" id="section-heading-h3">Subsection heading (h3)</h3>
       <p class="ds-text">
-        The particulars of your body copy will be determined by the topic of
-        your page. Regardless of topic, it’s a good practice to follow the
-        inverted pyramid structure when writing copy: Begin with the information
-        that’s most important to your users and then present information of less
-        importance.
+        The particulars of your body copy will be determined by the topic of your page. Regardless
+        of topic, it’s a good practice to follow the inverted pyramid structure when writing copy:
+        Begin with the information that’s most important to your users and then present information
+        of less importance.
       </p>
       <p class="ds-text">
-        Keep each section and subsection focused — a good approach is to include
-        one theme (topic) per section.
+        Keep each section and subsection focused — a good approach is to include one theme (topic)
+        per section.
       </p>
       <h4 class="ds-h4" id="section-heading-h4">Subsection heading (h4)</h4>
       <p class="ds-text">
-        Use the vertical navigation menu to help your users quickly skip to
-        different sections of your page. The menu is best suited to displaying a
-        hierarchy with one to three levels and, as we mentioned, to display the
-        sub-navigation of a given page.
+        Use the vertical navigation menu to help your users quickly skip to different sections of
+        your page. The menu is best suited to displaying a hierarchy with one to three levels and,
+        as we mentioned, to display the sub-navigation of a given page.
       </p>
     </article>
   </div>