select-error-label--basic-components

packages/kaizen-basic-components/atoms/error-message/_a-error-message.css

@@ -0,0 +1,36 @@
+%a-error-message {
+  display: block;
+  letter-spacing: initial;
+  text-transform: none;
+  color: var(--color-secondary-4);
+  font-size: var(--font-size--xxs);
+  font-weight: var(--font-weight--medium);
+  line-height: var(--line-height--base);
+
+  &__ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &--top {
+    padding-top: 0;
+    padding-bottom: 0.5rem;
+  }
+
+  &--bottom {
+    padding-top: 0.5rem;
+    padding-bottom: 0;
+  }
+
+  &__link {
+    color: var(--color-secondary-4);
+
+    &--hover {
+      color: var(--color-text);
+
+      &--light {
+        color: var(--color-grey-utility-color);
+      }
+    }
+  }
+}

packages/kaizen-basic-components/atoms/error-message/_variables.css

@@ -0,0 +1,107 @@
+/* Variables just for example. */
+
+:root {
+  --color-primary: #0e4e95;
+  --color-primary-2: #126ae1;
+  --color-primary-3: #f3f7fa;
+  --color-primary-4: #566069;
+  --color-primary-5: #29b9e8;
+  --color-secondary: #43b0b1;
+  --color-secondary-2: #56ccf2;
+  --color-secondary-3: #f26f21;
+  --color-secondary-4: #c52254;
+  --color-secondary-5: #f2f2f2;
+
+  /* Not pallet colors */
+  --color-secondary-6: #008dbf;
+  --color-secondary-7: #e4e4e4;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-border: var(--color-secondary-7);
+  --color-grey-utility-color: #cfd7db;
+
+  /* Disabled colors */
+  --color-primary-disabled: #a1d7d8;
+  --color-secondary-disabled: #88b4f0;
+  --color-bg: var(--color-white);
+  --color-text: var(--color-primary-4);
+  --color-disabled: var(--color-primary-4); /* old #8ca6c7 */
+  --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */
+  --window-height: 100vh;
+  --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */
+  --root-font-size--default: 100%;
+  --root-font-size--medium: calc(16 * (1vw / 14.4));
+  --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */
+  /* font-sizes */
+  --font-size--xxxxxl: 48px;
+  --font-size--xxxxl: 40px;
+  --font-size--xxxl: 36px;
+  --font-size--xxl: 30px;
+  --font-size--xl: 24px;
+  --font-size--m: 20px;
+  --font-size--l: 18px;
+  --font-size--base: 16px;
+  --font-size--s: 14px;
+  --font-size--xs: 13px;
+  --font-size--xxs: 12px;
+  --font-size--xxxs: 11px;
+  /* font families */
+  --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  /* font-weight */
+  --font-weight--base: var(--font-weight--regular);
+  --font-weight--regular: 400;
+  --font-weight--medium: 500;
+  --font-weight--bold: 700;
+  /* line height */
+  --line-height--xxxxl: 2.25;
+  --line-height--xxxl: 2;
+  --line-height--xxl: 1.75;
+  --line-height--xl: 1.7;
+  --line-height--l: 1.6;
+  --line-height--base: 1.5;
+  --line-height--s: 1.385;
+  --line-height--xs: 1.333;
+  --line-height--xxs: 1.25;
+  --line-height--xxxm: 1.14;
+  --line-height--xxxs: 1.1667;
+  --line-height--xxxxs: 1;
+  /* letter-spacing */
+  --letter-spacing--xl: 1.4px;
+  --letter-spacing--l: 0.05rem; /* 0.8px */
+  --letter-spacing--s: 0.04063rem; /* 0.65px */
+  /* site sizes */
+  --site-max-width: 1920px; /* 1920px */
+  --content-max-width: 1264px; /* 1216px + 48 padding */
+  --content-max-width--mobile: 768px;
+  --content-max-width--w: 1488px;
+  --content-max-width--ls: 1056px; /* 1008px + 48 padding */
+  --content-max-width--s: 53rem; /* 800px + 48 padding */
+  --content-max-width--xs: 46.5rem;
+  --mobile-header-height: 64px;
+  --desktop-sticky-main-menu-height: 59px;
+  /* container */
+  --container-padding: 24px;
+  /* z-index */
+  --z-index-header: 500;
+  --z-index-header-bottom: 510;
+  --z-index-header-top: 515;
+  --z-index-sticky: 520;
+  --z-index-modal: 600;
+  --z-index-selects: 700;
+  --z-index-dialog-overlay: 799;
+  --z-index-dialog: 800;
+  /* transitions */
+  --transition-duration: 0.3s;
+  --transition-timing-function: ease;
+  --transition-hover: var(--transition-duration) var(--transition-timing-function);
+  --transition-collapse: var(--transition-duration) var(--transition-timing-function);
+  /* border-radius */
+  --border-radius-circle: 50%;
+  --border-radius-xl: 8px;
+  --border-radius-base: 4px;
+  --border-radius-s: 3px;
+  --border-radius-xs: 2px;
+  /* other */
+  --input-height: 48px;
+  --input-secondary-height: 48px;
+}

packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig

@@ -0,0 +1 @@
+<div {{ attributes.addClass('a-error-message') }}>{{ text }}</div>

packages/kaizen-basic-components/atoms/error-message/a-error-message.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "error_text": "Error message"
+  }
+}

packages/kaizen-basic-components/atoms/error-message/a-error-message.md

@@ -0,0 +1,3 @@
+# Atom / Error message
+
+Error message

packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js

@@ -0,0 +1,28 @@
+import './_variables.css';
+import './error-message.css';
+import drupalAttribute from 'drupal-attribute';
+import componentNotes from './a-error-message.md';
+
+const template = require('./a-error-message.html.twig');
+const data = require('./a-error-message.json');
+
+const component = {
+  title: 'atoms/error message',
+};
+
+if (componentNotes.length) {
+  component.parameters = { notes: componentNotes };
+}
+
+export default component;
+
+export const basic = ({
+    modifier_class = '',
+    text = '',
+  }) => {
+  const normailzedText = !text ? data.content.error_text : text;
+  data.attributes = new drupalAttribute();
+  data.attributes.addClass(modifier_class);
+  data.text = normailzedText;
+  return template(data);
+};

packages/kaizen-basic-components/atoms/error-message/error-message.css

@@ -0,0 +1,17 @@
+@import "_a-error-message";
+
+.a-error-message {
+  @extend %a-error-message;
+
+  a {
+    @extend %a-error-message__link;
+
+    &:hover {
+      @extend %a-error-message__link--hover;
+    }
+  }
+
+  ul {
+    @extend %a-error-message__ul;
+  }
+}

packages/kaizen-basic-components/atoms/label/_a-label.css

@@ -0,0 +1,15 @@
+%a-label {
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  font-size: var(--font-size--xs);
+  font-weight: var(--font-weight--medium);
+  line-height: var(--line-height--xxs);
+
+  &--required {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin: 0 0.3em;
+    content: "*";
+  }
+}

packages/kaizen-basic-components/atoms/label/_variables.css

