@scania/tegel 0.0.9 → 0.0.10

package/dist/collection/components/checkbox/checkbox.js

@@ -1,4 +1,8 @@
 import { h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot label - Slot for the label text.
+ */
 export class TdsCheckbox {
   constructor() {
     this.handleChange = () => {
@@ -10,7 +14,7 @@ export class TdsCheckbox {
       });
     };
     this.name = undefined;
-    this.checkboxId = crypto.randomUUID();
+    this.checkboxId = generateUniqueId();
     this.disabled = false;
     this.required = false;
     this.checked = false;
@@ -84,7 +88,7 @@ export class TdsCheckbox {
         },
         "attribute": "checkbox-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "disabled": {
         "type": "boolean",

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

@@ -0,0 +1,80 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Checkbox`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the Checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
+const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
+    <tds-checkbox
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        value="checkbox-value"
+        >
+        <div slot="label">${label}</div>
+    </tds-checkbox>
+    
+    <!-- Script tag with event listener for demo purposes. -->
+    <script>
+        checkboxElement = document.querySelector('tds-checkbox')
+        checkboxElement.addEventListener('tdsChange', (event) => {
+            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
+        })
+        checkboxElement.addEventListener('tdsFocus',(event) => {
+          console.log(event)
+        })
+        checkboxElement.addEventListener('tdsBlur',(event) => {
+          console.log(event)
+        })
+    </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/chip/chip.css

@@ -4,12 +4,8 @@
   align-items: center;
 }
 
-:host([size=sm]) ::slotted(*) {
-  gap: 6px;
-}
-
-:host([size=lg]) ::slotted(*) {
-  gap: 8px;
+:host ::slotted([slot=label]) {
+  padding-top: 2px;
 }
 
 /* Component styling */
@@ -32,14 +28,32 @@
 }
 .component .tds-chip-component.lg label {
   height: 32px;
-  padding: 1px 16px 0;
+  padding: 0 16px;
   gap: 8px;
 }
 .component .tds-chip-component.sm label {
   height: 24px;
-  padding: 1px 12px 0;
+  padding: 0 12px;
   gap: 6px;
 }
+.component .tds-chip-component.sm.prefix label {
+  padding: 0 12px 0 6px;
+}
+.component .tds-chip-component.sm.suffix label {
+  padding: 0 6px 0 12px;
+}
+.component .tds-chip-component.lg.prefix label {
+  padding: 0 16px 0 8px;
+}
+.component .tds-chip-component.lg.suffix label {
+  padding: 0 8px 0 16px;
+}
+.component .tds-chip-component.lg.prefix.suffix label {
+  padding: 0 8px;
+}
+.component .tds-chip-component.sm.prefix.suffix label {
+  padding: 0 6px;
+}
 .component .tds-chip-component input {
   opacity: 0;
   position: absolute;
@@ -48,6 +62,7 @@
 .component .tds-chip-component input:focus-visible + label {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
+  background-color: var(--tds-chips-background-focus);
 }
 .component .tds-chip-component input:checked + label {
   background-color: var(--tds-chips-background-active);

package/dist/collection/components/chip/chip.js

@@ -1,4 +1,10 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId, hasSlot } from '../../utils/utils';
+/**
+ * @slot prefix - Slot for the prefix icon.
+ * @slot label - Slot for the label text.
+ * @slot suffix- Slot for the suffix icon.
+ */
 export class TdsChip {
   constructor() {
     this.handleChange = () => {
@@ -14,7 +20,7 @@ export class TdsChip {
     };
     this.type = 'button';
     this.size = 'lg';
-    this.chipId = crypto.randomUUID();
+    this.chipId = generateUniqueId();
     this.checked = false;
     this.name = undefined;
     this.value = undefined;
@@ -34,7 +40,16 @@ export class TdsChip {
   }
   render() {
     const inputAttributes = this.renderInputAttributes();
-    return (h(Host, null, h("div", { class: "component" }, h("div", { class: `tds-chip-component ${this.size}` }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, h("slot", { name: "label" }))))));
+    const hasPrefixSlot = hasSlot('prefix', this.host);
+    const hasLabelSlot = hasSlot('label', this.host);
+    const hasSuffixSlot = hasSlot('suffix', this.host);
+    return (h(Host, null, h("div", { class: "component" }, h("div", { class: {
+        'tds-chip-component': true,
+        'sm': this.size === 'sm',
+        'lg': this.size === 'lg',
+        'prefix': hasPrefixSlot,
+        'suffix': hasSuffixSlot,
+      } }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, hasPrefixSlot && h("slot", { name: "prefix" }), hasLabelSlot && h("slot", { name: "label" }), hasSuffixSlot && h("slot", { name: "suffix" }))))));
   }
   static get is() { return "tds-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -102,7 +117,7 @@ export class TdsChip {
         },
         "attribute": "chip-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "checked": {
         "type": "boolean",
@@ -191,4 +206,5 @@ export class TdsChip {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1,230 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Chip`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    inputType: {
+      name: 'Type',
+      description: 'Sets the Chip type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Radio', 'Checkbox'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the Chip size.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Adds an icon to the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconPosition: {
+      name: 'Icon Position',
+      description: 'Sets the icon position.',
+      if: { arg: 'icon', eq: true },
+      control: {
+        type: 'radio',
+      },
+      options: ['Prefix', 'Suffix'],
+      table: {
+        defaultValue: { summary: 'Prefix' },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        // TODO: Remove line below after we make design for disabled state, it hides control
+        disable: true,
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    inputType: 'Button',
+    size: 'Large',
+    label: 'Label',
+    icon: false,
+    iconPosition: 'Prefix',
+    disabled: false,
+  },
+};
+const Template = ({ inputType, size, label, icon, iconPosition }) => {
+  const sizeLookUp = {
+    Large: 'lg',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+  ${inputType === 'Button'
+    ? `<tds-chip type="button" size="${sizeLookUp[size]}">        
+            ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
+      : ''}           
+            <span slot="label">                
+                ${label}                
+            </span>         
+            ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''}          
+        </tds-chip>
+
+        <!-- Script tag for demo purposes -->
+        <script>
+          document.addEventListener('tdsClick', (event)=>{
+          console.log(event)
+          })
+        </script>`
+    : ''}
+  ${inputType === 'Checkbox'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">        
+          ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="heart" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 1
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''}        
+      </tds-chip>
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
+        ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="email" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 2
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''} 
+      </tds-chip>
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
+        ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="smartphone" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 3
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''} 
+      </tds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('tdsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+  ${inputType === 'Radio'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
+        ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="sorting" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 1
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''} 
+      </tds-chip>
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
+        ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="cart" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 2
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''} 
+      </tds-chip>
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
+        ${icon && iconPosition === 'Prefix'
+      ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
+      : ''}
+          <span slot="label">
+            ${label} 3
+          </span>
+          ${icon && iconPosition === 'Suffix'
+      ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
+      : ''} 
+      </tds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('tdsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+
+
+  `);
+};
+export const Default = Template.bind({});

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

@@ -0,0 +1,195 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Datetime`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+    type: {
+      name: 'Type',
+      description: 'Sets the field to display date, time or both.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+      table: {
+        defaultValue: { summary: 'datetime-local' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switches between different sizes.',
+      control: {
+        type: 'radio',
+        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
+      },
+      options: ['Large', 'Medium', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    defaultValue: {
+      name: 'Default value',
+      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Custom'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'None',
+    type: 'Datetime',
+    size: 'Large',
+    defaultValue: 'None',
+    noMinWidth: false,
+    label: 'Label text',
+    helper: 'Helper text',
+    disabled: false,
+  },
+};
+const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
+  const typeLookup = {
+    Datetime: 'datetime-local',
+    Date: 'date',
+    Time: 'time',
+  };
+  const sizeLookup = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  const stateLookup = {
+    None: 'none',
+    Success: 'success',
+    Error: 'error',
+  };
+  const getDefaultValue = (value, componentType) => {
+    if (value === 'Custom') {
+      switch (componentType) {
+        case 'Datetime':
+          return '1891-01-01T12:30';
+        case 'Date':
+          return '1891-01-01';
+        case 'Time':
+          return '12:30';
+        default:
+          return 'Invalid type';
+      }
+    }
+    else
+      return false;
+  };
+  return formatHtmlPreview(`
+    <style>
+        /* Note: Demo classes used here are just for demo purposes in Storybook */
+        .demo-wrapper {
+            width: 180px;
+        }
+    </style>
+
+  <div class="demo-wrapper">
+
+    <tds-datetime
+      id="datetime"
+      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      type="${typeLookup[type]}"
+      size="${sizeLookup[size]}"
+      state="${stateLookup[state]}"
+      ${disabled ? 'disabled' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${label ? `label="${label}" ` : ''}
+      ${helper ? `helper="${helper}" ` : ''}
+      >
+    </tds-datetime>
+  </div>
+
+    <script>
+    /* DEMO Code: Used only for Storybook demo purposes */
+      datetimeElement = document.querySelector('tds-datetime');
+      datetimeElement.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+      datetimeElement.addEventListener('tdsFocus', (event) => {
+        console.log(event);
+      });
+      datetimeElement.addEventListener('tdsBlur', (event) => {
+        console.log(event);
+      });
+    </script>
+`);
+};
+export const Default = datetimeTemplate.bind({});