diff --git a/site/gatsby-browser.js b/site/gatsby-browser.js index 0b19a0c6..656de9db 100644 --- a/site/gatsby-browser.js +++ b/site/gatsby-browser.js @@ -1,4 +1,11 @@ +import React from 'react'; + import { ThemeProvider } from './src/components/Theme'; import './src/styles/global.css'; +import { BrowserRouter } from 'react-router-dom'; -export const wrapRootElement = ({ element }) => {element}; +export const wrapRootElement = ({ element }) => ( + + {element} + +); diff --git a/site/src/.prettierrc b/site/src/.prettierrc new file mode 100644 index 00000000..646b17cc --- /dev/null +++ b/site/src/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": true, + "tabWidth": 2, + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none" +} diff --git a/site/src/components/Dropdown/index.js b/site/src/components/Dropdown/index.js index 57ff31a4..39f881ed 100644 --- a/site/src/components/Dropdown/index.js +++ b/site/src/components/Dropdown/index.js @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { React, useState } from 'react'; import Sidebar from '../Sidebar'; const Dropdown = () => { diff --git a/site/src/components/Footer/index.js b/site/src/components/Footer/index.js index 0684c6db..26e4e138 100644 --- a/site/src/components/Footer/index.js +++ b/site/src/components/Footer/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Footer = () => { return (
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js index b92cbceb..69c12b5b 100644 --- a/site/src/components/Navigation/index.js +++ b/site/src/components/Navigation/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + import { useContext } from 'react'; import Search from '../../assets/images/Search.svg'; import SearchDark from '../../assets/images/SearchDark.svg'; diff --git a/site/src/components/Sidebar/index.js b/site/src/components/Sidebar/index.js index 97a59a3f..ce978a82 100644 --- a/site/src/components/Sidebar/index.js +++ b/site/src/components/Sidebar/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + import { useState } from 'react'; import { Link } from 'react-router-dom'; import ChevronLightUp from '../../assets/images/Chevron-light-up.svg'; diff --git a/site/src/pages/components/index.js b/site/src/pages/components/index.js index 19b93656..2f1c4c61 100644 --- a/site/src/pages/components/index.js +++ b/site/src/pages/components/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Components = () => { return
Components
; }; diff --git a/site/src/pages/home/index.js b/site/src/pages/home/index.js index 176ee364..d1bba97f 100644 --- a/site/src/pages/home/index.js +++ b/site/src/pages/home/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Home = () => { return
Home
; }; diff --git a/site/src/pages/identity/Content.js b/site/src/pages/identity/Content.js index 1bf13fda..8ef572fc 100644 --- a/site/src/pages/identity/Content.js +++ b/site/src/pages/identity/Content.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Content = (props) => { return (
diff --git a/site/src/pages/identity/Heading.js b/site/src/pages/identity/Heading.js index da5fed2e..5a5c3b77 100644 --- a/site/src/pages/identity/Heading.js +++ b/site/src/pages/identity/Heading.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Heading = (props) => { return (
diff --git a/site/src/pages/identity/Navigation.js b/site/src/pages/identity/Navigation.js index f46cbe19..513843b3 100644 --- a/site/src/pages/identity/Navigation.js +++ b/site/src/pages/identity/Navigation.js @@ -1,6 +1,8 @@ -import { Link } from 'react-router-dom'; +import React from 'react'; +import { BrowserRouter, Link } from 'react-router-dom'; const Navigation = (props) => { + console.log('naviation'); return (
@@ -9,6 +11,7 @@ const Navigation = (props) => { Overview diff --git a/site/src/pages/identity/Next.js b/site/src/pages/identity/Next.js index 08a2ea30..950d55e0 100644 --- a/site/src/pages/identity/Next.js +++ b/site/src/pages/identity/Next.js @@ -1,3 +1,5 @@ +import React from 'react'; + import { Link } from 'react-router-dom'; import nextIcon from '../../assets/images/Chevron-light.svg'; diff --git a/site/src/pages/identity/Previous.js b/site/src/pages/identity/Previous.js index 0870dc84..5e0984fc 100644 --- a/site/src/pages/identity/Previous.js +++ b/site/src/pages/identity/Previous.js @@ -1,3 +1,4 @@ +import React from 'react'; import { Link } from 'react-router-dom'; import PrevIcon from '../../assets/images/Chevron-light.svg'; diff --git a/site/src/pages/identity/Sidebar.js b/site/src/pages/identity/Sidebar.js index 902ca55e..1fe06cb4 100644 --- a/site/src/pages/identity/Sidebar.js +++ b/site/src/pages/identity/Sidebar.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Sidebar = (props) => { return (
diff --git a/site/src/pages/identity/SubContent.js b/site/src/pages/identity/SubContent.js index cc29fdff..46638714 100644 --- a/site/src/pages/identity/SubContent.js +++ b/site/src/pages/identity/SubContent.js @@ -1,3 +1,4 @@ +import React from 'react'; const SubContent = (props) => { return ( <> diff --git a/site/src/pages/identity/SubHeading.js b/site/src/pages/identity/SubHeading.js index 31ff3616..a34ab2a4 100644 --- a/site/src/pages/identity/SubHeading.js +++ b/site/src/pages/identity/SubHeading.js @@ -1,3 +1,4 @@ +import React from 'react'; const SubHeading = (props) => { return (
diff --git a/site/src/pages/identity/SubText.js b/site/src/pages/identity/SubText.js index 37b7cfb8..90d8f5c5 100644 --- a/site/src/pages/identity/SubText.js +++ b/site/src/pages/identity/SubText.js @@ -1,5 +1,6 @@ import SubContent from './SubContent'; import SubHeading from './SubHeading'; +import React from 'react'; const SubText = (props) => { return ( diff --git a/site/src/pages/identity/Text.js b/site/src/pages/identity/Text.js index 5ad79787..988d2faf 100644 --- a/site/src/pages/identity/Text.js +++ b/site/src/pages/identity/Text.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Content from './Content'; import Heading from './Heading'; diff --git a/site/src/pages/identity/colors/code.js b/site/src/pages/identity/color/code.js similarity index 97% rename from site/src/pages/identity/colors/code.js rename to site/src/pages/identity/color/code.js index 920625a6..67ba8c47 100644 --- a/site/src/pages/identity/colors/code.js +++ b/site/src/pages/identity/color/code.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; diff --git a/site/src/pages/identity/colors/guidance.js b/site/src/pages/identity/color/guidance.js similarity index 98% rename from site/src/pages/identity/colors/guidance.js rename to site/src/pages/identity/color/guidance.js index 77da2318..b79b5fdd 100644 --- a/site/src/pages/identity/colors/guidance.js +++ b/site/src/pages/identity/color/guidance.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; diff --git a/site/src/pages/identity/colors/index.js b/site/src/pages/identity/color/index.js similarity index 96% rename from site/src/pages/identity/colors/index.js rename to site/src/pages/identity/color/index.js index 39394cad..c2b044ab 100644 --- a/site/src/pages/identity/colors/index.js +++ b/site/src/pages/identity/color/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + import { useParams } from 'react-router-dom'; import Navigation from '../Navigation'; import Text from '../Text'; diff --git a/site/src/pages/identity/colors/overview.js b/site/src/pages/identity/color/overview.js similarity index 99% rename from site/src/pages/identity/colors/overview.js rename to site/src/pages/identity/color/overview.js index 1fb6e4c9..6da12cca 100644 --- a/site/src/pages/identity/colors/overview.js +++ b/site/src/pages/identity/color/overview.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; diff --git a/site/src/pages/identity/elevation/index.js b/site/src/pages/identity/elevation/index.js index face50f5..a9d29aae 100644 --- a/site/src/pages/identity/elevation/index.js +++ b/site/src/pages/identity/elevation/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Elevation = () => { return
Elevation
; }; diff --git a/site/src/pages/identity/page-layouts/index.js b/site/src/pages/identity/page-layouts/index.js index 3c1b487b..9c8f0bc4 100644 --- a/site/src/pages/identity/page-layouts/index.js +++ b/site/src/pages/identity/page-layouts/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const PageLayout = () => { return
Page Layout
; }; diff --git a/site/src/pages/identity/spacing/index.js b/site/src/pages/identity/spacing/index.js index d4ec7f6b..b4d977a9 100644 --- a/site/src/pages/identity/spacing/index.js +++ b/site/src/pages/identity/spacing/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Spacing = () => { return
Spacing
; }; diff --git a/site/src/pages/identity/typography/code.js b/site/src/pages/identity/typography/code.js index 30485a09..7f98be77 100644 --- a/site/src/pages/identity/typography/code.js +++ b/site/src/pages/identity/typography/code.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; diff --git a/site/src/pages/identity/typography/guidance.js b/site/src/pages/identity/typography/guidance.js index 6c19574c..0453512a 100644 --- a/site/src/pages/identity/typography/guidance.js +++ b/site/src/pages/identity/typography/guidance.js @@ -1,3 +1,5 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; diff --git a/site/src/pages/identity/typography/index.js b/site/src/pages/identity/typography/index.js index aca5ee26..ffa24cc1 100644 --- a/site/src/pages/identity/typography/index.js +++ b/site/src/pages/identity/typography/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + import { useParams } from 'react-router-dom'; import Navigation from '../Navigation'; import Text from '../Text'; diff --git a/site/src/pages/identity/typography/overview.js b/site/src/pages/identity/typography/overview.js index cd8d229f..7630e44c 100644 --- a/site/src/pages/identity/typography/overview.js +++ b/site/src/pages/identity/typography/overview.js @@ -1,125 +1,130 @@ +import React from 'react'; + import Next from '../Next'; import Previous from '../Previous'; import Sidebar from '../Sidebar'; -import SubText from '../SubText'; import SubContent from '../SubContent'; -import Previous from '../Previous'; -import Next from '../Next'; +import SubText from '../SubText'; const items = [ - { - title: "Introduction" - }, - { - title: "Color Anatomy" - }, - { - title: "Layer Hierarchy" - }, - { - title: "The Basics" - }, - { - title: "Green Color Accessibility" - } -] + { + title: 'Introduction' + }, + { + title: 'Color Anatomy' + }, + { + title: 'Layer Hierarchy' + }, + { + title: 'The Basics' + }, + { + title: 'Green Color Accessibility' + } +]; const basics = [ - { - title:'Theme', - description:'By definition, a theme is a cohesive and consistent look and feel for a product. This consistent look can be achieved with the use of harmonious color palettes, legible fonts and layout patterns. Currently, sistent outlines specifications for light and dark themes.' - }, - { - title:'Value', - description:'A value is the unique visual attribute assigned to a token through the use of themes. This could range from hex codes to rgba values which are used to highlight specific colors in any given instance. We highly recommend that no exact values be referenced anywhere in the design in order to avoid errors and ensure consistency. Instead, tokens should be used to curate and implement the reusable values. More on tokens next.' - }, - { - title:'Tokens', - description:'Tokens can be regarded as a shared language between design and development for communicating detailed information about how to build user interfaces. Generally, a rule of thumb is to represent the context (background, text, component), role (success, warning, brand, inverse), and modifier(s) (secondary, tertiary, hover) in a string of text that will represent set values gotten from the colors in the color palette.' - }, - { - title:'Role', - description:'Roles are parameters that specify the context that colors are being applied to and while different roles can share the same value, the token structure means that they will have different use cases. These values can be different though depending on the current theme.' - } -] + { + title: 'Theme', + description: + 'By definition, a theme is a cohesive and consistent look and feel for a product. This consistent look can be achieved with the use of harmonious color palettes, legible fonts and layout patterns. Currently, sistent outlines specifications for light and dark themes.' + }, + { + title: 'Value', + description: + 'A value is the unique visual attribute assigned to a token through the use of themes. This could range from hex codes to rgba values which are used to highlight specific colors in any given instance. We highly recommend that no exact values be referenced anywhere in the design in order to avoid errors and ensure consistency. Instead, tokens should be used to curate and implement the reusable values. More on tokens next.' + }, + { + title: 'Tokens', + description: + 'Tokens can be regarded as a shared language between design and development for communicating detailed information about how to build user interfaces. Generally, a rule of thumb is to represent the context (background, text, component), role (success, warning, brand, inverse), and modifier(s) (secondary, tertiary, hover) in a string of text that will represent set values gotten from the colors in the color palette.' + }, + { + title: 'Role', + description: + 'Roles are parameters that specify the context that colors are being applied to and while different roles can share the same value, the token structure means that they will have different use cases. These values can be different though depending on the current theme.' + } +]; -const Overview = ()=> { - return ( - <> - -
- -
- { + return ( + <> + +
+ +
+ -
- - -
- -
+ /> +
- -
+
-
- -
+
+ +
- {basics && basics.map((basic)=>{ - return ( -
- - -
) - })} + {basics && + basics.map((basic) => { + return ( +
+ + +
+ ); + })} -
-
- -
- -
- - ) -} +
+
+ +
+ +
+ + ); +}; export default Overview; @@ -133,10 +138,10 @@ export default Overview; // const items = [ // { -// title: "The Basics" +// title: "The Basics" // }, // { -// title: "Type Scale" +// title: "Type Scale" // } // ] @@ -178,7 +183,7 @@ export default Overview; // /> //
) // })} -// +// //
// -// +// //
//
// //
// -//
+//
// // ) // } - + // export default Overview; diff --git a/site/src/pages/index.js b/site/src/pages/index.js index f36db4bf..0d5ed983 100644 --- a/site/src/pages/index.js +++ b/site/src/pages/index.js @@ -1,43 +1,41 @@ +import React from 'react'; import { useContext } from 'react'; -import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom'; -import Footer from '../components/Footer'; -import Navbar from '../components/Navigation'; -import Sidebar from '../components/Sidebar'; +import { Navigate, Route, Routes } from 'react-router-dom'; import ThemeContext from '../components/Theme'; import '../styles/global.css'; import Home from './home'; -import Color from './identity/colors'; +import Color from './identity/color'; import Elevation from './identity/elevation'; import PageLayout from './identity/page-layouts'; import Spacing from './identity/spacing'; import Typography from './identity/typography'; +import Sidebar from './identity/Sidebar'; +import Navbar from '../components/Navigation'; +import Footer from '../components/Footer'; const IndexPage = () => { const theme = useContext(ThemeContext); - const routes = ( - - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - } exact /> - } /> - - ); return (
- - -
- -
{routes}
-
-
- + +
+ +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+
+
); }; diff --git a/site/src/pages/patterns/index.js b/site/src/pages/patterns/index.js index b57b05bb..39a2a6f4 100644 --- a/site/src/pages/patterns/index.js +++ b/site/src/pages/patterns/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Patterns = () => { return
Patterns
; }; diff --git a/site/src/pages/visualise/index.js b/site/src/pages/visualise/index.js index e8b4d5bc..c3cdd12c 100644 --- a/site/src/pages/visualise/index.js +++ b/site/src/pages/visualise/index.js @@ -1,3 +1,5 @@ +import React from 'react'; + const Visualize = () => { return
Visualize
; };