feat: adding frontend website with Automation

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,93 @@
+# Quantum Frontend
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### PRE-REQUISITS
+This project generates a component using scripts.
+To ensure you can run the project and scripts please install the following scripts: 
+
+install all dependencies (Storybook, Figma-API and Docusaurus)
+```
+$ npm i
+```
+
+install jq to allow scripts to run 
+```
+ $ brew install jq
+
+```
+
+make sure your component details exist in the following figma link: 
+```
+https://www.figma.com/file/vIqNb3g23SIGRiYUUDf5yE/Quantum-Documentation-site
+```
+
+
+make sure you create your component story including a Docx file
+
+
+
+### Retrieving Figma component
+from the url 
+```
+https://www.figma.com/file/vIqNb3g23SIGRiYUUDf5yE/Quantum-Documentation-site
+```
+
+1. Click Content page
+2. Find component requested e.g button 
+3. Click the component.
+4. Ensure the border surrounds the whole column of the document. 
+    - an easy way to see it is if the left nav bar is on the highest level "Speficification". 
+    - this is to ensure that the node_id for the component is the whole speficiation for the component in question and not one of the subdirectories
+5. on the top right corner of the page click the share button 
+6. on the popup; select Copy Link
+
+### Local Development
+There are 3 parts to the local development of this site: 
+
+to run the project use the script
+
+#### 1. Add component
+use the appropriate script for Adding a specific component or a component group
+1. for component
+```
+npm run add-component "component_name_without_spaces"
+```
+
+2. for component-group 
+```
+npm run add-component-group "component_name_without_spaces"
+```
+
+Requirements: 
+- component name (this is the component name with spaces)
+- position (where the component will appear on the left navigation) [to be investigated further]
+- storybook component Name. (the folder name for the storybook component)
+- figma url (copied from the Retrieving Figma Component above)
+
+The script can take some time. 
+
+
+#### 2. Update components figma screenshots
+run the script 
+ ```
+npm run update-screenshoots
+```
+
+This will take some time.
+
+#### 3. Update styles
+use the components in the following folders to update the styles: 
+- /src/components
+- /src/css
+
+for the left navigation menu use the following
+ - sidebar.ts
+
+ and the documentation avaialable here: https://docusaurus.io/docs/sidebar
+
+
+
+### Deployment 
+
+TBD

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
+}

website/componentsJSON.json

@@ -0,0 +1,7 @@
+[
+  {
+    "name": "accordion",
+    "node_id": "142:102698",
+    "figma_url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/95d637f8-9708-46db-81d1-baaf3c2c1cfd"
+  }
+]

website/docs/componentGroups/_category_.json

@@ -0,0 +1,11 @@
+{
+    "label": "Component groups",
+     "position": 4,
+     "link": {
+       "type": "generated-index",
+       "title": "Component groups"
+     },
+     "customProps":{
+       "description": "A list of all component Groups available"
+     }
+   }

website/docs/components/_category_.json

@@ -0,0 +1,11 @@
+{
+    "label": "Components",
+     "position": 3,
+     "link": {
+       "type": "generated-index",
+       "title": "Components"
+     },
+     "customProps":{
+       "description": "A list of all component available"
+     }
+   }

website/docs/components/accordion/code.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import { Pages } from '../../../src/components/enums'
+import componentJSON from '../../../componentsJSON.json'
+import { Button } from '@nearform/quantum'
+
+/*
+    this line needs to be fixed either. 
+    1. Import the component directly from the story and get it working
+     or use an iframe pointing at the live url
+     (this will require a double deployment for new components
+      as the url won't exist on the first deployment )
+      //import %STORYBOOK%stories from '../../../../stories/%STORYBOOK%/Docs.mdx'
+*/
+
+interface ComponentDetails {
+  name: string
+  node_id: string
+  figma_url: string
+}
+
+const DocusaurusComponent = () => {
+  const [selected, setSelected] = useState(Pages.overview)
+  const components: ComponentDetails[] = componentJSON
+  const componentDescription = components.find(
+    comp => comp.name === 'accordion'
+  )
+
+  return (
+    <>
+      <div>
+        <Button
+          disabled={selected == Pages.overview}
+          onClick={() => setSelected(Pages.overview)}
+        >
+          Overview
+        </Button>
+        <Button
+          disabled={selected == Pages.react}
+          onClick={() => setSelected(Pages.react)}
+        >
+          React
+        </Button>
+      </div>
+      <div>
+        {selected === Pages.overview ? (
+          <img src={componentDescription.figma_url} />
+        ) : (
+          <div>{/* <ButtonStory /> */}</div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default DocusaurusComponent

website/docs/components/accordion/index.mdx

@@ -0,0 +1,19 @@
+---
+title: accordion
+sidebar_position: 1
+---
+
+# accordion
+
+This is an accordion
+
+import DocusaurusComponent from './code'
+
+
+<DocusaurusComponent />
+
+
+
+
+
+

website/docs/foundations/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Foundations",
+    "position": 2,
+    "link": {
+      "type": "generated-index",
+      "description": "The foundations behind each component"
+    }
+  }

website/docs/foundations/colour.mdx

@@ -0,0 +1,21 @@
+# Colour
+
+<div className="main-content-header">
+The Quantum colour system allows for clear defintions between functional elements with a focus on upholding  accessibility standards across light and dark mode. 
+
+</div>
+
+
+## Base colour
+
+The Base colour set forms a full colour palette made up 10 shades of 10 colours base colours provide colour values that are used by our alias colour variables, which are then assigned to our component styles, and other UI elements (Backgrounds, borders, text etc).
+
+*Note* - Base colours are never applied directly to style components and UI elements.
+
+[Add colours here]
+
+## Alias colours 
+
+The Alias colours are a set of colour tokens that inherit values from the base colours, establishing light and dark mode colours that can be applied directly to background and border properties of components, test and other UI elements.
+
+[TBA Colour Alias info]

website/docs/foundations/typography.mdx

@@ -0,0 +1,17 @@
+# Typography
+
+<div className="main-content-header">
+The Quantum typography system allows for clear defintions of the used font-family the levels of heading and the size, style of each component text. 
+</div>
+
+
+ <div className="figma-container">
+  <iframe
+    allowFullScreen
+    className="figma-iframe"
+    width="960"
+    height="3998"
+    title="Figma Design"
+    src="https://www.figma.com/embed?embed_host=astra&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FvIqNb3g23SIGRiYUUDf5yE%2FQuantum-Documentation-site%3Ftype%3Ddesign%26node-id%3D58%253A4164%26mode%3Ddesign%26t%3DJdFgPNiLCKfKYGbD-1"
+  />
+</div>

website/docs/intro.md

@@ -0,0 +1,10 @@
+---
+sidebar_position: 1
+---
+
+# Get started
+
+Welcome to Quantum. This guide will help you to get up and running in no time.
+_______________________________________________________________________________
+
+Content TBC.