Merge storefront-branch into develop (#357)

* Use EDS topbar and table in Storefront (#318)

* temporarily disable eslint

* use eds table

* use index-files instead of package.json

* remove github css

* remove internal npm from config

* add eds-core-react

* use topbar, fonts, contentheader

* use gatsby link component

* resolve #319

* add the equinor type

* add storefront run script

* update package.json

* bump version (#404)

* Storefront eds design (#385)

* ⬆️ Upgrade deps

* Some components for index page

* Add styles for p and h elements

* Add eslitignore file to avoid gatsby's built in eslint to report errors in other folders. Use built in gatsby eslint for storefront

* Margin adjustments

* Add eds lists. Add link style.

* Add eds table

* Left align th text

* Add proof of concept for TOC for button docs

* Refine the poc concept

* Add Grid layout helper component

* Fix: Wrong prop name

* Add some width resctrictions for Figma image. Add the possibility for alt text

* Add a max-width to content to avoid toc floating to far away to the right on larger screens

* Add more tocs

* Add plugin for jsx-a11y back in

* Add style for inline  <code> tags

* Add more tocs and format cleanup

* Alt texts ftw

* Add title and seo. Move content and content header to page to avoid confusion

* Add general meta description. Add favicon

* 💩 Add different margin to toc if there's no tabs

* Add toc for a11y page. Fix wrong wrapping of long toc texts box-sizing content-box.

* More tocs. Some work for icon toc, WIP

* Try to rewrite slightly for better accessibility and support the  use of keyboard

* Use EDS icon for download

* Fix missing end of jsx tag

* Minor formatting. Important to header for test env

* Add skip to content link

* Add a copy of focus-visible instead of relying on eds. Add dotted focus on keyboard only

* Try to fix eslint rule

* Style navigation tabs like EDS tabs. Adjust layout accordingly

* Add landing page. Can fine tune later on

* Add width constraint for toc. Fix eslint issues

* 💩 Stupid fix to make toc work for dev env

* Add Algolia DocSearch with test index while waiting for them to reply

* Remove special chars and numbers from slugs

* Add more table of contents

* H1 title on top both with tabs or without

* Fix double // causing wrong url and redirects

* Fix env variable. Don't know why this suddenly happened

* Remove id's on H3 elements because of an issue with multiple id not being unique e.g. in Date formats and we no longer need them for TOC anyway

* Try to use the minimized version of the script

* Add simple repo to make stupid docz to work

* show props

Add es module to rollup config
Use react-docgen-props-table

* build with propstable

* Add Equinor api key and index name for DocSearch

* Use doczrc config just to make sure it works

* Delete docz folder, let's make this a separate PR

* Add SVG hero illustration

* Left align text on large screens

* Add button links to landing pages

* Remove search. Need to find out why this ain't working in production

* ZOMG for 'useful' VSCode magic

* reset .eslintignore

* install tokens

* don’t lint tokens

* style <Link> as EDS button

Co-authored-by: Victor Nystad <[email protected]>

* Fix new eslint errors (#453)

* no role necessary here

* Fix eslint errors

* fix breadcrumbs test

* Don’t override table styles (#455)

* don’t override table styles

* update lock-file

* Style th properly when parent is tbody (#454)

* style tbody > th

* simplify logic

* add text-align to tokens

* update tokens

* convert values to lowercase

Co-authored-by: Wenche Tollevsen <[email protected]>

.eslintrc.yaml

@@ -7,6 +7,7 @@ extends:
   - plugin:testing-library/react
   - plugin:import/errors
   - plugin:import/warnings
+  - plugin:jsx-a11y/recommended
 plugins:
   - prettier
   - testing-library
@@ -85,3 +86,15 @@ rules:
   react/destructuring-assignment:
     - error
     - always
+  # Emojis should be accessible
+  jsx-a11y/accessible-emoji:
+    - warn
+  jsx-a11y/control-has-associated-label:
+    - warn
+  jsx-a11y/label-has-associated-control:
+    - warn
+    - labelComponents: []
+      labelAttributes: []
+      controlComponents: []
+      assert: either
+      depth: 25

.npmrc

@@ -1,4 +1,3 @@
 shared-workspace-shrinkwrap = true
 link-workspace-packages = true
 package-lock = true
-@equinor-internal:registry=https://npm.equinor.com/

.prettierignore

@@ -1,2 +1,2 @@
-*.mdx
+#*.mdx
 README.md

apps/figma-broker/transformers/typography.js

@@ -1,6 +1,6 @@
 import R from 'ramda'
 import { withType, withName, removeNilAndEmpty } from '@utils'
-import { rootFontSize, rem, em, px } from '@units'
+import { rootFontSize, rem, em } from '@units'
 import { fillToRgba } from './colors'
 
 export { fillToHex, fillToHsla, fillToRgba } from './colors'
@@ -14,7 +14,7 @@ export const toTypography = (figmaNode, name) => {
     fontSize,
     fontWeight,
     letterSpacing,
-    textAlignHorizontal = 'center',
+    textAlignHorizontal: textAlign,
     lineHeightPercentFontSize,
     textDecoration,
     textCase,
@@ -38,8 +38,6 @@ export const toTypography = (figmaNode, name) => {
   const fontSizeRem = (fontSize / rootFontSize).toFixed(3)
   const lineHeightEm = (lineHeightPercentFontSize / 100).toFixed(3)
   const letterSpacingEm = (letterSpacing / rootFontSize).toFixed(3)
-  const textAlignLens = R.lensProp('textAlign')
-  const textAlign = R.toLower(textAlignHorizontal)
 
   typography = {
     ...typography,
@@ -49,13 +47,10 @@ export const toTypography = (figmaNode, name) => {
     fontWeight,
     letterSpacing: letterSpacing ? em(letterSpacingEm) : null,
     lineHeight: em(lineHeightEm),
-    textDecoration,
-    textTransform: textCase ? `${textCase}CASE` : null,
+    textDecoration: textDecoration ? R.toLower(textDecoration) : null,
+    textTransform: textCase ? R.toLower(`${textCase}CASE`) : null,
     fontStyle: italic ? 'italic' : null,
-  }
-
-  if (textAlign !== 'left') {
-    typography = R.set(textAlignLens, textAlign, typography)
+    textAlign: R.toLower(textAlign),
   }
 
   return removeNilAndEmpty(typography)

apps/storefront/.eslintignore

@@ -0,0 +1,7 @@
+/../../apps/figma-broker/**
+/../../apps/storybook-html/**
+/../../apps/storybook-react/**
+/../../libraries/icons/**
+/../../libraries/core-react/**
+/../../libraries/tokens/**
+node_modules

apps/storefront/Dockerfile

@@ -24,7 +24,7 @@ RUN pnpm --filter ./libraries/tokens install && \
   pnpm --filter ./libraries/tokens run build
 
 RUN pnpm --filter ./libraries/core-react install && \
-  pnpm --filter ./libraries/core-react run build
+  pnpm --filter ./libraries/core-react run build:for-storybook
 
 RUN pnpm --filter ./apps/storefront install
 

apps/storefront/gatsby-config.js

@@ -7,8 +7,7 @@ module.exports = {
   siteMetadata: {
     title: 'Equinor Design System',
     description:
-      'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
-    author: '@chrisbiscardi',
+      'The EDS is the official design system of Equinor The EDS provides structure, guidance and tools that enable designers and developers to efficiently build consistent, inclusive and flexible solutions.',
   },
   plugins: [
     {
@@ -67,6 +66,7 @@ module.exports = {
         background_color: '#fff',
         theme_color: '#000',
         display: 'minimal-ui',
+        icon: 'src/images/icon.png',
       },
     },
     {
@@ -82,17 +82,6 @@ module.exports = {
         ],
       },
     },
-    {
-      resolve: `gatsby-plugin-prefetch-google-fonts`,
-      options: {
-        fonts: [
-          {
-            family: 'Roboto',
-            variants: [`400`, `500`, `700`, `900`],
-          },
-        ],
-      },
-    },
     {
       resolve: 'gatsby-plugin-matomo',
       options: {
@@ -104,7 +93,21 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-styled-components',
     },
-
+    {
+      resolve: 'gatsby-plugin-load-script',
+      options: {
+        src: '/focus-visible.min.js', // Change to the script filename
+      },
+    },
+    {
+      resolve: `gatsby-plugin-algolia-docsearch`,
+      options: {
+        apiKey: '73fc0edd06a8031c699edfc560eaa013',
+        indexName: 'equinor_design-system',
+        inputSelector: '#search', // required
+        debug: false, // (bool) Optional. Default `false`
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.app/offline
     // 'gatsby-plugin-offline',

apps/storefront/gatsby-node.js

@@ -143,7 +143,13 @@ exports.createPages = async ({ actions, graphql }) => {
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
-      alias: { $components: path.resolve(__dirname, 'src/components') },
+      alias: {
+        $components: path.resolve(__dirname, 'src/components'),
+        'styled-components': path.resolve(
+          './node_modules',
+          'styled-components',
+        ),
+      },
       modules: [gatsbyNodeModules, 'node_modules'],
     },
   })

apps/storefront/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@equinor/eds-storefront",
   "description": "The storefront for the Equinor Design System",
-  "version": "0.0.1",
+  "version": "1.0.0-beta",
   "engines": {
     "pnpm": ">=4",
     "node": ">=10.0.0"
   },
   "author": "",
   "dependencies": {
+    "@equinor/eds-core-react": "workspace:*",
+    "@equinor/eds-icons": "workspace:*",
+    "@equinor/eds-tokens": "workspace:*",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "@mdx-js/tag": "^0.20.3",
@@ -17,19 +20,22 @@
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "dotenv": "^8.2.0",
-    "gatsby": "^2.23.1",
-    "gatsby-plugin-manifest": "^2.4.10",
+    "focus-visible": "^5.1.0",
+    "gatsby": "^2.23.3",
+    "gatsby-plugin-algolia-docsearch": "^1.0.5",
+    "gatsby-plugin-load-script": "^1.1.0",
+    "gatsby-plugin-manifest": "^2.4.11",
     "gatsby-plugin-matomo": "^0.8.3",
-    "gatsby-plugin-mdx": "^1.2.14",
-    "gatsby-plugin-offline": "^3.2.8",
-    "gatsby-plugin-postcss": "^2.3.3",
+    "gatsby-plugin-mdx": "^1.2.15",
+    "gatsby-plugin-offline": "^3.2.9",
+    "gatsby-plugin-postcss": "^2.3.4",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
-    "gatsby-plugin-react-helmet": "^3.3.3",
-    "gatsby-plugin-styled-components": "^3.3.3",
-    "gatsby-remark-autolink-headers": "^2.3.4",
-    "gatsby-remark-smartypants": "^2.3.3",
-    "gatsby-source-filesystem": "^2.3.10",
-    "gatsby-transformer-yaml": "^2.4.3",
+    "gatsby-plugin-react-helmet": "^3.3.4",
+    "gatsby-plugin-styled-components": "^3.3.4",
+    "gatsby-remark-autolink-headers": "^2.3.5",
+    "gatsby-remark-smartypants": "^2.3.4",
+    "gatsby-source-filesystem": "^2.3.11",
+    "gatsby-transformer-yaml": "^2.4.4",
     "github-markdown-css": "^4.0.0",
     "js-file-download": "^0.4.12",
     "mdx-component-autolink-header": "0.0.1",
@@ -40,7 +46,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0",
+    "react-helmet": "^6.1.0",
     "remark-emoji": "^2.1.0",
     "styled-components": "^5.1.1"
   },
@@ -50,7 +56,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "dev": "gatsby develop",
+    "dev": "GATSBY_STAGE=dev gatsby develop",
     "start": "npm run develop",
     "format": "prettier --write \"src/**/*.js\"",
     "test": "npm run lint",