@madgex/design-system 1.1.0 → 1.2.1

package/README.md

@@ -4,20 +4,27 @@ A work-in progress Design System for building a UI for Madgex products.
 
 ## Usage
 
+NOTE: Right now you'll need to be authenticated on npm under the Madgex account.
+
 ```bash
 npm install @madgex/design-system --save
 ```
 
 ## Importing styles
 
-You'll need to import the Madgex DS styles into your main Sass file.
+You'll need to import the Madgex DS styles into your project scss file.
+
+Use the DS tokens to change DS variables.
 
-To import add the below to your Sass file:
+e.g. import the Madgex DS to your Sass file & overload variables:
 
 ```scss
-@import 'node_modules/@madgex/design-system/public/css/index.css';
+$mds-color-primary: #ff0000; // my primary brand colour is RED
+$mds-size-font-md: 20px; // my base font-size is 20px
+
+@import 'node_modules/@madgex/design-system/src/scss/index.scss';
 ```
 
 ## Releases
 
-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`.
+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](https://npmjs.org) as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).

package/fractal.js

@@ -3,7 +3,11 @@ const path = require('path');
 
 const mandelbrot = require('@frctl/mandelbrot');
 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(){}
@@ -35,7 +39,7 @@ 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');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

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

@@ -1,43 +1,20 @@
-// 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,
-    },
-  });
-});
+const iconList = require('../../../dist/assets/icons.json');
 
 module.exports = {
   title: 'Icon',
   status: 'ready',
-  variants,
+  default: iconList[0].name,
+  variants: iconList.map((item) => {
+    return {
+      name: item.name,
+      context: {
+        icon: item.name,
+      },
+    };
+  }),
 };

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/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/patterns/form/form.njk

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