Merge pull request #80 from theiliad/optimize-READMEs

chore(monorepo): Update README content
carbon-design-system · Nov 6, 2018 · a5fffcf · a5fffcf
2 parents bb9e2b7 + 32405b9
commit a5fffcf
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 110 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -34,7 +34,7 @@ The **core** package (vanilla JS) demos can be launched using:
 npm run demo:server
 ```
 
-All wrapper package (currently **react** & **angular**) use Storybook for demos:
+All wrapper packages (currently **react** & **angular**) use Storybook for demos:
 
 ```sh
 npm run storybook
@@ -73,8 +73,8 @@ npm run storybook
     Demos all features | All interactions spec'd out in the Design Guide has visual support and a demo as proof.
     Documented/annotated | All rule blocks, placeholders, mixins, and functions has associated comment blocks that convey purpose and list inline notations referencing declarations that need further explanation.
     Matches UI/UX specs | All features are pixel perfect when compared to the Design Guide.
-    Meets the [code style guide](https://github.com/IBM/carbon-charts/wiki/Code-style-guide) | All code adheres to our custom style guide giving off the impression that it was written by one developer.
-    Accessible | All code passes the [Dynamic Assessment Plugin (DAP)](https://w3-connections.ibm.com/wikis/home?lang=en-us#!/wiki/W88ee03f8907c_412b_a3a8_988dabb72b35/page/Dynamic%20Assessment%20Plugin) scan in Chrome.
+    All new code follows similar structure and style to the existing codebase giving off the impression that it was written by one developer.
+    Accessible | All code passes the [Dynamic Assessment Plugin (DAP)](https://www.ibm.com/able/dynamic-assessment-plug-in.html) scan in Chrome.
     Mobile first | All visual elements are elegantly responsive.
     RTL support | All visual elements reflect bidirectional text appropriately.
     Performant | All Sass code is strategically written in a way to limit bloat in the compiled CSS.

diff --git a/README.md b/README.md
@@ -19,32 +19,12 @@
 
 ## Table of contents
 
-- [Component status](#component-status)
 - [Installation](#installation)
-- [Demo and documentation](#demo-and-documentation)
-- [Code Sample](#code-sample)
+- [Demo & Docs](#demo-and-documentation)
 - [Run Charts locally](#run-charts-locally)
+- [Component status](#component-status)
 - [Bugs and feature requests](#bugs-and-feature-requests)
 - [Contributing](#contributing)
-- [Community](#community)
-- [Versioning](#versioning)
-- [Copyright and license](#copyright-and-license)
-
-## Component status
-:white_check_mark: Stable :hourglass_flowing_sand: In progress
-
-| Component   | Vanilla            | Angular                  | React |
-|-------------|--------------------|--------------------------|-------|
-| Simple Bar  | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Grouped Bar | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Stacked Bar | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Donut       | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Line        | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Curved Line | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Pie         | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Step        | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
-| Combo       | :hourglass_flowing_sand:               | :hourglass_flowing_sand:                     | :hourglass_flowing_sand:  |
-| Area        | Soon               | Soon                     | :hourglass_flowing_sand:  |
 
 ## Getting started
 
@@ -58,98 +38,18 @@ npm install @carbon/charts --save
 ```
 
 ## Demo and documentation
+**Charts demos:**
+- [Vanilla JS](https://charts.carbondesignsystem.com/)
+- [Angular](https://charts.carbondesignsystem.com/angular)
 
-Charts' demo and documentation can be viewed in [GitHub Pages](https://pages.github.com/IBM/carbon-charts/) at <https://pages.github.com/IBM/carbon-charts/> and <https://pages.github.com/IBM/carbon-charts/documentation/> respectively.
+**Docs:** <https://charts.carbondesignsystem.com/documentation/>
 
 ### Code Sample
 <p align="center">
 	<img src="assets/demo-stacked-bar.png" alt="Stacked Bar Chart" width=600 />
 </p>
 
-HTML:
-```html
-<div id="stacked-bar-chart-holder"></div>
-```
-
-JS:
-```js
-import { BarChart } from "@carbon/charts";
-
-const colors = [
-	"#00a68f",
-	"#3b1a40",
-	"#473793",
-	"#3c6df0",
-	"#56D2BB"
-];
-
-const stackedBarData = {
-	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
-	datasets: [
-		{
-			label: "Dataset 1",
-			backgroundColors: [colors[0]],
-			data: [
-				65000,
-				29123,
-				35213,
-				51213,
-				16932
-			]
-		},
-		{
-			label: "Dataset 2",
-			backgroundColors: [colors[1]],
-			data: [
-				32432,
-				21312,
-				56456,
-				21312,
-				34234
-			]
-		},
-		{
-			label: "Dataset 3",
-			backgroundColors: [colors[2]],
-			data: [
-				12312,
-				23232,
-				34232,
-				12312,
-				34234
-			]
-		}
-	]
-};
-
-const stackedBarOptions = {
-	accessibility: false,
-	scales: {
-		x: {
-			title: "2018 Annual Sales Figures",
-		},
-		y: {
-			formatter: axisValue => {
-				return `${axisValue / 1000}k`;
-			},
-			yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
-			stacked: true
-		}
-	},
-	legendClickable: true,
-	containerResizable: true,
-};
-
-// Grab chart holder HTML element and initialize the chart
-const chartHolder = document.getElementById("stacked-bar-chart-holder");
-const barChart = new BarChart(
-	chartHolder,
-	{
-		data: stackedBarData,
-		options: stackedBarOptions,
-	}
-);
-```
+[![Edit Carbon Charts - Vanilla](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2plrn2jp7r)
 
 ### Run Charts locally
 1. Fork the project and clone your fork:
@@ -165,6 +65,22 @@ const barChart = new BarChart(
 3. Run `npm run demo:server` to serve up the demo locally.
 4. Finally, open <http://localhost:9001/> in your browser. SPOILER ALERT: There's no "Hello, World!"
 
+## Component status
+:white_check_mark: Stable :hourglass_flowing_sand: In progress
+
+| Component   | Vanilla            | Angular                  | React |
+|-------------|--------------------|--------------------------|-------|
+| Simple Bar  | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Grouped Bar | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Stacked Bar | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Donut       | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Line        | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Curved Line | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Pie         | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Step        | :white_check_mark: | :white_check_mark:       | :hourglass_flowing_sand:  |
+| Combo       | :hourglass_flowing_sand:               | :hourglass_flowing_sand:                     | :hourglass_flowing_sand:  |
+| Area        | Soon               | Soon                     | :hourglass_flowing_sand:  |
+
 ## Bugs and feature requests
 
 Have a bug or a feature request? First read the [issue guidelines](https://github.com/IBM/carbon-charts/blob/master/CONTRIBUTING.md#issue-guidelines) and search for existing and closed issues. If your problem or idea is not addressed yet, [open a new issue](https://github.com/IBM/carbon-charts/issues/new).