Revert prettier config changes

Author: Andrey Okonetchnikov

.prettierrc

@@ -6,10 +6,10 @@
     {
       "files": "*.md",
       "options": {
-        "printWidth": 80,
+        "printWidth": 70,
         "useTabs": false,
         "trailingComma": "none",
-        "proseWrap": "always"
+        "proseWrap": "never"
       }
     }
   ]

docs/Foundation.md

@@ -1,11 +1,6 @@
-Colors, spacing, and typography are the building blocks of the design system and
-are often referred to as design tokens. Design tokens are named entities that
-store visual design attributes.
+Colors, spacing, and typography are the building blocks of the design system and are often referred to as design tokens. Design tokens are named entities that store visual design attributes.
 
-Those values are accessible in the app via
-[ThemeProvider](https://github.com/component-driven/component-driven-development/blob/master/src/ThemeProvider.js)
-and the `theme` object. To ensure consistency, always use values from the
-`theme` object, instead of hardcoded values.
+Those values are accessible in the app via [ThemeProvider](https://github.com/component-driven/component-driven-development/blob/master/src/ThemeProvider.js) and the `theme` object. To ensure consistency, always use values from the `theme` object, instead of hardcoded values.
 
 For example:
 
@@ -20,9 +15,7 @@ const Message = styled.p`
 `;
 ```
 
-_Prefer_ the [Text](/#/Primitives?id=text) and
-[Heading](/#/Primitives?id=heading) components to render any text inside the
-app:
+_Prefer_ the [Text](/#/Primitives?id=text) and [Heading](/#/Primitives?id=heading) components to render any text inside the app:
 
 ```diff
 - const Small = styled.p`
@@ -33,6 +26,4 @@ app:
 + <Text variant="secondary">Oh dear! Oh dear! I shall be late!</Text>
 ```
 
-Check out the
-[theme.js](https://github.com/component-driven/component-driven-development/blob/master/src/theme.js)
-file for all available design tokens.
+Check out the [theme.js](https://github.com/component-driven/component-driven-development/blob/master/src/theme.js) file for all available design tokens.

src/components/patterns/Hero/Hero.md

@@ -6,7 +6,9 @@ import Heading from '../../primitives/Heading';
   backgroundImage="url(https://source.unsplash.com/TBw3iQGdwbg/1000x600)"
   py={6}
 >
-  <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
+  <Heading level={2}>
+    The quick brown fox jumps over the lazy dog
+  </Heading>
 </Hero>;
 ```
 
@@ -60,13 +62,21 @@ import Text from '../../primitives/Text';
 import { Inverted } from '../../../ThemeProvider';
 <Inverted>
   <Hero backgroundImage="url(https://source.unsplash.com/cGlac7MEyiE/1000x600)">
-    <Flex justifyContent={['center', 'space-between']} flexWrap="wrap">
+    <Flex
+      justifyContent={['center', 'space-between']}
+      flexWrap="wrap"
+    >
       <Box width={[1, 'auto']} mb={2}>
         <Text as="h1">
           <Link href="/">Rent-o-dog</Link>
         </Text>
       </Box>
-      <Stack justifyContent="center" gridAutoFlow="column" gridGap={4} mb={2}>
+      <Stack
+        justifyContent="center"
+        gridAutoFlow="column"
+        gridGap={4}
+        mb={2}
+      >
         <Text>
           <Link href="/">Our dogs</Link>
         </Text>
@@ -82,7 +92,11 @@ import { Inverted } from '../../../ThemeProvider';
       <Heading level={2} size="xl" mb={5}>
         The quick black fox jumps over the lazy dog
       </Heading>
-      <Stack justifyContent="center" gridAutoFlow="column" girdGap={4}>
+      <Stack
+        justifyContent="center"
+        gridAutoFlow="column"
+        girdGap={4}
+      >
         <Button variant="primary">Try now</Button>
         <Button variant="secondary">Try later</Button>
       </Stack>

src/components/patterns/Rating/Rating.md

@@ -1,5 +1,4 @@
-Rating should be used when we want to promote a specific piece of content in
-order to democratically help decide what content is of higher quality.
+Rating should be used when we want to promote a specific piece of content in order to democratically help decide what content is of higher quality.
 
 ```js
 <Rating value={1} />

src/components/patterns/Readme.md

@@ -1,11 +1,7 @@
-User Interface Design patterns are recurring solutions that solve common design
-problems. Design patterns are standard reference points for the experienced user
-interface designer.
+User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.
 
-With the component-driven approach now we can also encapsulate design solutions
-into code and to deliver consistent user experience much faster!
+With the component-driven approach now we can also encapsulate design solutions into code and to deliver consistent user experience much faster!
 
-UI patterns oftentime have a structure that defined the problem, shows examples
-of the solution, and provides guidance on the usage.
+UI patterns oftentime have a structure that defined the problem, shows examples of the solution, and provides guidance on the usage.
 
 For the simplcity, in this demo app we have just a few UI patterns.

src/components/patterns/SubscriptionForm/SubscriptionForm.md

@@ -1,8 +1,6 @@
-Subscription form should be used to gather emails of users who are interested in
-the newlestter.
+Subscription form should be used to gather emails of users who are interested in the newlestter.
 
-The component implements different states that can be activated during the
-process.
+The component implements different states that can be activated during the process.
 
 ### Normal
 

src/components/primitives/Box/Box.md

@@ -1,10 +1,8 @@
-Box is the simplest _layout primitive_. By default it renders a `div` element
-but you can specify the HTML tag using `as` prop.
+Box is the simplest _layout primitive_. By default it renders a `div` element but you can specify the HTML tag using `as` prop.
 
 Box allows controlling its whitespace, layout, colors, etc. using design tokens.
 
-Following example should render a `div` that has `width: 25%`, `padding`,
-`margin`, and `background-color` values set.
+Following example should render a `div` that has `width: 25%`, `padding`, `margin`, and `background-color` values set.
 
 ```jsx harmony
 <Box p={4} m={3} width={1 / 4} bg="muted">

src/components/primitives/Card/Card.md

@@ -1,9 +1,6 @@
-Card component is a component that renders an image, a body and a footer with a
-specific layout.
+Card component is a component that renders an image, a body and a footer with a specific layout.
 
-By using subcomponents `Card.Cover`, `Card.Body` and `Card.Footer` users can
-create different kinds of card for different use cases, because all
-subcomponents are optional and the card look good with any combination of them.
+By using subcomponents `Card.Cover`, `Card.Body` and `Card.Footer` users can create different kinds of card for different use cases, because all subcomponents are optional and the card look good with any combination of them.
 
 ```jsx harmony
 import Box from '../Box';

src/components/primitives/Readme.md

@@ -1,5 +1,4 @@
-Primitives are building blocks of your application. Since primitives can be used
-anywhere in the UI they should be agnostic of their environment.
+Primitives are building blocks of your application. Since primitives can be used anywhere in the UI they should be agnostic of their environment.
 
 This means primitives:
 

src/components/primitives/Stack/Stack.md

@@ -10,8 +10,7 @@ import Button from '../Button';
 </Stack>;
 ```
 
-Since Stack is based on [Grid](/#/Primitives?id=grid), all of `Grid` props are
-available:
+Since Stack is based on [Grid](/#/Primitives?id=grid), all of `Grid` props are available:
 
 ```javascript
 import Button from '../Button';

src/exercises/1-Introduction/Readme.md

@@ -2,28 +2,19 @@ In this exercise we’ll learn basics of React Styleguidist.
 
 ## 1.1. Exploring React Styleguidist
 
-[React Styleguidist](https://react-styleguidist.js.org/) is a tool we’re using
-as a workbench to develop components, and to generate a style guide.
+[React Styleguidist](https://react-styleguidist.js.org/) is a tool we’re using as a workbench to develop components, and to generate a style guide.
 
 ### The task
 
-1. Explore React Styleguidist interface, try to switch to isolated mode (a
-   button in the top right corner), try to edit code of the examples in the
-   browser.
+1. Explore React Styleguidist interface, try to switch to isolated mode (a button in the top right corner), try to edit code of the examples in the browser.
 
-2. Edit examples in the `Button.md` file, add a new example. See how examples in
-   the browser update.
+2. Edit examples in the `Button.md` file, add a new example. See how examples in the browser update.
 
-3. Edit a component source in the `Button.js` file. See how all examples update
-   every time you save a file.
+3. Edit a component source in the `Button.js` file. See how all examples update every time you save a file.
 
-4. Edit component’s `PropTypes` definition. See how “Props & methods” section
-   reacts to the updates.
+4. Edit component’s `PropTypes` definition. See how “Props & methods” section reacts to the updates.
 
-5. Add a new component and an example Markdown file in the
-   `src/exercises/1-Introduction` folder (both, `.js` and `.md`, files should
-   have the same name) and see how it’s automatically added to the style guide
-   (restart the style guide if the new component doesn’t appear).
+5. Add a new component and an example Markdown file in the `src/exercises/1-Introduction` folder (both, `.js` and `.md`, files should have the same name) and see how it’s automatically added to the style guide (restart the style guide if the new component doesn’t appear).
 
 <details>
  <summary>Solution</summary>

src/exercises/2-Design_Tokens/Readme.md

@@ -2,27 +2,17 @@ In this exercise we’ll learn basics of React Styleguidist.
 
 ## 2.1. What are design tokens?
 
-Design tokens are the single source of truth for project’s colors, whitespace,
-font styles and other design decisions.
+Design tokens are the single source of truth for project’s colors, whitespace, font styles and other design decisions.
 
-We’ve prepared the basic structure for the design tokens file. Open the
-`theme.js` in the exercise directory (`src/exercises/2-Design_Tokens/theme.js`).
+We’ve prepared the basic structure for the design tokens file. Open the `theme.js` in the exercise directory (`src/exercises/2-Design_Tokens/theme.js`).
 
 ### The task
 
-1. Add a few colors to the `theme.js` and see how the style guide going to
-   render them.
-1. Add a palette of grey colors to the `colors` object (_hint_: Use `Array` for
-   that).
-1. Change spacing scale to see how swatches react to this change. Continue with
-   other values.
-1. Update design tokens to fit our design
-   (https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=1%3A2
-   &
-   https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=1%3A40)
-1. Check out
-   [design tokens](https://cdds.netlify.com/styleguide/#/Foundation?id=colors)
-   from the final style guide.
+1. Add a few colors to the `theme.js` and see how the style guide going to render them.
+1. Add a palette of grey colors to the `colors` object (_hint_: Use `Array` for that).
+1. Change spacing scale to see how swatches react to this change. Continue with other values.
+1. Update design tokens to fit our design (https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=1%3A2 & https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=1%3A40)
+1. Check out [design tokens](https://cdds.netlify.com/styleguide/#/Foundation?id=colors) from the final style guide.
 
 ## Colors