@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js

@@ -0,0 +1,71 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeTab from './inline-tab/readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: { 'Inline Tabs': readme, 'Inline Tab': readmeTab },
+    backgrounds: { default: 'white' },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    autoHeight: {
+      name: 'Same height',
+      description: 'Make all tab panels as tall as the tallest tab panel',
+      control: {
+        type: 'boolean',
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    backgrounds: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    autoHeight: false,
+    modeVariant: 'Inherit from parent',
+  },
+};
+// eslint-disable-next-line arrow-body-style
+const Template = ({ autoHeight = false, modeVariant }) => {
+  return formatHtmlPreview(`
+    <sdds-inline-tabs ${autoHeight ? 'auto-height' : ''}  ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+    <sdds-inline-tab label="Tab with tall content">
+      <div data-name="Tab with tall content">
+        Tab panel 1
+        <div style="width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);"></div>
+      </div>
+        </sdds-inline-tab>
+      <sdds-inline-tab label="Default tab" default>
+        Tab panel 2
+      </sdds-inline-tab>
+      <sdds-inline-tab label="Disabled tab" disabled>
+        Tab panel 3
+      </sdds-inline-tab>
+    </sdds-inline-tabs>
+`);
+};
+export const InlineTabs = Template.bind({});
+InlineTabs.args = {};

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css

@@ -11,7 +11,8 @@
 .sdds-inline-tabs-fullbleed::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-bg);
+  border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);
+  opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
@@ -27,7 +28,7 @@
 .sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar {
   display: none;
 }
-.sdds-inline-tabs-fullbleed--forward {
+.sdds-inline-tabs-fullbleed--forward, .sdds-inline-tabs-fullbleed--back {
   cursor: pointer;
   width: 48px;
   height: 100%;
@@ -35,55 +36,29 @@
   position: absolute;
   right: 0;
   top: 0;
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-bg);
+  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
 }
-.sdds-inline-tabs-fullbleed--forward__show {
+.sdds-inline-tabs-fullbleed--forward__show, .sdds-inline-tabs-fullbleed--back__show {
   opacity: 1;
   pointer-events: all;
 }
-.sdds-inline-tabs-fullbleed--forward:hover {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-hover-bg);
+.sdds-inline-tabs-fullbleed--forward:hover, .sdds-inline-tabs-fullbleed--back:hover {
+  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);
 }
-.sdds-inline-tabs-fullbleed--forward:active {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-active-bg);
+.sdds-inline-tabs-fullbleed--forward:active, .sdds-inline-tabs-fullbleed--back:active {
+  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);
 }
-.sdds-inline-tabs-fullbleed--forward:focus {
+.sdds-inline-tabs-fullbleed--forward:focus, .sdds-inline-tabs-fullbleed--back:focus {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-inline-tabs-fullbleed--back {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-inline-tabs-fullbleed--back__show {
-  opacity: 1;
-  pointer-events: all;
-}
-.sdds-inline-tabs-fullbleed--back:hover {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-hover-bg);
-}
-.sdds-inline-tabs-fullbleed--back:active {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-active-bg);
-}
-.sdds-inline-tabs-fullbleed--back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
+.sdds-inline-tabs-fullbleed--forward svg, .sdds-inline-tabs-fullbleed--back svg {
+  fill: var(--sdds-inline-tabs-scroll-btn-color);
 }
 .sdds-inline-tabs-fullbleed-centered {
   justify-content: center;
@@ -91,7 +66,8 @@
 ::slotted(.sdds-inline-tabs-fullbleed--tab) {
   font: var(--sdds-headline-07);
   letter-spacing: var(--sdds-headline-07-ls);
-  color: rgba(0, 21, 51, 0.6);
+  color: var(--sdds-inline-tabs-fullbleed-tab-color);
+  opacity: 0.6;
   padding: 16px 0;
   margin-right: 32px;
   text-decoration: none;
@@ -111,9 +87,17 @@
   width: 0;
   margin-right: auto;
   height: 2px;
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-hover-indicator-bg);
+  background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);
   transition: width 0.15s ease-in-out;
-  z-index: 10;
+  z-index: 1;
+}
+::slotted(.sdds-inline-tabs-fullbleed--tab__active) {
+  color: var(--sdds-inline-tabs-fullbleed-tab-color-active);
+  opacity: 1;
+}
+::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after {
+  width: 100%;
+  background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);
 }
 ::slotted(.sdds-inline-tabs-fullbleed--tab:first-child) {
   margin-left: 32px;
@@ -122,7 +106,8 @@
   margin-right: 32px;
 }
 ::slotted(.sdds-inline-tabs-fullbleed--tab:hover) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-hover-color);
+  color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);
+  opacity: 1;
 }
 ::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after {
   width: 100%;
@@ -130,43 +115,27 @@
 ::slotted(.sdds-inline-tabs-fullbleed--tab:focus) {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
-  color: var(--sdds-inline-tabs-fullbleed-tab-focus-color);
+  color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);
+  opacity: 1;
 }
 ::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after {
   width: 0;
 }
