@scania/tegel 0.0.7 → 0.0.8

package/dist/collection/components/header/header-toolbar.stories.js

@@ -1,206 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
-const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
-    <nav class='sdds-nav'>
-        <div class='sdds-nav__left'>
-          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
-          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
-              <span id='sdds-nav__mob-menu-icon'>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
-              </span>
-          </button>
-          <div class='sdds-nav__app-name'>${siteName}</div>
-        </div>
-
-        <div class='sdds-nav__center'>
-          <ul class='sdds-nav__inline-menu'>
-
-              <li class='sdds-nav__item'>
-                  <a class='sdds-nav__item-core' href='#'>
-                      <span class='span'>Item 1</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__item--active'>
-                  <a class='sdds-nav__item-core ' href='#'>
-                      <span class='sdds-nav__item-core-text'>Item 2</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__dropdown'>
-              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
-                  <span class='sdds-nav__item-core-text'>Item 3</span>
-                  <span class='sdds-nav__dropdown-icon'>
-                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
-                  </span>
-              </button>
-              <ul class='sdds-nav__dropdown-menu'>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
-                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-              </ul>
-              </li>
-          </ul>
-
-          <ul class='sdds-nav__toolbar-menu'>
-
-              <li class='sdds-nav__item sdds-nav__avatar' >
-                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
-                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
-                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
-                          <span class='sdds-nav__avatar-title'>Employee Name</span>
-                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                      </span>
-                  </button>
-
-                  <ul class='sdds-nav__avatar-menu'>
-                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
-                          <span class='sdds-nav__avatar-info'>
-                              <span class='sdds-nav__avatar-title'>Employee Name</span>
-                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                          </span>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>
-                      </li>
-                  </ul>
-              </li>
-          </ul>
-        </div>
-
-        <div class='sdds-nav__right'>
-          <div class='sdds-nav__item sdds-nav__app-launcher'>
-              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
-                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
-              </button>
-              <ul class='sdds-nav__app-launcher-menu'>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-              </ul>
-          </div>
-          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
-        </div>
-    </nav>
-
-    <script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-    toggleAvatarMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleMobileMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleAppLauncher = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleInlineDropdown = () => {
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-    closeDropdownsFromOverlay = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    </script>
-    `);
-export const ToolbarMenu = ToolbarMenuTemplate.bind({});

package/dist/collection/components/header/webcomponent/header-default.stories.js

@@ -1,78 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeHamburger from './header-hamburger/readme.md';
-import readmeTitle from './header-title/readme.md';
-import readmeItem from './header-item/readme.md';
-import readmeDropdown from './header-dropdown/readme.md';
-import readmeDropdownList from './header-dropdown-list/readme.md';
-import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
-import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
-import readmeLauncher from './header-launcher/readme.md';
-export default {
-  title: 'Components/Header/Web Component',
-  parameters: {
-    notes: {
-      'Header': readme,
-      'Header hamburger': readmeHamburger,
-      'Header title': readmeTitle,
-      'Header item': readmeItem,
-      'Header dropdown': readmeDropdown,
-      'Header dropdown list': readmeDropdownList,
-      'Header dropdown list item': readmeDropdownListItem,
-      'Header dropdown list user': readmeDropdownListUser,
-      'Header launcher': readmeLauncher,
-    },
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {},
-  args: {},
-};
-const Template = () => formatHtmlPreview(`
-  <sdds-header>
-    <sdds-header-title>
-      Example: default
-    </sdds-header-title>
-
-    <sdds-header-launcher slot="end">
-      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
-      <sdds-header-launcher-list>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Trucklyfe</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">HaulHub</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">WheelWizz</a>
-        </sdds-header-launcher-list-item>
-      </sdds-header-launcher-list>
-    </sdds-header-launcher>
-
-
-    <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
-    </sdds-header-brand-symbol>
-
-  </sdds-header>
-  
-  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
-    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
-  </main>
-  `);
-export const Default = Template.bind({});

package/dist/collection/components/icon/icon-font.stories.js

@@ -1,57 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
-const IconFontTemplate = (args) => formatHtmlPreview(`
-  <style>
-    /* Demo code for presentation purposes */
-    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    .sdds-icon { font-size: ${args.size}px; }
-  </style>
-
-  <i class="sdds-icon ${args.icon}"></i>
-  `);
-export const Native = IconFontTemplate.bind({});
-Native.args = {};

package/dist/collection/components/icon/icon-web-component.stories.js

@@ -1,51 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
-const IconTemplate = (args) => formatHtmlPreview(`
-  <sdds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></sdds-icon> 
-  `);
-export const WebComponent = IconTemplate.bind({});
-WebComponent.args = {};

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

@@ -1,51 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Link',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    underline: {
-      name: 'Underline',
-      description: 'Adds an underline under the link text.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the link.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    underline: true,
-    disabled: false,
-  },
-};
-const Template = ({ underline, disabled }) => formatHtmlPreview(`
-      <a class="sdds-link ${disabled ? 'disabled' : ''} ${underline ? '' : 'sdds-link--no-underline'}" href="#">
-        This is a link.
-      </a>
-  `);
-export const Native = Template.bind({});

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

@@ -1,56 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Link',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    underline: {
-      name: 'Underline',
-      description: 'Adds an underline under the link text.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the link.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    underline: true,
-    disabled: false,
-  },
-};
-const Template = ({ underline, disabled }) => formatHtmlPreview(`
-    <sdds-link
-        ${disabled ? 'disabled' : ''}
-        ${underline ? '' : 'underline="false"'}
-        >
-        <a href="#">This is a link.</a>
-    </sdds-link>
-  `);
-export const WebComponent = Template.bind({});

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

@@ -1,128 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Message',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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' },
-      },
-    },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'Information' },
-      },
-    },
-    showExtendedMessage: {
-      name: 'Extended message',
-      description: 'Shows an extended message.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-      table: {
-        defaultValue: { summary: 'Web Component' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageType: 'Information',
-    showExtendedMessage: true,
-    noIcon: false,
-    iconType: 'Web Component',
-  },
-};
-const nativeIconNameLookup = {
-  Information: 'info',
-  Error: 'error',
-  Warning: 'warning',
-  Success: 'tick',
-};
-const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {
-  const messageTypeClass = messageType === 'Information'
-    ? 'sdds-message-type-informative'
-    : `sdds-message-type-${messageType.toLowerCase()}`;
-  const iconClass = messageType === 'Information'
-    ? 'sdds-message-icon-informative'
-    : `sdds-message-icon-${messageType.toLowerCase()}`;
-  const iconHtml = iconType === 'Native'
-    ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
-    : `<div class="sdds-message-icon ${iconClass}"><sdds-icon name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
-  return formatHtmlPreview(`
-    <style>
-      .demo-wrapper {
-        width: 380px;
-      }
-    </style>
-
-    ${iconType === 'Native'
-    ? `<style>
-    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
-    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    </style>`
-    : ''}
-    <div class="demo-wrapper">
-      <div class="sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
-      ${modeVariant === 'Inherit from parent'
-    ? ''
-    : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-      ${noIcon ? '' : iconHtml}
-      <h4 class="sdds-message-single">
-        Single line message goes here.
-      </h4>
-      ${showExtendedMessage
-    ? '<p class="sdds-message-extended">Longer message text can be placed here. Longer message text can be placed here.</p>'
-    : ''}
-    </div>
-  </div>
-  `);
-};
-export const Native = Template.bind({});