Update README (#924)

* 🔥 Removed "experimental" text in ReadMe Not experimental anymore * 🔥 Removed in tokens and icons too * 📝 Updated list of components and in progress * 📝 Updated Tokens readme * 📝 Updated Icon readme with more up to date examples * 📝 Updated tokens readme * 📝 Made readme pretty * 🔊 Update CHANGELOG for tokens, icons, core-react * 🔖 Update version tags Was a typo in Tokens... * 🔖 Version Tag tokens
equinor · Nov 26, 2020 · f1819ac · f1819ac
1 parent 239b7dc
commit f1819ac
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 151 deletions.
diff --git a/libraries/core-react/CHANGELOG.md b/libraries/core-react/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.1] - 2020-11-26
+
+### Changed 📓
+
+- Updated README.md
+
 ## [0.7.0] - 2020-11-26
 
 ### Added ✨

diff --git a/libraries/core-react/README.md b/libraries/core-react/README.md
@@ -1,7 +1,5 @@
 # @equinor/eds-core-react
 
-NB! This is an early version of the EDS Core React components in Typescript and meant for testing only.
-
 Available components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!
 
 Make sure to check out our [Storybook](https://eds-storybook-react.azurewebsites.net/) for more examples!
@@ -13,6 +11,44 @@ Read the [changelog](https://github.com/equinor/design-system/blob/develop/libra
 npm install @equinor/eds-core-react styled-components
 ```
 
+## Usage
+
+```jsx
+import * as React from 'react'
+import { render } from 'react-dom'
+import { Button, Typography } from '@equinor/eds-core-react'
+
+const App = () => (
+  <>
+    <Typography variant="h1" bold>Buttons</Typography>
+
+    <Typography variant="h2">Contained (default)</Typography>
+
+    <Button>Primary</Button>
+    <Button color="secondary">Secondary</Button>
+    <Button color="danger">Danger</Button>
+    <Button disabled>Disabled</Button>
+
+    <Typography variant="h2">Outlined</Typography>
+
+    <Button variant="outlined">Primary</Button>
+    <Button variant="outlined" color="secondary">Secondary</Button>
+    <Button variant="outlined" color="danger">Danger</Button>
+    <Button variant="outlined" disabled>Disabled</Button>
+
+    <Typography variant="h2">Ghost</Typography>
+
+    <Button variant="ghost">Primary</Button>
+    <Button variant="ghost" color="secondary">Secondary</Button>
+    <Button variant="ghost" color="danger">Danger</Button>
+    <Button variant="ghost" disabled>Disabled</Button>
+  </>
+)
+
+render(<App />, document.getElementById('root'))
+```
+
+
 ## Components
 
 ### Available ✅
@@ -21,13 +57,6 @@ npm install @equinor/eds-core-react styled-components
 - Banner
 - Breadcrumbs
 - Button
-  - Contained
-  - Contained w/icon left/right
-  - Outlined
-  - Outlined w/icon left/right
-  - Ghost
-  - Ghost Icon
-  - Ghost w/icon left/right
 - Cards
 - Chips
 - Dialog
@@ -40,6 +69,7 @@ npm install @equinor/eds-core-react styled-components
 - Progress indicators
 - Scrim
 - Search
+- Select (Native Select)
 - Selection Controls
 - Side Sheet
 - Slider
@@ -54,46 +84,12 @@ npm install @equinor/eds-core-react styled-components
 
 ### In progress 👷‍♀️
 
-- Navigation drawer
+- Navigation Drawer
+- Single Select
+- Multi Select
 
 ### TODO 🛠️
 
 - App launcher
 - Stepper
 
-## Usage
-
-```jsx
-import * as React from 'react'
-import { render } from 'react-dom'
-import { Button, Typography } from '@equinor/eds-core-react'
-
-const App = () => (
-  <>
-    <Typography variant="h1" bold>Buttons</Typography>
-
-    <Typography variant="h2">Contained (default)</Typography>
-
-    <Button>Primary</Button>
-    <Button color="secondary">Secondary</Button>
-    <Button color="danger">Danger</Button>
-    <Button disabled>Disabled</Button>
-
-    <Typography variant="h2">Outlined</Typography>
-
-    <Button variant="outlined">Primary</Button>
-    <Button variant="outlined" color="secondary">Secondary</Button>
-    <Button variant="outlined" color="danger">Danger</Button>
-    <Button variant="outlined" disabled>Disabled</Button>
-
-    <Typography variant="h2">Ghost</Typography>
-
-    <Button variant="ghost">Primary</Button>
-    <Button variant="ghost" color="secondary">Secondary</Button>
-    <Button variant="ghost" color="danger">Danger</Button>
-    <Button variant="ghost" disabled>Disabled</Button>
-  </>
-)
-
-render(<App />, document.getElementById('root'))
-```
diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "The React implementation of the Equinor Design System",
   "main": "src/index.ts",
   "publishConfig": {

diff --git a/libraries/icons/CHANGELOG.md b/libraries/icons/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.1] - 2020-11-26
+
+### Changed 📓
+
+- Updated README.md
+
 ## [0.5.0] - 2020-11-26
 
 ### Added

diff --git a/libraries/icons/README.md b/libraries/icons/README.md
@@ -1,56 +1,47 @@
 # @equinor/eds-icons
 
-NB! This is an early version of the EDS Core React components in Typescript and meant for testing only.
-
 This package is a collection of the `system icons` from the Equinor Design System as javascript objects.
 
-### Example of javascript object data
-
-```javascript
-{
-  name: 'star_filled',
-  prefix: 'eds',
-  height: '24',
-  width: '24',
-  svgPathData: 'M12 16.067l4.947 3.6-1.894-5.814L20 10.334h-6.067l-1.933-6-1.933 6H4l4.947 3.52-1.894 5.814 4.947-3.6z',
-}
-```
-
 ## Installation
 
 ```sh
-npm install @equinor/eds-icons styled-components
+npm install @equinor/eds-icons 
 ```
 
 ## Usage
 
-Import using one of the following options to get the svg data:
+Import svg data:
 
-### Import  
+```javascript
+import { save } from "@equinor/eds-icons"
+```
 
-#### ES Module
+### React
 
-Most loaders should handle [ECMAScript Modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/).
+We have developed a react component to simplify use of the EDS icons library within react.
 
 ```javascript
-import { star_filled } from "@equinor/eds-icons"
-```
+import { Icon } from '@equinor/eds-core-react'
+import { save } from '@equinor/eds-icons'
 
-#### CommonJS module
+// Use library approach 
+Icon.add({ save }) // (this needs only be done once)
+<Icon name="save" />
 
-CommonJS will have a separate package path
+// OR 
+
+// Use directly via data prop:
+<Icon data={save} />
 
-```javascript
-const icons = require("@equinor/eds-icons/commonjs")
 ```
 
-#### FAQ
+### FAQ
 
 * If you are using NodeJS 13+ for module loading, it now has native ES modules support. Add `"type":"module"` to your apps `package.json` to enable this.
 
 * If you get a syntax error trying to import ES module, try importing the CJS module as not all loaders have support for ES modules yet
 
-### Rendering icons
+#### Rendering icons
 
 You can render it using plain [svg](https://developer.mozilla.org/en-US/docs/Web/SVG) or use our provided [React Icon component](#React) in [@equinor/eds-core-react](https://www.npmjs.com/package/@equinor/eds-core-react)
 
@@ -60,20 +51,16 @@ Use [EDS Assets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/As
 
 `star-filled -> star_filled`.
 
-#### React
-
-We have developed a react component to simplify use of the EDS icons library within react.
+### Example of javascript object data
 
 ```javascript
-import { Icon } from '@equinor/eds-core-react'
-import { save } from '@equinor/eds-icons'
-
-// Add to library (this needs only be done once)
-Icon.add({ save })
-
-// Renders "save" icon
-<Icon name="save" />
-
+{
+  name: 'star_filled',
+  prefix: 'eds',
+  height: '24',
+  width: '24',
+  svgPathData: 'M12 16.067l4.947 3.6-1.894-5.814L20 10.334h-6.067l-1.933-6-1.933 6H4l4.947 3.52-1.894 5.814 4.947-3.6z',
+}
 ```
 
 ## Credits

diff --git a/libraries/icons/package.json b/libraries/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-icons",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Icons from the Equinor Design System",
   "main": "dist/icons.cjs.js",
   "module": "dist/icons.esm.js",

diff --git a/libraries/tokens/CHANGELOG.md b/libraries/tokens/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.2] - 2020-11-26
+
+### Changed 📓
+
+- Updated README.md
+
 ## [0.5.1] - 2020-11-26
 
 ### Added

diff --git a/libraries/tokens/README.md b/libraries/tokens/README.md
@@ -1,78 +1,26 @@
 # @equinor/eds-tokens
 
-NB! This is an early version of the EDS Core React components in Typescript and meant for testing only.
+[Design tokens] used in the Equinor Design System (EDS), such as colours, typography, spacings etc…
 
-Design tokens used in Equinor Design System (EDS).
+## Installation
 
-## Documentation
-
-### Base
+```sh
+npm install @equinor/eds-tokens
+```
+## Usage
 
-Generic tokens used across EDS, such as colours, typography, spacings etc…
+```js 
+import { tokens } from '@equinor/eds-tokens'
+```
 
-#### Tokens
+## Tokens
 
 - Clickbounds
 - Colors
 - Elevation
 - Shape
 - Spacing
-- States
+- Interaction states
 - Typography (`ot`, `woff` or `woff2` font required)
 
-### Components
-
-Component specific tokens, such as button, input, table etc. These tokens can be used to implement a component in your own technology if needed whilst upholding consistency with design.
-
-#### Update december 2019
-
-The component tokens already made are still part of this package, but we encourage users to use base tokens for now – it proved to be too time consuming at this stage to create every token first in json and then in React. We might revisit the initial strategy at a later point.
-
-#### Tokens
-
-- Button
-- Table
-
-### Usage
-
-#### Use as ESM Module
-
-Add `"type":"module"` to your apps `package.json`
-
-```javascript
-import { tokens } from "@equinor/eds-tokens"
-```
-
-#### Use as CommonJS Module
-
-CommonJS will have a separate package path
-
-```javascript
-import { tokens } from "@equinor/eds-tokens/commonjs"
-```
-
-#### React storybook example
-
-```js
-import React from 'react'
-import { tokens } from '@equinor/eds-tokens'
-import styled from 'styled-components'
-
-const { h1: h1Tokens } = tokens.typography.heading
-
-const H1 = styled.h1(h1Tokens)
-
-export default {
-  title: 'Tokens|Example',
-  component: H1,
-}
-
-export const TokensExample = () => (
-  <div>
-    <H1>Some header</H1>
-  </div>
-)
-
-```
-
 [design tokens]: https://css-tricks.com/what-are-design-tokens/
diff --git a/libraries/tokens/package.json b/libraries/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-tokens",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Design tokens for the Equinor Design System",
   "main": "dist/tokens.cjs.js",
   "module": "dist/tokens.esm.js",