Run npm run format for all packages

Author: vine77

packages/design-system-website/foundations/Responsiveness.md

@@ -1,4 +1,4 @@
-## Overview
+## Mixins
 
 This system remains mostly unopinionated on responsive tools, but the `sass-variables` package contains a few mixins to help you customize your own styles based on the viewport width:
 
@@ -23,7 +23,7 @@ This system remains mostly unopinionated on responsive tools, but the `sass-vari
     } 
     ```
 
-### Breakpoint widths
+## Breakpoints
 
 The mixins respond to three sizes by default:
 
@@ -52,7 +52,7 @@ $breakpoints: (
 }
 ```
 
-### Which mixin should I use?
+## Which mixin should I use?
 
 The conventional wisdom of "mobile-first" design encourages designing at the smallest widths first, then progressively enhancing the design for larger sizes. This tends to improve the responsiveness of the design overall, since it forces a focus on multiple sizes from the beginning.
 

packages/react-components/source/react/library/alert/Alert.md

@@ -139,19 +139,19 @@ class CustomError extends Error {
 Errors of any valid type will be displayed automatically:
 
 ```jsx
-
 const extendedError = {
-  message: 'There\'s no reason to become alarmed',
+  message: "There's no reason to become alarmed",
   causes: [
     {
-      message: 'and we hope you\'ll enjoy the rest of your flight.',
+      message: "and we hope you'll enjoy the rest of your flight.",
       causes: [
         {
-          message: 'By the way, is there anyone on board who knows how to fly a plane?'
-        }
-      ]
+          message:
+            'By the way, is there anyone on board who knows how to fly a plane?',
+        },
+      ],
     },
-  ]
+  ],
 };
 
 <div>
@@ -162,31 +162,36 @@ const extendedError = {
     <Alert.Error error="The autopilot is deflating!" />
   </Alert>
   <Alert type="info" style={{ marginBottom: 5 }}>
-    <Alert.Error error={new Error('Looks like I picked the wrong week to quit sniffing glue.')} />
+    <Alert.Error
+      error={
+        new Error('Looks like I picked the wrong week to quit sniffing glue.')
+      }
+    />
   </Alert>
-</div>
+</div>;
 ```
 
 #### Cause sensitivity:
 
 A primary usecase for this meta-component is to automatically display API-generated errors. In this scenario it is likely that some errors returned as causes will be overly technical, and therefor not fit for display to end-users. To solve for this case, the Error alert will hide `causes` with a numerical `sensitivity` index that is greater than zero:
 
 ```jsx
-
 const extendedError = {
   message: 'Yo, your stuff is whack!',
   causes: [
     {
-      message: 'This is the reason for whackness we will display to the user, but there is more!',
+      message:
+        'This is the reason for whackness we will display to the user, but there is more!',
     },
     {
-      message: 'Jargony jargon jargon this is the technical reason why it is whack',
+      message:
+        'Jargony jargon jargon this is the technical reason why it is whack',
       sensitivity: 50,
-    }
-  ]
+    },
+  ],
 };
 
 <Alert type="danger">
   <Alert.Error error={extendedError} />
-</Alert>
+</Alert>;
 ```

packages/react-components/source/react/library/button-select/ButtonSelect.md

@@ -21,7 +21,7 @@ const options = [
     console.log('New Value:', value);
     setState({ value });
   }}
-/>
+/>;
 ```
 
 ## Types
@@ -281,5 +281,5 @@ const options = [
     setState({ value });
   }}
   width="100px"
