Docs: Update (#265)

* Update whats-new.mdx

* Update changelog.mdx

* Update to Thursday 5 march

Updated the first paragraph of Thursday 5 march and added two lines below.

* Create .placeholder

* Review overview.mdx

* Update changelog.mdx

* Update overview.mdx

* Update introduction.mdx

* Update overview.mdx

* Update overview.mdx

* Update overview.mdx

* Update resources.mdx

* Update whats-new.mdx

* Update on table header and auto layout

Changed paragraph about the Table header, and added paragraph about Auto Layout above Constraints.

* Storefront/image component (#256)

* Added cache control headers to storefront (#240)

* Added cache control headers to storefront

* More detailed cache rules

* Added Accessibility check to react template

* Added image component

* fixed wording

* Made image scale in width instead of height

* Updated step 5 at how to use auto layout

Repeat step 1-4 instead of 1-3.

* Change title to sentence case

Buttons toggle

* Add missing period

* Create 2020

* Delete 2020

* Create .placeholder

* Added pictures to upload to Changelog

* Added pictures, changed the date of change

* Added instruction video for Table header

* Delete 20200309-Table header text demo.mp4

* Create .placeholder

* Added instruction video for table header text

* Added pictures and video

* Update figma images

* removed not need placeholders

* Fixed img & video comps not searching sub folders

* Added missing video attributes

* Add punctuation

* Fixed url typo

* Renamed Tables to Table to match Figma

* Updated to support auto-layout in Figma Table

* Updated table token

Co-authored-by: Bendik Kristiansen <53559062+benkeq@users.noreply.github.com>
Co-authored-by: Charlotte Janine Van Den Berg <56440483+LottevdBerg-OT@users.noreply.github.com>
Co-authored-by: Victor Nystad <vnys@equinor.com>
Co-authored-by: Rebecca Brekke <34247620+BeckyBrekke@users.noreply.github.com>

apps/figma-broker/files/desktop-ui/index.js

@@ -1,6 +1,6 @@
 import { fixPageName } from '@utils'
 import { makeButtonsComponent } from './buttons'
-import { makeTablesComponent } from './tables'
+import { makeTablesComponent } from './table'
 import { makeTextfieldsComponent } from './textfields'
 
 export const makeDesktopComponents = (figmaFile) => {
@@ -40,7 +40,7 @@ export const makeDesktopComponents = (figmaFile) => {
           path: 'button',
         })
         break
-      case 'tables':
+      case 'table':
         components.push({
           name: 'table',
           value: makeTablesComponent(data, getStyle),

apps/figma-broker/files/desktop-ui/tables.js → apps/figma-broker/files/desktop-ui/table.js

@@ -20,6 +20,24 @@ import {
 
 const fallback = {}
 
+const getLabelNode = (children) => {
+  let textNode = R.find(withType('text'), children)
+
+  // Find label in Auto-Layout node
+  if (R.isNil(textNode)) {
+    textNode = R.pipe(
+      R.find(withName('contents')),
+      R.prop('children'),
+      R.defaultTo([]),
+      R.find(withName('label')),
+      R.prop('children'),
+      R.defaultTo([]),
+      R.find(withType('text')),
+    )(children)
+  }
+  return textNode
+}
+
 const buildProps = (states, getStyle) => {
   // states
   const enabled = R.find(withName('enabled'), states)
@@ -43,8 +61,9 @@ const buildProps = (states, getStyle) => {
   const disabledShape = toShape(
     R.find(instanceOfComponent('shape'), disabled.children),
   )
-  const activeLabel = toText(R.find(withName('label'), active.children))
-  const disabledLabel = toText(R.find(withName('label'), disabled.children))
+  const enabledLabel = toText(getLabelNode(enabled.children))
+  const activeLabel = toText(getLabelNode(active.children))
+  const disabledLabel = toText(getLabelNode(disabled.children))
 
   const focus = toFocus(
     R.find(instanceOfComponent('focused'), focused.children),
@@ -55,7 +74,7 @@ const buildProps = (states, getStyle) => {
   const data = removeNilAndEmpty({
     ...shape,
     borders: R.filter(withName('border'), enabled.children),
-    text: toText(R.find(withType('text'), enabled.children)),
+    text: enabledLabel,
     spacings: R.filter(instanceOfComponent('spacing'), enabled.children),
     clickbound: R.find(instanceOfComponent('clickbound'), enabled.children),
     field: R.find(withName('field'), enabled.children),

apps/storefront/src/components/image.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+import { useStaticQuery, graphql } from 'gatsby'
+
+const Container = styled.div`
+  display: block;
+  width: 100%;
+  padding: 16px;
+  margin-bottom: 24px;
+  font-size: 18px;
+  background-color: #ebebeb !important;
+`
+
+const ImageBase = styled.img`
+  width: 100%;
+  border: none;
+  background-color: #2c2c2c;
+`
+
+const Image = ({ url, ...other }) => {
+  // StaticQuery does not support grapql queries so we have to for all videos and then find it....
+  const data = useStaticQuery(graphql`
+    {
+      allFile(filter: { relativeDirectory: { regex: "/images/" } }) {
+        edges {
+          node {
+            publicURL
+            relativePath
+          }
+        }
+      }
+    }
+  `)
+
+  let imageUrl = url
+
+  if (url.startsWith('images') && data.allFile.edges.length > 0) {
+    const image = data.allFile.edges.find(
+      ({ node }) => node.relativePath.toLowerCase() === url.toLowerCase(),
+    )
+    imageUrl = image ? image.node.publicURL : undefined
+  }
+
+  return imageUrl ? (
+    <ImageBase {...other} src={imageUrl} />
+  ) : (
+    <Container>
+      Ops! Can&apos;t find the image, please check if your link is correct 🏞️
+      {url}
+    </Container>
+  )
+}
+
+Image.propTypes = {
+  /** Url to embed in iframe. Will manipulate www.figma.com urls into Figma Embed */
+  url: PropTypes.string.isRequired,
+}
+
+export default Image

apps/storefront/src/components/layout.jsx

@@ -13,13 +13,15 @@ import Embed from './embed'
 import Video from './video'
 import FigmaImage from './figmaImage'
 import IconsDownload from './Icons'
+import Image from './image'
 
 const mdxComponents = {
   ComponentStatus,
   Embed,
   Video,
   FigmaImage,
   IconsDownload,
+  Image,
 }
 
 const Layout = ({ children }) => (

apps/storefront/src/components/video.jsx

@@ -23,7 +23,7 @@ const Video = ({ url, ...other }) => {
   // StaticQuery does not support grapql queries so we have to for all videos and then find it....
   const data = useStaticQuery(graphql`
     {
-      allFile(filter: { relativeDirectory: { eq: "video" } }) {
+      allFile(filter: { relativeDirectory: { regex: "/video/" } }) {
         edges {
           node {
             publicURL
@@ -47,7 +47,7 @@ const Video = ({ url, ...other }) => {
     <VideoBase {...other} src={videoUrl} />
   ) : (
     <Container>
-      Ops! Can&apos;t find the video, please check your link is correct 🎥
+      Ops! Can&apos;t find the video, please check if your link is correct 🎥
       {url}
     </Container>
   )

apps/storefront/src/content/assets/product-icons/overview.mdx

@@ -8,6 +8,9 @@ tabs:
 mode: publish
 ---
 
+# TODO:
+
+- Remove this page
 
 **Product icons communicate key themes and business areas in a clear, simple and branded style. They enhance visual communication, assist with navigation and reduce cognitive load. Product icons do not provide functional interaction---use system icons instead.**
 <!--One to two sentences as an introduction to the component-->

apps/storefront/src/content/components/buttons-toggle/overview.mdx

@@ -1,5 +1,5 @@
 ---
-title: Buttons Toggle
+title: Buttons toggle
 tabs:
     - Overview
     - Usage

apps/storefront/src/content/components/cards/overview.mdx

@@ -14,7 +14,7 @@ mode: publish
 
 ## Guidelines
 
-Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different *card* blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width. 
+Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different *card* blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded. 
 
 
 **Don't**

apps/storefront/src/content/components/table/overview.mdx

@@ -39,13 +39,15 @@ The header row can have icons and text. Icons can be used for sorting columns as
 Avoid labels that are too long. Titles should be to the point and short and no more than three words. Note that if the label is longer than the width available, it will be truncated and should have a tooltip provided. Labels should be aligned left except when numeric---then either left or right alignment is permitted. 
 
 
-#### Header icon (with placerholder icon) 
+#### Header icon (with placeholder icon) 
 
 <FigmaImage url="https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/Desktop-UI?node-id=2450%3A1220" />
 
 
 #### Header text 
 
+The header text component includes options for writing unit for the column and a placeholder icon for sorting icons. This component uses auto layout to place Label text, icon and/or unit with the right spacing next to each other. Make sure to resize the component so that the spacing on the right is aligned to the most right part of the contents.   
+
 <FigmaImage url="https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/Desktop-UI?node-id=2450%3A1219" />
 
 

apps/storefront/src/content/components/table/usage.mdx

@@ -25,16 +25,39 @@ mode: publish
 2. Select a `Table` header in the frame/artboard. 
 3. Locate and expand the highlighted *layer* in the **Layers Panel**.
 4. Edit the text label.
-5. Select all the `Table` header layers and convert them to a frame/artboard by using the following shortcut: 
+5. In the **Layers panel** show the unit and/or placeholder icon as needed and adjust the unit text. Drag and drop an icon from the assets panel directly into the placeholder icon using:
+  * Mac: `Command` + `Option`
+  * PC: `Ctrl` + `ALT`
+6. Adjust the width of the header to fit the column width of the cells below, where the minimum width is defined by the right spacing. 
+
+Now you can either use Auto layout or Constraints. 
+
+### How to use auto layout
+
+Auto layout enables easy reuse of the table, with the options to easily resize the width, change the order of the columns, show/hide columns and edit the contents. 
+1. Select all the cells and the header cell in one column and create a frame. 
+2. Add auto layout to the frame. 
+3. Make sure to name the column frame in the **Layers Panel**. 
+4. Locate the **Design** tab in the **Inspector Panel**. For each of the cells within a column frame select ´Stretch Left & Right´ at the top of the tab. 
+5. Repeat step 1 to 4 for all the columns.
+6. Select all the column frames and add auto layout. 
+7. When editing text in the cells, adjust the width of the frame to fit to contents. The other columns will move accordingly. 
+
+### How to use constraints
+Select all the `Table` header layers and convert them to a frame/artboard by using the following shortcut: 
+  * Mac: `Command` + `Option` + `G`
+  * PC: `Ctrl` + `ALT` + `G`
+1. Make sure to name the new group. 
+2. Locate the **Design** tab in the **Inspector Panel**.
+3. Under the **Constraints** section, set up constraints.
+4. Repeat this process for each row that is needed in the table. 
+5. Once the header and all the rows have been added, select all the groupings and convert them to a frame/artboard by using the following shortcut: 
   * Mac: `Command` + `Option` + `G`
   * PC: `Ctrl` + `ALT` + `G`
 6. Make sure to name the new group. 
 7. Locate the **Design** tab in the **Inspector Panel**.
 8. Under the **Constraints** section, set up constraints.
-9. Repeat this process for each row that is needed in the table. 
-10. Once the header and all the rows have been added, select all the groupings and convert them to a frame/artboard by using the following shortcut: 
-  * Mac: `Command` + `Option` + `G`
-  * PC: `Ctrl` + `ALT` + `G`
-11. Make sure to name the new group. 
-12. Locate the **Design** tab in the **Inspector Panel**.
-13. Under the **Constraints** section, set up constraints.
+
+
+
+

apps/storefront/src/content/contributing/developers/overview.mdx

@@ -1,4 +1,12 @@
 ---
 title: Developers
 mode: draft
----
+---
+
+TODO: 
+
+- Link to issues
+- Pull requests
+- Create issue, comment on issue
+- Feature requests
+- Testing

apps/storefront/src/content/getting-started/developers/introduction.mdx

@@ -8,6 +8,10 @@ tabs:
 mode: publish
 ---
 
+# TODO: 
+
+- Remove tabs
+- Add links to storybook, npm, cdn
 
 Developers should use the Equinor Design System (EDS) to easily sew together new prototypes, while focusing on application logic rather than front-end components. 
 There will be two different implementations built that will be started and maintained by the EDS core team---hopefully with further development from the Equinor developer community.

apps/storefront/src/content/guidelines/tokens/overview.mdx

@@ -4,3 +4,5 @@ mode: draft
 ---
 
 :warning: Tokens table coming soon
+
+TODO: Remove this page

apps/storefront/src/content/help/resources/resources.mdx

@@ -2,3 +2,13 @@
 title: Resources
 mode: draft
 ---
+
+TODO:
+
+Add links to
+
+- Figma
+- Github
+- NPM
+- CDN
+- Slack

apps/storefront/src/content/updates/release-information/changelog.mdx

@@ -9,6 +9,41 @@ mode: publish
 
 **All component changes in the Figma libraries will be documented in this file.**
 
+
+### Thursday, 9 March 2020
+
+
+**Changed**
+
+* Added field for `Unit` in the [Table Header text](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1219) component.
+* Added drag & drop icon for sorting
+* Applied *Auto Layout* to the `Label`, `Unit`, and `Icon`. 
+* Changed alignment from left aligned to right aligned for [Cell Monospaced numeric](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1603) component.
+
+<Image url="images/2020/20200309-table header before after 800 px.jpg" alt="Picture showing table header text before and after changes" />
+
+<Image url="images/2020/20200309-table header example 800 px.jpg" alt="Picture showing table header example" />
+
+<Video controls autoPlay loop type="video/mp4" url="video/2020/20200309-Table header text demo.mp4" alt="Video showing how to drag&drop icons and how to adjust table header component" />
+
+
+**New**
+
+* Added new state ActiveResting for [Table Cell input](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A2487) component.
+
+<Image url="images/2020/20200309-table cell input activeresting 800 px.jpg" alt="Picture showing new ActiveResting state for table cell input" />
+
+<Image url="images/2020/20200309-table example active row 800px.jpg" alt="Picture showing example for active row, using ActiveResting state" />
+
+### Thursday, 27 February 2020
+
+
+**New**
+
+* Added [Buttons toggle](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=27%3A3) component to Figma.
+
+
+
 ### Wednesday, 19 February 2020
 
 

apps/storefront/src/content/updates/release-information/whats-new.mdx

@@ -26,6 +26,33 @@ mode: publish
 --->
 
 
+
+### Thursday, 5 March 2020
+
+
+**Changed**
+
+* Updated [Table Header text](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1219) component to include unit, icon for sorting (users can drag & drop icons directly from assets), and applied *Auto Layout*. *Auto Layout* is a feature in Figma that adjusts the component based on the length of what the user writes. In the *Table Header text* this means that the `Label`, `Unit`, and `Icon` will resize and move as expected. The only adjustment the user has to do is adjust the width of the component. 
+
+* Added component to [Table Cell input](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A2487): Table/Cell input/Active resting.
+
+* Updated all states for [Table Cell monospaced numeric](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1603) to be right aligned instead of left aligned. 
+
+
+### Thursday, 27 February 2020
+
+
+**New**
+
+* As a result of numerous requests, we have added [Buttons toggle](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=27%3A3) to Figma. EDS provides two versions, and you can choose to use either an icon and no text, or text and no icon. Read about how to use it [here](https://eds.equinor.com/components/buttons-toggle/).
+* Added Ghost icon buttons for [Buttons Secondary](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=142%3A0) and [Buttons Danger](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=142%3A3883).
+* Updated background colour in [Table Cell Active](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1505) and [Table Cell Hover](https://www.figma.com/file/0bGXR2sCwMVSDNyyzu5BXrO5/UI%E2%80%94User-Interface?node-id=2450%3A1505) to be more aligned with active and hover states elsewhere in EDS components.
+
+
+<FigmaImage url="https://www.figma.com/file/luNobpDIWTuQ9rhyovGLBI/Desktop?node-id=763%3A1" />
+
+
+
 ### Thursday, 15 August 2019
 
 
@@ -38,4 +65,4 @@ mode: publish
 * We are now focusing on the development side of the EDS. Stay tuned for more details. 
 
 
-<Video autoPlay loop url="https://i.imgur.com/CxnA70W.mp4" />
+<Video controls autoPlay loop type="video/mp4" url="https://i.imgur.com/CxnA70W.mp4" />