@madgex/design-system 3.9.6 → 3.11.0

package/src/components/card/card.njk

@@ -1,17 +1,20 @@
 {% from "./card/_macro.njk" import MdsCard %}
 
-<h2>{{ fractalLabel }}</h2>
-{% if fractalLabel === 'Card used in a list' %}
-  <ul>
-  {% endif %}
+<div class="mds-margin-bottom-b5">
+  <h2>{{ fractalLabel }}</h2>
+  {%- if fractalLabel === 'Card used in a list' -%}
+    <ul>
+  {%- endif -%}
 
-  {{ MdsCard({
-  inList: inList,
-  classes: classes,
-  content: content,
-  id: id
-}) }}
+  {{- MdsCard({
+    inList: inList,
+    classes: classes,
+    content: content,
+    id: id,
+    badges: badges
+  }) -}}
 
-  {% if fractalLabel === 'Card used in a list' %}
-  </ul>
-{% endif %}
+  {%- if fractalLabel === 'Card used in a list' -%}
+    </ul>
+  {%- endif -%}
+</div>

package/src/components/card/card.scss

@@ -1,11 +1,57 @@
 .mds-card {
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 4);
   border: $mds-size-border-width-base solid $mds-color-border;
 
   > *:last-child {
     margin-bottom: 0;
   }
 }
+.mds-card__container {
+  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 4);
+}
+
 .mds-card--highlighted {
   background: $mds-color-neutral-lightest;
 }
+
+.mds-badge-container {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: $mds-size-baseline;
+  
+
+  &__column {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: $mds-size-baseline;
+    align-items: flex-start;
+    flex: 1 1 auto;
+
+    &--right {
+      justify-content: flex-end;
+    }
+  }
+}
+
+// get tokens from custom.badge
+$badges: map-get($tokens, 'custom', 'badge');
+// set of css properties that we accept
+// any other properties found in the tokens won't be added to the css
+$validProperties: background, color, font-size, font-weight, text-transform, padding, border;
+
+
+.mds-badge {
+  display: block;
+  padding: $mds-size-baseline $mds-size-baseline * 2;
+  margin-bottom: $mds-size-baseline;
+  @extend .mds-font-minion;
+  text-transform: uppercase;
+}
+
+@each $name, $obj in $badges {
+  .mds-badge--#{$name} {
+    @each $property in $validProperties {
+      $value: map-get($obj, $property);
+      #{$property}: $value;
+    }
+  }
+}

package/src/components/tabs/README.md

@@ -4,7 +4,7 @@
 - `classes`: add extra CSS classes to the component
 - `allHeadersTag`: the html tag to use for the panel header (h2 as default)
 - `allHeadersDisplay`: wheter the panel header should be always visible or not (default false)
-- `content`: is an array of objects containing [label, selected, id, content, headerText] for each tab, the content for the panel can also be a custom component, headerText is text used for each panel header
+- `content`: is an array of objects containing [label, selected, id, content, headerText, linkCustomAttr] for each tab, the content for the panel can also be a custom component, headerText is text used for each panel header
 
 ## Variations
 Tabs have different style depending on the amount of items to display, if 2 tabs then it will always display tabs (except when js is disabled), if more than 2 then it will display a list of links for small devices and tabs for desktop

package/src/components/tabs/_template.njk

@@ -16,7 +16,7 @@
       {%- for item in params.content -%}
         {%- set tabId = TabId(item, params, loop.index) -%}
         <li class="mds-tabs__list-item">
-          <a href="#{{ tabId }}" id="label-{{tabId}}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" data-test="tabs-trigger{% if tabId %}-{{tabId}}{% endif %}">
+          <a href="#{{ tabId }}" id="label-{{tabId}}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" data-test="tabs-trigger{% if tabId %}-{{tabId}}{% endif %}"{% if item.linkCustomAttr %} {{item.linkCustomAttr | safe}}{% endif %}>
             {{- item.label -}}
           </a>
         </li>

package/src/components/tabs/tabs.config.js

@@ -42,13 +42,11 @@ module.exports = {
           {
             label: 'Item 1',
             selected: true,
-            content:
-              '<p><strong>Two Items</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
+            content: '<p>When there are only two tabs they remain inline at mobile.</p>',
           },
           {
             label: 'Item 2',
-            content:
-              '<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+            content: '<p>When there are only two tabs they remain inline at mobile.</p>',
           },
         ],
       },
@@ -56,7 +54,7 @@ module.exports = {
     {
       name: 'No Ids, visible headers, 3 items',
       context: {
-        name: 'Wild Pets',
+        name: 'No Ids, visible headers, 3 items',
         classes: '',
         allHeadersTag: 'h3',
         allHeadersDisplay: true,
@@ -86,7 +84,7 @@ module.exports = {
     {
       name: 'No Ids, visible header, 2 items',
       context: {
-        name: 'Recruiter',
+        name: 'No Ids, visible header, 2 items',
         classes: '',
         allHeadersTag: 'h3',
         allHeadersDisplay: true,
@@ -107,5 +105,30 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Links in tabs have custom attributes',
+      context: {
+        name: 'Custom Link Attributes',
+        classes: '',
+        allHeadersTag: 'h3',
+        content: [
+          {
+            label: 'Plane',
+            selected: true,
+            headerText: 'Flying craft',
+            linkCustomAttr: 'data-metric="wings"',
+            content:
+              '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
+          },
+          {
+            label: 'Helicopter',
+            headerText: 'Flying craft',
+            linkCustomAttr: 'data-metric="rotor-blades"',
+            content:
+              '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
+          },
+        ],
+      },
+    },
   ],
 };

package/src/components/tabs/tabs.njk

@@ -1,5 +1,7 @@
 {% from "./tabs/_macro.njk" import MdsTabs %}
 
+<h2>{{ name }}</h2>
+
 <div class="mds-surface mds-margin-bottom-b5">
   {{ MdsTabs({
     name: name,

package/src/scss/components/__index.scss

@@ -13,4 +13,4 @@
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
 @import '../../components/modal/modal';
-@import '../../components/skip-link/skip-link';
+@import '../../components/skip-link/skip-link';

package/src/tokens/custom.json

@@ -0,0 +1,22 @@
+{
+  "custom": {
+    "badge": {
+      "1": {
+        "background": { 
+          "value" : "{color.neutral.black.value}" 
+        },
+        "color": { 
+          "value" : "#fff" 
+        }
+      },
+      "2": {
+        "background": { 
+          "value" : "#40791B" 
+        },
+        "color": { 
+          "value" : "#fff" 
+        }
+      }
+    }
+  }
+}