@scania/tegel 0.0.5 → 0.0.7

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

@@ -0,0 +1,58 @@
+/* Styling for slotted content */
+::slotted(*) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:host([size=sm]) ::slotted(*) {
+  gap: 6px;
+}
+
+:host([size=lg]) ::slotted(*) {
+  gap: 8px;
+}
+
+/* Component styling */
+.component .sdds-chip-component {
+  display: inline-flex;
+}
+.component .sdds-chip-component label {
+  background-color: var(--sdds-chips-background);
+  color: var(--sdds-chips-color);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.component .sdds-chip-component label:hover {
+  background-color: var(--sdds-chips-background-hover);
+}
+.component .sdds-chip-component.lg label {
+  height: 32px;
+  padding: 1px 16px 0;
+  gap: 8px;
+}
+.component .sdds-chip-component.sm label {
+  height: 24px;
+  padding: 1px 12px 0;
+  gap: 6px;
+}
+.component .sdds-chip-component input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.component .sdds-chip-component input:focus-visible + label {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.component .sdds-chip-component input:checked + label {
+  background-color: var(--sdds-chips-background-active);
+  color: var(--sdds-chips-color-active);
+}
+.component .sdds-chip-component input:checked + label:hover {
+  background-color: var(--sdds-chips-background-active-hover);
+}

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

@@ -0,0 +1,194 @@
+import { Host, h } from '@stencil/core';
+export class SddsChip {
+  constructor() {
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        chipId: this.chipId,
+        value: this.value,
+      });
+    };
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        chipId: this.chipId,
+      });
+    };
+    this.type = 'button';
+    this.size = 'lg';
+    this.chipId = crypto.randomUUID();
+    this.checked = false;
+    this.name = undefined;
+    this.value = undefined;
+  }
+  renderInputAttributes() {
+    if (this.type !== 'button') {
+      return {
+        value: this.value,
+        checked: this.checked,
+        name: this.name,
+        onChange: () => this.handleChange(),
+      };
+    }
+    return {
+      onClick: () => this.handleClick(),
+    };
+  }
+  render() {
+    const inputAttributes = this.renderInputAttributes();
+    return (h(Host, null, h("div", { class: "component" }, h("div", { class: `sdds-chip-component ${this.size}` }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, h("slot", { name: "label" }))))));
+  }
+  static get is() { return "sdds-chip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'radio' | 'checkbox'",
+          "resolved": "\"button\" | \"checkbox\" | \"radio\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of chip, depends on usage"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the chip component"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "chipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time."
+        },
+        "attribute": "chip-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Setting it to true set component state to checked. Valid only for type checkbox and radio."
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of input. Valid only for type checkbox and radio."
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n    value: string;\n  }",
+          "resolved": "{ chipId: string; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsClick",
+        "name": "sddsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier when chip is clicked. Valid only for type button. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n  }",
+          "resolved": "{ chipId: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,229 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components',
+  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'
+    ? `<sdds-chip type="button" size="${sizeLookUp[size]}">
+            <span slot="label">
+                ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+                ${label}
+                ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+            </span>
+        </sdds-chip>
+
+        <!-- Script tag for demo purposes -->
+        <script>
+          document.addEventListener('sddsClick', (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">
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (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">
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+
+
+  `);
+};
+export const Chip = Template.bind({});

package/dist/collection/components/data-table/native-table.stories.js

