@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,100 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './accordion-item/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Accordion`,
+  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' },
+      },
+    },
+    iconPosition: {
+      name: 'Expand icon position',
+      description: 'Sets the horizontal position of the expand icon.',
+      control: {
+        type: 'radio',
+      },
+      options: { End: 'end', Start: 'start' },
+      table: {
+        defaultValue: { summary: 'end' },
+      },
+    },
+    paddingReset: {
+      name: 'Less padding right',
+      description: 'Sets less padding on the right inside Accordion Items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disables all Accordion Items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  parameters: {
+    notes: { 'Accordion': readme, 'Accordion Item': readmeItem },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    iconPosition: 'end',
+    paddingReset: false,
+    disabled: false,
+  },
+};
+const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
+  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
+  const disabledAttr = disabled ? 'disabled' : '';
+  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
+  return formatHtmlPreview(`
+    <tds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum doler sit amet.
+      </tds-accordion-item>
+      <tds-accordion-item ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        <div slot="header">Second item</div>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
+      </tds-accordion-item>
+    </tds-accordion>
+
+    <!-- Script tag for demo purposes -->
+  <script>    
+    accordionItems = document.querySelectorAll('tds-accordion-item');
+    for (let i = 0; i < accordionItems.length; i++) {
+      accordionItems[i].addEventListener('tdsToggle',(event) => {
+        console.log(event)
+      })
+    }
+  </script>`);
+};
+export const Default = Template.bind({});

package/dist/collection/components/badge/badge.css

@@ -1,6 +1,6 @@
 :host {
-  --sdds-badge-background-color: var(--sdds-negative);
-  --sdds-badge-color-text: var(--sdds-white);
+  --tds-badge-background-color: var(--tds-negative);
+  --tds-badge-color-text: var(--tds-white);
   box-sizing: border-box;
   display: block;
 }
@@ -8,35 +8,35 @@
   box-sizing: border-box;
 }
 
