fix: review

sbb-design-systems · Apr 24, 2024 · 40d74b1 · 40d74b1
1 parent f4ff519
commit 40d74b1
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 25 deletions.
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss
@@ -44,8 +44,11 @@
   --sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
 
   @include sbb.button-reset;
-  @include sbb.text--bold;
+  @include sbb.text-xxs--regular;
 
+  // line height and letter-spacing needed to match squares drawn in Figma.
+  line-height: 0;
+  letter-spacing: 0.01em;
   width: var(--sbb-size-icon-ui-small);
   height: var(--sbb-size-icon-ui-small);
   border: var(--sbb-breadcrumb-group-ellipsis-border-width) solid

diff --git a/src/components/loading-indicator/loading-indicator.stories.ts b/src/components/loading-indicator/loading-indicator.stories.ts
@@ -1,7 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -12,6 +10,7 @@ import type { SbbLoadingIndicatorElement } from './loading-indicator.js';
 import readme from './readme.md?raw';
 import '../button/button.js';
 import './loading-indicator.js';
+import '../title.js';
 
 const textBlockStyle: Args = {
   marginBlock: '1rem',
@@ -25,6 +24,7 @@ const negativeBlockStyle: Args = {
   backgroundColor: 'var(--sbb-color-iron)',
   color: 'var(--sbb-color-white)',
   padding: '2rem',
+  '--sbb-title-text-color-normal-override': 'var(--sbb-color-white)',
 };
 
 const createLoadingIndicator = (event: Event, args: Args): void => {
@@ -44,12 +44,6 @@ const createLoadingIndicator = (event: Event, args: Args): void => {
   }, 5000);
 };
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  await userEvent.click(within(canvasElement).getByTestId('trigger'));
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const TemplateAccessibility = (args: Args): TemplateResult => html`
   <div style=${styleMap(textBlockStyle)}>
     Turn on your screen-reader and click the button to make the loading indicator appear.
@@ -75,9 +69,9 @@ const InlineTemplate = (args: Args): TemplateResult => html`
     <p>
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Inline loading indicator
     </p>
-    <h2>
+    <sbb-title level="4">
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Adaptive to font size
-    </h2>
+    </sbb-title>
   </div>
 `;
 
@@ -86,9 +80,9 @@ const NegativeInlineTemplate = (args: Args): TemplateResult => html`
     <p>
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Inline loading indicator
     </p>
-    <h2>
+    <sbb-title level="4">
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Adaptive to font size
-    </h2>
+    </sbb-title>
   </div>
 `;
 
@@ -183,7 +177,6 @@ export const Accessibility: StoryObj = {
   render: TemplateAccessibility,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {

diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts b/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
@@ -320,7 +320,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -356,7 +356,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -385,7 +385,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -413,7 +413,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
         </div>
       </sbb-pearl-chain-vertical-item>
     </sbb-pearl-chain-vertical>
@@ -481,7 +481,7 @@ const TimetableChange = (): TemplateResult => {
           slot="right"
           style="--sbb-pearl-chain-vertical-right-item-block-start: -10px; --sbb-pearl-chain-vertical-right-item-inline-start: 10px;"
         >
-          <div style="display: flex; flex-direction: row; gap: 100px; font-weight: bold;">
+          <div style="display: flex; flex-direction: row; gap: 100px;" class="sbb-text--bold">
             <div>09:45</div>
             <div>Pl. 12</div>
           </div>

diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts
@@ -13,6 +13,7 @@ import readme from './readme.md?raw';
 
 import './skiplink-list.js';
 import '../link/block-link.js';
+import '../title.js';
 
 const titleContent: InputType = {
   control: {
@@ -143,7 +144,7 @@ const meta: Meta = {
   decorators: [
     (story) => html`
       ${story()}
-      <h2>Use TAB to see the skiplink box</h2>
+      <sbb-title level="4">Use TAB to see the skiplink box</sbb-title>
     `,
   ],
   parameters: {

diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -15,7 +15,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import { SbbTabGroupElement } from './tab-group.js';
+
 import '../tab-title.js';
+import '../../title.js';
 
 const firstTabTitle = (label: string, args: Args): TemplateResult => html`
   <sbb-tab-title ${sbbSpread(args)}>${label}</sbb-tab-title>
@@ -27,7 +29,7 @@ const tabPanelOne = (): TemplateResult => html`
     elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
     urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus
     turpis in eu mi bibendum neque egestas congue.
-    <h3>Content heading</h3>
+    <sbb-title level="5">Content heading</sbb-title>
     Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
     elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
     urna neque viverra justo nec.

diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts
@@ -4,6 +4,8 @@ import { html } from 'lit';
 
 import readme from './readme.md?raw';
 
+import '../../../components/title.js';
+
 const ListContent = (): TemplateResult => html`
   <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
   <li>
@@ -16,7 +18,7 @@ const ListContent = (): TemplateResult => html`
 const UnorderedListTemplate = (): TemplateResult => html`
   ${['xs', 's', 'm', 'l', 'xl'].map(
     (textSize) => html`
-      <h3>Text size ${textSize}</h3>
+      <sbb-title level="5">Text size ${textSize}</sbb-title>
       <ul class=${`sbb-list sbb-text-${textSize}`}>
         ${ListContent()}
         <li>
@@ -33,7 +35,7 @@ const UnorderedListTemplate = (): TemplateResult => html`
 const OrderedListTemplate = (): TemplateResult => html`
   ${['xs', 's', 'm', 'l', 'xl'].map(
     (textSize) => html`
-      <h3>Text size ${textSize}</h3>
+      <sbb-title level="5">Text size ${textSize}</sbb-title>
       <ol class=${`sbb-list sbb-text-${textSize}`}>
         ${ListContent()}
         <li>
@@ -50,7 +52,7 @@ const OrderedListTemplate = (): TemplateResult => html`
 const StepsTemplate = (): TemplateResult => html`
   ${['xs', 's', 'm', 'l', 'xl'].map(
     (textSize) => html`
-      <h3>Text size ${textSize}</h3>
+      <sbb-title level="5">Text size ${textSize}</sbb-title>
       <ol class=${`sbb-step-list sbb-text-${textSize}`}>
         ${ListContent()}
         <li>