@otto-de/b2b-core-components 1.8.0 → 1.9.0-beta.1

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

@@ -14,21 +14,21 @@ const Template = ({ position, trigger, content, triggerMarkup, buttons, opened,
     updateArgs({ opened: false });
   };
   const buttonMarkup = buttons
-    ? html `<b2b-button @click=${showToolTip} variant="primary"
-          >Show Tooltip</b2b-button
+    ? html `<b2b-button @click=${showToolTip} variant="primary"
+          >Show Tooltip</b2b-button
         ><b2b-button @click=${hideToolTip}>Hide Tooltip</b2b-button>`
     : null;
-  return html `${filler}<b2b-paragraph>
-      I am some text with a tooltip
-      <b2b-tooltip
-        position="${position}"
-        trigger="${trigger}"
-        content="${content}"
-        opened="${opened}"
-        data-testid="trigger"
-        >${markup}</b2b-tooltip
-      >
-    </b2b-paragraph>
+  return html `${filler}<b2b-paragraph>
+      I am some text with a tooltip
+      <b2b-tooltip
+        position="${position}"
+        trigger="${trigger}"
+        content="${content}"
+        opened="${opened}"
+        data-testid="trigger"
+        >${markup}</b2b-tooltip
+      >
+    </b2b-paragraph>
     ${buttonMarkup}`;
 };
 const defaultArgs = {
@@ -65,12 +65,12 @@ export const story080Right = Template.bind({});
 story080Right.args = Object.assign(Object.assign({}, defaultArgs), { position: 'top', opened: true, content: 'Topping halvah cake sugar plum marzipan jelly marshmallow lemon drops. Bonbon brownie powder sesame snaps fruitcake caramels toffee. Brownie pie cotton candy sesame snaps wafer sugar plum candy marzipan oat cake.' });
 story080Right.storyName = 'Tooltip with long text';
 const BlockTooltipTemplate = ({}) => {
-  return html `<b2b-tooltip
-    content="I am a tooltip"
-    position="right"
-    opened
-    style="display: inline-block"
-    ><b2b-input style="width: 300px"></b2b-input>
+  return html `<b2b-tooltip
+    content="I am a tooltip"
+    position="right"
+    opened
+    style="display: inline-block"
+    ><b2b-input style="width: 300px"></b2b-input>
   </b2b-tooltip> `;
 };
 export const story090BlockElement = BlockTooltipTemplate.bind({});
@@ -79,9 +79,9 @@ story090BlockElement.parameters = {
   controls: { hideNoControlsWarning: true },
   docs: {
     source: {
-      code: dedent `
-      <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
-        <b2b-input style="width: 300px"></b2b-input>
+      code: dedent `
+      <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
+        <b2b-input style="width: 300px"></b2b-input>
       </b2b-tooltip>`,
     },
   },

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

@@ -86,7 +86,7 @@ export class WizardStepComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\r\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

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

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

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

@@ -4,26 +4,26 @@ 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

@@ -96,7 +96,7 @@ export class WizardComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "By default, is false, where the wizard will handle steps states.\r\nIf set to true, steps state must be handled manually."
+          "text": "By default, is false, where the wizard will handle steps states.\nIf set to true, steps state must be handled manually."
         },
         "attribute": "custom",
         "reflect": false,
@@ -114,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.\r\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

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

@@ -1,27 +1,27 @@
 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({});

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

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

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

@@ -84,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.\r\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

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

@@ -1,9 +1,9 @@
 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({});

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

@@ -2,32 +2,32 @@ 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 = [
@@ -41,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({});

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

@@ -2,68 +2,68 @@ 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({});