@madgex/design-system 1.3.3 → 1.3.4

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jun 2019 16:40:50 GMT
+ * Generated on Mon, 10 Jun 2019 11:11:26 GMT
  */
 
 :root {
@@ -49,5 +49,6 @@
  --mds-size-breakpoint-sm: 0rem;
  --mds-size-breakpoint-md: 768rem;
  --mds-size-breakpoint-lg: 1024rem;
- --mds-size-focus-width: 3rem;
+ --mds-size-border-width: 1rem;
+ --mds-size-border-radius: 3rem;
 }

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jun 2019 16:40:50 GMT
+ * Generated on Mon, 10 Jun 2019 11:11:26 GMT
  */
 
 module.exports = {
@@ -794,23 +794,40 @@ module.exports = {
         ]
       }
     },
-    "focus": {
+    "border": {
       "width": {
-        "value": "3rem",
+        "value": "1rem",
         "original": {
-          "value": "3px"
+          "value": "1px"
         },
-        "name": "MdsSizeFocusWidth",
+        "name": "MdsSizeBorderWidth",
         "attributes": {
           "category": "size",
-          "type": "focus",
+          "type": "border",
           "item": "width"
         },
         "path": [
           "size",
-          "focus",
+          "border",
           "width"
         ]
+      },
+      "radius": {
+        "value": "3rem",
+        "original": {
+          "value": "3px"
+        },
+        "name": "MdsSizeBorderRadius",
+        "attributes": {
+          "category": "size",
+          "type": "border",
+          "item": "radius"
+        },
+        "path": [
+          "size",
+          "border",
+          "radius"
+        ]
       }
     }
   }

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 06 Jun 2019 16:40:50 GMT
+  Generated on Mon, 10 Jun 2019 11:11:26 GMT
 */
 
 $mds-color-base: #71767a !default; // Base colour
@@ -49,7 +49,8 @@ $mds-size-space-inset-default: 16px !default;
 $mds-size-breakpoint-sm: 0px !default;
 $mds-size-breakpoint-md: 768px !default;
 $mds-size-breakpoint-lg: 1024px !default;
-$mds-size-focus-width: 3px !default;
+$mds-size-border-width: 1px !default;
+$mds-size-border-radius: 3px !default;
 
 $tokens: (
   'color': (
@@ -116,8 +117,9 @@ $tokens: (
       'md': $mds-size-breakpoint-md,
       'lg': $mds-size-breakpoint-lg
     ),
-    'focus': (
-      'width': $mds-size-focus-width
+    'border': (
+      'width': $mds-size-border-width,
+      'radius': $mds-size-border-radius
     )
   )
 );

package/package.json

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

package/src/components/Section-title/01-section-title.njk

@@ -0,0 +1,7 @@
+{% from "./section-title/_macro.njk" import SectionTitle %}
+
+{{ SectionTitle({
+  title: title,
+  headingTag: headingTag,
+  classes: classes
+}) }}

package/src/components/Section-title/02-section-title-with-action.njk

@@ -0,0 +1,10 @@
+{% from "./section-title/_macro.njk" import SectionTitle %}
+
+{{ SectionTitle({
+  title: title,
+  headingTag: headingTag,
+  actionText: actionText,
+  actionHref: actionHref,
+  actionElement: actionElement,
+  classes: classes
+}) }}

package/src/components/Section-title/_macro.njk

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

package/src/components/Section-title/_template.njk

@@ -0,0 +1,17 @@
+{% from "../button/_macro.njk" import Button %}
+
+<div class="mds-section-title{% if params.classes %} {{ params.classes }}{% endif %}">
+    <{{ params.headingTag | default("h2") }} class="mds-section-title__header">{{ params.title }}</{{ params.headingTag | default("h2") }}>
+    {% if params.actionText -%}
+        <div class="mds-section-title__action">
+            {%- if params.actionHref -%}
+                {{ Button({
+                    text: params.actionText,
+                    element: params.actionElement,
+                    href: params.actionHref,
+                    classes: params.classes
+                }) }}
+            {%- endif -%}
+        </div>
+    {% endif -%}
+</div>

package/src/components/Section-title/section-title-with-action.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  title: 'SectionTitle',
+  context: {
+    title: 'Similar jobs',
+    headingTag: 'h3',
+    actionText: 'View all',
+    actionHref: '/job/similar',
+    actionElement: 'a',
+    classes: '',
+  },
+};

