@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/radio-button/radio-button.css

@@ -1,40 +1,40 @@
 :root,
-.sdds-mode-light {
-  --sdds-radio-button-color: var(--sdds-grey-958);
-  --sdds-radio-button-interaction-01: var(--sdds-blue-800);
-  --sdds-radio-button-interaction-02: var(--sdds-white);
-  --sdds-radio-button-background-hover: var(--sdds-blue-800);
-  --sdds-radio-button-background-focus: var(--sdds-blue-800);
-  --sdds-radio-button-disabled: var(--sdds-grey-600);
-  --sdds-radio-button-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-before: var(--sdds-grey-700);
+.tds-mode-light {
+  --tds-radio-button-color: var(--tds-grey-958);
+  --tds-radio-button-interaction-01: var(--tds-blue-800);
+  --tds-radio-button-interaction-02: var(--tds-white);
+  --tds-radio-button-background-hover: var(--tds-blue-800);
+  --tds-radio-button-background-focus: var(--tds-blue-800);
+  --tds-radio-button-disabled: var(--tds-grey-600);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-500);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-before: var(--tds-grey-700);
 }
 
-.sdds-mode-dark {
-  --sdds-radio-button-color: var(--sdds-white);
-  --sdds-radio-button-interaction-01: var(--sdds-white);
-  --sdds-radio-button-interaction-02: var(--sdds-grey-958);
-  --sdds-radio-button-background-hover: var(--sdds-white);
-  --sdds-radio-button-background-focus: var(--sdds-white);
-  --sdds-radio-button-disabled: var(--sdds-grey-600);
-  --sdds-radio-button-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-after: var(--sdds-grey-700);
+.tds-mode-dark {
+  --tds-radio-button-color: var(--tds-white);
+  --tds-radio-button-interaction-01: var(--tds-white);
+  --tds-radio-button-interaction-02: var(--tds-grey-958);
+  --tds-radio-button-background-hover: var(--tds-white);
+  --tds-radio-button-background-focus: var(--tds-white);
+  --tds-radio-button-disabled: var(--tds-grey-600);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
 }
 
-.sdds-radio-button {
+.tds-radio-button {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   margin-left: -4px;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-radio-button-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-radio-button-color);
 }
-.sdds-radio-button * {
+.tds-radio-button * {
   box-sizing: border-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio] {
+.tds-radio-button .tds-form-input[type=radio] {
   appearance: none;
   outline: none;
   margin: 0;
@@ -47,69 +47,69 @@
   flex-shrink: 0;
   align-self: flex-start;
 }
-.sdds-radio-button .sdds-form-input[type=radio] + label {
-  padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);
+.tds-radio-button .tds-form-input[type=radio] + label {
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
   cursor: pointer;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::before, .sdds-radio-button .sdds-form-input[type=radio]::after {
+.tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   box-sizing: border-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::before {
+.tds-radio-button .tds-form-input[type=radio]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::after {
-  border: 1px solid var(--sdds-radio-button-interaction-01);
-  background-color: var(--sdds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]::after {
+  border: 1px solid var(--tds-radio-button-interaction-01);
+  background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:hover::before {
-  background-color: var(--sdds-radio-button-background-hover);
+.tds-radio-button .tds-form-input[type=radio]:hover::before {
+  background-color: var(--tds-radio-button-background-hover);
   opacity: 0.12;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:focus::before {
-  background-color: var(--sdds-radio-button-background-focus);
+.tds-radio-button .tds-form-input[type=radio]:focus::before {
+  background-color: var(--tds-radio-button-background-focus);
   opacity: 0.24;
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled, .sdds-radio-button .sdds-form-input[type=radio].disabled {
+.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled::after, .sdds-radio-button .sdds-form-input[type=radio].disabled::after {
-  border-color: var(--sdds-radio-button-border-color-disabled-after);
-  background-color: var(--sdds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
+  border-color: var(--tds-radio-button-border-color-disabled-after);
+  background-color: var(--tds-radio-button-interaction-02);
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled + label, .sdds-radio-button .sdds-form-input[type=radio].disabled + label {
-  color: var(--sdds-radio-button-disabled);
+.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
+  color: var(--tds-radio-button-disabled);
   cursor: not-allowed;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio].disabled:hover::before {
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
   display: none;
   opacity: 1;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--sdds-radio-button-interaction-01);
+.tds-radio-button .tds-form-input[type=radio]:checked::after {
+  border: 4px solid var(--tds-radio-button-interaction-01);
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::before {
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
   display: block;
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
-  border: 1px solid var(--sdds-radio-button-color-disabled-before);
+  border: 1px solid var(--tds-radio-button-color-disabled-before);
   box-sizing: content-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::after, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--sdds-radio-button-interaction-02);
-  background-color: var(--sdds-radio-button-color-disabled-after);
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
+  border: 4px solid var(--tds-radio-button-interaction-02);
+  background-color: var(--tds-radio-button-color-disabled-after);
   left: 5px;
   top: 5px;
 }

package/dist/collection/components/radio-button/radio-button.js

@@ -1,27 +1,27 @@
 import { h } from '@stencil/core';
-export class RadioButton {
+import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot label - Slot for the label text.
+ */
+export class TdsRadioButton {
   constructor() {
     this.handleChange = () => {
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         radioId: this.radioId,
         value: this.value,
       });
     };
     this.name = undefined;
     this.value = undefined;
-    this.radioId = crypto.randomUUID();
+    this.radioId = generateUniqueId();
     this.checked = false;
     this.required = false;
     this.disabled = false;
   }
   render() {
-    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
-      // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy}
-      // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+    return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
-  static get is() { return "sdds-radio-button"; }
+  static get is() { return "tds-radio-button"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -85,7 +85,7 @@ export class RadioButton {
         },
         "attribute": "radio-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "checked": {
         "type": "boolean",
@@ -145,14 +145,14 @@ export class RadioButton {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique Radio Button identifier and status when it is checked. 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."
+          "text": "Sends unique Radio Button identifier and status when it is checked.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
           "original": "{\n    radioId: string;\n    value: string;\n  }",

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -0,0 +1,91 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Radio Button`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label for the Radio Button.',
+      controls: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Radio Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
+const Template = ({ label, disabled }) => formatHtmlPreview(`
+  <style>
+  .demo-fieldset-reset { 
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0; 
+  }
+</style>
+
+  <fieldset class="demo-fieldset-reset">
+  <tds-radio-button 
+    name="rb-example"
+    value="option1"
+    radio-id="option-1"
+    required=false
+    ${disabled ? 'disabled' : ''}
+    checked="true" 
+  >
+    <div slot="label">
+      ${label} 1
+    </div>
+  </tds-radio-button>
+
+  <tds-radio-button
+    name="rb-example"
+    value="option2"
+    radio-id="option-2"
+    required=false
+    ${disabled ? 'disabled' : ''} 
+  >
+    <div slot="label">
+      ${label} 2
+    </div>
+  </tds-radio-button>
+    
+  </fieldset>
+
+  <!-- Script tag with eventlistener for demo purposes. -->
+  <script>
+  document.addEventListener('tdsChange', (event) => {
+    console.log(event)
+  })
+  </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css

@@ -0,0 +1,26 @@
+:host {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+:host button {
+  height: 64px;
+  width: 100%;
+  text-align: left;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--tds-sidebar-side-menu-background-cover);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host button:hover {
+  cursor: pointer;
+  background-color: var(--tds-sidebar-item-state-hover);
+}
+:host button:focus-visible {
+  cursor: pointer;
+  border: 1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../utils/utils';
+export class TdsSideMenuCloseButton {
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+  }
+  static get is() { return "tds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.css

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  position: sticky;
+  bottom: 0;
+  display: none;
+  height: 68px;
+  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .icon {
+  transform: rotateZ(90deg);
+  transition: all 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+}
+:host .state-collapsed .icon {
+  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  margin-left: 0;
+  position: absolute;
+  left: 50%;
+}
+
+@media (min-width: 992px) {
+  :host {
+    display: block;
+  }
+}

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -0,0 +1,113 @@
+import { h, Host } from '@stencil/core';
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injecting text presented in collapse button
+ * */
+export class TdsSideMenuCollapseButton {
+  constructor() {
+    this.handleClick = () => {
+      /** Emit a public event that the user can prevent. */
+      const tdsCollapseEvent = this.tdsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!tdsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalTdsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
+    this.collapsed = false;
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("tds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
+  }
+  static get is() { return "tds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsCollapse",
+        "name": "tdsCollapse",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is broadcast when the collapse button is clicked.\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }, {
+        "method": "internalTdsCollapse",
+        "name": "internalTdsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Event that is broadcast when the internal collapse state changes. Contains the future of the collapse state."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host .dropdown-icon {
+  margin-left: auto;
+  transition: all 0.2s ease-in-out;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .menu {
+  display: block;
+}
+:host .state-collapsed .menu {
+  --side-menu-width: 68px;
+  position: absolute;
+  left: var(--side-menu-width);
+  box-shadow: var(--tds-nav-dropdown-menu-box);
+  background-color: var(--tds-sidebar-side-menu-subnav-background);
+}
+:host .state-collapsed .menu .heading-collapsed {
+  all: unset;
+  box-sizing: border-box;
+  padding: 16px 24px 15px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+}
+:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
+  width: 100%;
+}
+:host .menu {
+  display: none;
+  flex-direction: column;
+}