@scania/tegel 0.0.9 → 0.0.11

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

@@ -0,0 +1,163 @@
+import readme from './readme.md';
+import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
+import CardBodyImage from '../../stories/assets/image/card-img.png';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Card`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&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' },
+      },
+    },
+    header: {
+      name: 'Header text',
+      description: 'Sets the header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'Sets the subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    thumbnail: {
+      name: 'Header thumbnail',
+      description: 'Toggles a thumbnail in the header.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    imagePlacement: {
+      name: 'Body image placement',
+      description: 'Sets the placement of the body image, above or below the header.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'below' },
+      },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Toggles an image in the Card body. Cannot be combined with divider.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyDivider', eq: false },
+    },
+    bodyContent: {
+      name: 'Body text',
+      description: 'Sets the body text for the Card.',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content. Cannot be combined with body image.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyImg', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    cardBottom: {
+      name: 'Content of the bottom of the Card',
+      description: 'Slot to add custom HTML elements to the bottom of the Card.',
+      control: {
+        type: 'text',
+      },
+    },
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the Card is clickable or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    header: 'Header text',
+    subheader: 'Subheader text',
+    thumbnail: true,
+    imagePlacement: 'Below',
+    bodyImg: false,
+    bodyContent: '',
+    bodyDivider: false,
+    cardBottom: `<tds-icon slot="bottom" size="20px" name="arrow_right"></tds-icon>`,
+    clickable: false,
+  },
+};
+const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+        width: 368px;
+    }
+    </style>
+    <div class="demo-wrapper">
+    <tds-card
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    ${header ? `header="${header}"` : ''}
+    image-placement="${imagePlacement.toLowerCase()}-header"
+    ${subheader ? `subheader="${subheader}"` : ''}
+    ${bodyImg ? `body-img="${CardBodyImage}"` : ''}
+    ${clickable ? 'clickable' : ''}
+    ${bodyDivider ? 'body-divider' : ''}
+    >
+    ${thumbnail
+  ? `<img slot="thumbnail" src="${CardPlaceholder}" alt="Thumbnail for the card."/>`
+  : ''}
+  ${bodyContent
+  ? `
+    <div slot="body">
+        ${bodyContent}
+    </div>`
+  : ''}
+    ${cardBottom ? `${cardBottom}` : ''}
+    </tds-card>
+    </div>
+    ${clickable
+  ? `
+    <script>
+        document.addEventListener('tdsClick', (event)=>{
+            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
+        })
+    </script>
+    `
+  : ''}
+  `);
+export const Default = Template.bind({});

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({});