@madgex/design-system 1.0.1 → 1.2.0

package/.browserlistrc

@@ -0,0 +1,3 @@
+last 2 versions
+not dead
+IE 11

package/.prettierignore

@@ -1,3 +1,3 @@
-tokens/build
+src/tokens/build
 public
 dist

package/.vscode/launch.json

@@ -4,6 +4,14 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch via NPM",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "debug"],
+      "port": 9229
+    },
     {
       "name": "GulpTester",
       "type": "node",

package/README.md

@@ -1,112 +1,23 @@
-# Basic Style Dictionary
+# Madgex Design System
 
-This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, just cd into this directory and run:
-```bash
-style-dictionary build
-```
-
-You should see something like this output:
-```
-Reading config file from ./config.json
-Building all platforms
-
-scss
-✔︎ build/scss/_variables.scss
+A work-in progress Design System for building a UI for Madgex products.
 
-android
-✔︎ build/android/font_dimens.xml
+## Usage
 
-ios
-✔︎ build/ios/StyleDictionaryColor.h
-✔︎ build/ios/StyleDictionaryColor.m
-```
-
-Pat yourself on the back, you just built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look like this:
-```
-├── android/
-│   ├── font_dimens.xml
-│   ├── colors.xml
-├── scss/
-│   ├── _variables.scss
-├── ios/
-│   ├── StyleDictionaryColor.h
-│   ├── StyleDictionaryColor.m
+```bash
+npm install @madgex/design-system --save
 ```
 
-If you open `config.json` you will see there are 3 platforms defined: scss, android, ios. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
+## Importing styles
 
-**Android**
-```xml
-<!-- font_dimens.xml -->
-<resources>
-  <dimen name="size_font_small">12.00sp</dimen>
-  <dimen name="size_font_medium">16.00sp</dimen>
-  <dimen name="size_font_large">32.00sp</dimen>
-  <dimen name="size_font_base">16.00sp</dimen>
-</resources>
+You'll need to import the Madgex DS styles into your main Sass file.
 
-<!-- colors.xml -->
-<resources>
-  <color name="color_base_gray_light">#CCCCCC</color>
-  <color name="color_base_gray_medium">#999999</color>
-  <color name="color_base_gray_dark">#111111</color>
-  <color name="color_font_base">#111111</color>
-  <color name="color_font_secondary">#999999</color>
-  <color name="color_font_tertiary">#CCCCCC</color>
-</resources>
-```
+To import add the below to your Sass file:
 
-**SCSS**
 ```scss
-// variables.scss
-$color-base-gray-light: #CCCCCC;
-$color-base-gray-medium: #999999;
-$color-base-gray-dark: #111111;
-$color-font-base: #111111;
-$color-font-secondary: #999999;
-$color-font-tertiary: #CCCCCC;
-$size-font-small: 0.75rem;
-$size-font-medium: 1rem;
-$size-font-large: 2rem;
-$size-font-base: 1rem;
+@import 'node_modules/@madgex/design-system/public/css/index.css';
 ```
 
-**iOS**
-```objc
-@implementation StyleDictionaryColor
-
-+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
-  return [[self values] objectAtIndex:colorEnum];
-}
-
-+ (NSArray *)values {
-  static NSArray* colorArray;
-  static dispatch_once_t onceToken;
-
-  dispatch_once(&onceToken, ^{
-    colorArray = @[
-[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f],
-[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
-[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
-[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
-[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
-[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f]
-    ];
-  });
-
-  return colorArray;
-}
-
-@end
-```
-
-Pretty nifty! This shows a few things happening:
-1. The build system does a deep merge of all the property JSON files defined in the `source` attribute of `config.json`. This allows you to split up the property JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
-1. The build system resolves references to other style properties. `{size.font.medium.value}` gets resolved properly
-1. The build system handles references to property values in other files as well as you can see in `properties/color/font.json`
-
-Now lets make a change and see how that affects things. Open up `properties/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
-
-**Huzzah!**
+## Releases
 
-Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).
+With every commit to `master` the build server attempts to create a new version using [semantic-release](https://semantic-release.gitbook.io/semantic-release/) and deploys to `NPM`.

package/docs/tokens/colour.njk

@@ -6,24 +6,26 @@ title: Colour Palette | Madgex Design System
 
 Your context and coding style determine how you access MDS color tokens in code.
 
+{# 
 |  Context | Usage  | Example |
 |---|---|---|
 |  function | `color: color(color)` | `color: color('primary')` |
+#}
 
 {# <pre>{{ tokens.color | dump }}</pre> #}
 
 {% macro swatch(item) %}
   <div class="color">
     <div class="swatch" style="background-color: {{ item.value }}"></div>
-    <span>{{ item.value }}</span>
+    <span><code>{{ item.value }}</code></span>
     <span>{{ item.comment }}</span>
     <span>
       <em>SCSS:</em>
-      {{ item.path }}
+      <code>$mds-{{ item.path | join('-') | replace(",", "-") }}</code>
     </span>
     <span>
       <em>JavaScript:</em>
-      {{item.name}}
+      <code>{{item.name}}</code>
     </span>
     {# <pre>{{ item | jsonify }}</pre> #}
   </div>

package/docs/tokens/icons.njk

@@ -0,0 +1,26 @@
+---
+title: Icons | Madgex Design System
+---
+
+All icons available in MDS
+
+{# <pre>{{ icons | dump }}</pre> #}
+
+{% macro Icon(params) %}
+<svg class="mds-icon mds-icon--{{ params.name }}{% if class %} {{ class }}{% endif %}">
+  <use xlink:href="{{ '/assets/icons.svg' | path }}#{{ params.name }}" />
+</svg>
+{% endmacro %}
+
+
+<div class="colors" style="background-color: grey; color: black;">
+  {% for icon in icons %}
+    <p>
+      {{ Icon({
+        name: icon.name
+      }) }}
+
+      {{ icon.name }}
+    </p>
+  {% endfor %}
+</div>

package/docs/tokens/spacing.njk

@@ -2,4 +2,19 @@
 title: Spacing | Madgex Design System
 ---
 
-Spacing used in MDS
+<style>
+.space-example {
+  width: 100px;
+  display: block;
+  background-color: #005ea2;
+}
+</style>
+
+Spacing used in MDS
+
+|  Token  |  Value  | Example  |
+|---|---|---|
+{%- for key, item in tokens.size.space %}
+|  {% if item.path | length %}$mds-{{ item.path | join('-') }}{% endif %} |  {{item.original.value}}  |  <span class="space-example" style="height: {{item.original.value}};"></span>  |
+{%- endfor -%}
+

package/fractal-theme/views/layouts/skeleton.nunj

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ frctl.theme.get('lang') | default('en') }}" dir="{{ 'rtl' if frctl.theme.get('rtl') else 'ltr' }}" class="no-js">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+    window.frctl = {
+        env: '{% if frctl.env.server %}server{% else %}static{% endif %}'
+    };
+    </script>
+    <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
+    <meta name="robots" content="noindex">
+
+    {% include 'partials/head.nunj' %}
+</head>
+<body>
+
+{% block page %}{% endblock %}
+
+{% include 'partials/foot.nunj' %}
+</body>
+</html>

package/fractal.js

@@ -1,11 +1,13 @@
-const Fractal = require('@frctl/fractal');
+const fractal = (module.exports = require('@frctl/fractal').create()); // eslint-disable-line
+const path = require('path');
 
-const fractal = Fractal.create();
-// const fractal = (module.exports = require('@frctl/fractal').create());
 const mandelbrot = require('@frctl/mandelbrot');
-const path = require('path');
 const nunjucks = require('@frctl/nunjucks')({
-  paths: [path.resolve(__dirname, 'src/components'), path.resolve(__dirname, 'src/')],
+  paths: [
+    path.resolve(__dirname, 'src/components'),
+    path.resolve(__dirname, 'src/patterns'),
+    path.resolve(__dirname, 'src/'),
+  ],
   // pristine: true,
   filters: {
     // filter-name: function filterFunc(){}
@@ -19,22 +21,25 @@ const nunjucks = require('@frctl/nunjucks')({
     // extension-name: function extensionFunc(){}
   },
 });
-const pkg = require('./package.json');
-const tokens = require('./tokens/build/js/_variables-module');
 
-fractal.components.engine(nunjucks); // use Nunjucks for components
-fractal.components.set('ext', '.njk');
+const pkg = require(path.join(__dirname, 'package.json')); // eslint-disable-line
+const tokens = require('./dist/_tokens/js/_tokens-module');
+const icons = require('./dist/assets/icons.json');
 
-/*
- * Give your project a title.
+/**
+ * Metadata
  */
 fractal.set('project.title', 'Madgex Design System');
+// Provide the package.json "version" to the templates
 fractal.set('project.version', pkg.version);
 
-/*
- * Tell Fractal where to look for components.
+fractal.components.engine(nunjucks); // use Nunjucks for components
+fractal.components.set('ext', '.njk');
+
+/**
+ * Files location
  */
-fractal.components.set('path', path.join(__dirname, 'src/components'));
+fractal.components.set('path', path.join(__dirname, 'src'));
 fractal.components.set('default.collated', 'true');
 fractal.components.set('default.preview', '@preview');
 
@@ -46,18 +51,21 @@ fractal.docs.set('ext', '.njk'); // default is '.md'
 fractal.docs.set('path', path.join(__dirname, 'docs'));
 fractal.docs.set('default.context', {
   tokens,
+  icons,
 });
 
+/**
+ * Build options
+ */
+// If you change the build destination, you should adapt webpack.common.js "output.path" too.
+fractal.web.set('builder.dest', path.join(__dirname, '/public'));
+
 /*
  * Tell the Fractal web preview plugin where to look for static assets.
  */
 fractal.web.set('static.path', path.join(__dirname, '/dist'));
 
 const madgexTheme = mandelbrot({
-  // skin: 'black',
-  // any other theme configuration values here
-  // nav: ['docs', 'components'],
-  // which panels to show
   panels: ['html', 'notes', 'view', 'context', 'resources', 'info'],
   styles: ['default', '/assets/css/styles.css'],
   // scripts: ['default', '/assets/theme/js/scripts.js'],
@@ -74,7 +82,8 @@ madgexTheme.addStatic(`${__dirname}/fractal-theme/assets`, '/assets');
 
 fractal.web.theme(madgexTheme);
 
-/* Set the static HTML build destination */
-fractal.web.set('builder.dest', `${__dirname}/public`);
-
-module.exports = fractal;
+/**
+ * Server configuration
+ */
+fractal.web.set('server.port', 4000);
+fractal.web.set('server.sync', true);

package/{tasks → gulp-tasks}/css.js

@@ -1,9 +1,10 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
+const rename = require('gulp-rename');
 
 function css() {
   return gulp
-    .src(['./src/core/index.scss'])
+    .src('src/scss/index.scss')
     .pipe(
       sass.sync({
         outputStyle: 'expanded',
@@ -12,6 +13,7 @@ function css() {
       })
     )
     .on('error', sass.logError)
+    .pipe(rename('index.css'))
     .pipe(gulp.dest('dist/css'));
 }
 

package/{tasks → gulp-tasks}/fractal.js

@@ -1,12 +1,11 @@
-const fractal = require('../fractal.js');
-// import the Fractal instance configured in the fractal.js file
-const logger = fractal.cli.console; // make use of Fractal's console object for logging
-
 /*
  * An example of a Gulp task that starts a Fractal development server.
  */
 
 function fractalStart() {
+  const fractal = require('../fractal.js');
+  // import the Fractal instance configured in the fractal.js file
+  const logger = fractal.cli.console; // make use of Fractal's console object for logging
   const server = fractal.web.server({
     sync: true,
   });
@@ -17,6 +16,9 @@ function fractalStart() {
 }
 
 function fractalBuild() {
+  const fractal = require('../fractal.js');
+  // import the Fractal instance configured in the fractal.js file
+  const logger = fractal.cli.console; // make use of Fractal's console object for logging
   const builder = fractal.web.builder();
   builder.on('progress', (completed, total) => logger.update(`Exported ${completed} of ${total} items`, 'info'));
   builder.on('error', (err) => logger.error(err.message));

package/gulp-tasks/js-bundle.js

@@ -0,0 +1,31 @@
+const gulp = require('gulp');
+const webpack = require('webpack');
+const gulpWebpack = require('webpack-stream');
+
+function jsbundle() {
+  return gulp
+    .src('src/js/common.js')
+    .pipe(
+      gulpWebpack(
+        {
+          output: {
+            filename: 'common.js',
+          },
+          // watch: true,
+          module: {
+            rules: [
+              {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+              },
+            ],
+          },
+        },
+        webpack
+      )
+    )
+    .pipe(gulp.dest('dist/js/'));
+}
+
+exports.jsbundle = jsbundle;

package/gulp-tasks/svgsprite.js

@@ -0,0 +1,42 @@
+const gulp = require('gulp');
+const svgstore = require('gulp-svgstore');
+const svgmin = require('gulp-svgmin');
+const tap = require('gulp-tap');
+const path = require('path');
+const fs = require('fs');
+
+function svgsprite() {
+  const icons = [];
+  const stream = gulp
+    .src('./src/icons/*.svg')
+    .pipe(
+      svgmin((file) => {
+        const prefix = path.basename(file.relative, path.extname(file.relative));
+        return {
+          plugins: [
+            {
+              cleanupIDs: {
+                prefix: `${prefix}-`,
+                minify: true,
+              },
+            },
+          ],
+        };
+      })
+    )
+    .pipe(
+      tap((file) => {
+        icons.push({ name: file.stem });
+      })
+    )
+    .pipe(svgstore({ inlineSvg: true }))
+    .pipe(gulp.dest('dist/assets'));
+
+  stream.on('end', () => {
+    fs.writeFileSync('./dist/assets/icons.json', JSON.stringify(icons));
+  });
+
+  return stream;
+}
+
+exports.svgsprite = svgsprite;

package/{tasks → gulp-tasks}/tokens.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const StyleDictionary = require('style-dictionary').extend(path.resolve('./tokens/_config.js'));
+const StyleDictionary = require('style-dictionary').extend(path.resolve('./src/tokens/_config.js'));
 
 function tokens(cb) {
   StyleDictionary.buildAllPlatforms();

package/gulpfile.js

@@ -1,8 +1,10 @@
 const gulp = require('gulp');
 const del = require('del');
-const { tokens } = require('./tasks/tokens');
-const { css } = require('./tasks/css');
-const { fractalStart, fractalBuild } = require('./tasks/fractal');
+const { tokens } = require('./gulp-tasks/tokens');
+const { css } = require('./gulp-tasks/css');
+const { svgsprite } = require('./gulp-tasks/svgsprite');
+const { jsbundle } = require('./gulp-tasks/js-bundle');
+const { fractalStart, fractalBuild } = require('./gulp-tasks/fractal');
 
 // ---
 
@@ -13,16 +15,18 @@ async function clean(cb) {
 
 function watchFiles() {
   gulp.watch(['src/core/**/*.scss', 'src/components/**/*.scss'], { awaitWriteFinish: true }, gulp.series(css));
-  gulp.watch('tokens/**/*.json', gulp.series(tokens));
+  gulp.watch('src/tokens/**/*.json', gulp.series(tokens));
   // gulp.watch('./assets/js/**/*', gulp.series(scriptsLint, scripts));
 }
 
 const watch = gulp.parallel(watchFiles);
-const build = gulp.series(clean, tokens, css, fractalBuild);
+const build = gulp.series(clean, tokens, svgsprite, css, jsbundle, fractalBuild);
 const dev = gulp.series(build, fractalStart, watch);
 
 exports.clean = clean;
 exports.css = css;
+exports.jsbundle = jsbundle;
+exports.svgsprite = svgsprite;
 exports.build = build;
 exports.dev = dev;
 exports.tokens = tokens;

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "scripts": {
+    "clean": "rimraf dist public tokens/build",
     "commit": "commit",
     "semantic-release": "semantic-release --prepare && npm run build && semantic-release --publish",
-    "tokens": "style-dictionary --config ./tokens/_config.js build",
-    "dev": "gulp dev",
-    "build": "npm run tokens && gulp build",
+    "tokens": "style-dictionary --config ./src/tokens/_config.js build",
+    "start": "gulp dev",
+    "build": "gulp build",
+    "build:icons": "svgo -f src/icons ./dist/assets/icons",
+    "build:webpack": "NODE_ENV=production webpack",
+    "build:fractal": "NODE_ENV=production fractal build",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix"
   },
@@ -18,24 +22,49 @@
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
-    "@commitlint/cli": "^7.5.2",
-    "@commitlint/config-conventional": "^7.5.0",
-    "@commitlint/prompt-cli": "^7.5.0",
+    "@commitlint/cli": "^7.6.1",
+    "@commitlint/config-conventional": "^7.6.0",
+    "@commitlint/prompt-cli": "^7.6.1",
     "@frctl/fractal": "^1.1.7",
     "@frctl/mandelbrot": "^1.2.1",
-    "@frctl/nunjucks": "^2.0.0",
+    "@frctl/nunjucks": "^2.0.1",
     "@madgex/eslint-config-madgex": "^1.2.0",
-    "commitizen": "^3.0.7",
+    "autoprefixer": "^9.5.1",
+    "babel-loader": "^8.0.6",
+    "commitizen": "^3.1.1",
+    "concurrently": "^4.1.0",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "cz-conventional-changelog": "^2.1.0",
-    "del": "^4.1.0",
+    "del": "^4.1.1",
+    "file-loader": "^3.0.1",
     "flat": "^4.1.0",
-    "gulp": "^4.0.0",
+    "glob": "^7.1.4",
+    "gulp": "^4.0.2",
+    "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.2",
+    "gulp-svgmin": "^2.2.0",
+    "gulp-svgstore": "^7.0.1",
     "gulp-tap": "^1.0.1",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.5",
-    "semantic-release": "^15.13.3",
-    "style-dictionary": "^2.7.0"
+    "husky": "^2.3.0",
+    "lint-staged": "^8.1.7",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "postcss": "^7.0.16",
+    "postcss-cli": "^6.1.2",
+    "postcss-loader": "^3.0.0",
+    "rimraf": "^2.6.3",
+    "sass-loader": "^7.1.0",
+    "semantic-release": "^15.13.12",
+    "style-dictionary": "^2.7.0",
+    "style-loader": "^0.23.1",
+    "svg-sprite-loader": "^4.1.6",
+    "svgo": "^1.2.2",
+    "svgo-loader": "^2.2.0",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.0",
+    "webpack-stream": "^5.2.1"
   },
   "config": {
     "commitizen": {

package/server.js

@@ -0,0 +1,14 @@
+const fractal = require('./fractal.js');
+
+const server = fractal.web.server();
+
+server
+  .start()
+  .then(() => {
+    return console.log(`Fractal server is now running.`);
+  })
+  .catch((e) => {
+    console.error(e);
+  });
+
+server.stop();

package/src/components/_preview.njk

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="utf-8" />
-	<title>{{ _target.title }} - {{ _config.project.title }}</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="{{ '/css/index.css' | path }}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="{{ '/css/index.css' | path }}" />
 
-</head>
-<body style="padding: 30px;">
+    <title>{{ _target.title }} - {{ _config.project.title }}</title>
 
-{{ yield | safe }}
+    {% if _config.env !== 'development' %}
+    <link rel="stylesheet" href="{{ '/css/common.css' | path }}" />
+    {% endif %}
 
-</body>
+    <script type="text/javascript" src="{{ '/js/common.js' | path }}"></script>
+  </head>
+  <body style="padding: 30px;">
+    {{ yield | safe }}
+  </body>
 </html>
-

package/src/components/icon/icon.config.js

@@ -0,0 +1,43 @@
+// module.exports = {
+//   title: 'Icons',
+//   context: {
+//     id: 'bike',
+//   },
+//   variants: [
+//     {
+//       name: 'camera',
+//       context: {
+//         id: 'camera',
+//       },
+//     },
+//   ],
+// };
+
+/**
+ * Icon Pattern Config
+ * Loads icons from `assets` and creates the variants
+ */
+
+const path = require('path');
+const glob = require('glob');
+
+const iconsGlob = './src/icons/**/*.svg'; // TODO: Load from global config
+const variants = [];
+
+// Collect Icon Names
+const files = glob.sync(iconsGlob) || [];
+files.forEach((file) => {
+  const name = path.basename(file, '.svg');
+  variants.push({
+    name,
+    context: {
+      icon: name,
+    },
+  });
+});
+
+module.exports = {
+  title: 'Icon',
+  status: 'ready',
+  variants,
+};

package/src/components/icon/icon.njk

@@ -0,0 +1,3 @@
+<svg class="mds-icon mds-icon--{{ icon }}{% if class %} {{ class }}{% endif %}">
+  <use xlink:href="{{ '/assets/icons.svg' | path }}#{{ icon }}" />
+</svg>

package/src/components/icon/icon.scss

@@ -0,0 +1,6 @@
+.mds-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}

package/src/components/similar-jobs-item/_macro.njk

@@ -0,0 +1,3 @@
+{% macro SimilarJobsItem(params) %}
+  {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/similar-jobs-item/_template.njk

@@ -0,0 +1,18 @@
+<div class="mds-similar-job{% if params.classes %} {{ params.classes }}{% endif %}">
+  <h3 class="mds-similar-job__header">
+    {%- if params.href %}
+      <a href="{{ params.href }}" class="mds-similar-job__link">
+        {{- params.title | safe -}}
+      </a>
+    {% else -%}
+      {{ params.title | safe }}
+    {%- endif -%}
+  </h3>
+  {%- if params.meta -%}
+    <ul class="mds-similar-job__meta">
+      {%- for item in params.meta -%}
+        <li class="mds-similar-job-meta__item">{{ item | safe }}</li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
+</div>

package/src/components/similar-jobs-item/similar-jobs-item.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  title: 'SimilarJobsItem',
+  context: {
+    title: 'Science Teacher',
+    href: '/job/science-teacher',
+    classes: 'mds-similar-job--premium-job',
+    meta: ['London City', 'Science Recruiter'],
+  },
+};

package/src/components/similar-jobs-item/similar-jobs-item.njk

@@ -0,0 +1,8 @@
+{% from "./similar-jobs-item/_macro.njk" import SimilarJobsItem %}
+
+{{ SimilarJobsItem({
+  title: title,
+  href: href,
+  classes: classes,
+  meta: meta
+}) }}

package/src/components/similar-jobs-item/similar-jobs-item.scss

@@ -0,0 +1,5 @@
+.mds-similar-job {
+  &--premium-job {
+    background-color: #eee;
+  }
+}

package/src/icons/bike.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m72.918 41.668c-2.082 0-3.957 0.41797-5.625 1.043l-4.793-7.918 1.457-3.543h0.625c1.25 0 2.082-0.83203 2.082-2.082s-0.83203-2.082-2.082-2.082h-6.25c-1.25 0-2.082 0.83203-2.082 2.082s0.83203 2.082 2.082 2.082h1.043l-0.83203 2.082h-18.961v-8.332h-10.418v4.168h6.25v5.832l-3.75 7.5c-1.457-0.625-2.9141-0.83203-4.582-0.83203-8.125 0-14.582 6.457-14.582 14.582s6.457 14.582 14.582 14.582 14.582-6.457 14.582-14.582c0-5-2.5-9.375-6.25-11.875l2.5-4.793 13.125 18.957h7.5c1.043 7.082 7.082 12.5 14.375 12.5 8.125 0 14.582-6.457 14.582-14.582 0.003906-8.332-6.4531-14.789-14.578-14.789zm-35.418 14.582c0 5.832-4.582 10.418-10.418 10.418-5.832 0-10.418-4.582-10.418-10.418 0-5.832 4.582-10.418 10.418-10.418 0.83203 0 1.875 0.20703 2.707 0.41797l-4.582 9.168c-0.20703 0.20703-0.20703 0.41406-0.20703 0.83203 0 1.25 0.83203 2.082 2.082 2.082 0.83203 0 1.457-0.41797 1.875-1.25l4.582-9.168c2.293 2.0859 3.9609 5.0039 3.9609 8.3359zm26.25-11.25c-2.707 2.293-4.582 5.418-5.207 9.168h-3.332l5.418-14.375zm2.082 3.543l3.332 5.625h-6.457c0.41797-2.293 1.668-4.168 3.125-5.625zm-14.375 3.332l-10-14.375h15.625zm21.461 14.793c-5 0-9.168-3.543-10.207-8.332l10.207-0.003907c1.25 0 2.082-0.83203 2.082-2.082 0-0.41797-0.20703-0.83203-0.41797-1.043l-5.207-8.75c1.043-0.41797 2.293-0.625 3.543-0.625 5.832 0 10.418 4.582 10.418 10.418-0.003907 5.832-4.5859 10.418-10.418 10.418z"/>
+</svg>

package/src/icons/camera.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <path d="m56.25 56.25c0 3.4531-2.7969 6.25-6.25 6.25s-6.25-2.7969-6.25-6.25 2.7969-6.25 6.25-6.25 6.25 2.7969 6.25 6.25"/>
+  <path d="m81.25 33.332h-16.668l-4.168-8.332h-20.832l-4.168 8.332h-16.664c-3.543 0-6.25 2.707-6.25 6.25v33.332c0 3.332 2.707 6.25 6.25 6.25h62.5c3.543 0 6.25-2.918 6.25-6.25v-33.332c0-3.5391-2.707-6.25-6.25-6.25zm-31.25 37.5c-8.125 0-14.582-6.457-14.582-14.582s6.457-14.582 14.582-14.582 14.582 6.457 14.582 14.582-6.457 14.582-14.582 14.582z"/>
+ </g>
+</svg>

package/src/js/common.js

@@ -0,0 +1,11 @@
+// This file is the webpack entry point
+
+// Here you can import your components, icons, etc.
+// For example:
+//
+// import modal from 'components/Modal';
+// import 'icons/home.svg';
+//
+// Webpack will automatically look for files relative to `assets/scripts/` and `assets/`.
+
+console.log('MDS bundle loaded.');

package/src/patterns/similar-jobs/_macro.njk

@@ -0,0 +1,3 @@
+{% macro SimilarJobs(params) %}
+  {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/patterns/similar-jobs/_template.njk

@@ -0,0 +1,19 @@
+{% from "../../components/similar-jobs-item/_macro.njk" import SimilarJobsItem %}
+{%- if params.items -%}
+  <div class="mds-similar-jobs">
+    {%- if params.title -%}
+      <h2 class="mds-similar-jobs__header">{{params.title}}</h2>
+    {%- endif -%}
+    {%- if params.items -%}
+      <ul class="mds-similar-jobs__content">
+        {%- for item in params.items -%}
+          {%- if item.title -%}
+            <li class="mds-similar-jobs-content__item">
+              {{ SimilarJobsItem({title: item.title, href: item.href, classes: item.classes, meta: item.meta}) }}
+            </li>
+          {%- endif -%}
+        {%- endfor -%}
+      </ul>
+    {%- endif -%}
+  </div>
+{%- endif -%}

package/src/patterns/similar-jobs/similar-jobs.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  title: 'SimilarJobs',
+  context: {
+    title: 'Similar Jobs',
+    items: [
+      {
+        title: 'Marketing Manager',
+        href: '/job/marketing-manager',
+        classes: 'mds-similar-job--premium-job',
+        meta: ['London City', 'Market Rate', 'Apple Inc'],
+      },
+      {
+        title: 'Head of Marketing',
+        href: '/job/head-of-marketing',
+        classes: 'mds-similar-job--promoted-job',
+        meta: ['London (Hackney)', 'Marketers Ltd'],
+      },
+      {
+        title: 'Marketing Advisor',
+        href: '/job/marketing-advisor',
+        classes: 'mds-similar-job--premium-job',
+      },
+      {
+        title: 'Marketing Researcher',
+        classes: '',
+        meta: ['London (Central)', '100K+'],
+      },
+    ],
+  },
+};

package/src/patterns/similar-jobs/similar-jobs.njk

@@ -0,0 +1,3 @@
+{% from "./similar-jobs/_macro.njk" import SimilarJobs %}
+
+{{ SimilarJobs({title: title, items: items}) }}

package/src/{core → scss}/index.scss

@@ -1,4 +1,4 @@
-@import '../../tokens/build/scss/variables';
+@import '../../dist/_tokens/scss/tokens';
 @import 'functions/_index';
 @import 'utilities/_index';
 @import 'helpers/_index';

package/{tokens → src/tokens}/_config.js

@@ -1,13 +1,13 @@
 const config = {
-  source: ['tokens/**/*.json'],
+  source: ['src/tokens/**/*.json'],
   platforms: {
     'css-variables': {
       transformGroup: 'css',
-      buildPath: 'tokens/build/css/',
+      buildPath: 'dist/_tokens/css/',
       prefix: 'mds',
       files: [
         {
-          destination: '_variables.css',
+          destination: '_tokens.css',
           format: 'css/variables',
         },
       ],
@@ -15,11 +15,11 @@ const config = {
     'scss-variables': {
       transformGroup: 'web',
       // transforms: ['size/px'],
-      buildPath: 'tokens/build/scss/',
+      buildPath: 'dist/_tokens/scss/',
       prefix: 'mds',
       files: [
         {
-          destination: '_variables.scss',
+          destination: '_tokens.scss',
           // format: 'scss/variables',
           format: 'scss/map-deep',
         },
@@ -27,18 +27,18 @@ const config = {
     },
     sketch: {
       transformGroup: 'web',
-      buildPath: 'tokens/build/sketch/',
+      buildPath: 'dist/_tokens/sketch/',
       prefix: 'mds',
       files: [
         {
-          destination: '_variables.sketchpalette',
+          destination: '_tokens.sketchpalette',
           format: 'sketch/palette',
         },
       ],
     },
     // json: {
     //   transformGroup: 'js',
-    //   buildPath: 'build/json/',
+    //   buildPath: 'dist/json/',
     //   files: [
     //     {
     //       destination: '_variables.json',
@@ -48,7 +48,7 @@ const config = {
     // },
     // 'js-es6': {
     //   transformGroup: 'js',
-    //   buildPath: 'build/js/',
+    //   buildPath: 'dist/js/',
     //   prefix: 'mds',
     //   files: [
     //     {
@@ -64,11 +64,11 @@ const config = {
     // },
     'js-module': {
       transformGroup: 'js',
-      buildPath: 'tokens/build/js/',
+      buildPath: 'dist/_tokens/js/',
       prefix: 'mds',
       files: [
         {
-          destination: '_variables-module.js',
+          destination: '_tokens-module.js',
           format: 'javascript/module',
         },
       ],

package/{tokens → src/tokens}/color.json

@@ -8,6 +8,7 @@
     "black": { "value": "#000000" },
     "primary": { "value": "#2c608a" },
     "secondary": { "value": "#d83933" },
+    "destructive": { "value": "red" },
     "text": {
       "primary": { "value": "{color.black.value}" }
     },

package/webpack.config.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const webpack = require('webpack');
+const glob = require('glob');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+
+const entry = {
+  common: path.resolve(__dirname, 'src/scripts/common.js'),
+};
+
+// Skip icons if there’s none or Webpack will throw an error
+const icons = glob.sync('./src/icons/**/*.svg');
+if (icons.length) {
+  entry.icons = icons;
+}
+
+module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  resolve: {
+    modules: [path.resolve(__dirname, 'src/scripts'), path.resolve(__dirname, 'src'), 'node_modules'],
+    extensions: ['.js'],
+  },
+  entry,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/',
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
+          },
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [require('autoprefixer')(), require('cssnano')()],
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              includePaths: ['node_modules'],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(svg|png|jpe?g|gif|woff|woff2|eot|ttf|otf)$/,
+        exclude: path.resolve('./src/icons'),
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'assets/',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        include: path.resolve('./src/icons'),
+        use: [
+          {
+            loader: 'svg-sprite-loader',
+            options: {
+              extract: true,
+              spriteFilename: 'assets/icons/icon-sprite.svg',
+              // esModule: false,
+            },
+          },
+          'svgo-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new SpriteLoaderPlugin(),
+  ],
+  devServer: {
+    historyApiFallback: true,
+    compress: true,
+    proxy: {
+      '**': 'http://localhost:4000',
+    },
+    port: 3000,
+    stats: {
+      colors: true,
+    },
+    overlay: true,
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+};

package/src/patterns/form/form.njk

@@ -1,2 +0,0 @@
-<p>forms</p>
-{% render '@example' %}