@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/textarea/textarea.stories.js

@@ -0,0 +1,169 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textarea',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Change the components mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read-only state',
+      name: 'Read only',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description: 'Set the number of rows',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+  },
+  args: {
+    placeholder: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    rows: 5,
+    state: 'Default',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ placeholder, disabled, readonly, label, labelPosition, state, helper, maxLength, modeVariant, rows, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const labelPosLookup = {
+    None: 'no-label',
+    Inside: 'inside',
+    Outside: 'outside',
+  };
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+      width: 400px;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+        <sdds-textarea
+          rows="${rows}"
+          state="${stateValue}"
+          label="${label}"
+          helper="${helper}"
+          ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
+    : ''}
+          label-position="${labelPosLookup[labelPosition]}"
+          ${disabled ? 'disabled' : ''}
+          ${readonly ? 'read-only' : ''}
+          placeholder="${placeholder}"
+          ${maxlength}>
+        </sdds-textarea>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('sdds-textarea')
+
+    textElement.addEventListener('sddsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsChange',(event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+};
+export const Default = Template.bind({});

package/dist/collection/components/textfield/textfield.css

@@ -1,66 +1,88 @@
 :root,
-.sdds-theme-light {
+.sdds-mode-light {
+  --sdds-textfield-background-primary: var(--sdds-grey-50);
+  --sdds-textfield-background-secondary: var(--sdds-white);
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
   --sdds-textfield-color: var(--sdds-grey-868);
-  --sdds-textfield-bg: var(--sdds-white);
-  --sdds-textfield-border-bottom: var(--sdds-grey-400);
   --sdds-textfield-placeholder: var(--sdds-grey-500);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-disabled-bg: var(--sdds-white);
-  --sdds-textfield-disabled-color: var(--sdds-grey-400);
-  --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
-  --sdds-textfield-disabled-label: var(--sdds-grey-400);
-  --sdds-textfield-disabled-ps-color: var(--sdds-grey-400);
+  --sdds-textfield-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-textfield-background-disabled-secondary: var(--sdds-white);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+  --sdds-textfield-color-disabled: var(--sdds-grey-400);
+  --sdds-textfield-placeholder-disabled: var(--sdds-grey-400);
+  --sdds-textfield-label-disabled: var(--sdds-grey-400);
+  --sdds-textfield-ps-color-disabled: var(--sdds-grey-400);
   --sdds-textfield-label-color: var(--sdds-grey-958);
   --sdds-textfield-label-inside-color: var(--sdds-grey-700);
   --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
   --sdds-textfield-bar: var(--sdds-blue-400);
   --sdds-textfield-helper: var(--sdds-grey-700);
-  --sdds-textfield-border-bottom-success: var(--sdds-grey-800);
-  --sdds-textfield-border-bottom-error: var(--sdds-red-500);
-  --sdds-textfield-helper-error: var(--sdds-red-500);
-  --sdds-textfield-bar-error: var(--sdds-red-500);
-  --sdds-textfield-icon-error: var(--sdds-red-500);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-helper-error: var(--sdds-negative);
+  --sdds-textfield-bar-error: var(--sdds-negative);
+  --sdds-textfield-icon-error: var(--sdds-negative);
   --sdds-textfield-textcounter: var(--sdds-grey-700);
   --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
   --sdds-textfield-ps-color: var(--sdds-grey-600);
   --sdds-textfield-resize-icon: var(--sdds-grey-500);
-  --sdds-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-on-white-bg: var(--sdds-grey-50);
+  --sdds-textfield-background-secondary: var(--sdds-white);
+  --sdds-textfield-border-bottom: var(--sdds-grey-600);
+  --sdds-textfield-border-bottom-hover: var(--sdds-grey-800);
+  --sdds-textfield-border-bottom-success: var(--sdds-grey-958);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-icon-read-only-color: var(--sdds-grey-958);
+  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-958);
+}
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
 }
 
