Merge pull request #3218 from ONRR/patterns-content

[WIP] Adds pattern library documentation

gatsby-site/src/components/tables/StackedBarSingleChartTableRow_README.md

@@ -13,15 +13,19 @@ patternCategory: Tables
 			            		chartData={[{'Onshore':60, 'Offshore': 50, 'GOMESA':100}]} />
 ```
 
-The StackedBarSingleChartTableRow is stacked. Ryan and/or Shannon please add a description.
+This pattern displays a table with a fund or source, a description, and a horizontal bar chart. It allows us to show a total amount (the full width of the bar) and relative amounts for components of the total (through color variations). For example, the disbursements horizontal bars display the relative volumes for geographic origin (onshore, offshore) and/or authorization (e.g. GOMESA) that comprise the total disbursement to a given fund.
 
 ## How to use
-Wisely
+This pattern is best used to display totals and portions of those totals in a single bar. It is spatially efficient, because it uses a single bar to display multiple volumes. It should be used when there are three or more component portions of a total. If there is one discrete amount, this chart pattern is unnecessary. If there are only two values, showing two separate bars may be more intuitive than using the stacked pattern. 
 
-### Chart Data:
+Color contrast is a challenge when using stacked charts. The contrast between the bar colors must be sufficient to visually distinguish them. But each color should also have [sufficient contrast with the chart's background color to be accessible](https://webaim.org/resources/contrastchecker/). 
+
+This balance can be difficult to achieve with certain color palettes. Consequently, the chart color must not be the only way to see and understand the relative volumes; the numeric values should be listed as well, without interacting with the chart. 
+
+### Chart data
 This is an array of objects that will be used to populate the stacked bar
 
-### Max Value:
+### Max value
 You can pass a max value to the bar chart that will be used to relatively size the bar to that max value vs the max value of the chart data only.
 
 ### CSS for colors:

package.json

@@ -14,7 +14,7 @@
 		"prestart": "if [ ! -d node_modules ]; then npm install; fi",
 		"build": "rm -r _site; bundle exec jekyll build",
 		"build-win": "if exist _site (rd /s /q _site; && bundle exec jekyll build) else (bundle exec jekyll build)",
-		"federalist": "webpack && npm run release-styleguide && npm run release-gatsby",
+		"federalist": "webpack && npm run release-gatsby && npm run release-patterns",
 		"start-states": "bundle exec jekyll serve --incremental --config _config.yml,_config-dev.yml",
 		"start-jekyll": "bundle exec jekyll build --watch --incremental --config _config.yml,_config-dev.yml",
 		"test": "mocha test/*.js test/**/*.js",