@scania/tegel 0.0.71-beta → 1.0.0

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

@@ -1,29 +1,43 @@
-import { h, Host } from '@stencil/core';
-export class SddsButton {
+import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot label - Slot for the text injection. Serves as alternative to text prop.
+ * @slot icon - Slot used to display an Icon in the Button.
+ */
+export class TdsButton {
   constructor() {
-    this.text = '';
-    this.type = 'primary';
+    this.text = undefined;
+    this.type = 'button';
+    this.variant = 'primary';
     this.size = 'lg';
     this.disabled = false;
     this.fullbleed = false;
     this.modeVariant = null;
     this.onlyIcon = false;
   }
-  componentWillLoad() {
-    if (this.text === '') {
+  render() {
+    const hasLabelSlot = hasSlot('label', this.host);
+    const hasIconSlot = hasSlot('icon', this.host);
+    if (!this.text && !hasLabelSlot) {
       this.onlyIcon = true;
-      this.host.setAttribute('only-icon', '');
     }
+    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
+        'primary': this.variant === 'primary',
+        'secondary': this.variant === 'secondary',
+        'ghost': this.variant === 'ghost',
+        'danger': this.variant === 'danger',
+        'lg': this.size === 'lg',
+        'md': this.size === 'md',
+        'sm': this.size === 'sm',
+        'xs': this.size === 'xs',
+        'disabled': this.disabled,
+        'fullbleed': this.fullbleed,
+        'icon': hasIconSlot,
+        'only-icon': this.onlyIcon,
+      } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
   }
-  render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { class: `sdds-btn sdds-btn-${this.type} 
-        ${`sdds-btn-${this.size}`}
-        ${this.disabled ? 'disabled' : ''}
-        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
-  }
-  static get is() { return "sdds-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get is() { return "tds-button"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["button.scss"]
@@ -48,13 +62,30 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text inside a button"
+          "text": "Text displayed inside the Button"
         },
         "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
+        "reflect": false
       },
       "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'submit' | 'reset'",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button's type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -66,9 +97,9 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of button"
+          "text": "Variation of Button's design"
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'primary'"
       },
@@ -84,7 +115,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Size of a Button"
         },
         "attribute": "size",
         "reflect": false,
@@ -102,7 +133,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Control for disabled state of component"
+          "text": "Control for disabled state of a component"
         },
         "attribute": "disabled",
         "reflect": false,
@@ -120,7 +151,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When enabled, makes button take 100% width"
+          "text": "When enabled, the Button takes 100% width"
         },
         "attribute": "fullbleed",
         "reflect": false,
@@ -138,7 +169,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the mode variant of the the button."
+          "text": "Set the mode variant of the Button."
         },
         "attribute": "mode-variant",
         "reflect": false,

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

@@ -0,0 +1,185 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import { iconsNames } from "../icon/iconsArray";
+import readme from "./readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Button`,
+  parameters: {
+    notes: readme,
+    layout: 'padded',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&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' },
+      },
+    },
+    variant: {
+      name: 'Variant',
+      description: 'Four different Button variants to help the user to distinguish the level of importance of the task they represent.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Native types of button',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Submit', 'Reset'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Button.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    text: {
+      name: 'Text',
+      description: 'Sets the text to be displayed on the Button.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      description: 'Sets a fluid width on the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Sets icon to be displayed on the Button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    type: 'Button',
+    variant: 'Primary',
+    size: 'Large',
+    text: 'Button',
+    fullbleed: false,
+    onlyIcon: false,
+    icon: 'none',
+    disabled: false,
+  },
+};
+const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
+  const variantLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const modeVariantLookup = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  };
+  const typeLookup = {
+    Button: 'button',
+    Submit: 'submit',
+    Reset: 'reset',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+    <tds-button
+      type='${typeLookup[type]}'
+      variant="${variantLookUp[variant]}"
+      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
+      ${!onlyIcon ? `text="${text}"` : ''}
+      ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
+    : ''}
+    >
+        ${onlyIcon || (icon && icon !== 'none')
+    ? `
+            <tds-icon slot="icon" class='tds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
+            `
+    : ''}        
+    </tds-button>
+  </div>
+  <script>
+        document.querySelector('tds-button').addEventListener('click', (event) => {
+          console.log(event)
+        })
+  </script>
+  `);
+};
+/** Button as a web component */
+export const Default = WebComponentTemplate.bind({});

package/dist/collection/components/card/card.css

@@ -0,0 +1,91 @@
+.card {
+  box-sizing: border-box;
+  box-shadow: var(--tds-card-box);
+  background-color: var(--tds-card-background);
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.card * {
+  box-sizing: border-box;
+}
+.card.clickable:hover {
+  box-shadow: var(--tds-card-box-hover);
+  cursor: pointer;
+}
+.card .card-header {
+  font: var(--tds-headline-06);
+  letter-spacing: var(--tds-headline-06-ls);
+  padding: 16px;
+  display: flex;
+  align-items: center;
+}
+.card .card-header slot[name=thumbnail]::slotted(*) {
+  width: 36px;
+  height: 36px;
+  border-radius: 100%;
+  margin-right: 16px;
+}
+.card .card-header .card-top-header {
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+}
+.card .card-header .card-top-header.no-header-img {
+  padding-left: 0;
+}
+.card .card-header.below {
+  padding-top: 16px;
+}
+.card .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.card .header-subheader .header,
+.card .header-subheader slot[name=header] {
+  color: var(--tds-card-headline);
+}
+.card .header-subheader .subheader,
+.card .header-subheader slot[name=subheader] {
+  color: var(--tds-card-sub-headline);
+}
+.card .card-body-img {
+  width: 100%;
+}
+.card .tds-divider {
+  margin: 16px 16px 0;
+  background-color: var(--tds-card-divider);
+  height: 1px;
+}
+.card .card-body {
+  display: block;
+  word-wrap: break-word;
+}
+.card slot[name=body]::slotted(*) {
+  font: var(--tds-detail-03);
+  letter-spacing: var(--tds-detail-03-ls);
+  color: var(--tds-card-body-color);
+  padding: 0 16px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  max-width: 336px;
+}
+.card slot[name=actions]::slotted(*) {
+  display: flex;
+  padding: 16px;
+  color: var(--tds-card-icon-color);
+}
+
+button {
+  border: none;
+  text-align: left;
+  padding: 0;
+}
+button:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+button:active {
+  box-shadow: var(--tds-card-box-pressed);
+}

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

@@ -0,0 +1,240 @@
+import { h, Host } from "@stencil/core";
+import { generateUniqueId, hasSlot } from "../../utils/utils";
+/**
+ * @slot header - Slot for the Card header.
+ * @slot subheader - Slot for the Card subheader.
+ * @slot thumbnail - Slot for the Card thumbnail.
+ * @slot body - Slot for the body section of the Card.
+ * @slot body-image - Slot for the body section of the Card, used for image.
+ * @slot actions - Slot for the bottom section of the Card, used for buttons .
+ */
+export class TdsCard {
+  constructor() {
+    this.handleClick = () => {
+      this.tdsClick.emit({
+        cardId: this.cardId,
+      });
+    };
+    this.getCardHeader = () => {
+      const usesHeaderSlot = hasSlot('header', this.host);
+      const usesSubheaderSlot = hasSlot('subheader', this.host);
+      const usesThumbnailSlot = hasSlot('thumbnail', this.host);
+      return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+    };
+    this.getCardContent = () => {
+      const usesBodySlot = hasSlot('body', this.host);
+      const usesBodyImageSlot = hasSlot('body-image', this.host);
+      const usesActionsSlot = hasSlot('actions', this.host);
+      return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+    };
+    this.modeVariant = null;
+    this.imagePlacement = 'below-header';
+    this.header = undefined;
+    this.subheader = undefined;
+    this.bodyImg = undefined;
+    this.bodyImgAlt = undefined;
+    this.bodyDivider = false;
+    this.clickable = false;
+    this.cardId = generateUniqueId();
+  }
+  render() {
+    return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        if (this.clickable) {
+          this.handleClick();
+        }
+      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
+  }
+  static get is() { return "tds-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the Card based on the theme used."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imagePlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'above-header' | 'below-header'",
+          "resolved": "\"above-header\" | \"below-header\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of the header"
+        },
+        "attribute": "image-placement",
+        "reflect": false,
+        "defaultValue": "'below-header'"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text in the header"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text in the header"
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "bodyImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Body image src"
+        },
+        "attribute": "body-img",
+        "reflect": false
+      },
+      "bodyImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alt text for the body image"
+        },
+        "attribute": "body-img-alt",
+        "reflect": false
+      },
+      "bodyDivider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Divider for the body"
+        },
+        "attribute": "body-divider",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the Card clickable."
+        },
+        "attribute": "clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "cardId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the Card, must be unique.\r\n\r\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\r\nas the default ID is random and will be different every time."
+        },
+        "attribute": "card-id",
+        "reflect": false,
+        "defaultValue": "generateUniqueId()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsClick",
+        "name": "tdsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Card identifier when the Card is clicked, if clickable=true"
+        },
+        "complexType": {
+          "original": "{\r\n    cardId: string;\r\n  }",
+          "resolved": "{ cardId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}