-.sdds-theme-dark {
-  --sdds-textfield-color: var(--sdds-grey-868);
-  --sdds-textfield-bg: var(--sdds-red);
-  --sdds-textfield-border-bottom: var(--sdds-grey-400);
-  --sdds-textfield-placeholder: var(--sdds-grey-500);
-  --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-disabled-bg: var(--red-white);
-  --sdds-textfield-disabled-color: var(--sdds-grey-400);
-  --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
-  --sdds-textfield-disabled-label: var(--sdds-grey-400);
-  --sdds-textfield-disabled-ps-color: var(--sdds-grey-400);
-  --sdds-textfield-label-color: var(--sdds-grey-958);
-  --sdds-textfield-label-inside-color: var(--sdds-grey-700);
-  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
+.sdds-mode-dark {
+  --sdds-textfield-background-primary: var(--sdds-grey-900);
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-secondary: var(--sdds-grey-868);
+  --sdds-textfield-color: var(--sdds-grey-200);
+  --sdds-textfield-placeholder: var(--sdds-grey-600);
+  --sdds-textfield-ps-color-disabled: var(--sdds-grey-700);
+  --sdds-textfield-color-disabled: var(--sdds-grey-800);
+  --sdds-textfield-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-textfield-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+  --sdds-textfield-placeholder-disabled: var(--sdds-grey-800);
+  --sdds-textfield-label-disabled: var(--sdds-grey-700);
+  --sdds-textfield-label-color: var(--sdds-grey-100);
+  --sdds-textfield-label-inside-color: var(--sdds-grey-400);
+  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-700);
   --sdds-textfield-bar: var(--sdds-blue-400);
-  --sdds-textfield-helper: var(--sdds-grey-700);
-  --sdds-textfield-border-bottom-success: var(--sdds-grey-800);
-  --sdds-textfield-border-bottom-error: var(--sdds-red-500);
-  --sdds-textfield-helper-error: var(--sdds-red-500);
-  --sdds-textfield-bar-error: var(--sdds-red-500);
-  --sdds-textfield-icon-error: var(--sdds-red-500);
-  --sdds-textfield-textcounter: var(--sdds-grey-700);
-  --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
-  --sdds-textfield-ps-color: var(--sdds-grey-600);
+  --sdds-textfield-helper: var(--sdds-grey-600);
+  --sdds-textfield-helper-error: var(--sdds-negative);
+  --sdds-textfield-bar-error: var(--sdds-negative);
+  --sdds-textfield-icon-error: var(--sdds-negative);
+  --sdds-textfield-textcounter: var(--sdds-grey-600);
+  --sdds-textfield-textcounter-divider: var(--sdds-grey-700);
+  --sdds-textfield-ps-color: var(--sdds-grey-100);
   --sdds-textfield-resize-icon: var(--sdds-grey-500);
-  --sdds-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textfield-on-white-bg: var(--sdds-grey-50);
+  --sdds-textfield-border-bottom: var(--sdds-grey-600);
+  --sdds-textfield-border-bottom-hover: var(--sdds-grey-400);
+  --sdds-textfield-border-bottom-success: var(--sdds-grey-50);
+  --sdds-textfield-border-bottom-error: var(--sdds-negative);
+  --sdds-textfield-icon-read-only-color: var(--sdds-grey-100);
+  --sdds-textfield-icon-read-only-label-color: var(--sdds-grey-50);
 }
-
-.sdds-on-white-bg {
-  --sdds-textfield-bg: var(--sdds-textfield-on-white-bg);
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-textfield-background: var(--sdds-textfield-background-primary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-textfield-background: var(--sdds-textfield-background-secondary);
+  --sdds-textfield-background-disabled: var(--sdds-textfield-background-disabled-secondary);
 }
 
 .sdds-textfield-input {
@@ -72,7 +94,7 @@
   outline: none;
   height: 100%;
   color: var(--sdds-textfield-color);
-  background-color: var(--sdds-textfield-bg);
+  background-color: var(--sdds-textfield-background);
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
@@ -86,14 +108,14 @@
 }
 .sdds-textfield-input:disabled {
   cursor: not-allowed;
-  background-color: var(--sdds-textfield-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
 }
 .sdds-textfield-input:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
+  color: var(--sdds-textfield-placeholder-disabled);
 }
 .sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
+  color: var(--sdds-textfield-label-disabled);
 }
 
 .sdds-textfield-input-md {
@@ -105,7 +127,7 @@
   outline: none;
   height: 100%;
   color: var(--sdds-textfield-color);
-  background-color: var(--sdds-textfield-bg);
+  background-color: var(--sdds-textfield-background);
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-16);
@@ -119,14 +141,14 @@
 }
 .sdds-textfield-input-md:disabled {
   cursor: not-allowed;
-  background-color: var(--sdds-textfield-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
 }
 .sdds-textfield-input-md:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
+  color: var(--sdds-textfield-placeholder-disabled);
 }
 .sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
