New release of icons, tokens & core-react npm packages (#239)

* Cleaned up package.json's * Updated READMES * Clarified component list * Added missing entries in changelogs * Fixes after feedback * Update libraries/core-react/README.md Co-Authored-By: Victor Nystad <[email protected]> * Update libraries/core-react/README.md Added in progress Co-Authored-By: Victor Nystad <[email protected]> * Added missing styled-compoents install Co-authored-by: Victor Nystad <[email protected]>
equinor · Feb 25, 2020 · 0b79f4b · 0b79f4b
1 parent a13ba6f
commit 0b79f4b
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 65 deletions.
diff --git a/libraries/core-react/CHANGELOG.md b/libraries/core-react/CHANGELOG.md
@@ -5,6 +5,25 @@ 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.1.0] - 2020-02-24
+
+### Added
+
+New components
+
+- Button
+  - Ghost icon variant
+- List
+- TopBar
+- Icon
+- Tabs
+
+### Changed
+
+- Updated README to me abit more clearer
+- Adjustments to to `package.json` to be more in line with our other packages
+- New versioning of packages
+
 ## [0.0.1-alpha.10] - 2020-01-22
 
 ### Fixed

diff --git a/libraries/core-react/README.md b/libraries/core-react/README.md
@@ -1,20 +1,63 @@
 # @equinor/eds-core-react
 
-The React implementation of the Equinor Design System, still in early alpha so by no means ready for production.
+Available componenets 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!
+
+## Installation
+
+```sh
+npm install @equinor/eds-core-react styled-components
+```
 
 ## Components
+
+### Available ✅
   - Button
+    - Contained
+    - Outlined
+    - Ghost
+    - Ghost Icon
   - Divider
   - Table
   - Typography
   - TextField
+  - List
+  - TopBar
+  - Icon
+  - Tabs
+### In progress 👷‍♀️
+
+- Tabs
+- Accordion
+
+### TODO 🛠️
+  - Button
+    - Contained w/icon left/right 
+    - Outlined w/icon left/right
+    - Ghost w/icon left/right
+  - Cards
+  - Progress indicators
+  - Popover
+  - Chips
+  - Menu
+  - App launcher
+  - Breadcrumbs
+  - Table of contents
+  - Navigation drawer
+  - Pagination
+  - Dialog
+  - Banner
+  - Snackbar
+  - Scrim
+  - Search
+  - Selection Controls
+  - Side Sheet
+  - Slider
+  - Stepper
+  - Tooltip
 
-## Installation
 
-```sh
-npm install @equinor/eds-core-react@alpha
-npm install styled-components
-```
 
 ## Usage
 

diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json
@@ -1,35 +1,40 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.0.1-alpha.10",
-  "engines": {
-    "pnpm": ">=4"
-  },
+  "version": "0.1.0",
   "description": "The React implementation of the Equinor Design System",
   "main": "dist/core-react.cjs.js",
   "module": "dist/core-react.es.js",
   "browser": "dist/core-react.umd.js",
-  "homepage": "https://github.com/equinor/design-system/tree/prerelease/libraries/core-react",
+  "license": "AGPL-3.0-or-later",
+  "author": {
+    "name": "EDS Core Team",
+    "email": "[email protected]"
+  },
+  "homepage": "https://eds.equinor.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/equinor/design-system"
+    "url": "https://github.com/equinor/design-system",
+    "directory": "libraries/core-react"
+  },
+  "bugs": {
+    "url": "https://github.com/equinor/design-system/issues"
   },
   "files": [
     "dist/*"
   ],
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
-    "develop": "rollup -c -w",
+    "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch"
   },
   "keywords": [
     "eds",
     "design system",
-    "react",
-    "equinor"
+    "equinor",
+    "react"
   ],
-  "license": "AGPL",
   "devDependencies": {
     "@babel/cli": "^7.7.5",
     "@babel/core": "^7.7.5",
@@ -66,5 +71,8 @@
   },
   "dependencies": {
     "@equinor/eds-tokens": "workspace:*"
+  },
+  "engines": {
+    "pnpm": ">=4"
   }
 }
diff --git a/libraries/icons/CHANGELOG.md b/libraries/icons/CHANGELOG.md
@@ -5,6 +5,14 @@ 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.1.0] - 2020-02-24
+
+### Changed
+
+- Updated README to me abit more clearer
+- Adjustments to to `package.json` to be more in line with our other packages
+- New versioning of packages
+
 ## [0.0.1-alpha.3] - 2020-01-24
 
 ### Added

diff --git a/libraries/icons/README.md b/libraries/icons/README.md
@@ -1,55 +1,77 @@
 # @equinor/eds-icons
 
-*Still in development so breaking changes may occur*
 