-/>
+/>;
 ```

packages/react-components/source/react/library/colors/Colors.md

@@ -24,9 +24,7 @@ const colors = ['brand-primary', 'brand-secondary'];
 
 ## UI palette
 
-Code should always reference the Sass color variable (instead of directly referencing hex values). The variable definitions are located in [_palettes.scss](https://github.com/puppetlabs/design-system/blob/master/packages/sass-variables/_palettes.scss) in the `sass-variables` package, e.g. `$puppet-black`, `$puppet-n950`, etc.
-
-
+Code should always reference the Sass color variable (instead of directly referencing hex values). The variable definitions are located in [\_palettes.scss](https://github.com/puppetlabs/design-system/blob/master/packages/sass-variables/_palettes.scss) in the `sass-variables` package, e.g. `$puppet-black`, `$puppet-n950`, etc.
 
 ### Neutral colors
 

packages/react-components/source/react/library/content/Content.md

@@ -281,8 +281,7 @@ The `Content` component is a wrapper for simple HTML content, which provides def
         <li>
           <p>
             For more information on our curated step specifications, see{' '}
-            <a href="/documentation/step-specifications">Step specifications</a>
-            .
+            <a href="/documentation/step-specifications">Step specifications</a>.
           </p>
         </li>
         <li>

packages/react-components/source/react/library/form/Form.md

@@ -368,7 +368,6 @@ Field-level errors may be supplied in an object under the `items` key. The keys
 
 Here is an example custom error object, including both `causes` and `items`:
 
-
 ```js static
 {
   message: 'Top-level error message',

packages/react-components/source/react/library/icon/Icon.md

@@ -117,10 +117,7 @@ const Renderer = () => {
 
   return (
     <div className="rc-sg-wrapper">
-      <Icon
-        svg={customIcon.svg}
-        viewBox={customIcon.viewBox}
-      />
+      <Icon svg={customIcon.svg} viewBox={customIcon.viewBox} />
     </div>
   );
 };

packages/react-components/source/react/library/input/Input.md

@@ -59,6 +59,7 @@ const exampleStyle = { marginBottom: 10 };
   />
 </form>;
 ```
+
 ## Variations
 
 ### Simple
@@ -86,7 +87,7 @@ Optional leading icons may be added where needed to provide more immediate conte
 const exampleStyle = { marginBottom: 10 };
 
 <div>
-  <Input  
+  <Input
     name="input-ex11"
     value={state['input-ex11-value']}
     icon="search"

packages/react-components/source/react/library/link/Link.md

@@ -18,15 +18,19 @@ Consider these 3 states for links: hover, focused and pressed (similar to [Butto
 Primary inline links are blue (B500), to differentiate from the text around them. There are two sizes for inline links: The default size, and a small size.
 
 ```jsx
-<Link as="a" href="http://google.com" target="_blank">Primary Link</Link>
+<Link as="a" href="http://google.com" target="_blank">
+  Primary Link
+</Link>
 ```
 
 ### Secondary Links
 
 Secondary links use the color of the text around them. In order to meet WCAG AA 2.0 standards, the initial state must be underlined. Hover, focus, and pressed states are the same as blue inline links.
 
 ```jsx
-<Link type="secondary" as="a" href="http://google.com" target="_blank">Secondary Link</Link>
+<Link type="secondary" as="a" href="http://google.com" target="_blank">
+  Secondary Link
+</Link>
 ```
 
 ## Variations
@@ -38,7 +42,9 @@ This variation is a link that acts like a [Button](#/React%20Components/Button),
 ```jsx
 import Button from '../button';
 
-<Link as={Button} onClick={() => console.log('Clicked link as button')}>Link as Button</Link>
+<Link as={Button} onClick={() => console.log('Clicked link as button')}>
+  Link as Button
+</Link>;
 ```
 
 # Related

packages/react-components/source/react/library/loading/Loading.md

@@ -19,10 +19,18 @@ import Text from '../text';
 <table className="rc-loading-table">
   <thead>
     <tr>
-      <th><Text>Large (default)</Text></th>
-      <th><Text>Small</Text></th>
-      <th><Text>Tiny</Text></th>
-      <th><Text>Custom</Text></th>
+      <th>
+        <Text>Large (default)</Text>
+      </th>
+      <th>
+        <Text>Small</Text>
+      </th>
+      <th>
+        <Text>Tiny</Text>
+      </th>
+      <th>
+        <Text>Custom</Text>
+      </th>
     </tr>
   </thead>
   <tbody>
@@ -41,7 +49,7 @@ import Text from '../text';
       </td>
     </tr>
   </tbody>
-</table>
+</table>;
 ```
 
 ## Related

packages/react-components/source/react/library/modal/Modal.md

@@ -131,7 +131,9 @@ import Button from '../button';
 const [open, setOpen] = React.useState(false);
 
 <>
-  <Button onClick={() => setOpen(true)}>Open modal with right-aligned buttons</Button>
+  <Button onClick={() => setOpen(true)}>
+    Open modal with right-aligned buttons
+  </Button>
 
   {open && (
     <Modal onClose={() => setOpen(false)}>

packages/react-components/source/react/library/select/Select.md

@@ -41,6 +41,7 @@ const style = { margin: 10 };
   />
 </div>;
 ```
+
 ## Variations
 
 ### Autocomplete

packages/react-components/source/react/library/table/Table.md

@@ -193,16 +193,33 @@ A unique key can also be provided via a function:
 Use the `hideOverflow` flag if you want to hide long cell content with an ellipses. The flag only affects the column it is turned on for.
 
 <!-- prettier-ignore-start -->
+
 ```jsx
 const data = [
-  { id: 1, type: 'Lorem ipsum', passage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', characters: 123 },
+  {
+    id: 1,
+    type: 'Lorem ipsum',
+    passage:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    characters: 123,
+  },
   { id: 2, type: 'Cicero', passage: 'Sed ut perspiciatis', characters: 19 },
-  { id: 3, type: '1914', passage: 'But I must explain to you how all this mistaken idea', characters: 52 },
+  {
+    id: 3,
+    type: '1914',
+    passage: 'But I must explain to you how all this mistaken idea',
+    characters: 52,
+  },
 ];
 
 const columns = [
   { label: 'Types', dataKey: 'type' },
-  { label: 'Passage', dataKey: 'passage', style: { width: '50%'}, hideOverflow: true },
+  {
+    label: 'Passage',
+    dataKey: 'passage',
+    style: { width: '50%' },
+    hideOverflow: true,
+  },
   { label: 'Character Length', dataKey: 'characters' },
 ];
 

packages/react-components/source/react/library/tabs/Tabs.md

@@ -45,10 +45,12 @@ import Text from '../text';
     <Text>Whatever is nested inside the Tab become the Panel content.</Text>
   </Tabs.Tab>
   <Tabs.Tab title="Tab 3">
-    <Text>To change the default tab, set the activeTab prop on Tabs equal to the
-    desired Tab ID.</Text>
+    <Text>
+      To change the default tab, set the activeTab prop on Tabs equal to the
+      desired Tab ID.
+    </Text>
   </Tabs.Tab>
-</Tabs>
+</Tabs>;
 ```
 
 ## Controlled Mode