From 40d74b1f183201fabcf31962fc3ad6514622f253 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 24 Apr 2024 22:28:01 +0200 Subject: [PATCH] fix: review --- .../breadcrumb-group/breadcrumb-group.scss | 5 ++++- .../loading-indicator.stories.ts | 21 +++++++------------ .../pearl-chain-vertical.stories.ts | 10 ++++----- .../skiplink-list/skiplink-list.stories.ts | 3 ++- .../tabs/tab-group/tab-group.stories.ts | 4 +++- src/storybook/styles/list/list.stories.ts | 8 ++++--- 6 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss index 8800db08d8b..eb38a387938 100644 --- 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 index a60b722e897..7da95c660c8 100644 --- 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 => { - await userEvent.click(within(canvasElement).getByTestId('trigger')); - await new Promise((resolve) => setTimeout(resolve, 2000)); -}; - const TemplateAccessibility = (args: Args): TemplateResult => html`
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`

Inline loading indicator

-

+ Adaptive to font size -

+
`; @@ -86,9 +80,9 @@ const NegativeInlineTemplate = (args: Args): TemplateResult => html`

Inline loading indicator

-

+ Adaptive to font size -

+ `; @@ -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 index bc07d3fd694..a6ff5133fc9 100644 --- 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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
@@ -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;" > -
+
09:45
Pl. 12
diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts index cbe3f4bd053..8743a7df7c4 100644 --- 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()} -

Use TAB to see the skiplink box

+ Use TAB to see the skiplink box `, ], parameters: { diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts index 0f698b7dc55..3aea79340f0 100644 --- 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` ${label} @@ -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. -

Content heading

+ Content heading 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 index 32fc77f966b..c31c04615c4 100644 --- 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`
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
  • @@ -16,7 +18,7 @@ const ListContent = (): TemplateResult => html` const UnorderedListTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

    Text size ${textSize}

    + Text size ${textSize}
      ${ListContent()}
    • @@ -33,7 +35,7 @@ const UnorderedListTemplate = (): TemplateResult => html` const OrderedListTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

      Text size ${textSize}

      + Text size ${textSize}
        ${ListContent()}
      1. @@ -50,7 +52,7 @@ const OrderedListTemplate = (): TemplateResult => html` const StepsTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

        Text size ${textSize}

        + Text size ${textSize}
          ${ListContent()}