-.sdds-badge {
+.tds-badge {
   display: block;
   border-radius: 12px;
-  background-color: var(--sdds-badge-background-color);
+  background-color: var(--tds-badge-background-color);
   text-align: center;
 }
-.sdds-badge.sdds-badge-sm {
+.tds-badge.tds-badge-sm {
   height: 8px;
   width: 8px;
   line-height: 8px;
 }
-.sdds-badge.sdds-badge-lg {
+.tds-badge.tds-badge-lg {
   height: 20px;
   line-height: 20px;
   width: 20px;
 }
-.sdds-badge.sdds-badge-pill {
+.tds-badge.tds-badge-pill {
   display: inline-block;
   width: unset;
   padding-left: 8px;
   padding-right: 8px;
 }
-.sdds-badge.sdds-badge-hidden {
+.tds-badge.tds-badge-hidden {
   display: none;
 }
 
-.sdds-badge-text {
-  font-family: var(--sdds-font-family-semi-condensed-bold);
+.tds-badge-text {
+  font-family: var(--tds-font-family-semi-condensed-bold);
   font-size: 12px;
-  color: var(--sdds-badge-color-text);
+  color: var(--tds-badge-color-text);
   font-weight: bold;
 }

package/dist/collection/components/badge/badge.js

@@ -1,9 +1,8 @@
 import { h } from '@stencil/core';
-export class SddsBadge {
+export class TdsBadge {
   constructor() {
     this.value = '';
     this.hidden = false;
-    this.isSmall = false;
     this.size = 'lg';
     this.shape = '';
     this.text = '';
@@ -13,10 +12,6 @@ export class SddsBadge {
   }
   componentWillLoad() {
     this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
   }
   checkProps() {
     const valueAsNumber = parseInt(this.value);
@@ -27,15 +22,15 @@ export class SddsBadge {
     }
     else {
       // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
+      if (this.value !== '' && this.size !== 'sm') {
+        console.warn('The provided value is either empty or string, please provide value as number.');
+      }
     }
   }
   render() {
-    return (h("host", { class: `sdds-badge sdds-badge-${this.size} ${this.shape === 'pill' ? 'sdds-badge-pill' : ''} ${this.hidden ? 'sdds-badge-hidden' : ''}` }, h("div", { class: "sdds-badge-text" }, this.text)));
+    return (h("host", { class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
   }
-  static get is() { return "sdds-badge"; }
+  static get is() { return "tds-badge"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -82,28 +77,7 @@ export class SddsBadge {
           "text": "Changes visibility of Badge"
         },
         "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isSmall": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use size prop instead. Changes Badge from large to small size"
-            }],
-          "text": ""
-        },
-        "attribute": "is-small",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "size": {
@@ -136,9 +110,6 @@ export class SddsBadge {
     return [{
         "propName": "value",
         "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
       }, {
         "propName": "size",
         "methodName": "watchProps"

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

@@ -0,0 +1,106 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Badge`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Sets a value to show on the Badge.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+    },
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggles visibility of the Badge.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    demoCode: {
+      name: 'Demo code',
+      description: 'Displays code example of component usage. Not part of component props.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'lg',
+    value: 1,
+    hidden: false,
+    demoCode: false,
+  },
+};
+const Template = ({ value, size, hidden, demoCode }) => formatHtmlPreview(`
+    ${demoCode
+  ? `<style>
+    /* Note: Demo classes used here are just for demo purposes in Storybook */
+    .badge-demo-box {
+      margin:5px;
+      height: 32px;
+      width: 32px;
+      position: relative;
+      background-color: #C4C4C4;
+    }
+
+    .badge-demo-box tds-badge[size="lg"]{
+      position: absolute;
+      left: 16px;
+      top: -5px;
+    }
+
+    .badge-demo-box tds-badge[size="sm"]{
+      position: absolute;
+      left: 26px;
+      top: -2px;
+    }
+    </style>`
+  : ''}
+
+    <div class="${demoCode ? 'badge-demo-box' : ''}">
+      <tds-badge
+        ${value ? `value="${value}"` : ''}
+        ${hidden ? 'hidden' : ''}
+        size="${size}">
+      </tds-badge>
+    </div>`);
+export const Default = Template.bind({});

package/dist/collection/components/banner/banner.css

@@ -0,0 +1,98 @@
+:root,
+.tds-mode-light {
+  --tds-link: var(--tds-blue-500);
+  --tds-link-hover: var(--tds-blue-400);
+  --tds-link-focus: var(--tds-blue-400);
+  --tds-link-visited: var(--tds-grey-900);
+  --tds-link-disabled: var(--tds-grey-400);
+}
+
+.tds-mode-dark {
+  --tds-link: var(--tds-blue-300);
+  --tds-link-hover: var(--tds-blue-400);
+  --tds-link-focus: var(--tds-blue-400);
+  --tds-link-visited: var(--tds-blue-100);
+  --tds-link-disabled: var(--tds-grey-800);
+}
+
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host(.error) {
+  background-color: var(--tds-banner-background-error);
+}
+
+:host(.information) {
+  background-color: var(--tds-banner-background-info);
+}
+
+:host {
+  display: flex;
+  background-color: var(--tds-banner-background-default);
+  z-index: 400;
+}
+:host .banner-icon {
+  padding-left: 20px;
+  padding-top: 14px;
+  padding-right: 12px;
+  color: var(--tds-banner-prefix-default-color);
+}
+:host .banner-icon.error {
+  color: var(--tds-banner-prefix-error-color);
+}
+:host .banner-icon.information {
+  color: var(--tds-banner-prefix-info-color);
+}
+:host .content {
+  color: var(--tds-banner-text-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 16px 0;
+}
+:host .content.no-icon {
+  padding-left: 16px;
+}
+:host .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .header,
+:host slot[name=header] {
+  font: var(--tds-headline-06);
+  letter-spacing: var(--tds-headline-06-ls);
+}
+:host .subheader,
+:host slot[name=subheader] {
+  display: block;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+}
+:host slot[name=bottom]::slotted(*) {
+  display: block;
+  width: fit-content;
+  margin-top: 16px;
+}
+:host .banner-close {
+  color: var(--tds-banner-x-color);
+}
+:host .banner-close button {
+  padding-right: 16px;
+  padding-top: 14px;
+  background-color: transparent;
+  border: none;
+  color: var(--tds-banner-x-color);
+}
+:host .banner-close button:hover {
+  cursor: pointer;
+}
+:host .banner-close button:focus-visible {
+  outline: none;
+}
+:host .banner-close button:focus-visible tds-icon {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}