@scania/tegel 0.0.52 → 0.0.71-beta

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

@@ -1,193 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Components/Button',
-  parameters: {
-    notes: readme,
-    layout: 'padded',
-    chromatic: {
-      disableSnapshot: false, // enables snapshotting for the component
-    },
-    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' },
-      },
-    },
-    btnType: {
-      name: 'Type',
-      description: 'Four different button types 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' },
-      },
-    },
-    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' },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      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',
-    btnType: 'Primary',
-    size: 'Large',
-    text: 'Button',
-    fullbleed: false,
-    onlyIcon: false,
-    icon: 'none',
-    iconType: 'Web Component',
-    disabled: false,
-  },
-};
-const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, iconType, disabled, }) => {
-  const btnTypeLookUp = {
-    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',
-  };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
-    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    i.sdds-icon::before{
-      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;
-    }`
-    : ''},
-    .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-  <sdds-button type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
-    ${!onlyIcon ? `text="${text}"` : ''}
-    ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
-    : ''}
-    >
-    ${onlyIcon || (icon && icon !== 'none')
-    ? `
-    ${iconType === 'Native'
-      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
-      : `<sdds-icon slot="icon" class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
-  `
-    : ''}
-</sdds-button>
-  </div>
-  `);
-};
-/** Button as web component */
-export const WebComponent = WebComponentTemplate.bind({});
-WebComponent.args = {};
-export const WebComponentWithIcon = WebComponentTemplate.bind({});
-WebComponentWithIcon.args = {
-  icon: 'truck',
-  iconType: 'Web Component',
-};
-export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
-WebComponentOnlyIcon.args = {
-  text: '',
-  iconType: 'Web Component',
-  onlyIcon: true,
-  icon: 'truck',
-};
-//# sourceMappingURL=button-webcomponent.stories.js.map

package/dist/collection/components/button/button-webcomponent.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-webcomponent.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\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    notes: readme,\n    layout: 'padded',\n    chromatic: {\n      disableSnapshot: false, // enables snapshotting for the component\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&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    btnType: {\n      name: 'Type',\n      description:\n        'Four different button types to help the user to distinguish the level of importance of the task they represent.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the button.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    text: {\n      name: 'Text',\n      description: 'Sets the text to be displayed on the button.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    fullbleed: {\n      name: 'Fullbleed',\n      description: 'Sets a fluid width on the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    onlyIcon: {\n      name: 'Only Icon',\n      description: 'Displays only the icon and excludes any text from the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Sets icon to be displayed on the button. Choose \"none\" to exclude the icon.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', ...iconsNames],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    btnType: 'Primary',\n    size: 'Large',\n    text: 'Button',\n    fullbleed: false,\n    onlyIcon: false,\n    icon: 'none',\n    iconType: 'Web Component',\n    disabled: false,\n  },\n};\n\nconst WebComponentTemplate = ({\n  modeVariant,\n  btnType,\n  size,\n  text = 'Button',\n  fullbleed,\n  onlyIcon,\n  icon,\n  iconType,\n  disabled,\n}) => {\n  const btnTypeLookUp = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n    Ghost: 'ghost',\n    Danger: 'danger',\n  };\n  const sizeLookUp = {\n    'Large': 'lg',\n    'Medium': 'md',\n    'Small': 'sm',\n    'Extra small': 'xs',\n  };\n\n  const modeVariantLookup = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/${\n      icon && iconType === 'Native'\n        ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    i.sdds-icon::before{\n      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;\n    }`\n        : ''\n    },\n    .demo-wrapper{\n      width: 100%;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n  <sdds-button type=\"${btnTypeLookUp[btnType]}\" size=\"${sizeLookUp[size]}\" ${\n      disabled ? 'disabled' : ''\n    } ${fullbleed ? 'fullbleed' : ''}\n    ${!onlyIcon ? `text=\"${text}\"` : ''}\n    ${\n      modeVariant !== 'Inherit from parent'\n        ? `mode-variant=\"${modeVariantLookup[modeVariant]}\"`\n        : ''\n    }\n    >\n    ${\n      onlyIcon || (icon && icon !== 'none')\n        ? `\n    ${\n      iconType === 'Native'\n        ? `<i class=\"sdds-btn-icon sdds-icon ${icon}\" slot=\"icon\"></i>`\n        : `<sdds-icon slot=\"icon\" class='sdds-btn-icon ' size='${\n            sizeLookUp[size] === 'sm' ? '16px' : '20px'\n          }' name='${icon}'></sdds-icon>`\n    }\n  `\n        : ''\n    }\n</sdds-button>\n  </div>\n  `,\n  );\n};\n\n/** Button as web component */\nexport const WebComponent = WebComponentTemplate.bind({});\nWebComponent.args = {};\n\nexport const WebComponentWithIcon = WebComponentTemplate.bind({});\nWebComponentWithIcon.args = {\n  icon: 'truck',\n  iconType: 'Web Component',\n};\n\nexport const WebComponentOnlyIcon = WebComponentTemplate.bind({});\nWebComponentOnlyIcon.args = {\n  text: '',\n  iconType: 'Web Component',\n  onlyIcon: true,\n  icon: 'truck',\n};\n"]}

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

