@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -0,0 +1,167 @@
+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: {
+    header: {
+      name: 'Header text',
+      description: 'The header text',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'The subheader text',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Body text',
+      description: 'The body text for the card',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Add a divider to the card',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'bodyImg', eq: false },
+    },
+    cardBottom: {
+      name: 'Content of 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 },
+      },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Image in body on card.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    imageTop: {
+      name: 'Image on top',
+      description: 'Sets the image on top',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'image', eq: true },
+    },
+    headerImg: {
+      name: 'Header image',
+      description: 'Image for the header',
+      control: {
+        type: 'boolean',
+      },
+    },
+    headerPlacement: {
+      name: 'Header placement',
+      description: 'Placement of the header',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'above' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Change the components mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  args: {
+    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>',
+    modeVariant: 'Inherit from parent',
+    clickable: false,
+  },
+};
+const Template = ({ header, subheader, cardBottom, clickable, bodyText, bodyDivider, headerPlacement, headerImg, modeVariant, bodyImg, }) => 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

@@ -0,0 +1,78 @@
+.card {
+  box-shadow: var(--sdds-card-box);
+  background-color: var(--sdds-card-background);
+  display: block;
+  border-radius: 4px;
+  max-width: 368px;
+  overflow: hidden;
+}
+.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;
+}
+
+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

@@ -0,0 +1,276 @@
+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": true,
+        "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

@@ -0,0 +1,168 @@
+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 of the component, based on current mode.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    header: {
+      name: 'Header text',
+      description: 'The header text',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'The subheader text',
+      control: {
+        type: 'text',
+      },
+    },
+    headerImg: {
+      name: 'Header image',
+      description: 'Image for the header',
+      control: {
+        type: 'boolean',
+      },
+    },
+    headerPlacement: {
+      name: 'Header placement',
+      description: 'Placement of the header',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'above' },
+      },
+    },
+    bodyContent: {
+      name: 'Body text',
+      description: 'The body text for the card',
+      control: {
+        type: 'text',
+      },
+    },
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the card is clickable or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'bodyImg', eq: false },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Image in body on card.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    imageTop: {
+      name: 'Image on top',
+      description: 'Places the body image above the header.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'image', eq: true },
+    },
+    cardBottom: {
+      name: 'Content of the bottom of the card',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    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>`,
+    modeVariant: 'Inherit from parent',
+    clickable: false,
+  },
+};
+const Template = ({ modeVariant, headerPlacement, header, subheader, bodyContent, clickable, headerImg, bodyImg, bodyDivider, cardBottom, }) => 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({});