@madgex/design-system 1.0.1

package/.env-example

@@ -0,0 +1 @@
+GH_TOKEN=1234567890

package/.eslintignore

@@ -0,0 +1,2 @@
+public/themes
+__tests__/**/*

package/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@madgex/eslint-config-madgex'],
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { devDependencies: ['*.js', 'tasks/*.js'] }]
+  }
+};

package/.prettierignore

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

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "useTabs": false,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "endOfLine": "auto"
+}

package/.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "GulpTester",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
+      "stopOnEntry": false,
+      "args": [],
+      "cwd": "${workspaceRoot}",
+      "runtimeArgs": ["--nolazy"],
+      "console": "internalConsole"
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,112 @@
+# Basic Style Dictionary
+
+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
+
+android
+✔︎ build/android/font_dimens.xml
+
+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
+```
+
+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:
+
+**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>
+
+<!-- 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>
+```
+
+**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;
+```
+
+**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!**
+
+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).

package/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package/delivery/jenkinsfile

@@ -0,0 +1,100 @@
+#!/usr/bin/env groovy
+library 'jenkins-shared-library'
+
+def productName     =   'designsystem'              // the name of the product to which this service belongs (jobboard/insights/employerbranding/core-services)
+def octopusInstance =   'thekraken'             // the Octopus Deploy instance with which this service should be deployed (octopodes/thekraken/wonderpus)
+def octopusPort     =   '444'                   // the port number to use for the Octopus server
+
+def (subProductName, branchName)    =   "${env.JOB_NAME}".tokenize( '/' )
+def octopusCredentialId             =   "$octopusInstance-api-key"
+def siteName                        =   "$productName/$subProductName"
+def repositoryUri                   =   "426517516965.dkr.ecr.eu-west-1.amazonaws.com"
+def octopusUri                      =   "https://$octopusInstance:$octopusPort"
+
+println("Target Octopus instance: $octopusInstance")
+println("Target Octopus URI: $octopusUri")
+
+pipeline {
+    agent {
+        any {
+            customWorkspace "workspace/${env.JOB_NAME}/${branchName}".replace('%2F', '-')
+        }
+    }
+
+    options {
+        timeout(time: 1, unit: 'HOURS')
+        disableConcurrentBuilds()
+        skipStagesAfterUnstable()
+        skipDefaultCheckout()
+        buildDiscarder(logRotator(daysToKeepStr: '5', numToKeepStr: '3'))       
+    }
+
+    stages {
+        stage('SCM') {
+            steps {
+                notifySlack('STARTED', 'madgex-design-system', 'jenkins-slack-token')
+                checkout scm
+                notifyBitbucketWithState('INPROGRESS')
+            }
+        }
+
+        stage('Build') {
+            environment {
+                GITHUB_TOKEN = credentials('MDS_GITHUB_TOKEN')
+                NPM_TOKEN = credentials('MDS_NPM_TOKEN')
+            }
+            steps {
+                script {
+                    withCredentials([string(credentialsId: octopusCredentialId, variable: 'OctopusApiKey')]) {
+                        def versionNumber = "0.0.0"
+                        def currentVersionNumber = sh(returnStdout: true, script: "curl -X GET '${octopusUri}/api/packages?NuGetPackageId=${productName}.${subProductName}&take=1' -H 'X-Octopus-ApiKey: ${OctopusApiKey}' -H 'accept: application/json' --insecure --silent | jq .Items[0].Version -r")
+                        println("Current version number is ${currentVersionNumber}")
+                        try {
+                            def (major, minor, rev)    =   "${currentVersionNumber}".tokenize( '.' )
+                            def newRev = (rev.toInteger() + 1).toString()
+                            versionNumber = "${major}.${minor}.${newRev}"    
+                        } catch (e) {
+                            echo "Error generating version number."
+                            versionNumber = "0.0.1"
+                        }
+                        println("New version number is ${versionNumber}")
+                        def tarpackage = "${productName}.${subProductName}.${versionNumber}.tar"
+                        println(tarpackage)
+                        sh """
+                            node --version
+                            npm --version
+                            npm ci
+                            npm run semantic-release
+                            cd $WORKSPACE
+                            tar -cvf ${tarpackage} ./public
+                        """
+                        archiveArtifacts "${tarpackage}"
+                        deployToOctopus.pushPackage(tarpackage, octopusUri, octopusCredentialId)
+                    }
+                }
+            }
+        }
+
+    }
+
+    post {
+        failure {
+            script {
+                notifyBitbucketWithState('FAILURE')
+            }
+        }
+        success {
+            script {
+                notifyBitbucketWithState('SUCCESS')
+            }
+        }
+        always { 
+            script {
+                // Necessary to get emailer to send out on success
+                currentBuild.result = currentBuild.currentResult
+            }
+            notifySlack(currentBuild.result, 'madgex-design-system', 'jenkins-slack-token')
+            cleanWs deleteDirs: true
+        }
+    }    
+}

package/docs/01-index.njk

@@ -0,0 +1,11 @@
+---
+title: Madgex Design System
+---
+
+This is your index page. You can edit its contents at `docs/01-index.hbs`
+
+<!--
+```
+{% view '@button' %}
+```
+-->

package/docs/tokens/colour.njk

@@ -0,0 +1,43 @@
+---
+title: Colour Palette | Madgex Design System
+---
+
+## Using color tokens
+
+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>{{ item.comment }}</span>
+    <span>
+      <em>SCSS:</em>
+      {{ item.path }}
+    </span>
+    <span>
+      <em>JavaScript:</em>
+      {{item.name}}
+    </span>
+    {# <pre>{{ item | jsonify }}</pre> #}
+  </div>
+{% endmacro %}
+
+
+<div class="colors">
+  {% for key, item in tokens.color %}
+    {% if not 'value' in item and item | length %}
+      {% for subkey, subitem in item %}
+        {{ swatch(subitem) }}
+      {% endfor %}
+    {% else %}
+      {{ swatch(item) }}
+    {% endif %}
+  {% endfor %}
+</div>

package/docs/tokens/spacing.njk

@@ -0,0 +1,5 @@
+---
+title: Spacing | Madgex Design System
+---
+
+Spacing used in MDS

package/fractal-theme/assets/css/styles.css

@@ -0,0 +1,41 @@
+.colors {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.colors .color {
+  flex: 1 1 calc(33% - 10px);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 10px 0 0;
+  padding: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 24px;
+  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
+    0 1px 3px 0 rgba(63, 63, 68, 0.15);
+  font-size: 13px;
+  color: #001123;
+  border-radius: 3px;
+  overflow: hidden;
+  text-align: left;
+}
+
+.color span {
+  display: block;
+}
+.color em {
+  opacity: 0.8;
+  font-style: normal;
+}
+
+.swatch {
+  margin-bottom: 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  height: 128px;
+  margin-left: -16px;
+  margin-top: -16px;
+  width: calc(100% + 48px);
+  float: left;
+}

package/fractal.js

@@ -0,0 +1,80 @@
+const Fractal = require('@frctl/fractal');
+
+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/')],
+  // pristine: true,
+  filters: {
+    // filter-name: function filterFunc(){}
+    jsonify: (d) => JSON.stringify(d, null, '  '),
+    dataurl: (d, type) => `data:${type},${encodeURIComponent(d)}`,
+  },
+  globals: {
+    // global-name: global-val
+  },
+  extensions: {
+    // 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');
+
+/*
+ * Give your project a title.
+ */
+fractal.set('project.title', 'Madgex Design System');
+fractal.set('project.version', pkg.version);
+
+/*
+ * Tell Fractal where to look for components.
+ */
+fractal.components.set('path', path.join(__dirname, 'src/components'));
+fractal.components.set('default.collated', 'true');
+fractal.components.set('default.preview', '@preview');
+
+/*
+ * Tell Fractal where to look for documentation pages.
+ */
+fractal.docs.engine(nunjucks);
+fractal.docs.set('ext', '.njk'); // default is '.md'
+fractal.docs.set('path', path.join(__dirname, 'docs'));
+fractal.docs.set('default.context', {
+  tokens,
+});
+
+/*
+ * 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'],
+});
+/*
+ * Specify a template directory to override any view templates
+ */
+madgexTheme.addLoadPath(`${__dirname}/fractal-theme/views`);
+
+/*
+ * Specify the static assets directory that contains the custom stylesheet.
+ */
+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;

package/gulpfile.js

@@ -0,0 +1,30 @@
+const gulp = require('gulp');
+const del = require('del');
+const { tokens } = require('./tasks/tokens');
+const { css } = require('./tasks/css');
+const { fractalStart, fractalBuild } = require('./tasks/fractal');
+
+// ---
+
+async function clean(cb) {
+  await del(['dist/']);
+  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('./assets/js/**/*', gulp.series(scriptsLint, scripts));
+}
+
+const watch = gulp.parallel(watchFiles);
+const build = gulp.series(clean, tokens, css, fractalBuild);
+const dev = gulp.series(build, fractalStart, watch);
+
+exports.clean = clean;
+exports.css = css;
+exports.build = build;
+exports.dev = dev;
+exports.tokens = tokens;
+exports.watch = watch;
+exports.default = build;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@madgex/design-system",
+  "version": "1.0.1",
+  "scripts": {
+    "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",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jameswragg/madgex-design-system"
+  },
+  "dependencies": {},
+  "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",
+    "@frctl/fractal": "^1.1.7",
+    "@frctl/mandelbrot": "^1.2.1",
+    "@frctl/nunjucks": "^2.0.0",
+    "@madgex/eslint-config-madgex": "^1.2.0",
+    "commitizen": "^3.0.7",
+    "cz-conventional-changelog": "^2.1.0",
+    "del": "^4.1.0",
+    "flat": "^4.1.0",
+    "gulp": "^4.0.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-tap": "^1.0.1",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "semantic-release": "^15.13.3",
+    "style-dictionary": "^2.7.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "npm run lint",
+      "git add"
+    ]
+  }
+}

package/src/components/Button/_macro.njk

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

package/src/components/Button/_template.njk

@@ -0,0 +1,35 @@
+{# Determine type of element to use, if not explicitly set -#}
+
+{% if params.element %}
+  {% set element = params.element | lower %}
+{% else %}
+  {% if params.href %}
+    {% set element = 'a' %}
+  {% else %}
+    {% set element = 'button' %}
+  {% endif %}
+{% endif %}
+
+{#- Define common attributes that we can use across all element types #}
+
+{%- set commonAttributes %} class="mds-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} mds-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+
+{#- Define common attributes we can use for both button and input types #}
+
+{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+
+{#- Actually create a button... or a link! #}
+
+{%- if element == 'a' %}
+<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+</a>
+
+{%- elseif element == 'button' %}
+<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  {{ params.html | safe if params.html else params.text }}
+</button>
+
+{%- elseif element == 'input' %}
+<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+{%- endif %}

package/src/components/Button/button.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  title: 'Buttons',
+  context: {
+    text: 'Button 1',
+  },
+  variants: [
+    {
+      name: 'link-buttons',
+      context: {
+        href: 'http://madgex.com',
+        text: 'Link button 2',
+      },
+    },
+    {
+      name: 'input-buttons',
+      context: {
+        element: 'input',
+        text: 'Input button 3',
+      },
+    },
+  ],
+};

package/src/components/Button/button.njk

@@ -0,0 +1,7 @@
+{% from "./button/_macro.njk" import Button %}
+
+{{ Button({
+  text: text,
+  element: element,
+  href: href
+}) }}

package/src/components/Button/button.scss

@@ -0,0 +1,36 @@
+.mds-button {
+  @include mds-focusable;
+
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  -webkit-appearance: none;
+
+  border: 1px solid transparent;
+  color: $mds-color-white;
+  padding: $mds-size-space-xs $mds-size-space-sm;
+  background-color: $mds-color-primary;
+  font-size: 100%;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+
+  @include mq($from: tablet) {
+    width: auto;
+  }
+
+  // Ensure that any global link styles are overridden
+  &:link,
+  &:visited,
+  &:active,
+  &:hover {
+    color: $mds-color-white;
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus {
+    // background-color: $mds-color-primary-hover-colour;
+  }
+}

package/src/components/_preview.njk

@@ -0,0 +1,16 @@
+<!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>
+<body style="padding: 30px;">
+
+{{ yield | safe }}
+
+</body>
+</html>
+