mp-design-system 1.2.64 → 1.2.66

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

@@ -1,67 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Input',
-  category: categories.form,
-  component: {
-    name: 'input'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id',
-    type: 'text',
-    placeholder: 'Placeholder',
-    required: true
-  },
-  variants: [
-    {
-      title: 'With error',
-      context: {
-        error: true
-      }
-    },
-    {
-      title: 'With error message',
-      context: {
-        error: 'This field is required'
-      }
-    },
-    {
-      title: 'With button',
-      context: {
-        button: true,
-        buttontext: 'Search'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['type', 'string', 'Defaults to text'],
-        ['placeholder', 'string'],
-        ['required', 'bool']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-input--alt', '', 'Petrol step 3 alternative background'],
-        ['c-input--large', '', 'Taller input'],
-        ['c-input--select', '', 'Add dropdown arrow'],
-        ['c-input--textarea', '', 'Prevent horizontal resizing']
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/input.njk

@@ -1,15 +0,0 @@
-{% inputWrapper params.error %}
-  <div class="c-input__wrap">
-    <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
-    {% if params.button %}
-    <div class="u-flex u-border">
-    {% endif %}
-    <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
-    {% if params.button %}
-    <button type="button" class="mp c-button--white">Search</button>
-    {% endif %}
-    {% if params.button %}
-    </div>
-    {% endif %}
-  </div>
-{% endinputWrapper %}

package/src/_includes/components/input/input.scss

@@ -1,136 +0,0 @@
-.c-input {
-  background: color('white');
-  border: 1px solid color('petrol', 'step-2');
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0;
-  font: inherit;
-  @include padding('2xs');
-  color: inherit;
-  font-size: 1rem;
-  display: block;
-  width: 100%;
-
-  &:focus {
-    outline: none;
-    border-color: color('petrol');
-  }
-
-  &::-webkit-calendar-picker-indicator {
-    cursor: pointer;
-
-    &:hover {
-      background-color: color('utility-blue', 'step-3');
-      outline: var(--space-2xs) solid color('utility-blue', 'step-3');
-    }
-  }  
-
-  &--alt {
-    background: color('petrol', 'step-3');
-    border: none;
-  }
-
-  &--large {
-    min-height: 56px;
-  }
-
-  &--select {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10"><path fill="%23006DAF" fill-rule="nonzero" d="M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z"/></svg>');
-    background-position: center right 1rem;
-    background-repeat: no-repeat;
-    background-size: 0.875em auto;
-  }
-
-  &--textarea {
-    resize: vertical;
-    min-height: 10rem;;
-  }
-
-  &--file {
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-
-    @at-root ::-webkit-file-upload-button {
-      @extend %c-button;
-      @extend .c-button--blue;
-      display: inline-flex;
-      @include margin-right('xs');
-    }
-  }
-
-  &-error {
-    --error-state: #{color('red')};
-    position: relative;
-
-    .c-form__input-wrap,
-    &> fieldset {
-      &::after {
-        content: '';
-        height: 2rem;
-        width: 2rem;
-        @include margin('auto', 0);
-        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%23CE0058"/><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334"/></svg>') no-repeat center;
-        flex-shrink: 0;
-      }
-    }
-
-    &> fieldset::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-
-  &-error & {
-    border-color: color('red');
-
-    &:focus {
-      border-color: color('red', 'step--1');
-    }
-  }
-
-  &-message {
-    @include step(-1);
-    color: var(--error-state);
-    
-    &> * {
-      @include margin-top('2xs');
-    }
-  }
-
-  &[disabled],
-  [disabled],
-  &--disabled {
-    background-color: color('petrol', 'step-2');
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="lock" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z"/></svg>');
-    background-position: right var(--space-2xs) center;
-    background-repeat: no-repeat;
-    @include space('background-size', 's');
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
-
-.u-disabled > .c-input {
-  @extend .c-input--disabled;
-}
-
-.c-input--with-button {
-  // padding-right: 44px;
-  border: 0;
-}
-
-.c-input--with-button + [type] {
-  // transform: translateY(-50%);
-  // position: absolute;
-  @include padding('xs');
-  color: color('utility-blue');
-  // right: 0;
-  // top: 50%;
-
-  svg {
-    display: block;
-  }
-}

package/src/_includes/components/input/macro.njk

@@ -1,25 +0,0 @@
-{% from "components/component/component.njk" import c %}
-
-{% macro checkbox(params, type = 'checkbox') %}
-  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro input(params) %}
-  {{ c({ name: 'input' }, params) }}
-{% endmacro %}
-
-{% macro radio(params) %}
-  {{ c({ name: 'radio', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro select(params) %}
-  {{ c({ name: 'select', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro textarea(params) %}
-  {{ c({ name: 'textarea', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro toggle(params, type='toggle') %}
-  {{ c({ name: 'toggle', folder: 'input' }, params) }}
-{% endmacro %}

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

@@ -1,41 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Radio',
-  category: categories.form,
-  component: {
-    name: 'radio',
-    folder: 'input'
-  },
-  preview: 'form',
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A587',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id'
-  },
-  variants: [
-    {
-      title: 'Checked',
-      context: {
-        checked: true
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['checked', 'bool', 'Is this input checked?']
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/radio.njk

@@ -1,2 +0,0 @@
-<input type="radio" class="c-radio" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
-<label for="{{ params.id }}">{{ params.label }}</label>

package/src/_includes/components/input/radio.scss

@@ -1,143 +0,0 @@
-.c-radio,
-.c-checkbox {
-  @extend .u-hidden;
-
-  &+label,
-  &+input[type=hidden]+label {
-    @include padding-left('l');
-    position: relative;
-    @include step(-1);
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-
-    &:before {
-      transform: translateY(-50%);
-      position: absolute;
-      content: '';
-      border: 1px solid color('petrol', 'step-2');
-      border-radius: 2px;
-      height: 1.25rem;
-      width: 1.25rem;
-      left: 0;
-      top: 50%;
-    }
-  }
-
-  &:focus+label:before,
-  &:focus+input[type=hidden]+label:before {
-    outline: 2px solid;
-  }
-
-  &[disabled],
-  [disabled] & {
-    &+label:before {
-      background-color: color('petrol', 'step-2');
-      cursor: not-allowed;
-      opacity: 0.6;
-
-    }
-
-    &:hover+label:before {
-      background-color: color('petrol', 'step-2');
-    }
-  }
-
-
-  &--box {
-    &+label {
-      @include padding('s');
-      height: 100%;
-      width: 100%;
-      background: color('white');
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 6px;
-      text-align: center;
-      font-weight: 700;
-      word-break: break-word;
-      flex-wrap: wrap;
-
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-
-    &:checked+label {
-      background: color('blue');
-      color: color('white');
-    }
-
-    &[disabled]+label {
-      background: color('grey', 'step-3');
-      color: color('grey', 'step-1');
-      border: 1px solid color('grey', 'step-2');
-      cursor: not-allowed;
-    }
-  }
-
-}
-
-.c-checkbox {
-
-  &:checked+label:before,
-  &:checked+input[type=hidden]+label:before {
-    background: color('utility-blue');
-  }
-
-  &:checked+label:after,
-  &:checked+input[type=hidden]+label:after {
-    transform: translateX(6.5px) translateY(-1.5px) translateY(-50%) rotate(45deg);
-    position: absolute;
-    content: '';
-    width: 7px;
-    height: 11px;
-    border-bottom: 3px solid color('white');
-    border-right: 3px solid color('white');
-    left: 0;
-    top: 50%;
-  }
-}
-
-.c-radio,
-.c-checkbox {
-
-  &+label:hover:before,
-  &+input[type=hidden]+label:hover:before {
-    background-color: color('utility-blue', 'step-3');
-  }
-}
-
-.c-checkbox {
-
-  &:checked+label:hover:before,
-  &:checked+input[type=hidden]+label:hover:before {
-    background: color('utility-blue', 'step--1');
-  }
-}
-
-.c-radio {
-
-  &+label:before,
-  &+input[type=hidden]+label:before {
-    border-radius: 100%;
-  }
-
-  &:checked+label:before,
-  &:checked+input[type=hidden]+label:before {
-    box-shadow: inset 0 0 0 5px color('utility-blue');
-  }
-
-  &:checked+label:hover:before,
-  &:checked+input[type=hidden]+label:hover:before {
-    box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');
-  }
-}
-
-.c-off-canvas .c-checkbox-group {
-  &>* {
-    width: 100%;
-    margin-left: 0;
-  }
-}

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

@@ -1,70 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Select',
-  category: categories.form,
-  component: {
-    name: 'select',
-    folder: 'input'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id',
-    placeholder: 'Placeholder',
-    required: true,
-    options: [
-      ['option-1', 'Option 1'],
-      ['Option 2'],
-      ['option-3', 'Option 3'],
-    ]
-  },
-  variants: [
-    {
-      title: 'Selected option',
-      context: {
-        value: 'option-3'
-      }
-    },
-    {
-      title: 'With error',
-      context: {
-        error: true
-      }
-    },
-    {
-      title: 'With error message',
-      context: {
-        error: 'This field is required'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['placeholder', 'string'],
-        ['required', 'bool'],
-        ['options', 'option[]', 'Array of options'],
-        ['value', 'string', 'Currently selected value']
-      ]
-    },
-    {
-      title: '<code>option</code>',
-      table: [
-        ['0', 'string', 'Value'],
-        ['1', 'string', 'Label (defaults to value if not passed)'],
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/select.njk

@@ -1,13 +0,0 @@
-{% inputWrapper params.error %}
-  <div class="c-input__wrap">
-    <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
-    <select class="c-input c-input--select" name="{{ params.name or params.id }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}>
-      {% if params.placeholder %}<option value="">{{ params.placeholder }}</option>{% endif %}
-      {% if params.options | length %}
-        {% for option in params.options %}
-          <option value="{{ option[0] }}" {{ 'selected' if params.value == option[0] }}>{{ option[1] or option[0] }}</option>
-        {% endfor %}
-      {% endif %}
-    </select>
-  </div>
-{% endinputWrapper %}

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

@@ -1,51 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Textarea',
-  category: categories.form,
-  component: {
-    name: 'textarea',
-    folder: 'input'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id',
-    placeholder: 'Placeholder',
-    required: true
-  },
-  variants: [
-    {
-      title: 'With error',
-      context: {
-        error: true
-      }
-    },
-    {
-      title: 'With error message',
-      context: {
-        error: 'This field is required'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['type', 'string', 'Defaults to text'],
-        ['placeholder', 'string'],
-        ['required', 'bool']
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/textarea.njk

@@ -1,4 +0,0 @@
-{% inputWrapper params.error %}
-  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
-  <textarea class="c-input c-input--textarea" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}></textarea>
-{% endinputWrapper %}

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

@@ -1,41 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Toggle',
-  category: categories.form,
-  component: {
-    name: 'toggle',
-    folder: 'input'
-  },
-  figma: 'https://www.figma.com/file/szD8e7jNeWIfKpt6y41isi/Franklin-design-system?node-id=213-918',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id'
-  },
-  variants: [
-    {
-      title: 'Toggled on',
-      context: {
-        checked: true
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['checked', 'bool', 'Is this input checked?']
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/toggle.njk

@@ -1,5 +0,0 @@
-<label for="{{ params.id }}" class="c-toggle">
-  <input type="checkbox" class="c-toggle__checkbox" id="{{ params.id }}" value="{{ params.value }}" role="switch" aria-checked="false" aria-label="{{ params.label }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
-  <span class="c-toggle__slider"></span>
-  <span class="c-toggle__label">{{ params.label }}</span>
-</label>