home page

.gitignore

@@ -1,3 +1,4 @@
+storybook-static/
 _trash/
 build/
 coverage/

.storybook/config.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
+
+import './index.scss';
+
+const StorybookDecorator = (story) => (
+  <div style={{margin: '40px'}}>
+    {story()}
+  </div>
+);
+
+addDecorator(StorybookDecorator);
+
+// automatically import all files ending in *.story.js
+const req = require.context('./../src', true, /.story.js$/);
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

.storybook/index.scss

@@ -0,0 +1 @@
+@import './../src/style/helpers';

.storybook/proxy-loader.js

@@ -0,0 +1,48 @@
+var utils = require('loader-utils');
+var requireRelative = require('require-relative');
+
+function proxyLoader(source, map) {
+	var options = utils.getOptions(this);
+
+	// First run proxy-loader run
+	if (!this.query.__proxy_loader__) {
+		// Store passed options for future calls to proxy-loader with same loaderContext (this)
+		// e.g. calls via 'this.addDependency' from actual loader
+		this.query.__proxy_loader__ = { loader: options.loader, cwd: options.cwd };
+
+		// Remove proxy-loader options and make this.query act as requested loader query
+		swapOptions(this, options.options);
+	}
+	var proxyOptions = this.query.__proxy_loader__;
+
+	var loader;
+	try {
+		loader = requireRelative(proxyOptions.loader, proxyOptions.cwd);
+	} catch (e) {
+		loader = require(proxyOptions.loader);
+	}
+
+	// Run actual loader
+	return loader.call(this, source, map);
+}
+
+function swapOptions(loaderContext, newOptions) {
+	var copy = {};
+	var key = '';
+
+	for (key in newOptions) {
+		copy[key] = newOptions[key];
+	}
+
+	// Delete all existing loader options
+	delete loaderContext.query.options;
+	delete loaderContext.query.loader;
+	delete loaderContext.query.cwd;
+
+	// Add new options
+	for (key in copy) {
+		loaderContext.query[key] = copy[key];
+	}
+}
+
+module.exports = proxyLoader;

.storybook/webpack.config.js

@@ -0,0 +1,154 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+const autoprefixer = require('autoprefixer');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path');
+
+const cwd = path.resolve(__dirname, './../');
+const nodeModules = path.resolve(__dirname, './../node_modules');
+const appSrc = path.resolve(__dirname, './../src');
+
+const browsers = ['> 1%', 'last 2 versions', 'IE >= 9'];
+const isProd = false;
+
+
+module.exports = {
+
+  resolve: {
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We placed these paths second because we want `node_modules` to "win"
+    // if there are any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    modules: [
+      'node_modules',
+      nodeModules,
+      appSrc,
+    ],
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    // `web` extension prefixes have been added for better support
+    // for React Native Web.
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.scss', '.sass', '.styl', '.css'],
+
+    alias: {
+      'react': 'preact-compat',
+      'react-dom': 'preact-compat',
+      // Not necessary unless you consume a module using `createClass`
+      'create-react-class': 'preact-compat/lib/create-react-class'
+    }
+  },
+
+  resolveLoader: {
+    alias: {
+      'proxy-loader': require.resolve('./proxy-loader')
+    }
+  },
+
+  module: {
+    rules: [
+      // add your custom rules.
+
+      { // SASS
+        enforce: 'pre',
+        test: /\.s[ac]ss$/,
+        use: [
+          {
+            loader: 'proxy-loader',
+            options: {
+              cwd,
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+                includePaths: [nodeModules]
+              }
+            }
+          }
+        ]
+      },
+
+      { // User styles
+        test: /\.(css|less|s[ac]ss|styl)$/,
+        include: [
+          // don't include src/styles
+          path.resolve(__dirname, './../src/components'),
+          path.resolve(__dirname, './../src/layouts'),
+          path.resolve(__dirname, './../src/routes'),
+        ],
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                localIdentName: '[local]__[hash:base64:5]',
+                importLoaders: 1,
+                sourceMap: isProd
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                ident: 'postcss',
+                sourceMap: true,
+                plugins: [autoprefixer({ browsers })]
+              }
+            }
+          ]
+        })
+      },
+      { // External / `node_module` styles
+        test: /\.(css|less|s[ac]ss|styl)$/,
+        exclude: [
+          // don't include src/styles
+          path.resolve(__dirname, './../src/components'),
+          path.resolve(__dirname, './../src/layouts'),
+          path.resolve(__dirname, './../src/routes'),
+        ],
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: isProd
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                ident: 'postcss',
+                sourceMap: true,
+                plugins: [autoprefixer({ browsers })]
+              }
+            }
+          ]
+        })
+      },
+      {
+        test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif|mp4|mov|ogg|webm)(\?.*)?$/i,
+        loader: isProd ? 'file-loader' : 'url-loader'
+      }
+
+    ],
+  },
+
+  plugins: [
+    // your custom plugins
+
+    // Extract CSS
+    new ExtractTextPlugin({
+      filename: isProd ? 'style.[contenthash:5].css' : 'style.css',
+      disable: !isProd,
+      allChunks: true
+    }),
+  ],
+};

