Add an introduction to storybook with CSS link

- Add an introduction story with rendered README.md

- Add CSS link to README.md

- Ensure dist.zip gets deployed along with Storybook

- Rework gh deployment into a shell script

- Refactor some common story code into lib

- Misc cleanup of old demo files

- Ignore gh-pages for build & test

Fixes FirefoxUX#44

.circleci/config.yml

@@ -37,13 +37,16 @@ jobs:
     steps:
       - attach_workspace:
           at: .
-      - run: npm run deploy:storybook
+      - run: ./bin/deploy-gh-master.sh
 
 workflows:
   version: 2
   build_test_deploy:
     jobs:
-      - build
+      - build:
+          filters:
+            branches:
+              ignore: gh-pages
       - storybook_deploy:
           requires:
             - build

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 storybook
 vendor
 dist
+deploy

.gitignore

@@ -5,4 +5,5 @@ npm-debug.log
 *.log
 *.sw?
 *~
-dist
+dist
+deploy

.storybook/config.js

@@ -5,6 +5,7 @@ import "../index.js";
 const reqInSrcTree = require.context("../components", true, /\/stories.jsx?$/);
 
 function loadStories() {
+  require("../stories.js");
   reqInSrcTree.keys().forEach(filename => reqInSrcTree(filename));
 }
 

.stylelintignore

@@ -2,4 +2,5 @@ node_modules
 storybook
 vendor
 dist
+deploy
 

README.md

@@ -8,6 +8,14 @@ These components are intended to be used anywhere where you want to make an HTML
 
 This repository is not intended for a general audience. You do not have to use React to make use of the styles.
 
+## Preview & Download
+
+Preview the latest build from master here:
+* <https://firefoxux.github.io/photon-components-web/>
+
+Download the latest build from master here:
+* <https://firefoxux.github.io/photon-components-web/dist.zip>
+
 ## Development
 
 To get started:

attributes/shadows.css

@@ -1,4 +1,4 @@
-@import url('../vendor/photon-colors.css');
+@import url('~photon-colors/photon-colors.css');
 
 .shadow-10 {
   box-shadow: 0 1px 4px var(--grey-90-a10);

bin/deploy-gh-master.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -ex
+
+# Skip builds without credentials
+if [[ -z "$GH_TOKEN" ]]; then
+  echo "Skipping deploy for missing credentials";
+  exit 0;
+fi
+
+rm -rf deploy dist
+mkdir deploy
+npm run build
+cp -r storybook/* deploy/
+zip -r deploy/dist.zip dist
+
+./node_modules/.bin/gh-pages \
+  --silent \
+  --dist deploy \
+  --user 'GH Deploy <lorchard@mozilla.com>' \
+  --repo https://$GH_TOKEN@github.com/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME.git

components/Button/stories.js

@@ -1,28 +1,9 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-
-import { action } from "@storybook/addon-actions";
-
-import { ExtractSource } from "../../.storybook/code-sample";
-
-// TODO: Actually build & use a React component for the markup
-// import Button from "./index";
+import { Sample } from "../../lib/stories-common";
 
 import "./index.css";
-import imageSync from "../../vendor/sync-16.svg";
-
-const actionDefault = msg => ev => {
-  ev.preventDefault();
-  action(msg)(ev);
-};
-
-const Sample = ({ children, ...props }) => (
-  <ExtractSource {...props}>
-    <div className="sample" onClick={actionDefault("clicked")}>
-      {children}
-    </div>
-  </ExtractSource>
-);
+import imageSync from "./sync-16.svg";
 
 storiesOf("Button", module)
   .add("Default", () => (

components/Card/stories.js

@@ -1,27 +1,11 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-
-import { action } from "@storybook/addon-actions";
-
-import { ExtractSource } from "../../.storybook/code-sample";
+import { Sample } from "../../lib/stories-common";
 
 import Card from "./index";
 
 import "./index.css";
 
-const actionDefault = msg => ev => {
-  ev.preventDefault();
-  action(msg)(ev);
-};
-
-const Sample = ({ children, ...props }) => (
-  <ExtractSource {...props}>
-    <div className="sample" onClick={actionDefault("clicked")}>
-      {children}
-    </div>
-  </ExtractSource>
-);
-
 storiesOf("Card", module)
   .add("Default", () => (
     <Sample notes={"This is a very simple Card container."}>

components/Link/stories.js

@@ -1,23 +1,9 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { ExtractSource } from "../../.storybook/code-sample";
+import { Sample } from "../../lib/stories-common";
 
 import Link from "./index";
 
-const actionDefault = msg => ev => {
-  ev.preventDefault();
-  action(msg)(ev);
-};
-
-const Sample = ({ children, ...props }) => (
-  <ExtractSource {...props}>
-    <div className="sample" onClick={actionDefault("clicked")}>
-      {children}
-    </div>
-  </ExtractSource>
-);
-
 storiesOf("Link", module)
   .add("Everything", () => (
     <Sample notes={"This is a very simple Link."}>

index.js

@@ -1,6 +1,6 @@
 import "photon-colors/photon-colors.css";
 
-import "./base.css";
+import "./index.css";
 
 import "./attributes";
 

lib/stories-common.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { ExtractSource } from "../.storybook/code-sample";
+
+export const actionDefault = msg => ev => {
+  ev.preventDefault();
+  action(msg)(ev);
+};
+
+export const Sample = ({ children, ...props }) => (
+  <ExtractSource {...props}>
+    <div className="sample" onClick={actionDefault("clicked")}>
+      {children}
+    </div>
+  </ExtractSource>
+);