@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -0,0 +1,114 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Popover Menu',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    menuPosition: {
+      name: 'Menu position',
+      description: 'Position of the Popover menu',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom',
+        'Bottom start',
+        'Bottom end',
+        'Top',
+        'Top start',
+        'Top end',
+        'Left',
+        'Left-start',
+        'Left end',
+        'Right',
+        'Right start',
+        'Right end',
+      ],
+    },
+  },
+  args: {
+    menuPosition: 'Bottom start',
+  },
+};
+const Template = ({ menuPosition }) => {
+  const menuPosLookup = {
+    'Bottom': 'bottom',
+    'Bottom start': 'bottom-start',
+    'Bottom end': 'bottom-end',
+    'Top': 'top',
+    'Top start': 'top-start',
+    'Top end': 'top-end',
+    'Left': 'left',
+    'Left star': 'left-start',
+    'Left end': 'left-end',
+    'Right': 'right',
+    'Right start': 'right-start',
+    'Right end': 'right-end',
+  };
+  return formatHtmlPreview(`
+    <style>
+      /* demo-wrapper styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
+    </style>
+
+    <sdds-popover-menu
+      id="my-popover-menu"
+      placement="${menuPosLookup[menuPosition]}">
+      <ul class="sdds-popover-menu-wrapper">
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 1</a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            Menu item 2
+          </a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 3</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 4</a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 5</a>
+        </li>
+      </ul>
+    </sdds-popover-menu>
+
+    <!-- demo-wrapper code below is for demonstration purposes only -->
+    <div class="demo-wrapper">
+      <span class="sdds-u-mr2">Click icon for popover menu</span>
+      
+      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
+        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
+      </sdds-button>
+    </div>
+
+    <script>
+      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
+      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
+    </script>
+    `);
+};
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,123 @@
+: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);
+}
+
+.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);
+}
+
+.sdds-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);
+}
+.sdds-radio-button * {
+  box-sizing: border-box;
+}
+.sdds-radio-button .sdds-form-input[type=radio] {
+  appearance: none;
+  outline: none;
+  margin: 0;
+  border: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+}
+.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);
+  cursor: pointer;
+}
+.sdds-radio-button .sdds-form-input[type=radio]::before, .sdds-radio-button .sdds-form-input[type=radio]::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.sdds-radio-button .sdds-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);
+  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);
+  opacity: 0.12;
+}
+.sdds-radio-button .sdds-form-input[type=radio]:focus::before {
+  background-color: var(--sdds-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 {
+  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);
+}
+.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);
+  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 {
+  display: none;
+  opacity: 1;
+}
+.sdds-radio-button .sdds-form-input[type=radio]:checked::after {
+  border: 4px solid var(--sdds-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 {
+  display: block;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+  border: 1px solid var(--sdds-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);
+  left: 5px;
+  top: 5px;
+}
+@keyframes rb-focus {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.24;
+  }
+}

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

@@ -0,0 +1,91 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/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',
+      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">
+  <sdds-radio-button 
+    name="rb-example"
+    value="option1"
+    radio-id="option-1"
+    aria-labelled-by="option-1"
+    aria-describedby="option-1"
+    required=false
+    ${disabled ? 'disabled' : ''}
+    checked="true" 
+  >
+    ${label} 1
+  </sdds-radio-button>
+
+  <sdds-radio-button
+    name="rb-example"
+    value="option2"
+    radio-id="option-2"
+    aria-labelled-by="option-2"
+    aria-described-by="option-2"
+    ${label ? `label="${label} 2"` : ''}
+    required=false
+    ${disabled ? 'disabled' : ''} 
+  >
+    ${label} 2
+  </sdds-radio-button>
+    
+  </fieldset>
+
+  <!-- Script tag with eventlistener for demo purposes. -->
+  <script>
+  document.addEventListener('sddsChange', (event) => {
+    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')
+  })
+  </script>
+  `);
+export const WebComponent = Template.bind({});

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

@@ -0,0 +1,160 @@
+import { h } from '@stencil/core';
+export class RadioButton {
+  constructor() {
+    this.name = undefined;
+    this.value = undefined;
+    this.radioId = crypto.randomUUID();
+    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, "aria-describedby": this.host.getAttribute('aria-describedby'), required: this.required, disabled: this.disabled, onChange: () => {
+        this.sddsChange.emit({
+          radioId: this.radioId,
+          value: this.value,
+        });
+      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
+  }
+  static get is() { return "sdds-radio-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio-button-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio-button-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of radio button, used for reference."
+        },
+        "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."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "radioId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unique radio button identifier."
+        },
+        "attribute": "radio-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is checked or not."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is required or not."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is disabled or not."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": true,
+        "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."
+        },
+        "complexType": {
+          "original": "{\n    radioId: string;\n    value: string;\n  }",
+          "resolved": "{ radioId: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,68 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    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',
+      description: 'Sets the label for the radio button.',
+      controls: {
+        type: 'string',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
+const Template = (args) => formatHtmlPreview(`
+  <style>
+    .demo-fieldset-reset { 
+      border: 0;
+      margin: 0;
+      min-width: 0;
+      padding: 0; 
+    }
+  </style>
+  <fieldset class="demo-fieldset-reset" ${args.disabled ? 'disabled' : ''}>
+    <div class="sdds-radio-button-group">
+      <div class="sdds-radio-item">
+        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked>
+        <label class="sdds-form-label" for="rb-option-1">
+          ${args.label} 1
+        </label>
+      </div>
+    </div>
+    <div class="sdds-radio-button-group">
+      <div class="sdds-radio-item">
+        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-2">
+        <label class="sdds-form-label" for="rb-option-2">
+          ${args.label} 2
+        </label>
+      </div>
+    </div>
+  </fieldset>
+  `);
+export const Native = Template.bind({});