@otto-de/b2b-core-components 1.6.1 → 1.8.0

package/dist/collection/components/wizard/wizard.e2e.js

@@ -1,29 +1,29 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { WizardStatus } from '../../utils/types/wizard.types';
+import { newE2EPage } from "@stencil/core/testing";
+import { WizardStatus } from "../../utils/types/wizard.types";
 describe('B2B-Wizard', () => {
   let page;
   it('should render wizard component', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const element = await page.find('b2b-wizard');
     expect(element).not.toBeNull();
   });
   it('should render steps in order for default mode', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     steps.map(async (step, index) => {
@@ -34,13 +34,13 @@ describe('B2B-Wizard', () => {
   });
   it('should render active step with pending state', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     const activeStep = steps[2];
@@ -49,13 +49,13 @@ describe('B2B-Wizard', () => {
   });
   it('should render incomplete steps with default state', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     const incompleteSteps = [steps[3], steps[4], steps[5]];
@@ -66,13 +66,13 @@ describe('B2B-Wizard', () => {
   });
   it('should render completed steps with completed state', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     const incompleteSteps = [steps[0], steps[1]];
@@ -83,13 +83,13 @@ describe('B2B-Wizard', () => {
   });
   it('should not set steps state and order for custom mode', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="3" check-icon custom>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="3" check-icon custom>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     steps.map(async (step) => {
@@ -104,13 +104,13 @@ describe('B2B-Wizard', () => {
   });
   it('should render all steps completed when active-step is zero', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="0" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="0" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     const steps = await page.findAll('b2b-wizard b2b-wizard-step');
     steps.map(async (step) => {
@@ -121,28 +121,28 @@ describe('B2B-Wizard', () => {
   it('should be emitting a warning if rendering more than 6 steps', async () => {
     global.console.warn = jest.fn();
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
-          <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
       </b2b-wizard>`);
     expect(console.warn).toBeCalled();
   });
   it('should be emitting an error if active-step is higher than total steps', async () => {
     global.console.error = jest.fn();
     page = await newE2EPage();
-    await page.setContent(`<b2b-wizard active-step="7" check-icon>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
-      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    await page.setContent(`<b2b-wizard active-step="7" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
     </b2b-wizard>`);
     expect(console.error).toBeCalled();
   });

package/dist/collection/components/wizard/wizard.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { WizardStatus } from '../../utils/types/wizard.types';
+import { h, Host } from "@stencil/core";
+import { WizardStatus } from "../../utils/types/wizard.types";
 export class WizardComponent {
   constructor() {
     this.MAX_STEP_AMOUNT = 6;
@@ -69,7 +69,8 @@ export class WizardComponent {
           "references": {
             "WizardSteps": {
               "location": "import",
-              "path": "../../utils/types/wizard.types"
+              "path": "../../utils/types/wizard.types",
+              "id": "src/utils/types/wizard.types.ts::WizardSteps"
             }
           }
         },
@@ -95,7 +96,7 @@ export class WizardComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "By default, is false, where the wizard will handle steps states.\nIf set to true, steps state must be handled manually."
+          "text": "By default, is false, where the wizard will handle steps states.\r\nIf set to true, steps state must be handled manually."
         },
         "attribute": "custom",
         "reflect": false,
@@ -113,7 +114,7 @@ export class WizardComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\r\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

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

@@ -1,28 +1,27 @@
-import { html } from 'lit-html';
-import wizardDocs from './wizard.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ activeStep, checkIcon }) => {
-  return html `<b2b-wizard active-step="${activeStep}" check-icon="${checkIcon}">
-    <b2b-wizard-step>Step 1</b2b-wizard-step>
-    <b2b-wizard-step>Step 2</b2b-wizard-step>
-    <b2b-wizard-step>Step 3</b2b-wizard-step>
-    <b2b-wizard-step>Step 4</b2b-wizard-step>
+  return html `<b2b-wizard active-step="${activeStep}" check-icon="${checkIcon}">
+    <b2b-wizard-step>Step 1</b2b-wizard-step>
+    <b2b-wizard-step>Step 2</b2b-wizard-step>
+    <b2b-wizard-step>Step 3</b2b-wizard-step>
+    <b2b-wizard-step>Step 4</b2b-wizard-step>
   </b2b-wizard>`;
 };
 export const story010Wizard = Template.bind({});
 story010Wizard.args = { activeStep: '2', checkIcon: true };
 story010Wizard.storyName = 'Default';
 const StatesTemplate = ({ step }) => {
-  return html `
-    <b2b-wizard-step step="${step}" state="default">Default</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="completed"
-      >Completed with icon</b2b-wizard-step
-    >
-    <b2b-wizard-step step="${step}" state="completed" check-icon="false"
-      >Completed with number</b2b-wizard-step
-    >
-    <b2b-wizard-step step="${step}" state="pending">Pending</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="disabled">Disabled</b2b-wizard-step>
+  return html `
+    <b2b-wizard-step step="${step}" state="default">Default</b2b-wizard-step>
+    <b2b-wizard-step step="${step}" state="completed"
+      >Completed with icon</b2b-wizard-step
+    >
+    <b2b-wizard-step step="${step}" state="completed" check-icon="false"
+      >Completed with number</b2b-wizard-step
+    >
+    <b2b-wizard-step step="${step}" state="pending">Pending</b2b-wizard-step>
+    <b2b-wizard-step step="${step}" state="disabled">Disabled</b2b-wizard-step>
   `;
 };
 export const story020WizardStates = StatesTemplate.bind({});
@@ -37,8 +36,5 @@ export default {
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: wizardDocs,
-    },
   },
 };

package/dist/collection/components/wizard-icon/wizard-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard-icon/wizard-icon.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { WizardStatus } from '../../utils/types/wizard.types';
+import { h, Host } from "@stencil/core";
+import { WizardStatus } from "../../utils/types/wizard.types";
 export class WizardIconComponent {
   constructor() {
     this.step = undefined;
@@ -34,7 +34,8 @@ export class WizardIconComponent {
           "references": {
             "WizardSteps": {
               "location": "import",
-              "path": "../../utils/types/wizard.types"
+              "path": "../../utils/types/wizard.types",
+              "id": "src/utils/types/wizard.types.ts::WizardSteps"
             }
           }
         },
@@ -56,7 +57,8 @@ export class WizardIconComponent {
           "references": {
             "WizardStatus": {
               "location": "import",
-              "path": "../../utils/types/wizard.types"
+              "path": "../../utils/types/wizard.types",
+              "id": "src/utils/types/wizard.types.ts::WizardStatus"
             }
           }
         },
@@ -82,7 +84,7 @@ export class WizardIconComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\r\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

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

@@ -1,10 +1,9 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import WizardIconDocs from './wizard-icon.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const TemplateIcon = ({ state, step, checkIcon }) => {
-  return html `<div>
-    <b2b-wizard-icon state="${state}" step="${step}" check-icon="${checkIcon}">
-    </b2b-wizard-icon>
+  return html `<div>
+    <b2b-wizard-icon state="${state}" step="${step}" check-icon="${checkIcon}">
+    </b2b-wizard-icon>
   </div>`;
 };
 export const story005Default = TemplateIcon.bind({});
@@ -26,16 +25,19 @@ story020Pending.storyName = 'Pending';
 export const story030Disabled = TemplateIcon.bind({});
 story030Disabled.args = { state: 'disabled', step: '1' };
 story030Disabled.storyName = 'Disabled';
-const controls = { step: 'select' };
-const searchArgs = getArgTypes('b2b-wizard-icon', controls);
+const controls = {
+  step: 'select',
+};
+const wizardIconArgs = getArgTypes('b2b-wizard-icon', controls);
 export default {
   title: 'Components/Status & Feedback/Wizard Icon',
-  argTypes: Object.assign({}, searchArgs),
+  argTypes: Object.assign(Object.assign({}, wizardIconArgs), { state: {
+      options: ['completed', 'default', 'disabled', 'pending'],
+      control: 'radio',
+      table: { defaultValue: { summary: 'pending' } },
+    } }),
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },
-    docs: {
-      page: WizardIconDocs,
-    },
   },
 };

package/dist/collection/docs/config/replace-prop-controls.spec.js

@@ -1,4 +1,4 @@
-import { replacePropControls } from './replace-prop-controls';
+import { replacePropControls } from "./replace-prop-controls";
 describe('Get Args for Storybook', () => {
   const mockComponentDocs = {
     someProp: {

package/dist/collection/docs/config/utils.js

@@ -1,5 +1,5 @@
-import componentsArgs from './components-args.json';
-import { replacePropControls } from './replace-prop-controls';
+import componentsArgs from "./components-args.json";
+import { replacePropControls } from "./replace-prop-controls";
 /* Default controls can be changed by passing a controls object like so:
   { 'attribute-name': 'control-type' }
   example: { 'steps': 'select' }

package/dist/collection/docs/tokens/color.stories.js

@@ -1,34 +1,33 @@
-import { html } from 'lit-html';
-import allTokens from '@otto-de/b2b-tokens/build/js/default.json';
-import './styles.css';
-import colorDocs from './color.docs.mdx';
+import { html } from "lit-html";
+import allTokens from "@otto-de/b2b-tokens/build/js/default.json";
+import "./styles.css";
 const tokenRow = token => {
-  return html `
-    <tr>
-      <td>
-        <div style="background-color:${token.value};" class="color-box"></div>
-      </td>
-      <td>${token.name}</td>
-      <td>${token.value}</td>
-    </tr>
+  return html `
+    <tr>
+      <td>
+        <div style="background-color:${token.value};" class="color-box"></div>
+      </td>
+      <td>${token.name}</td>
+      <td>${token.value}</td>
+    </tr>
   `;
 };
 const tokenTable = (tokenGroup, groupName) => {
-  return html `
-    ${groupName && html `<b2b-headline size="200">${groupName}</b2b-headline>`}
-    <table style="width: 600px;">
-      <tbody>
+  return html `
+    ${groupName && html `<b2b-headline size="200">${groupName}</b2b-headline>`}
+    <table style="width: 600px;">
+      <tbody>
         ${tokenGroup.map(type => {
     const tokens = allTokens.color[type];
-    return html `
-            <tr>
-              <td colspan="3" class="token-type">${type}</td>
-            </tr>
-            ${tokens.map(token => tokenRow(token))}
+    return html `
+            <tr>
+              <td colspan="3" class="token-type">${type}</td>
+            </tr>
+            ${tokens.map(token => tokenRow(token))}
           `;
-  })}
-      </tbody>
-    </table>
+  })}
+      </tbody>
+    </table>
   `;
 };
 const semanticTopTokensList = [
@@ -42,18 +41,18 @@ const semanticTopTokensList = [
 const semanticBottomTokensList = ['error', 'warning', 'success', 'info'];
 const basicTokensList = ['black', 'white', 'grey', 'red'];
 const ColorTokens = ({}) => {
-  return html `
-    <b2b-headline>Color</b2b-headline>
-    <br />
-    ${tokenTable(semanticTopTokensList, 'Semantic Tokens')}
-    ${tokenTable(semanticBottomTokensList)}
-    <br /><br />
-    <b2b-headline size="200">Basic Tokens</b2b-headline>
-    <b2b-paragraph>
-      Remember to only use basic color tokens when there is no semantic version
-      available.</b2b-paragraph
-    >
-    ${tokenTable(basicTokensList)}
+  return html `
+    <b2b-headline>Color</b2b-headline>
+    <br />
+    ${tokenTable(semanticTopTokensList, 'Semantic Tokens')}
+    ${tokenTable(semanticBottomTokensList)}
+    <br /><br />
+    <b2b-headline size="200">Basic Tokens</b2b-headline>
+    <b2b-paragraph>
+      Remember to only use basic color tokens when there is no semantic version
+      available.</b2b-paragraph
+    >
+    ${tokenTable(basicTokensList)}
   `;
 };
 export const story010ColorTokens = ColorTokens.bind({});
@@ -62,12 +61,9 @@ story010ColorTokens.parameters = {
   controls: { hideNoControlsWarning: true },
 };
 export default {
-  title: 'DesignTokens/Color',
+  title: 'Design Tokens/Color',
   viewMode: 'docs',
   parameters: {
-    docs: {
-      page: colorDocs,
-    },
     options: {
       showPanel: false, // hides addons panel
     },

package/dist/collection/docs/tokens/font.stories.js

@@ -1,81 +1,76 @@
-import { html } from 'lit-html';
-import allTokens from '@otto-de/b2b-tokens/build/js/default.json';
-import './styles.css';
-import fontDocs from './font.docs.mdx';
+import { html } from "lit-html";
+import allTokens from "@otto-de/b2b-tokens/build/js/default.json";
+import "./styles.css";
 const tokenRow = (token, size) => {
-  return html `
-    <tr>
-      <td>${token.name}</td>
-      <td>${token.value}</td>
-      ${size && html `<td>${size}</td>`}
-    </tr>
+  return html `
+    <tr>
+      <td>${token.name}</td>
+      <td>${token.value}</td>
+      ${size && html `<td>${size}</td>`}
+    </tr>
   `;
 };
-const semanticTokens = html `
-  <b2b-headline size="200">Semantic tokens</b2b-headline>
-  <br />
-  <table style="width: 600px;">
-    ${html `
+const semanticTokens = html `
+  <b2b-headline size="200">Semantic tokens</b2b-headline>
+  <br />
+  <table style="width: 600px;">
+    ${html `
       ${['family', 'weight'].map(type => {
   const tokens = allTokens.font[type];
-  return html `
-          <tr>
-            <td colspan="3" class="token-type">${type}</td>
-          </tr>
-          ${tokens.map(token => tokenRow(token))}
+  return html `
+          <tr>
+            <td colspan="3" class="token-type">${type}</td>
+          </tr>
+          ${tokens.map(token => tokenRow(token))}
         `;
-})}
-    `}
-  </table>
+})}
+    `}
+  </table>
 `;
-const sizeTokens = html `
-  <table style="width: 600px;">
-    <thead>
-      <tr>
-        <th>Token Name</th>
-        <th>Value in rem</th>
-        <th>Value in px</th>
-      </tr>
-    </thead>
-    ${html `
+const sizeTokens = html `
+  <table style="width: 600px;">
+    <thead>
+      <tr>
+        <th>Token Name</th>
+        <th>Value in rem</th>
+        <th>Value in px</th>
+      </tr>
+    </thead>
+    ${html `
       ${['copy', 'headline'].map(type => {
   const tokens = allTokens.size[type];
-  return html `
-          <tr>
-            <td colspan="3" class="token-type">${type}</td>
-          </tr>
+  return html `
+          <tr>
+            <td colspan="3" class="token-type">${type}</td>
+          </tr>
           ${tokens.map(token => {
     const valueInPixels = parseFloat(token.value) * 16 + 'px';
     return tokenRow(token, valueInPixels);
-  })}
+  })}
         `;
-})}
-    `}
-  </table>
+})}
+    `}
+  </table>
 `;
 const FontTokens = ({}) => {
-  return html `
-    <b2b-headline>Font</b2b-headline>
-    <br />
-    ${semanticTokens}
-    <br /><br />
-    <b2b-headline size="100">Font sizes and line-height</b2b-headline>
-    <b2b-paragraph
-      >Please match the font size with the line-height of the same
-      level.</b2b-paragraph
-    >
-    ${sizeTokens}
+  return html `
+    <b2b-headline>Font</b2b-headline>
+    <br />
+    ${semanticTokens}
+    <br /><br />
+    <b2b-headline size="100">Font sizes and line-height</b2b-headline>
+    <b2b-paragraph
+      >Please match the font size with the line-height of the same
+      level.</b2b-paragraph
+    >
+    ${sizeTokens}
   `;
 };
 export const story010FontTokens = FontTokens.bind({});
 story010FontTokens.storyName = 'Font';
 export default {
-  title: 'DesignTokens/Font',
-  viewMode: 'docs',
+  title: 'Design Tokens/Font',
   parameters: {
-    docs: {
-      page: fontDocs,
-    },
     options: {
       showPanel: false, // hides addons panel
     },