fix(clayui.com): Downgrade gatsby-react-router-scroll@3.0.0 so hash l…

…ink anchors scroll to the right spot and add @reach/router@1.3.4 to remove peer dependency warning

See gatsbyjs/gatsby#25778 (comment)

fix(clayui.com): Linking CSS docs should take you to the right place

fix(clayui.com): Nav Toc should still be scrollable when the browser window is really short

clayui.com/content/docs/components/css-alerts.md

@@ -7,19 +7,19 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/alerts/'
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
--   [Colors](#colors)
-    -   [Non-standard colors](#non-standard-colors)
--   [Examples](#examples)
-    -   [Toast](#toast)
-    -   [Embedded](#embedded)
-    -   [Stripe](#stripe)
--   [Non-standard examples](#non-standard-examples)
-    -   [Alert Lists](#alert-lists)
--   [Additional Options](#additional-options)
-    -   [Mixed HTML Content](#mixed-html-content)
-    -   [Dismissible Alerts](#dismissible-alerts)
-    -   [Alert Notifications Absolute](#alert-notifications-absolute)
-    -   [Fixed Notifications](#fixed-notifications)
+-   [Colors](#css-colors)
+    -   [Non-standard Colors](#css-non-standard-colors)
+-   [Examples](#css-examples)
+    -   [Toast](#css-toast)
+    -   [Embedded](#css-embedded)
+    -   [Stripe](#css-stripe)
+-   [Non-standard Examples](#css-non-standard-examples)
+    -   [Alert Lists](#css-alert-lists)
+-   [Additional Options](#css-additional-options)
+    -   [Mixed HTML Content](#css-mixed-html-content)
+    -   [Dismissible Alerts](#css-dismissible-alerts)
+    -   [Alert Notifications Absolute](#css-alert-notifications-absolute)
+    -   [Fixed Notifications](#css-fixed-notifications)
 
 </div>
 </div>
@@ -28,7 +28,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/alerts/'
 	Don't forget to check <a href="https://www.w3.org/TR/wai-aria-practices/#alert">WAI-ARIA</a> accessibility pratices for alerts when writting your markup.
 </div>
 
-## Colors
+## Colors(#css-colors)
 
 Lexicon adopts in its design system the following colors below:
 
@@ -55,7 +55,7 @@ Lexicon adopts in its design system the following colors below:
 	</div>
 </div>
 
-### Non-standard colors
+### Non-standard Colors(#css-non-standard-colors)
 
 The colors below do not follow Lexicon standards but follow the idea of [​​satellite components](https://liferay.design/lexicon), Clay provides non-standard colors to give you more flexibility to build UI that belong to the product.
 
@@ -82,9 +82,9 @@ The colors below do not follow Lexicon standards but follow the idea of [​​s
 	</div>
 </div>
 
-## Examples
+## Examples(#css-examples)
 
-### Toast
+### Toast(#css-toast)
 
 This type of alert is specific for toast messages. These type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px, and the height can vary depending on the number of rows. It always has a close action.
 
@@ -215,7 +215,7 @@ This type of alert is specific for toast messages. These type of messages appear
 </div>
 ```
 
-### Embedded
+### Embedded(#css-embedded)
 
 Embedded alerts are meant for use in forms. Usually you will only need to use the information once. Its width depends on the width of the container it is placed in, always respecting the container margins to the content. The close action is not required for embedded alerts.
 
@@ -284,7 +284,7 @@ Embedded alerts are meant for use in forms. Usually you will only need to use th
 </div>
 ```
 
-### Stripe
+### Stripe(#css-stripe)
 
 Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert usually appears on "Save" action, communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
 
@@ -421,11 +421,11 @@ Stripe alerts are always placed below the last navigation element, either the he
 </div>
 ```
 
-## Non-standard examples
+## Non-standard Examples(#css-non-standard-examples)
 
 These examples are not included in the Lexicon design system but they are built using foundations and Lexicon core components, these components may belong to the product or application.
 
-### Alert Lists
+### Alert Lists(#css-alert-lists)
 
 <div class="sheet-example">
 	<ul class="alert-list">
@@ -694,9 +694,9 @@ These examples are not included in the Lexicon design system but they are built
 </ul>
 ```
 
-## Additional Options
+## Additional Options(#css-additional-options)
 
-### Mixed HTML Content
+### Mixed HTML Content(#css-mixed-html-content)
 
 All alerts accept HTML as their content. You can use the following modifiers:
 
@@ -724,7 +724,7 @@ All alerts accept HTML as their content. You can use the following modifiers:
 </div>
 ```
 
-### Dismissible Alerts
+### Dismissible Alerts(#css-dismissible-alerts)
 
 <div class="sheet-example">
 	<div class="alert alert-dismissible alert-success" role="alert">
@@ -754,7 +754,7 @@ All alerts accept HTML as their content. You can use the following modifiers:
 </div>
 ```
 
-### Alert Notifications Absolute
+### Alert Notifications Absolute(#css-alert-notifications-absolute)
 
 An absolute positioned container for placing alerts on the top right corner relative to `.alert-container`. Use this to create sticky positioned alerts with javascript, modifying the CSS property `transform: translateY();` or `margin-top` when `scrollY` reaches a specific threshold. This component should generally be placed at the top of the page for sticky alerts aligned at the top.
 
@@ -766,7 +766,7 @@ An absolute positioned container for placing alerts on the top right corner rela
 </div>
 ```
 
-### Fixed Notifications
+### Fixed Notifications(#css-fixed-notifications)
 
 A fixed positioned container for placing alerts on the top right corner of the page. This component can generally be placed anywhere on the page.
 

clayui.com/content/docs/components/css-application-bar.md

@@ -7,9 +7,8 @@ lexiconDefinition: 'https://liferay.design/lexicon/satellite-components/navigati
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
--   [Light](#light)
--   [Secondary](#secondary)
--   [Using Buttons](#using-buttons)
+-   [Dark](#css-dark)
+-   [Using Buttons](#css-using-buttons)
 
 </div>
 </div>
@@ -18,7 +17,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/satellite-components/navigati
     Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
 </div>
 
-## Default
+## Dark(#css-dark)
 
 <div class="sheet-example">
     <nav class="application-bar application-bar-dark navbar navbar-expand-md">
@@ -189,7 +188,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/satellite-components/navigati
 </nav>
 ```
 
-## Using Buttons
+## Using Buttons(#css-using-buttons)
 
 <div class="sheet-example">
     <nav class="application-bar application-bar-dark navbar navbar-expand-md">

clayui.com/content/docs/components/css-badges.md

@@ -7,11 +7,11 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/badges/'
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
--   [Variations](#variations)
--   [Pill badges](#pill-badges)
--   [Anchor](#anchor)
--   [Links inside](#links-inside)
--   [Text truncate](#text-truncate)
+-   [Variations](#css-variations)
+-   [Pill Badges](#css-pill-badges)
+-   [Anchor](#css-anchor)
+-   [Links Inside](#css-links-inside)
+-   [Text Truncate](#css-text-truncate)
 
 </div>
 </div>
@@ -20,7 +20,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/badges/'
 	Badge Sizes have been removed. Use the <a href="https://github.com/liferay/clay/blob/master/packages/clay-css/src/scss/mixins/_badges.scss#L19">clay-badge-size($map) mixin</a> to create custom badge sizes for your app.
 </div>
 
-## Variations
+## Variations(#css-variations)
 
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
@@ -85,7 +85,7 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 </span>
 ```
 
-## Pill badges
+## Pill Badges(#css-pill-badges)
 
 Use the `.badge-pill` modifier class to make badges more rounded.
 
@@ -150,7 +150,7 @@ Use the `.badge-pill` modifier class to make badges more rounded.
 </span>
 ```
 
-## Anchor
+## Anchor(#css-anchor)
 
 <div class="sheet-example">
 	<a class="badge badge-primary" href="#1">
@@ -164,7 +164,7 @@ Use the `.badge-pill` modifier class to make badges more rounded.
 </a>
 ```
 
-## Links inside
+## Links Inside(#css-links-inside)
 
 <div class="sheet-example">
 	<span class="badge badge-secondary badge-pill">
@@ -218,7 +218,7 @@ Use the `.badge-pill` modifier class to make badges more rounded.
 </span>
 ```
 
-## Text truncate
+## Text Truncate(#css-text-truncate)
 
 Wrap the text inside the `.text-truncate-inline` and `.text-truncate` modifier class.
 

clayui.com/content/docs/components/css-button-group.md

@@ -7,16 +7,16 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
--   [Examples](#examples)
--   [Split Button](#split-button)
--   [Button toolbar](#button-toolbar)
--   [Sizes](#sizes)
--   [Vertical variation](#vertical-variation)
+-   [Examples](#css-examples)
+-   [Split Button](#css-split-button)
+-   [Button Toolbar](#css-button-toolbar)
+-   [Sizes](#css-sizes)
+-   [Vertical Variation](#css-vertical-variation)
 
 </div>
 </div>
 
-## Examples
+## Examples(#css-examples)
 
 <div class="sheet-example">
 	<div class="btn-group" role="group">
@@ -34,7 +34,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 </div>
 ```
 
-## Split Button
+## Split Button(#css-split-button)
 
 <div class="sheet-example">
 	<div class="btn-group" role="group">
@@ -86,7 +86,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 </div>
 ```
 
-## Button toolbar
+## Button Toolbar(#css-button-toolbar)
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
@@ -152,7 +152,7 @@ Combine sets of button groups into button toolbars for more complex components.
 </div>
 ```
 
-## Sizes
+## Sizes(#css-sizes)
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
@@ -186,7 +186,7 @@ Instead of applying button sizing classes to every button in a group, just add `
 </div>
 ```
 
-## Vertical variation
+## Vertical Variation(#css-vertical-variation)
 
 <div class="sheet-example">
 	<div class="btn-group-vertical" role="group">

clayui.com/content/docs/components/css-buttons.md

@@ -7,12 +7,12 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
--   [Examples](#examples)
--   [Sizes](#sizes)
--   [Active state](#active-state)
--   [Disabled State](#disabled-state)
--   [Icons](#icons)
-    -   [With text button](#with-text-button)
+-   [Examples](#css-examples)
+-   [Sizes](#css-sizes)
+-   [Active state](#css-active-state)
+-   [Disabled State](#css-disabled-state)
+-   [Icons](#css-icons)
+    -   [With text button](#css-with-text-button)
 
 </div>
 </div>
@@ -21,7 +21,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 	Don't forget to check <a href="https://www.w3.org/TR/wai-aria-practices/#button">WAI-ARIA</a> accessibility pratices for buttons when writting your markup.
 </div>
 
-## Examples
+## Examples(#css-examples)
 
 <div class="sheet-example">
 	<button class="btn btn-primary" type="button">Primary</button>
@@ -43,7 +43,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 <button class="btn btn-link" type="button">Link</button>
 ```
 
-## Sizes
+## Sizes(#css-sizes)
 
 <div class="sheet-example">
 	<button class="btn btn-primary" type="button">Default</button>
@@ -71,7 +71,7 @@ Create block level buttons—those that span the full width of a parent—by add
 </button>
 ```
 
-## Active state
+## Active State(#css-active-state)
 
 Buttons will appear pressed when active. However, you can still force the same active appearance with `.active` (and include the `aria-pressed="true"` attribute) should you need to replicate the state programmatically.
 
@@ -85,7 +85,7 @@ Buttons will appear pressed when active. However, you can still force the same a
 <button class="active btn btn-secondary" type="button">Secondary</button>
 ```
 
-## Disabled State
+## Disabled State(#css-disabled-state)
 
 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
 
@@ -99,7 +99,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 <button class="btn btn-secondary" disabled="" type="button">Secondary</button>
 ```
 
-## Icons
+## Icons(#css-icons)
 
 Buttons can display icons instead of text. The icons, however, must be monospaced inside the button. Lexicon doesn't use buttons with text and icons or text and loading indicators. Icon buttons are used primarily in management bars. This button variation can be primary, secondary, or borderless type.
 
@@ -139,7 +139,7 @@ Try adding the modifier class `.btn-monospaced`.
 </button>
 ```
 
-### With text button
+### With Text Button(#css-with-text-button)
 
 This button type is only used in sites, outside of administration. The icon emphasizes and helps communicate the action. The label must match the icon's purpose.