+  color: var(--sdds-textfield-label-disabled);
 }
 
 .sdds-textfield-input-sm {
@@ -138,7 +160,7 @@
   outline: none;
   height: 100%;
   color: var(--sdds-textfield-color);
-  background-color: var(--sdds-textfield-bg);
+  background-color: var(--sdds-textfield-background);
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-16);
@@ -152,14 +174,14 @@
 }
 .sdds-textfield-input-sm:disabled {
   cursor: not-allowed;
-  background-color: var(--sdds-textfield-disabled-bg);
-  color: var(--sdds-textfield-disabled-color);
+  background-color: var(--sdds-textfield-background-disabled);
+  color: var(--sdds-textfield-color-disabled);
 }
 .sdds-textfield-input-sm:disabled::placeholder {
-  color: var(--sdds-textfield-disabled-placeholder);
+  color: var(--sdds-textfield-placeholder-disabled);
 }
 .sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
-  color: var(--sdds-textfield-disabled-label);
+  color: var(--sdds-textfield-label-disabled);
 }
 
 .sdds-textfield-container {
@@ -168,7 +190,7 @@
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--sdds-textfield-bg);
+  background-color: var(--sdds-textfield-background);
   border-bottom: 1px solid var(--sdds-textfield-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
@@ -339,6 +361,7 @@
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: flex;
+  gap: 8px;
   justify-content: space-between;
   flex-basis: 100%;
   padding-top: var(--sdds-spacing-element-4);
@@ -348,45 +371,35 @@
   margin-left: auto;
 }
 
-.sdds-form-textfield-disabled {
-  /* slot[name="sdds-prefix"]::slotted(*),
-  slot[name="sdds-suffix"]::slotted(*) {
-    color: var(--sdds-textfield-disabled-ps-color);
-  }
-  slot[name="sdds-label"]::slotted(*) {
-    color: var(--sdds-textfield-disabled-label);
-  } */
-}
 .sdds-form-textfield-disabled .sdds-textfield-container {
   border-bottom-color: transparent;
 }
 .sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix > *,
 .sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix > * {
-  color: var(--sdds-textfield-disabled-ps-color);
+  color: var(--sdds-textfield-ps-color-disabled);
 }
 .sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
-  color: var(--sdds-textfield-disabled-label);
+  color: var(--sdds-textfield-label-disabled);
 }
 
 .sdds-textfield-icon__readonly {
   display: none;
   position: absolute;
   right: 18px;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 18px;
+  color: var(--sdds-textfield-icon-read-only-label-color);
 }
 .sdds-textfield-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
-  bottom: -24px;
+  top: 48px;
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   padding: 8px;
-  color: var(--sdds-white);
-  background-color: var(--sdds-grey-800);
   white-space: nowrap;
   border-radius: 4px 0 4px 4px;
+  background-color: var(--sdds-textfield-icon-read-only-label-background);
 }
 
 .sdds-form-textfield-readonly {
@@ -402,9 +415,6 @@
   padding-right: 54px;
   background-color: transparent;
 }
-.sdds-form-textfield-readonly .sdds-textfield-container {
-  background-color: transparent;
-}
 
 .sdds-form-textfield-success .sdds-textfield-container {
   border-bottom-color: var(--sdds-textfield-border-bottom-success);
@@ -426,11 +436,9 @@
 
 .sdds-textfield-helper-error-state {
   display: flex;
+  gap: 8px;
   flex-wrap: nowrap;
 }
-.sdds-textfield-helper-error-state svg {
-  margin-right: 8px;
-}
 
 .sdds-textfield-textcounter {
   font: var(--sdds-detail-05);