package/src/components/Section-title/section-title.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  title: 'SectionTitle',
+  context: {
+    title: 'Similar jobs',
+    classes: '',
+  },
+};

package/src/components/Section-title/section-title.scss

@@ -0,0 +1,3 @@
+.mds-section-title {
+  border-bottom: $mds-border-width solid $mds-color-base;
+}

package/src/components/button/_template.njk

@@ -1,14 +1,14 @@
 {# Determine type of element to use, if not explicitly set -#}
 
-{% if params.element %}
+{%- if params.element -%}
   {% set element = params.element | lower %}
-{% else %}
+{%- else -%}
   {% if params.href %}
     {% set element = 'a' %}
   {% else %}
     {% set element = 'button' %}
   {% endif %}
-{% endif %}
+{%- endif -%}
 
 {#- Define common attributes that we can use across all element types #}
 

package/src/components/card/_macro.njk

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

package/src/components/card/_template.njk

@@ -0,0 +1,5 @@
+{% if params.inList %}
+    <li class="mds-card mds-card--list-item{% if params.classes %} {{ params.classes }}{% endif %}">{{ params.content | safe }}</li>
+{% else %}
+    <div class="mds-card{% if params.classes %} {{ params.classes }}{% endif %}">{{ params.content | safe }}</div>
+{% endif %}

package/src/components/card/card.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  title: 'Card',
+  context: {
+    inList: false,
+    classes: '',
+    content: '<h4>Card Title</h4><p>paragraph</p>',
+  },
+  variants: [
+    {
+      name: 'card-in-list',
+      context: {
+        inList: true,
+        classes: '',
+        content: '<h4>Card used in list (li instead of div)</h4><p>paragraph</p>',
+      },
+    },
+  ],
+};

package/src/components/card/card.njk

@@ -0,0 +1,7 @@
+{% from "./card/_macro.njk" import Card %}
+
+{{ Card({
+  inList: inList,
+  classes: classes,
+  content: content
+}) }}

package/src/components/card/card.scss

@@ -0,0 +1,4 @@
+.mds-card {
+  padding: $mds-size-space-sm $mds-size-space-md;
+  border: $mds-border-width solid $mds-color-base;
+}

package/src/scss/index.scss

@@ -29,3 +29,5 @@ body {
 }
 
 @import '../components/button/button';
+@import '../components/card/card';
+@import '../components/section-title/section-title';

package/src/scss/utilities/_mixins.scss

@@ -4,10 +4,3 @@
   -moz-user-select: none;
   user-select: none;
 }
-
-@mixin mds-focusable {
-  &:focus {
-    outline: $mds-size-focus-width solid $mds-size-focus-width;
-    outline-offset: 0;
-  }
-}

package/src/tokens/size.json

@@ -42,8 +42,11 @@
       "md": { "value": "768px" },
       "lg": { "value": "1024px" }
     },
-    "focus": {
+    "border": {
       "width": {
+        "value": "1px"
+      },
+      "radius": {
         "value": "3px"
       }
     }

package/dist/css/index.css

@@ -1,48 +0,0 @@
-/*
-  Do not edit directly
-  Generated on Thu, 06 Jun 2019 16:40:50 GMT
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Helvetica", Arial, sans-serif;
-  font-size: 16px;
-  color: color("base");
-  overflow-x: hidden;
-}
-
-.mds-button {
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  -webkit-appearance: none;
-  border: 1px solid transparent;
-  color: #ffffff;
-  padding: 8px 12px;
-  background-color: #2c608a;
-  font-size: 100%;
-  width: 100%;
-  display: inline-block;
-  text-align: center;
-}
-
-.mds-button:focus {
-  outline: 3px solid 3px;
-  outline-offset: 0;
-}
-
-@media (min-width: 48em) {
-  .mds-button {
-    width: auto;
-  }
-}
-
-.mds-button:link, .mds-button:visited, .mds-button:active, .mds-button:hover {
-  color: #ffffff;
-  text-decoration: none;
-}

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

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

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

@@ -1,18 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,8 +0,0 @@
-{% 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

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

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

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

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

@@ -1,19 +0,0 @@
-{% 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

@@ -1,30 +0,0 @@
-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

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