-This package is just a collection of the `system icons` as svg files. How you use them is up to your choice of technology and frameworks.
+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
+npm install @equinor/eds-icons styled-components
 ```
 
 ## Usage
 
 Import using one of the following options to get the svg data:
 
-### Usage
+### Import  
+
+#### ES Module
+Most loaders should handle [ECMAScript Modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/).
 
-#### Use as ESM Module
-Add `"type":"module" ` to your apps `package.json` 
 ```javascript
 import { star_filled } from "@equinor/eds-icons"
 ```
 
-#### Use as CommonJS Module
+#### CommonJS module
 CommonJS will have a separate package path 
 ```javascript
 const icons = require("@equinor/eds-icons/commonjs")
 ```
 
-#### SVG data
+#### FAQ
 
-⚠️ Due to how Figma parses and exports svg icons the following attributes must be added to your path element for now:  `fill-rule="evenodd" clip-rule="evenodd"`
+* 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.
 
-```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',
-}
-```
+* 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
 
+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)
 
-Use [EDS Aseets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/Assets?node-id=2%3A3)(Equinor Figma account needed🔒) for icon names. Spaces in icon names are replaced with underscores. 
+⚠️ Due to how Figma parses and exports svg icons the following attributes must be added to your `<path></path>` element; `fill-rule="evenodd" clip-rule="evenodd"`
+
+
+Use [EDS Assets in Figma](https://www.figma.com/file/BQjYMxdSdgRkdhKTDDU7L4KU/Assets?node-id=2%3A3)(Equinor Figma account needed🔒) or [storefront](https://eds.equinor.com/assets/system-icons/library/) for icon names. Spaces in icon names are replaced with underscores. 
+
+`star-filled -> star_filled`.
+
+#### React
+
+We have developed a react component to simplify use of the EDS icons library within react.
+
+```javascript
+import { Icon } from '@equinor/eds-core-react'
+import { save } from '@equinor/eds-icons'
 
-For example: `star-filled -> star_filled`.
+// Add to library (this needs only be done once)
+Icon.add({ save })
 
-### React
+// Renders "save" icon
+<Icon name="save" />
 
-We suggest using the [svg](https://developer.mozilla.org/en-US/docs/Web/SVG) element with the svg data provided
+``` 
 
 
 ## Credits

diff --git a/libraries/icons/package.json b/libraries/icons/package.json
@@ -1,27 +1,29 @@
 {
   "name": "@equinor/eds-icons",
-  "version": "0.0.1-alpha.3",
+  "version": "0.1.0",
+  "description": "Icons from the Equinor Design System",
   "type": "module",
   "main": "dist/icons.esm.js",
   "module": "dist/icons.esm.js",
   "browser": "dist/icons.umd.js",
-  "engines": {
-    "pnpm": ">=4"
-  },
-  "files": [
-    "dist/*",
-    "commonjs/*"
-  ],
-  "description": "Icons from the Equinor Design System",
+  "license": "Apache-2.0",
   "author": {
     "name": "EDS Core Team",
     "email": "[email protected]"
   },
+  "homepage": "https://eds.equinor.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/equinor/design-system"
+    "url": "https://github.com/equinor/design-system",
+    "directory": "libraries/icons"
   },
-  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/equinor/design-system/issues"
+  },
+  "files": [
+    "dist/*",
+    "commonjs/*"
+  ],
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
@@ -33,8 +35,11 @@
     "equinor",
     "icons"
   ],
-  "dependencies": {
+  "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.0.0",
     "rollup": "^1.29.0"
+  },
+  "engines": {
+    "pnpm": ">=4"
   }
 }
diff --git a/libraries/tokens/CHANGELOG.md b/libraries/tokens/CHANGELOG.md
@@ -5,6 +5,14 @@ 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.1.0] - 2020-02-24
+
+### Changed
+
+- Updated README to me abit more clearer
+- Adjustments to to `package.json` to be more in line with our other packages
+- New versioning of packages
+
 ## [0.0.1-alpha.7] - 2020-01-22
 
 ### Changed

diff --git a/libraries/tokens/README.md b/libraries/tokens/README.md
@@ -1,7 +1,5 @@
 # @equinor/eds-tokens
 
-**Alpha release, so breaking changes may occur**
-
 Design tokens used in Equinor Design System (EDS).
 
 ## Documentation

diff --git a/libraries/tokens/package.json b/libraries/tokens/package.json
@@ -1,27 +1,29 @@
 {
   "name": "@equinor/eds-tokens",
-  "version": "0.0.1-alpha.7",
-  "type": "module",
+  "version": "0.1.0",
+  "description": "Design tokens for the Equinor Design System",
   "main": "dist/tokens.esm.js",
   "module": "dist/tokens.esm.js",
   "browser": "dist/tokens.umd.js",
-  "engines": {
-    "pnpm": ">=4"
-  },
-  "files": [
-    "dist/*",
-    "commonjs/*"
-  ],
-  "description": "Design tokens for the Equinor Design System",
+  "type": "module",
+  "license": "AGPL-3.0-or-later",
   "author": {
     "name": "EDS Core Team",
     "email": "[email protected]"
   },
+  "homepage": "https://eds.equinor.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/equinor/design-system"
+    "url": "https://github.com/equinor/design-system",
+    "directory": "libraries/tokens"
   },
-  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/equinor/design-system/issues"
+  },
+  "files": [
+    "dist/*",
+    "commonjs/*"
+  ],
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
@@ -37,5 +39,8 @@
     "@rollup/plugin-node-resolve": "^7.0.0",
     "rollup": "^1.29.0"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "engines": {
+    "pnpm": ">=4"
+  }
 }