-::slotted(.sdds-inline-tabs-fullbleed--tab__active) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-active-color);
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after {
-  width: 100%;
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-active-indicator-bg);
-}
 ::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after {
   width: 100%;
 }
 ::slotted(.sdds-inline-tabs-fullbleed--tab__disabled) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-active-color);
+  color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);
   pointer-events: none;
-  opacity: 0.16;
+  opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);
 }
 
-.sdds-inline-tabs-fullbleed-primary {
-  background-color: var(--sdds-white);
-}
-.sdds-inline-tabs-fullbleed-primary .sdds-inline-tabs-fullbleed--forward {
-  background-color: var(--sdds-white);
-}
-.sdds-inline-tabs-fullbleed-primary .sdds-inline-tabs-fullbleed--back {
-  background-color: var(--sdds-white);
-}
-
-.sdds-inline-tabs-fullbleed-secondary {
-  background-color: var(--sdds-grey-50);
+.sdds-inline-tabs-fullbleed {
+  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
 }
-.sdds-inline-tabs-fullbleed-secondary .sdds-inline-tabs-fullbleed--forward {
-  background-color: var(--sdds-grey-50);
+.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward {
+  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
 }
-.sdds-inline-tabs-fullbleed-secondary .sdds-inline-tabs-fullbleed--back {
-  background-color: var(--sdds-grey-50);
+.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back {
+  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);
 }

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js

@@ -1,126 +1,128 @@
-import { Host, h } from '@stencil/core';
-export class InlineTabsFullbleed {
-  constructor() {
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.modeVariant = 'primary';
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this._calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this._evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      }
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this._calculateButtonWidth();
-  }
-  _calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  _scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `sdds-inline-tabs-fullbleed sdds-inline-tabs-fullbleed-${this.modeVariant}` }, h("div", { class: "sdds-inline-tabs-fullbleed-wrapper", ref: (el) => (this.navWrapperElement = el) }, h("slot", null)), h("div", { class: "sdds-inline-tabs-fullbleed-navigation" }, h("button", { class: `sdds-inline-tabs-fullbleed--forward ${this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this._scrollRight() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-inline-tabs-fullbleed--back ${this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this._scrollLeft() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
-  }
-  static get is() { return "sdds-inline-tabs-fullbleed"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { Host, h } from '@stencil/core';
+export class InlineTabsFullbleed {
+  constructor() {
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.componentWidth = 0; // visible width of this component
+    this.buttonsWidth = 0; // total width of all nav items combined
+    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+    this.buttonWidth = 0; // current calculated width of the largest nav button
+    this.modeVariant = null;
+    this.tabs = [];
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+  }
+  componentDidRender() {
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = Array.from(this.host.children);
+        navButtons.forEach((navButton) => {
+          const style = window.getComputedStyle(navButton);
+          buttonsWidth +=
+            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+      });
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+  }
+  calculateButtonWidth() {
+    let best = 0;
+    const navButtons = Array.from(this.host.children);
+    navButtons.forEach((navButton) => {
+      const style = window.getComputedStyle(navButton);
+      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+      if (width > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  evaluateScrollButtons() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    if (scroll >= this.scrollWidth) {
+      this.showRightScroll = false;
+    }
+    else {
+      this.showRightScroll = true;
+    }
+    if (scroll <= 0) {
+      this.showLeftScroll = false;
+    }
+    else {
+      this.showLeftScroll = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs-fullbleed` }, h("div", { class: "sdds-inline-tabs-fullbleed-wrapper", ref: (el) => {
+        this.navWrapperElement = el;
+      } }, h("slot", null)), h("div", { class: "sdds-inline-tabs-fullbleed-navigation" }, h("button", { class: `sdds-inline-tabs-fullbleed--forward ${this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z" }))), h("button", { class: `sdds-inline-tabs-fullbleed--back ${this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z" })))))));
+  }
+  static get is() { return "sdds-inline-tabs-fullbleed"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["inline-tabs-fullbleed.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["inline-tabs-fullbleed.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {},
+      "showLeftScroll": {},
+      "showRightScroll": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js

@@ -0,0 +1,46 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      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-inline-tabs-fullbleed id="inline-tabs-fullbleed-example" ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <a href="#">Tab name</a>
+      <a href="#" class="sdds-inline-tabs-fullbleed--tab__active">Active tab</a>
+      <a href="#">Tab name</a>
+      <a href="#">Tab name</a>
+      <a href="#" class="sdds-inline-tabs-fullbleed--tab__disabled" aria-disabled="true" tabindex="-1">Disabled tab</a>
+    </sdds-inline-tabs-fullbleed>
+`);
+export const InlineTabsFullbleed = Template.bind({});
+InlineTabsFullbleed.args = {};