@@ -135,4 +135,3 @@ const Template = ({ modeVariant, compactDesign, responsiveDesign, tableTitle, ve
   </table>
     `);
 export const Default = Template.bind({});
-//# sourceMappingURL=native-table.stories.js.map

package/dist/collection/components/data-table/table/table.js

@@ -210,7 +210,7 @@ export class Table {
         "method": "internalSddsTablePropChange",
         "name": "internalSddsTablePropChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -225,7 +225,7 @@ export class Table {
           "references": {
             "InternalSddsTablePropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/sdds/tegel/src/components/data-table/table/table.tsx"
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/data-table/table/table.tsx"
             }
           }
         }
@@ -254,4 +254,3 @@ export class Table {
       }];
   }
 }
-//# sourceMappingURL=table.js.map

package/dist/collection/components/data-table/table-body/table-body.js

@@ -1,5 +1,48 @@
 import { h, Host, } from '@stencil/core';
-import dummyData from './dummy-data.json';
+const jsonData = [
+  {
+    truck: 'L-series',
+    driver: 'Sonya Bruce',
+    country: 'Brazil',
+    mileage: 123987,
+  },
+  {
+    truck: 'P-series',
+    driver: 'Guerra Bowman',
+    country: 'Sweden',
+    mileage: 2000852,
+  },
+  {
+    truck: 'G-series',
+    driver: 'Ferrell Wallace',
+    country: 'Germany',
+    mileage: 564,
+  },
+  {
+    truck: 'R-series',
+    driver: 'Cox Burris',
+    country: 'Spain',
+    mileage: 1789357,
+  },
+  {
+    truck: 'S-series',
+    driver: 'Montgomery Cervantes',
+    country: 'Croatia',
+    mileage: 65,
+  },
+  {
+    truck: 'L-series',
+    driver: 'Sheryl Nielsen',
+    country: 'Greece',
+    mileage: 365784,
+  },
+  {
+    truck: 'G-series',
+    driver: 'Benton Gomez',
+    country: 'France',
+    mileage: 80957,
+  },
+];
 const relevantTableProps = [
   'enableMultiselect',
   'enableExpandableRows',
@@ -37,7 +80,7 @@ export class TableBody {
     this.disableSortingFunction = false;
     this.bodyData = undefined;
     this.enableDummyData = false;
-    this.dummyData = JSON.stringify(dummyData);
+    this.jsonData = JSON.stringify(jsonData);
     this.rowsPerPage = 1;
     this.enableMultiselect = false;
     this.enablePaginationTableBody = false;
@@ -207,7 +250,7 @@ export class TableBody {
       this[tablePropName] = this.tableEl[tablePropName];
     });
     if (this.enableDummyData) {
-      this.bodyData = this.dummyData;
+      this.bodyData = this.jsonData;
     }
     else if (this.bodyData) {
       this.arrayDataWatcher(this.bodyData);
@@ -277,7 +320,7 @@ export class TableBody {
       },
       "bodyData": {
         "type": "any",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -314,7 +357,7 @@ export class TableBody {
   }
   static get states() {
     return {
-      "dummyData": {},
+      "jsonData": {},
       "rowsPerPage": {},
       "enableMultiselect": {},
       "enablePaginationTableBody": {},
@@ -339,7 +382,7 @@ export class TableBody {
         "method": "internalSddsSortingChange",
         "name": "internalSddsSortingChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -357,7 +400,7 @@ export class TableBody {
         "method": "internalSddsCheckboxChange",
         "name": "internalSddsCheckboxChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -375,7 +418,7 @@ export class TableBody {
         "method": "internalSddsMainCheckboxChange",
         "name": "internalSddsMainCheckboxChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -432,4 +475,3 @@ export class TableBody {
       }];
   }
 }
-//# sourceMappingURL=table-body.js.map

package/dist/collection/components/data-table/table-body-cell/table-body-cell.js

@@ -166,4 +166,3 @@ export class TableBodyCell {
       }];
   }
 }
-//# sourceMappingURL=table-body-cell.js.map

package/dist/collection/components/data-table/table-body-row/table-body-row.css

@@ -6,6 +6,8 @@
   --sdds-checkbox-interaction-02: var(--sdds-white);
   --sdds-checkbox-background-hover: var(--sdds-blue-800);
   --sdds-checkbox-background-focus: var(--sdds-blue-800);
+  --sdds-checkbox-background-opacity-hover: 0.12;
+  --sdds-checkbox-background-opacity-focus: 0.24;
   --sdds-checkbox-disabled: var(--sdds-grey-400);
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -17,8 +19,10 @@
   --sdds-checkbox-color: var(--sdds-white);
   --sdds-checkbox-interaction-01: var(--sdds-white);
   --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: white;
-  --sdds-checkbox-background-focus: white;
+  --sdds-checkbox-background-hover: var(--sdds-grey-600);
+  --sdds-checkbox-background-focus: var(--sdds-grey-600);
+  --sdds-checkbox-background-opacity-hover: 0.48;
+  --sdds-checkbox-background-opacity-focus: 0.72;
   --sdds-checkbox-disabled: white;
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -60,13 +64,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -75,14 +79,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
   background-color: var(--sdds-checkbox-background-focus);
-  opacity: 0.24;
+  opacity: var(--sdds-checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {