chore: run format

.eslintrc.json

@@ -12,9 +12,7 @@
 		}
 	},
 	"extends": "liferay/react",
-	"plugins": [
-		"@typescript-eslint"
-	],
+	"plugins": ["@typescript-eslint"],
 	"rules": {
 		"@typescript-eslint/array-type": ["error", "generic"],
 		"@typescript-eslint/no-unused-vars": "error",

.github/ISSUE_TEMPLATE/Bug.md

@@ -10,7 +10,7 @@ Before making a bug, have you used the issue search functionality?
 
 -->
 
-- [ ] I have searched the [issues](https://github.com/liferay/clay/issues) of this repository and believe that this is not a duplicate.
+-   [ ] I have searched the [issues](https://github.com/liferay/clay/issues) of this repository and believe that this is not a duplicate.
 
 ## Is there an example you can provide via codesandbox.com?
 
@@ -20,7 +20,7 @@ Before making a bug, have you used the issue search functionality?
 
 ## Environment
 
-| Tech    | Version |
-| ------- | ------- |
-| Clay    | v?.?.?  |
-| React   |         |
+| Tech  | Version |
+| ----- | ------- |
+| Clay  | v?.?.?  |
+| React |         |

CONTRIBUTING.md

@@ -119,11 +119,11 @@ The header is mandatory and the scope of the header is optional.
 
 #### Type
 
-- **feat**: A new feature
-- **fix**: A bug fix
-- **docs**: Documentation-only changes
-- **refactor**: A code change that neither fixes a bug nor adds a feature
-- **chore**: Changes in the build process, auxiliary tools, libraries, tests or formatting
+-   **feat**: A new feature
+-   **fix**: A bug fix
+-   **docs**: Documentation-only changes
+-   **refactor**: A code change that neither fixes a bug nor adds a feature
+-   **chore**: Changes in the build process, auxiliary tools, libraries, tests or formatting
 
 #### Scope
 

lerna.json

@@ -1,6 +1,6 @@
 {
-  "lerna": "3.4.0",
-  "version": "3.0.0-alpha.1",
-  "npmClient": "yarn",
-  "useWorkspaces": true
+	"lerna": "3.4.0",
+	"version": "3.0.0-alpha.1",
+	"npmClient": "yarn",
+	"useWorkspaces": true
 }

next.clayui.com/README.md

@@ -1,13 +1,17 @@
 # clayui.com
+
 The main Clay site at clayui.com
 
 > Make sure that you have built clay-css package(running yarn lerna on root of monorepo) before run. If you don't did that you will miss some icons.
 
 ## Running in development:
+
 `yarn develop`
 
 ## Running in production mode:
+
 `yarn build`
 
 ## Serving production generated files:
-`yarn serve`
+
+`yarn serve`

next.clayui.com/content/blog/2019-06-20-clay-v3-beta.md

@@ -1,6 +1,6 @@
 ---
-title: "Clay v3-beta: Introduction the new React Components"
+title: 'Clay v3-beta: Introduction the new React Components'
 author: [matuzalemsteles]
 ---
 
-Coming soon...
+Coming soon...

next.clayui.com/content/docs/components/Panel.mdx

@@ -1,21 +1,20 @@
 ---
-title: "Panel"
-description: "Toggle content visibility using Panel."
-packageNpm: "@clayui/panel"
-
+title: 'Panel'
+description: 'Toggle content visibility using Panel.'
+packageNpm: '@clayui/panel'
 ---
 
 import {Panel} from '../../../src/components/clay/Panel';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
-- [API](#api)
-  - [ClayPanel](#claypanel)
-  - [ClayPanel.Body](#claypanel.body)
-  - [ClayPanel.Footer](#claypanel.footer)
-  - [ClayPanel.Group](#claypanel.group)
-  - [ClayPanel.Header](#claypanel.header)
+-   [API](#api)
+    -   [ClayPanel](#claypanel)
+    -   [ClayPanel.Body](#claypanel.body)
+    -   [ClayPanel.Footer](#claypanel.footer)
+    -   [ClayPanel.Group](#claypanel.group)
+    -   [ClayPanel.Header](#claypanel.header)
 
 </div>
 </div>
@@ -28,24 +27,26 @@ The Panel is a replacement for the old ClayCollapse in version 2.x, has the same
 
 ### ClayPanel
 
-<div>
-	[APITable "clay-panel/src/index.tsx"]
-</div>
+<div>[APITable "clay-panel/src/index.tsx"]</div>
 
 ### ClayPanel.Body
 
-<code class="list-api-item-type">Extends from {`React.HTMLAttributes<HTMLDivElement>`}</code>
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
 
 ### ClayPanel.Footer
 
-<code class="list-api-item-type">Extends from {`React.HTMLAttributes<HTMLDivElement>`}</code>
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>
 
 ### ClayPanel.Group
 
-<div>
-	[APITable "clay-panel/src/Group.tsx"]
-</div>
+<div>[APITable "clay-panel/src/Group.tsx"]</div>
 
 ### ClayPanel.Header
 
-<code class="list-api-item-type">Extends from {`React.HTMLAttributes<HTMLDivElement>`}</code>
+<code class="list-api-item-type">
+	Extends from {`React.HTMLAttributes<HTMLDivElement>`}
+</code>

next.clayui.com/content/docs/components/autocomplete.mdx

@@ -1,11 +1,14 @@
 ---
-title: "Autocomplete"
-description: "An autocomplete text field is an input that offers the user text suggestions while they type."
-packageNpm: "@clayui/autocomplete"
-sibling: "docs/components/forms/css-text-input-autocomplete.html"
+title: 'Autocomplete'
+description: 'An autocomplete text field is an input that offers the user text suggestions while they type.'
+packageNpm: '@clayui/autocomplete'
+sibling: 'docs/components/forms/css-text-input-autocomplete.html'
 ---
 
-import {AutocompleteWithLoadingState, AutocompleteWithDataProvider} from '../../../src/components/clay/Autocomplete';
+import {
+	AutocompleteWithLoadingState,
+	AutocompleteWithDataProvider,
+} from '../../../src/components/clay/Autocomplete';
 
 <div class="nav-toc-title">
 
@@ -16,37 +19,43 @@ import {AutocompleteWithLoadingState, AutocompleteWithDataProvider} from '../../
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
-- [Loading state](#loading-state)
-- [Data from outside](#data-from-outside)
-- [API](#api)
-  - [Autocomplete](#autocomplete)
-  - [Autocomplete.DropDown](#autocomplete.dropdown)
-  - [Autocomplete.Input](#autocomplete.input)
-  - [Autocomplete.Item](#autocomplete.item)
-  - [Autocomplete.LoadingIndicator](#autocomplete.loadingindicator)
+-   [Loading state](#loading-state)
+-   [Data from outside](#data-from-outside)
+-   [API](#api)
+    -   [Autocomplete](#autocomplete)
+    -   [Autocomplete.DropDown](#autocomplete.dropdown)
+    -   [Autocomplete.Input](#autocomplete.input)
+    -   [Autocomplete.Item](#autocomplete.item)
+    -   [Autocomplete.LoadingIndicator](#autocomplete.loadingindicator)
 
 </div>
 </div>
 
 ## Introduction
 
 <div class="clay-site-alert alert alert-warning">
-   Take a look at our <a href="https://storybook.clayui.com/?path=/story/clayautocomplete--with-low-level-apis-composition">Storybook</a> for more information about this component.
+	Take a look at our{' '}
+	<a href="https://storybook.clayui.com/?path=/story/clayautocomplete--with-low-level-apis-composition">
+		Storybook
+	</a>{' '}
+	for more information about this component.
 </div>
 
 <div class="clay-site-alert alert alert-info">
-	Check the <a href="https://liferay.design/lexicon/">Lexicon</a> <a href="https://liferay.design/lexicon/core-components/forms/text-input-variations/">Autocomplete Pattern</a> for a more in-depth look at the motivations and proper usage of this component.
+	Check the <a href="https://liferay.design/lexicon/">Lexicon</a>{' '}
+	<a href="https://liferay.design/lexicon/core-components/forms/text-input-variations/">
+		Autocomplete Pattern
+	</a>{' '}
+	for a more in-depth look at the motivations and proper usage of this
+	component.
 </div>
 
 Autocomplete provides the necessary components for you to compose with the other components, **by itself it does not do much**, you need to use the `<ClayDropDown />` along with `<Autocomplete.DropDown />` and `<Autocomplete.Item />` to create the suggestions.
 
 ```jsx
 <ClayAutocomplete.DropDown>
 	<ClayDropDown.ItemList>
-		<ClayAutocomplete.Item
-			match="cl"
-			value="clay"
-		/>
+		<ClayAutocomplete.Item match="cl" value="clay" />
 	</ClayDropDown.ItemList>
 </ClayAutocomplete.DropDown>
 ```
@@ -62,11 +71,7 @@ If you already have the raw data, it is becomes simpler to create an autocomplet
 	<ClayAutocomplete.DropDown active={showDropDown}>
 		<ClayDropDown.ItemList>
 			{resourceFiltered.map(item => (
-				<ClayAutocomplete.Item
-					key={item}
-					match={value}
-					value={item}
-				/>
+				<ClayAutocomplete.Item key={item} match={value} value={item} />
 			))}
 		</ClayDropDown.ItemList>
 	</ClayAutocomplete.DropDown>
@@ -94,15 +99,11 @@ For cases where you do not have all the data in the client and need to pass the
 
 ### Autocomplete
 
-<div>
-	[APITable "clay-autocomplete/src/index.tsx"]
-</div>
+<div>[APITable "clay-autocomplete/src/index.tsx"]</div>
 
 ### Autocomplete.DropDown
 
-<div>
-	[APITable "clay-autocomplete/src/DropDown.tsx"]
-</div>
+<div>[APITable "clay-autocomplete/src/DropDown.tsx"]</div>
 
 ### Autocomplete.Input
 
@@ -112,12 +113,8 @@ For cases where you do not have all the data in the client and need to pass the
 
 `ClayAutocomplete.Item` is a wrapper around `ClayDropDown.Item` but also underlines the bold characters that are matched. Feel free to create your own match rule using `ClayDropDown.Item`'s API.
 
-<div>
-	[APITable "clay-autocomplete/src/Item.tsx"]
-</div>
+<div>[APITable "clay-autocomplete/src/Item.tsx"]</div>
 
 ### Autocomplete.LoadingIndicator
 
-<div>
-	[APITable "clay-autocomplete/src/LoadingIndicator.tsx"]
-</div>
+<div>[APITable "clay-autocomplete/src/LoadingIndicator.tsx"]</div>

next.clayui.com/content/docs/components/badge.mdx

@@ -1,22 +1,27 @@
 ---
-title: "Badges"
-description: "Badges help highlight important information, such as notifications or new and unread messages."
-packageNpm: "@clayui/badge"
-sibling: "docs/components/css-badges.html"
+title: 'Badges'
+description: 'Badges help highlight important information, such as notifications or new and unread messages.'
+packageNpm: '@clayui/badge'
+sibling: 'docs/components/css-badges.html'
 ---
 
 import {Badge} from '../../../src/components/clay/Badge';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
-- [API](#api)
+-   [API](#api)
 
 </div>
 </div>
 
 <div class="clay-site-alert alert alert-info">
-	Check the <a href="https://liferay.design/lexicon/">Lexicon</a> <a href="https://liferay.design/lexicon/core-components/badges/">Badges Pattern</a> for a more in-depth look at the motivations and proper usage of this component.
+	Check the <a href="https://liferay.design/lexicon/">Lexicon</a>{' '}
+	<a href="https://liferay.design/lexicon/core-components/badges/">
+		Badges Pattern
+	</a>{' '}
+	for a more in-depth look at the motivations and proper usage of this
+	component.
 </div>
 
 Badges can be used with the following colors:
@@ -26,11 +31,10 @@ Badges can be used with the following colors:
 We recommend that you review the use cases in the <a href="https://storybook-clayui.netlify.com/?path=/story/claybadge--default">Storybook</a>.
 
 <div class="clay-site-alert alert alert-warning">
-    Badges are not used for non-numeric values. If you have a non-numeric value, use labels instead.
+	Badges are not used for non-numeric values. If you have a non-numeric value,
+	use labels instead.
 </div>
 
 ### API
 
-<div>
-    [APITable "clay-badge/src/index.tsx"]
-</div>
+<div>[APITable "clay-badge/src/index.tsx"]</div>