@scania/tegel 0.0.7 → 0.0.9

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

@@ -1,164 +0,0 @@
-import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Card',
-  parameters: {
-    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',
-      },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Toggles an image in the header.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Sets the placement of the header, above or below the body image.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
-      },
-    },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Toggles an image in the card body. Cannot be combined with divider.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'bodyDivider', eq: false },
-    },
-    bodyText: {
-      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',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'bodyImg', eq: 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',
-    headerImg: true,
-    headerPlacement: 'Above',
-    bodyImg: false,
-    bodyText: '',
-    bodyDivider: false,
-    cardBottom: '<sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon>',
-    clickable: false,
-  },
-};
-const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyText, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`
-<style>
-/* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 368px;
-  }
-</style>
-    <div class="demo-wrapper">
-          <div class="sdds-card${clickable ? ' sdds-clickable' : ''} ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-            ${bodyImg === true && headerPlacement === 'Below'
-  ? `<img class="sdds-card-img" src="${CardPlaceholder}" alt="Add description to image"/>`
-  : ''}
-            <div class="${headerImg ? 'sdds-card-header-avatar' : 'sdds-card-header'}">
-            ${headerImg
-  ? `
-              <div class="sdds-card-avatar">
-                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="18" fill="#E2E2E4"/></svg>
-              </div>`
-  : ''}
-                ${headerImg
-  ? `<div class="sdds-card-headlines">
-                  ${header ? `<h6 class="sdds-card-headline">${header}</h6>` : ''}
-                  ${subheader ? `<h6 class="sdds-card-sub-headline" >${subheader}</h6>` : ''}
-                  </div>`
-  : `${header ? `<h6 class="sdds-card-headline">${header}</h6>` : ''}
-                 ${subheader ? `<h6 class="sdds-card-sub-headline" >${subheader}</h6>` : ''}
-                `}
-            </div>
-            ${bodyImg === true && headerPlacement === 'Above'
-  ? `<img class="sdds-card-img" src="${CardPlaceholder}" alt="Add description to image"/>`
-  : ''}
-            ${bodyDivider ? '<div class="sdds-divider-border-top"></div>' : ''}
-            ${bodyText ? `<div class="sdds-card-body">${bodyText}</div>` : ''}
-            ${cardBottom ? `<div class="sdds-card-footer">${cardBottom}</div>` : ''}
-          </div>
-    </div>
-  `);
-export const Native = Template.bind({});

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

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

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

@@ -1,276 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class SddsCard {
-  constructor() {
-    this.handleClick = () => {
-      this.sddsClick.emit({
-        cardId: this.cardId,
-      });
-    };
-    this.getCardContent = () => (h("div", null, this.headerPlacement === 'above' && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', h("div", { class: `
-          card-top-header
-          ${!this.headerImg ? 'no-header-img' : ''}
-          ${!this.header || !this.subheader ? 'single-line-header' : ''}
-          ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), h("div", { class: `card-body` }, this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), h("div", { class: `
-            card-top-header
-            ${!this.headerImg ? 'no-header-img' : ''}
-            ${!this.header || !this.subheader ? 'single-line-header' : ''}
-            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("div", { class: `sdds-divider` }), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
-    this.modeVariant = null;
-    this.headerPlacement = 'above';
-    this.header = undefined;
-    this.subheader = undefined;
-    this.headerImg = undefined;
-    this.headerImgAlt = undefined;
-    this.bodyImg = undefined;
-    this.bodyImgAlt = undefined;
-    this.bodyDivider = false;
-    this.clickable = false;
-    this.cardId = crypto.randomUUID();
-    this.hasCardBottomSlot = false;
-    this.hasCardBodySlot = false;
-  }
-  connectedCallback() {
-    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
-    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
-  }
-  render() {
-    return (h(Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
-        if (this.clickable) {
-          this.handleClick();
-        }
-      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
-  }
-  static get is() { return "sdds-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-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"
-      },
-      "headerPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'above' | 'below'",
-          "resolved": "\"above\" | \"below\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of the header"
-        },
-        "attribute": "header-placement",
-        "reflect": false,
-        "defaultValue": "'above'"
-      },
-      "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
-      },
-      "headerImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header image src"
-        },
-        "attribute": "header-img",
-        "reflect": false
-      },
-      "headerImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alt text for the header image"
-        },
-        "attribute": "header-img-alt",
-        "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.\n\n**NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time."
-        },
-        "attribute": "card-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasCardBottomSlot": {},
-      "hasCardBodySlot": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClick",
-        "name": "sddsClick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends unique card identifier when the card is clicked, if clickable=true"
-        },
-        "complexType": {
-          "original": "{\n    cardId: string;\n  }",
-          "resolved": "{ cardId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,159 +0,0 @@
-import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/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',
-      },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Toggles an image in the header.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Sets the placement of the header, above or below the body image.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
-      },
-    },
-    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',
-    headerImg: true,
-    headerPlacement: 'Above',
-    bodyImg: false,
-    bodyContent: '',
-    bodyDivider: false,
-    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
-    clickable: false,
-  },
-};
-const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-        width: 368px;
-    }
-    </style>
-    <div class="demo-wrapper">
-    <sdds-card
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    ${header ? `header="${header}"` : ''}
-    header-placement="${headerPlacement.toLowerCase()}"
-    ${subheader ? `subheader="${subheader}"` : ''}
-    ${headerImg ? `header-img="${CardPlaceholder}"` : ''}
-    ${bodyImg ? `body-img="${CardPlaceholder}"` : ''}
-    ${clickable ? 'clickable' : ''}
-    ${bodyDivider ? 'body-divider' : ''}
-  >
-  ${bodyContent
-  ? `
-    <div slot="card-body">
-        ${bodyContent}
-    </div>`
-  : ''}
-    ${cardBottom ? `${cardBottom}` : ''}
-    </sdds-card>
-    </div>
-    ${clickable
-  ? `
-    <script>
-        document.addEventListener('sddsClick', (event)=>{
-            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
-        })
-    </script>
-    `
-  : ''}
-  `);
-export const WebComponent = Template.bind({});