@scania/tegel 0.0.2 → 0.0.32

package/dist/collection/components/banner/sdds-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-banner.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,110 +1,110 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-import readme from './readme.md';
-// FIXME: CMS: Change state to type in Code tab of component
-export default {
-  title: 'Components/Banner',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Changes type of component',
-      options: ['Default', 'Error', 'Information'],
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Text to display in header section',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Text to display in subheader section',
-      control: {
-        type: 'text',
-      },
-    },
-    linkText: {
-      name: 'Link',
-      description: 'Text to display in link section',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      name: 'Link href',
-      description: 'Href for link',
-      control: {
-        type: 'text',
-      },
-    },
-    linkTarget: {
-      name: 'Link target',
-      description: 'Where to open the linked URL.',
-      control: {
-        type: 'radio',
-      },
-      options: ['_self', '_blank', '_parent', '_top'],
-      table: {
-        defaultValue: { summary: '_self' },
-      },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Name of icon to display, choose `none` to remove the icon.',
-      control: {
-        type: 'select',
-      },
-      options: [...iconsNames, 'none'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
-      if: { arg: 'type', eq: 'Default' },
-    },
-    persistent: {
-      name: 'Disable closing',
-      description: `Removes the 'close button' in the banner.`,
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    type: 'Default',
-    header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    linkText: 'Learn more',
-    href: 'tegel.scania.com',
-    linkTarget: '_self',
-    icon: 'truck',
-    persistent: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+// FIXME: CMS: Change state to type in Code tab of component
+export default {
+  title: 'Components/Banner',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'Changes type of component',
+      options: ['Default', 'Error', 'Information'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Text to display in header section',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Text to display in subheader section',
+      control: {
+        type: 'text',
+      },
+    },
+    linkText: {
+      name: 'Link',
+      description: 'Text to display in link section',
+      control: {
+        type: 'text',
+      },
+    },
+    href: {
+      name: 'Link href',
+      description: 'Href for link',
+      control: {
+        type: 'text',
+      },
+    },
+    linkTarget: {
+      name: 'Link target',
+      description: 'Where to open the linked URL.',
+      control: {
+        type: 'radio',
+      },
+      options: ['_self', '_blank', '_parent', '_top'],
+      table: {
+        defaultValue: { summary: '_self' },
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Name of icon to display, choose `none` to remove the icon.',
+      control: {
+        type: 'select',
+      },
+      options: [...iconsNames, 'none'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+      if: { arg: 'type', eq: 'Default' },
+    },
+    persistent: {
+      name: 'Disable closing',
+      description: `Removes the 'close button' in the banner.`,
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    type: 'Default',
+    header: 'This is a header text area',
+    subheader: 'SubHeader text area',
+    linkText: 'Learn more',
+    href: 'tegel.scania.com',
+    linkTarget: '_self',
+    icon: 'truck',
+    persistent: false,
+  },
+};
 const Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) => formatHtmlPreview(`
       <sdds-banner
           ${type !== 'Default' ? `type="${type.toLowerCase()}"` : ''}
@@ -125,5 +125,6 @@ const Template = ({ type, icon, header, subheader, linkText, href, persistent, l
           console.log('Closed banner with BannerID: ', event.detail.bannerId)
         })
       </script>
-    `);
-export const WebComponent = Template.bind({});
+    `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-banner.stories.js.map

package/dist/collection/components/banner/sdds-banner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes type of component',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Text to display in header section',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Text to display in subheader section',\n      control: {\n        type: 'text',\n      },\n    },\n    linkText: {\n      name: 'Link',\n      description: 'Text to display in link section',\n      control: {\n        type: 'text',\n      },\n    },\n    href: {\n      name: 'Link href',\n      description: 'Href for link',\n      control: {\n        type: 'text',\n      },\n    },\n    linkTarget: {\n      name: 'Link target',\n      description: 'Where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    linkText: 'Learn more',\n    href: 'tegel.scania.com',\n    linkTarget: '_self',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${subheader !== '' ? `subheader=\"${subheader}\"` : ''}\n          ${linkText !== '' ? `link-text=\"${linkText}\"` : ''}\n          ${href !== '' ? `href=\"${href}\"` : ''}\n          ${linkTarget !== '' ? `link-target=\"${linkTarget}\"` : ''}\n\n          ${persistent ? `persistent` : ''}\n          >\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log('Closed banner with BannerID: ', event.detail.bannerId)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/block/block-native.stories.js

@@ -1,41 +1,41 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Block',
-  parameters: {
-    layout: 'padded',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&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' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Block',
+  parameters: {
+    layout: 'padded',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&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' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+  },
+};
 const Template = ({ modeVariant }) => formatHtmlPreview(`
-      <div class="sdds-block ${modeVariant !== 'Inherit from parent'
-  ? `sdds-mode-variant-${modeVariant.toLowerCase()}`
+      <div class="sdds-block ${modeVariant !== 'Inherit from parent'
+  ? `sdds-mode-variant-${modeVariant.toLowerCase()}`
   : ''}">
       <h2 class="sdds-headline-02">Block</h2>
         <p class="sdds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
@@ -44,5 +44,6 @@ const Template = ({ modeVariant }) => formatHtmlPreview(`
           <p class="sdds-detail-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
           </div>
       </div>
-    `);
-export const Native = Template.bind({});
+    `);
+export const Native = Template.bind({});
+//# sourceMappingURL=block-native.stories.js.map

package/dist/collection/components/block/block-native.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-native.stories.js","sourceRoot":"","sources":["../../../src/components/block/block-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EAED,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,2GAA2G;MAC7G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,iBAAiB,CACf;+BAEI,WAAW,KAAK,qBAAqB;EACnC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE;EAClD,CAAC,CAAC,EACN;;;;;;;;KAQD,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Block',\n  parameters: {\n    layout: 'padded',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background. ',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ modeVariant }) =>\n  formatHtmlPreview(\n    `\n      <div class=\"sdds-block ${\n        modeVariant !== 'Inherit from parent'\n          ? `sdds-mode-variant-${modeVariant.toLowerCase()}`\n          : ''\n      }\">\n      <h2 class=\"sdds-headline-02\">Block</h2>\n        <p class=\"sdds-body-01\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>\n        <div class=\"sdds-block\">\n          <h3 class=\"sdds-headline-04\">Nested block</h3>\n          <p class=\"sdds-detail-03\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>\n          </div>\n      </div>\n    `,\n  );\n\nexport const Native = Template.bind({});\n"]}

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

@@ -1,55 +1,56 @@
-import { h } from '@stencil/core';
-export class SddsBlock {
-  constructor() {
-    this.modeVariant = null;
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
-    this.children.forEach((item) => {
-      if (!this.modeVariant) {
-        item.setAttribute('mode-variant', 'secondary');
-      }
-      else {
-        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
-      }
-    });
-  }
-  render() {
-    return (h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-block"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-block.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-block.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": "Mode variant of the component, based on current mode."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { h } from '@stencil/core';
+export class SddsBlock {
+  constructor() {
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
+    this.children.forEach((item) => {
+      if (!this.modeVariant) {
+        item.setAttribute('mode-variant', 'secondary');
+      }
+      else {
+        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
+      }
+    });
+  }
+  render() {
+    return (h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-block.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": "Mode variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-block.js.map

package/dist/collection/components/block/sdds-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-block.js","sourceRoot":"","sources":["../../../src/components/block/sdds-block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,SAAS;;uBAE2B,IAAI;;EAMnD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,YAAY,CACd,CAAC;IAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;OAChD;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;OAC7F;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAE3G,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-block',\n  styleUrl: 'sdds-block.scss',\n  shadow: true,\n})\nexport class SddsBlock {\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsBlockElement>;\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children).filter(\n      (item) => item.tagName === 'SDDS-BLOCK',\n    ) as HTMLSddsBlockElement[];\n    this.children.forEach((item) => {\n      if (!this.modeVariant) {\n        item.setAttribute('mode-variant', 'secondary');\n      } else {\n        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,40 +1,40 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Block',
-  parameters: {
-    layout: 'padded',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&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' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Block',
+  parameters: {
+    layout: 'padded',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&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' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+  },
+};
 const Template = ({ modeVariant }) => formatHtmlPreview(`
       <sdds-block ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
         <h2 class="sdds-headline-02">Block</h2>
@@ -44,5 +44,6 @@ const Template = ({ modeVariant }) => formatHtmlPreview(`
               <p class="sdds-detail-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
           </sdds-block>
       </sdds-block>
-    `);
-export const WebComponent = Template.bind({});
+    `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-block.stories.js.map

package/dist/collection/components/block/sdds-block.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-block.stories.js","sourceRoot":"","sources":["../../../src/components/block/sdds-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,2GAA2G;MAC7G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,iBAAiB,CACf;oBAEI,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;;;;;;;;KAQD,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Block',\n  parameters: {\n    layout: 'padded',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background. ',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ modeVariant }) =>\n  formatHtmlPreview(\n    `\n      <sdds-block ${\n        modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n      }>\n        <h2 class=\"sdds-headline-02\">Block</h2>\n        <p class=\"sdds-body-01\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>\n          <sdds-block>\n              <h3 class=\"sdds-headline-04\">Nested block</h3>\n              <p class=\"sdds-detail-03\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>\n          </sdds-block>\n      </sdds-block>\n    `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}