@@ -1,165 +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({});
-//# sourceMappingURL=card.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Card',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: '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    header: {\n      name: 'Header text',\n      description: 'Sets the header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader text',\n      description: 'Sets the subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    headerImg: {\n      name: 'Header image',\n      description: 'Toggles an image in the header.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    headerPlacement: {\n      name: 'Header placement',\n      description: 'Sets the placement of the header, above or below the body image.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Above', 'Below'],\n      table: {\n        defaultValue: { summary: 'above' },\n      },\n    },\n    bodyImg: {\n      name: 'Body image',\n      description: 'Toggles an image in the card body. Cannot be combined with divider.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'bodyDivider', eq: false },\n    },\n    bodyText: {\n      name: 'Body text',\n      description: 'Sets the body text for the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyDivider: {\n      name: 'Body divider',\n      description: 'Adds a divider above the body content. Cannot be combined with body image.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'bodyImg', eq: false },\n    },\n    cardBottom: {\n      name: 'Content of the bottom of the card',\n      description: 'Slot to add custom HTML elements to the bottom of the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    clickable: {\n      name: 'Clickable',\n      description: 'Toggles if the card is clickable or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    header: 'Header text',\n    subheader: 'Subheader text',\n    headerImg: true,\n    headerPlacement: 'Above',\n    bodyImg: false,\n    bodyText: '',\n    bodyDivider: false,\n    cardBottom: '<sdds-icon style=\"font-size: 20px;\" name=\"arrow_right\"></sdds-icon>',\n    clickable: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  header,\n  subheader,\n  headerImg,\n  headerPlacement,\n  bodyImg,\n  bodyText,\n  bodyDivider,\n  cardBottom,\n  clickable,\n}) =>\n  formatHtmlPreview(\n    `\n<style>\n/* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 368px;\n  }\n</style>\n    <div class=\"demo-wrapper\">\n          <div class=\"sdds-card${clickable ? ' sdds-clickable' : ''} ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}\">\n            ${\n              bodyImg === true && headerPlacement === 'Below'\n                ? `<img class=\"sdds-card-img\" src=\"${CardPlaceholder}\" alt=\"Add description to image\"/>`\n                : ''\n            }\n            <div class=\"${headerImg ? 'sdds-card-header-avatar' : 'sdds-card-header'}\">\n            ${\n              headerImg\n                ? `\n              <div class=\"sdds-card-avatar\">\n                <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>\n              </div>`\n                : ''\n            }\n                ${\n                  headerImg\n                    ? `<div class=\"sdds-card-headlines\">\n                  ${header ? `<h6 class=\"sdds-card-headline\">${header}</h6>` : ''}\n                  ${subheader ? `<h6 class=\"sdds-card-sub-headline\" >${subheader}</h6>` : ''}\n                  </div>`\n                    : `${header ? `<h6 class=\"sdds-card-headline\">${header}</h6>` : ''}\n                 ${subheader ? `<h6 class=\"sdds-card-sub-headline\" >${subheader}</h6>` : ''}\n                `\n                }\n            </div>\n            ${\n              bodyImg === true && headerPlacement === 'Above'\n                ? `<img class=\"sdds-card-img\" src=\"${CardPlaceholder}\" alt=\"Add description to image\"/>`\n                : ''\n            }\n            ${bodyDivider ? '<div class=\"sdds-divider-border-top\"></div>' : ''}\n            ${bodyText ? `<div class=\"sdds-card-body\">${bodyText}</div>` : ''}\n            ${cardBottom ? `<div class=\"sdds-card-footer\">${cardBottom}</div>` : ''}\n          </div>\n    </div>\n  `,\n  );\n\nexport const Native = Template.bind({});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** 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.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,160 +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({});
-//# sourceMappingURL=sdds-card.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-card.stories.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';\nimport { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Card',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: '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    header: {\n      name: 'Header text',\n      description: 'Sets the header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader text',\n      description: 'Sets the subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    headerImg: {\n      name: 'Header image',\n      description: 'Toggles an image in the header.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    headerPlacement: {\n      name: 'Header placement',\n      description: 'Sets the placement of the header, above or below the body image.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Above', 'Below'],\n      table: {\n        defaultValue: { summary: 'above' },\n      },\n    },\n    bodyImg: {\n      name: 'Body image',\n      description: 'Toggles an image in the card body. Cannot be combined with divider.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'bodyDivider', eq: false },\n    },\n    bodyContent: {\n      name: 'Body text',\n      description: 'Sets the body text for the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyDivider: {\n      name: 'Body divider',\n      description: 'Adds a divider above the body content. Cannot be combined with body image.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'bodyImg', eq: false },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    cardBottom: {\n      name: 'Content of the bottom of the card',\n      description: 'Slot to add custom HTML elements to the bottom of the card.',\n      control: {\n        type: 'text',\n      },\n    },\n    clickable: {\n      name: 'Clickable',\n      description: 'Toggles if the card is clickable or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    header: 'Header text',\n    subheader: 'Subheader text',\n    headerImg: true,\n    headerPlacement: 'Above',\n    bodyImg: false,\n    bodyContent: '',\n    bodyDivider: false,\n    cardBottom: `<div slot=\"card-bottom\"><sdds-icon style=\"font-size: 20px;\" name=\"arrow_right\"></sdds-icon></div>`,\n    clickable: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  header,\n  subheader,\n  headerImg,\n  headerPlacement,\n  bodyImg,\n  bodyContent,\n  bodyDivider,\n  cardBottom,\n  clickable,\n}) =>\n  formatHtmlPreview(\n    `<style>\n    /* demo-wrapper is for demonstration purposes only*/\n    .demo-wrapper {\n        width: 368px;\n    }\n    </style>\n    <div class=\"demo-wrapper\">\n    <sdds-card\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    ${header ? `header=\"${header}\"` : ''}\n    header-placement=\"${headerPlacement.toLowerCase()}\"\n    ${subheader ? `subheader=\"${subheader}\"` : ''}\n    ${headerImg ? `header-img=\"${CardPlaceholder}\"` : ''}\n    ${bodyImg ? `body-img=\"${CardPlaceholder}\"` : ''}\n    ${clickable ? 'clickable' : ''}\n    ${bodyDivider ? 'body-divider' : ''}\n  >\n  ${\n    bodyContent\n      ? `\n    <div slot=\"card-body\">\n        ${bodyContent}\n    </div>`\n      : ''\n  }\n    ${cardBottom ? `${cardBottom}` : ''}\n    </sdds-card>\n    </div>\n    ${\n      clickable\n        ? `\n    <script>\n        document.addEventListener('sddsClick', (event)=>{\n            console.log('Card with id: ', event.detail.cardId, ' was clicked.')\n        })\n    </script>\n    `\n        : ''\n    }\n  `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}