@@ -0,0 +1,107 @@
+/* Variables just for example. */
+
+:root {
+  --color-primary: #0e4e95;
+  --color-primary-2: #126ae1;
+  --color-primary-3: #f3f7fa;
+  --color-primary-4: #566069;
+  --color-primary-5: #29b9e8;
+  --color-secondary: #43b0b1;
+  --color-secondary-2: #56ccf2;
+  --color-secondary-3: #f26f21;
+  --color-secondary-4: #c52254;
+  --color-secondary-5: #f2f2f2;
+
+  /* Not pallet colors */
+  --color-secondary-6: #008dbf;
+  --color-secondary-7: #e4e4e4;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-border: var(--color-secondary-7);
+  --color-grey-utility-color: #cfd7db;
+
+  /* Disabled colors */
+  --color-primary-disabled: #a1d7d8;
+  --color-secondary-disabled: #88b4f0;
+  --color-bg: var(--color-white);
+  --color-text: var(--color-primary-4);
+  --color-disabled: var(--color-primary-4); /* old #8ca6c7 */
+  --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */
+  --window-height: 100vh;
+  --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */
+  --root-font-size--default: 100%;
+  --root-font-size--medium: calc(16 * (1vw / 14.4));
+  --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */
+  /* font-sizes */
+  --font-size--xxxxxl: 48px;
+  --font-size--xxxxl: 40px;
+  --font-size--xxxl: 36px;
+  --font-size--xxl: 30px;
+  --font-size--xl: 24px;
+  --font-size--m: 20px;
+  --font-size--l: 18px;
+  --font-size--base: 16px;
+  --font-size--s: 14px;
+  --font-size--xs: 13px;
+  --font-size--xxs: 12px;
+  --font-size--xxxs: 11px;
+  /* font families */
+  --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  /* font-weight */
+  --font-weight--base: var(--font-weight--regular);
+  --font-weight--regular: 400;
+  --font-weight--medium: 500;
+  --font-weight--bold: 700;
+  /* line height */
+  --line-height--xxxxl: 2.25;
+  --line-height--xxxl: 2;
+  --line-height--xxl: 1.75;
+  --line-height--xl: 1.7;
+  --line-height--l: 1.6;
+  --line-height--base: 1.5;
+  --line-height--s: 1.385;
+  --line-height--xs: 1.333;
+  --line-height--xxs: 1.25;
+  --line-height--xxxm: 1.14;
+  --line-height--xxxs: 1.1667;
+  --line-height--xxxxs: 1;
+  /* letter-spacing */
+  --letter-spacing--xl: 1.4px;
+  --letter-spacing--l: 0.05rem; /* 0.8px */
+  --letter-spacing--s: 0.04063rem; /* 0.65px */
+  /* site sizes */
+  --site-max-width: 1920px; /* 1920px */
+  --content-max-width: 1264px; /* 1216px + 48 padding */
+  --content-max-width--mobile: 768px;
+  --content-max-width--w: 1488px;
+  --content-max-width--ls: 1056px; /* 1008px + 48 padding */
+  --content-max-width--s: 53rem; /* 800px + 48 padding */
+  --content-max-width--xs: 46.5rem;
+  --mobile-header-height: 64px;
+  --desktop-sticky-main-menu-height: 59px;
+  /* container */
+  --container-padding: 24px;
+  /* z-index */
+  --z-index-header: 500;
+  --z-index-header-bottom: 510;
+  --z-index-header-top: 515;
+  --z-index-sticky: 520;
+  --z-index-modal: 600;
+  --z-index-selects: 700;
+  --z-index-dialog-overlay: 799;
+  --z-index-dialog: 800;
+  /* transitions */
+  --transition-duration: 0.3s;
+  --transition-timing-function: ease;
+  --transition-hover: var(--transition-duration) var(--transition-timing-function);
+  --transition-collapse: var(--transition-duration) var(--transition-timing-function);
+  /* border-radius */
+  --border-radius-circle: 50%;
+  --border-radius-xl: 8px;
+  --border-radius-base: 4px;
+  --border-radius-s: 3px;
+  --border-radius-xs: 2px;
+  /* other */
+  --input-height: 48px;
+  --input-secondary-height: 48px;
+}

packages/kaizen-basic-components/atoms/label/a-label.html.twig

@@ -0,0 +1 @@
+<label {{ attributes }}>{{ text }}</label>

packages/kaizen-basic-components/atoms/label/a-label.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "label_text": "Input label text"
+  }
+}

packages/kaizen-basic-components/atoms/label/a-label.md

@@ -0,0 +1,3 @@
+# Atom / Input label
+
+Input label

packages/kaizen-basic-components/atoms/label/a-label.stories.js

@@ -0,0 +1,32 @@
+import './_variables.css';
+import './label.css';
+import drupalAttribute from 'drupal-attribute';
+import componentNotes from './a-label.md';
+
+const template = require('./a-label.html.twig');
+const data = require('./a-label.json');
+
+const component = {
+  title: 'atoms/label',
+};
+
+if (componentNotes.length) {
+  component.parameters = { notes: componentNotes };
+}
+
+export default component;
+
+export const basic = (args = {}) => {
+  const modifier_class = args ? args.modifier_class : '';
+  const text = args ? args.text : '';
+  const label_for = args ? args.label_for : '';
+  const normailzedText = !text ? data.content.label_text : text;
+  data.attributes = new drupalAttribute();
+  data.attributes.addClass('a-label');
+  data.attributes.addClass(modifier_class);
+  data.text = normailzedText;
+  if (label_for) {
+    data.attributes.setAttribute('for', label_for);
+  }
+  return template(data);
+};

packages/kaizen-basic-components/atoms/label/label.css

@@ -0,0 +1,13 @@
+@import "_a-label";
+
+.a-label {
+  @extend %a-label;
+
+  &--secondary {
+    @extend %a-label--secondary;
+  }
+
+  &.form-required::after {
+    @extend %a-label--required;
+  }
+}