@madgex/design-system 1.21.8 → 1.22.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 Aug 2019 11:39:53 GMT
+ * Generated on Fri, 30 Aug 2019 15:07:31 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 Aug 2019 11:39:53 GMT
+ * Generated on Fri, 30 Aug 2019 15:07:31 GMT
  */
 
 module.exports = {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Tue, 20 Aug 2019 11:39:53 GMT
+  Generated on Fri, 30 Aug 2019 15:07:31 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Tue, 20 Aug 2019 11:39:53 GMT
+  Generated on Fri, 30 Aug 2019 15:07:31 GMT
 */
 html,
 body,
@@ -1472,7 +1472,7 @@ body {
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: #f0af11;
-  padding: 8px 12px;
+  padding: 12px 12px;
   font-size: 100%;
   width: 100%;
   display: inline-block;
@@ -1484,6 +1484,7 @@ body {
 @media (min-width: 37.5em) {
   .mds-button {
     width: auto;
+    padding: 8px 12px;
   }
 }
 
@@ -1569,6 +1570,44 @@ body {
   padding: 28px 32px;
 }
 
+.mds-input {
+  width: 100%;
+  background-color: #f8f8f8;
+  height: 2rem;
+  margin: 4px 0;
+  padding: 4px;
+}
+
+.mds-input__label {
+  font-weight: 600;
+}
+
+.mds-input__label--hint {
+  font-weight: normal;
+  color: #979797;
+}
+
+.mds-input__validation-message {
+  display: block;
+  text-align: right;
+}
+
+.mds-input__validation-message--error {
+  color: #e1021d;
+}
+
+.mds-input--error {
+  border-color: #e1021d;
+}
+
+.mds-textarea {
+  resize: none;
+  width: 100%;
+  background-color: #f8f8f8;
+  margin: 4px 0;
+  padding: 8px;
+}
+
 .mds-font-canon {
   font-size: 1.75rem;
   line-height: 1.15;

package/package.json

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

package/src/components/button/button.scss

@@ -12,7 +12,7 @@ $mds-color-button-text-hover: $mds-color-button-text !default;
   border: 1px solid transparent;
   border-radius: $mds-size-button-border-radius;
   background-color: $mds-color-button-bg;
-  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 3);
   font-size: 100%;
   width: 100%;
   display: inline-block;
@@ -22,6 +22,7 @@ $mds-color-button-text-hover: $mds-color-button-text !default;
 
   @include mq($from: md) {
     width: auto;
+    padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
   }
 
   // Ensure that any global link styles are overridden

package/src/components/input/_macro.njk

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

package/src/components/input/_template.njk

@@ -0,0 +1,32 @@
+<div>
+  <label class="mds-display-block mds-input__label mds-font-long-primer" for="{{ params.id }}">
+    {{ params.labelText }}
+    {% if params.required %}
+      <span>*</span>
+    {% endif %}
+  </label>
+  <input
+    class="mds-input mds-border mds-border-radius"
+    type="{{ params.type }}"
+    name="{{ params.name }}"
+    id="{{ params.id }}"
+    {% if params.validationMessage %}
+      aria-describedby="{{ params.id }}-validation-message"
+    {% endif %}
+    {% if params.required %}
+      required="required"
+    {% endif %}
+    {% if params.disabled %}
+      disabled="disabled"
+    {% endif %}
+  />
+  {% if params.validationMessage %}
+    <span
+      aria-live="polite"
+      id="{{ params.id }}-validation-message"
+      class="mds-input__validation-message mds-font-brevier"
+    >
+      {{ params.validationMessage }}
+    </span>
+  {% endif %}
+</div>

package/src/components/input/input.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+  title: 'Input',
+  status: 'prototype',
+  context: {
+    labelText: 'Text input',
+    name: 'Example input',
+    id: 'exampleInput',
+    type: 'text',
+  },
+  variants: [
+    {
+      name: 'Required input',
+      context: {
+        labelText: 'Required input',
+        name: 'Required input',
+        id: 'requiredInput',
+        type: 'password',
+        required: true,
+      },
+    },
+    {
+      name: 'With validation message',
+      context: {
+        labelText: 'Validated input',
+        name: 'Validated input',
+        id: 'validatedInput',
+        type: 'text',
+        validationMessage: '100 characters remaining',
+      },
+    },
+    {
+      name: 'Disabled input',
+      context: {
+        labelText: 'Disabled input',
+        name: 'Disabled input',
+        id: 'disabledInput',
+        type: 'email',
+        disabled: true,
+      },
+    },
+  ],
+};

package/src/components/input/input.njk

@@ -0,0 +1,11 @@
+{% from "./input/_macro.njk" import MdsInput %}
+
+{{ MdsInput({
+  labelText: labelText,
+  name: name,
+  id: id,
+  type: type,
+  required: required,
+  disabled: disabled,
+  validationMessage: validationMessage
+}) }}

package/src/components/input/input.scss

@@ -0,0 +1,24 @@
+.mds-input {
+  width: 100%;
+  background-color: $mds-color-neutral-lightest;
+  height: 2rem;
+  margin: $mds-size-baseline 0;
+  padding: $mds-size-baseline;
+  &__label {
+    font-weight: 600;
+    &--hint {
+      font-weight: normal;
+      color: $mds-color-neutral-base;
+    }
+  }
+  &__validation-message {
+    display: block;
+    text-align: right;
+    &--error {
+      color: $mds-color-status-error-base;
+    }
+  }
+  &--error {
+    border-color: $mds-color-status-error-base;
+  }
+}

package/src/components/textarea/_macro.njk

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

package/src/components/textarea/_template.njk

@@ -0,0 +1,41 @@
+<div>
+    <label class="mds-display-block mds-input__label mds-font-long-primer mds-margin-bottom-b1" for="{{ params.id }}">
+      {{ params.labelText }}
+      {% if params.required %}
+        <span>*</span>
+      {% endif %}
+    </label>
+    {% if params.labelHint %}
+      <span
+        class="mds-display-block mds-input__label--hint mds-font-long-primer mds-margin-bottom-b1"
+        id="{{ params.id }}-hint"
+      >
+        {{ params.labelHint }}
+      </span>
+    {% endif %}
+    <textarea
+      class="mds-textarea mds-border mds-border-radius"
+      name="{{ params.name }}"
+      id="{{ params.id }}"
+      cols="{{ params.cols | default(30) }}"
+      rows="{{ params.rows | default(10) }}"
+      {% if params.labelHint or params.validationMessage %}
+        aria-describedby="{% if params.labelHint %}{{ params.id }}-hint {% endif %}{% if params.validationMessage %}{{ params.id }}-validation-message{% endif %}"
+      {% endif %}
+      {% if params.disabled %}
+        disabled="disabled"
+      {% endif %}
+      {% if params.required %}
+        required="required"
+      {% endif %}
+    ></textarea>
+    {% if params.validationMessage %}
+      <span
+        aria-live="polite"
+        id="{{ params.id }}-validation-message"
+        class="mds-input__validation-message mds-font-brevier"
+      >
+        {{ params.validationMessage }}
+      </span>
+    {% endif %}
+  </div>

package/src/components/textarea/textarea.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  title: 'Text Area',
+  status: 'prototype',
+  context: {
+    labelText: 'Text area',
+    name: 'Example text area',
+    id: 'exampleTextArea',
+  },
+  variants: [
+    {
+      name: 'With label hint',
+      context: {
+        labelText: 'Hint input',
+        name: 'Hint input',
+        id: 'hintInput',
+        type: 'text',
+        labelHint: 'This is a text area',
+      },
+    },
+    {
+      name: 'With validation message',
+      context: {
+        labelText: 'Validated input',
+        name: 'Validated input',
+        id: 'validatedInput',
+        type: 'text',
+        validationMessage: '100 characters remaining',
+      },
+    },
+  ],
+};

package/src/components/textarea/textarea.njk

@@ -0,0 +1,11 @@
+{% from "./textarea/_macro.njk" import MdsTextArea %}
+
+{{ MdsTextArea({
+  labelText: labelText,
+  labelHint: labelHint,
+  name: name,
+  id: id,
+  required: required,
+  disabled: disabled,
+  validationMessage: validationMessage
+}) }}

package/src/components/textarea/textarea.scss

@@ -0,0 +1,7 @@
+.mds-textarea {
+  resize: none;
+  width: 100%;
+  background-color: $mds-color-neutral-lightest;
+  margin: $mds-size-baseline 0;
+  padding: $mds-size-baseline * 2;
+}

package/src/scss/components/__index.scss

@@ -3,3 +3,5 @@
 @import '../../components/card/card';
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
+@import '../components/input/input';
+@import '../components/textarea/textarea';