@madgex/design-system 1.1.0 → 1.2.0

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.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

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' %}