package.json

@@ -10,27 +10,41 @@
     "serve": "preact build --service-worker false && preact serve",
     "lint": "eslint src",
     "predeploy": "NODE_ENV=production yarn build",
-    "deploy": "firebase deploy"
+    "deploy": "firebase deploy",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "eslintIgnore": [
     "build/*"
   ],
   "devDependencies": {
+    "@storybook/react": "^3.4.8",
+    "autoprefixer": "^8.6.4",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "css-loader": "^0.28.11",
     "eslint": "^4.5.0",
     "eslint-config-prettier": "^2.9.0",
+    "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-preact": "^1.1.6",
     "eslint-config-synacor": "^1.1.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.11",
     "firebase-tools": "^3.19.1",
     "if-env": "^1.0.0",
     "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.5",
     "preact-cli": "^2.0.0",
-    "sass-loader": "^7.0.3"
+    "proxy-loader": "^0.1.0",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1"
   },
   "dependencies": {
     "bootstrap": "^4.1.1",
+    "gef": "https://bitbucket.org/dec-ce/gef.git",
     "preact": "^8.2.1",
-    "preact-compat": "^3.17.0",
+    "preact-compat": "^3.18.0",
     "preact-router": "^2.6.1",
-    "reactstrap": "^6.2.0"
+    "reactstrap": "^6.2.0",
+    "uikit": "^3.0.0-rc.6"
   }
 }

preact.config.js

@@ -5,8 +5,7 @@ const appSrcPath = path.resolve(process.cwd(), 'src');
 module.exports = (config, env, helpers) => {
 
   // resolve module paths
-  const newResolveModules = [...config.resolve.modules, appSrcPath];
-  config.resolve.modules = newResolveModules;
+  config.resolve.modules = [...config.resolve.modules, appSrcPath];
 
   if (env === 'development') {
     // show fullscreen error overlay

src/components/gefFooter/gefFooter.story.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import GefFooter from './index';
+
+
+storiesOf('Avatar', module)
+
+  .add('should render initials MP', () => {
+    return (
+      <GefFooter />
+    )
+  })
+
+;

src/components/gefFooter/index.js

@@ -0,0 +1,39 @@
+import { h } from 'preact';
+import {
+  Container,
+  Row,
+  Col,
+} from 'reactstrap';
+
+import Logo from './doe-black-logo.png';
+
+const GefFooter = () => {
+  return (
+    <footer className="gef-global-footer">
+      <Container>
+        <div className="gef-global-footer__inner">
+          <div className="gef-global-footer__inner__wrapper">
+            <Row>
+              <Col md={6} lg={7}>
+                <Row>
+                  <Col md={6}>
+                    <ul className="list-unstyled">
+                      <li><a native href="">Accessibility</a></li>
+                    </ul>
+                  </Col>
+                  <Col md={6}>
+                  </Col>
+                </Row>
+              </Col>
+              <Col md={4} lg={3}>
+                <img src={Logo} width={130} height={47} alt="NSW Department of Education logo" />
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  )
+};
+
+export default GefFooter;

src/components/stickyPageLayout/index.js

@@ -0,0 +1,33 @@
+import { h } from 'preact';
+import style from './style.scss';
+
+/**
+ * Sticky Footer Layout
+ *
+ * example:
+   <StickyContainer>
+     <StickyBodyPanel>
+      body
+     </StickyBodyPanel>
+     <StickyFooterPanel>
+      footer
+     </StickyFooterPanel>
+   </StickyContainer>
+ */
+
+export const StickyContainer = ({ children }) => (
+  <div className={style.wrapper}>
+    {children}
+  </div>
+);
+export const StickyBodyPanel = ({ children }) => (
+  <div className={style.body}>
+    {children}
+  </div>
+);
+
+export const StickyFooterPanel = ({ children }) => (
+  <div className={style.footer}>
+    {children}
+  </div>
+);