fix(core): improvements to documentation and button component (#150)

* fix(perf): clean up sass imports more * Update README.md * Update README.md * feat(tag): combine existing tag component with new status tag styles (#143) * add docs and scss boilerplate * feat(status-tag): Added status tag component * wip * combine tag and status tag components Co-authored-by: Jaye <joshua.hackett93@gmail.com> * add colour docs * add typography docs * fix links preview * chore(docs): added missing checkboxes component from the docs (#146) * Feature/safe preview area (#145) * wip * fix(docs): fix overlay z index * add a previewarea component to fix appearence issues in docs Co-authored-by: Jaye <joshua.hackett93@gmail.com> * fix(button): fixed size of secondary button (#149) * fix(button): fixed size of secondary button * chore(docs): fixed missing html tag in md code * chore(docs): improved docs markup (#148) * removed double spacing from classNames * prettified the docs Co-authored-by: Jaye Hackett <jaye.hackett@gmail.com> Co-authored-by: Jaye <joshua.hackett93@gmail.com> Co-authored-by: Luca Lischetti <luca@sirlisko.com>
LBHackney-IT · Mar 19, 2021 · acf2944 · acf2944
1 parent 4007e68
commit acf2944
Show file tree

Hide file tree

Showing 40 changed files with 2,226 additions and 1,625 deletions.
diff --git a/docs/components/accordion.md b/docs/components/accordion.md
@@ -2,14 +2,14 @@
 title: Accordion
 ---
 
-import InitAll from "../../src/InitAll"
+import PreviewArea from "../../src/PreviewArea"
 import Tabs from "@theme/Tabs"
 import TabItem from "@theme/TabItem"
 
-<InitAll>
+<PreviewArea>
 
   <div class="govuk-accordion myClass lbh-accordion" data-module="govuk-accordion" id="default-example" data-attribute="value">
-      <div class="govuk-accordion__section ">
+      <div class="govuk-accordion__section">
           <div class="govuk-accordion__section-header">
               <h5 class="govuk-accordion__section-heading">
                   <span class="govuk-accordion__section-button" id="default-example-heading-1">
@@ -23,7 +23,7 @@ import TabItem from "@theme/TabItem"
               </ul>
           </div>
       </div>
-      <div class="govuk-accordion__section ">
+      <div class="govuk-accordion__section">
           <div class="govuk-accordion__section-header">
               <h5 class="govuk-accordion__section-heading">
                   <span class="govuk-accordion__section-button" id="default-example-heading-2">
@@ -39,6 +39,8 @@ import TabItem from "@theme/TabItem"
       </div>
   </div>
 
+</PreviewArea>
+
 <Tabs
 defaultValue="html"
 values={[
@@ -55,7 +57,7 @@ values={[
   id="default-example"
   data-attribute="value"
 >
-  <div class="govuk-accordion__section ">
+  <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h5 class="govuk-accordion__section-heading">
         <span
@@ -76,7 +78,7 @@ values={[
       </ul>
     </div>
   </div>
-  <div class="govuk-accordion__section ">
+  <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h5 class="govuk-accordion__section-heading">
         <span
@@ -104,15 +106,15 @@ values={[
 <TabItem value="cra">
 
 ```jsx
-import { useEffect, useRef } from "react"
-import { Accordion } from "lbh-frontend"
+import { useEffect, useRef } from "react";
+import { Accordion } from "lbh-frontend";
 
 const MyAccordion = () => {
-  const ref = useRef(null)
+  const ref = useRef(null);
 
   useEffect(() => {
-    new Accordion(ref.current).init()
-  }, [])
+    new Accordion(ref.current).init();
+  }, []);
 
   return (
     <div
@@ -121,7 +123,7 @@ const MyAccordion = () => {
       data-attribute="value"
       ref={ref}
     >
-      <div className="govuk-accordion__section ">
+      <div className="govuk-accordion__section">
         <div className="govuk-accordion__section-header">
           <h5 className="govuk-accordion__section-heading">
             <span
@@ -142,7 +144,7 @@ const MyAccordion = () => {
           </ul>
         </div>
       </div>
-      <div className="govuk-accordion__section ">
+      <div className="govuk-accordion__section">
         <div className="govuk-accordion__section-header">
           <h5 className="govuk-accordion__section-heading">
             <span
@@ -164,27 +166,27 @@ const MyAccordion = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default MyAccordion
+export default MyAccordion;
 ```
 
 </TabItem>
 <TabItem value="next">
 
 ```jsx
-import { useEffect, useRef } from "react"
+import { useEffect, useRef } from "react";
 
 const MyAccordion = () => {
-  const ref = useRef(null)
+  const ref = useRef(null);
 
   useEffect(() => {
     if (window !== undefined) {
-      const Accordion = require("lbh-frontend").Accordion
-      new Accordion(ref.current).init()
+      const Accordion = require("lbh-frontend").Accordion;
+      new Accordion(ref.current).init();
     }
-  }, [])
+  }, []);
 
   return (
     <div
@@ -193,7 +195,7 @@ const MyAccordion = () => {
       data-attribute="value"
       ref={ref}
     >
-      <div className="govuk-accordion__section ">
+      <div className="govuk-accordion__section">
         <div className="govuk-accordion__section-header">
           <h5 className="govuk-accordion__section-heading">
             <span
@@ -214,7 +216,7 @@ const MyAccordion = () => {
           </ul>
         </div>
       </div>
-      <div className="govuk-accordion__section ">
+      <div className="govuk-accordion__section">
         <div className="govuk-accordion__section-header">
           <h5 className="govuk-accordion__section-heading">
             <span
@@ -236,14 +238,12 @@ const MyAccordion = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default MyAccordion
+export default MyAccordion;
 ```
 
 </TabItem>
 
 </Tabs>
-
-</InitAll>
diff --git a/docs/components/back-link.md b/docs/components/back-link.md
@@ -2,10 +2,10 @@
 title: Back link
 ---
 
-<a href="#" class="govuk-back-link  lbh-back-link">Back to home</a>
+<a href="#" class="govuk-back-link lbh-back-link">Back to home</a>
 
 ### HTML
 
 ```html
-<a href="#" class="govuk-back-link  lbh-back-link">Back to home</a>
+<a href="#" class="govuk-back-link lbh-back-link">Back to home</a>
 ```
diff --git a/docs/components/back-to-top.md b/docs/components/back-to-top.md
@@ -2,15 +2,11 @@
 title: Back to top
 ---
 
-import InitAll from "../../src/InitAll"
+import PreviewArea from "../../src/PreviewArea"
 
-<InitAll>
+<PreviewArea height="110px">
 
-<div id="main-content"></div>
-
-_Scroll below this point to see the preview_
-
-<a href="#main-content" class="lbh-back-to-top" data-module="lbh-back-to-top">
+<a href="#main-content" class="lbh-back-to-top lbh-back-to-top--visible" >
 <svg class="lbh-back-to-top__icon" width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <title>Back to top arrow icon</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1.000000, 1.000000)">
@@ -23,7 +19,7 @@ _Scroll below this point to see the preview_
   <span class="lbh-back-to-top__text">Back to top</span>
 </a>
 
-</InitAll>
+</PreviewArea>
 
 ## HTML
 

diff --git a/docs/components/breadcrumbs.md b/docs/components/breadcrumbs.md
@@ -2,7 +2,7 @@
 title: Breadcrumbs
 ---
 
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
@@ -16,7 +16,7 @@ title: Breadcrumbs
 ### HTML
 
 ```html
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
@@ -32,7 +32,7 @@ title: Breadcrumbs
 
 ## Breadcrumbs with one level
 
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
@@ -43,7 +43,7 @@ title: Breadcrumbs
 ### HTML
 
 ```html
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
@@ -54,7 +54,7 @@ title: Breadcrumbs
 
 ## Breadcrumbs with multiple levels
 
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -74,7 +74,7 @@ title: Breadcrumbs
 ### HTML
 
 ```html
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -100,7 +100,7 @@ title: Breadcrumbs
 
 ## Breadcrumbs without the home section
 
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/service-manual">Service Manual</a>
@@ -112,7 +112,7 @@ title: Breadcrumbs
 </div>
 
 ```html
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/service-manual"
@@ -130,7 +130,7 @@ title: Breadcrumbs
 
 ## Breadcrumbs with last breadcrumb as current page
 
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -143,7 +143,7 @@ title: Breadcrumbs
 </div>
 
 ```html
-<div class="govuk-breadcrumbs  lbh-breadcrumbs lbh-container">
+<div class="govuk-breadcrumbs lbh-breadcrumbs lbh-container">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -2,23 +2,40 @@
 title: Button
 ---
 
-import InitAll from "../../src/InitAll"
+import PreviewArea from "../../src/PreviewArea"
 
-<button class="govuk-button  lbh-button" data-module="govuk-button">
+<button class="govuk-button lbh-button" data-module="govuk-button">
   Save and continue
 </button>
 
 ### HTML
 
 ```html
-<button class="govuk-button  lbh-button" data-module="govuk-button">
+<button class="govuk-button lbh-button" data-module="govuk-button">
   Save and continue
 </button>
 ```
 
+## Button secondary
+
+<button class="govuk-button govuk-secondary lbh-button lbh-button--secondary" data-module="govuk-button">
+  Secondary button
+</button>
+
+### HTML
+
+```html
+<button
+  class="govuk-button govuk-secondary lbh-button lbh-button--secondary"
+  data-module="govuk-button"
+>
+  Secondary button
+</button>
+```
+
 ## Button disabled
 
-<button disabled="disabled" aria-disabled="true" class="govuk-button  lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
+<button disabled="disabled" aria-disabled="true" class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
   Disabled button
 </button>
 
@@ -28,7 +45,7 @@ import InitAll from "../../src/InitAll"
 <button
   disabled="disabled"
   aria-disabled="true"
-  class="govuk-button  lbh-button lbh-button--disabled govuk-button--disabled"
+  class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled"
   data-module="govuk-button"
 >
   Disabled button
@@ -37,7 +54,7 @@ import InitAll from "../../src/InitAll"
 
 ## Button link
 
-<a href="/" role="button" draggable="false" class="govuk-button  lbh-button" data-module="govuk-button">
+<a href="/" role="button" draggable="false" class="govuk-button lbh-button" data-module="govuk-button">
   Link button
 </a>
 
@@ -48,7 +65,7 @@ import InitAll from "../../src/InitAll"
   href="/"
   role="button"
   draggable="false"
-  class="govuk-button  lbh-button"
+  class="govuk-button lbh-button"
   data-module="govuk-button"
 >
   Link button
@@ -57,14 +74,14 @@ import InitAll from "../../src/InitAll"
 
 ## Button link disabled
 
-<a href="/" role="button" draggable="false" class="govuk-button  lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
+<a href="/" role="button" draggable="false" class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
   Disabled link button
 </a>
 
 ### HTML
 
-```
-<a href="/" role="button" draggable="false" class="govuk-button  lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
+```html
+<a href="/" role="button" draggable="false" class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled" data-module="govuk-button">
   Disabled link button
 </a>
 ```