From 5d4d9778051c6f8552fda00d7575bdeccb41399f Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 20 Nov 2024 14:40:39 +0100 Subject: [PATCH 01/14] feat: add isLean function --- src/elements/core/dom.ts | 1 + src/elements/core/dom/lean-context.ts | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 src/elements/core/dom/lean-context.ts diff --git a/src/elements/core/dom.ts b/src/elements/core/dom.ts index 5920d373a4..4c2f775f6f 100644 --- a/src/elements/core/dom.ts +++ b/src/elements/core/dom.ts @@ -3,6 +3,7 @@ export * from './dom/find-referenced-element.js'; export * from './dom/get-document-writing-mode.js'; export * from './dom/host-context.js'; export * from './dom/input-element.js'; +export * from './dom/lean-context.js'; export * from './dom/set-or-remove-attribute.js'; export * from './dom/platform.js'; export * from './dom/scroll.js'; diff --git a/src/elements/core/dom/lean-context.ts b/src/elements/core/dom/lean-context.ts new file mode 100644 index 0000000000..e7f1850705 --- /dev/null +++ b/src/elements/core/dom/lean-context.ts @@ -0,0 +1,6 @@ +/** + * Checks if the body has the `sbb-lean` class. + */ +export function isLean(): boolean { + return document.body.classList.contains('sbb-lean'); +} From b32d5d3e306a20f043d7c84bb30e5f038d78267d Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 21 Nov 2024 17:26:44 +0100 Subject: [PATCH 02/14] feat: use isLean function --- src/elements/accordion/accordion.ts | 3 ++- src/elements/accordion/readme.md | 2 +- src/elements/alert/alert/alert.ts | 3 ++- src/elements/alert/alert/readme.md | 2 +- src/elements/button/button-link/readme.md | 2 +- src/elements/button/button-static/readme.md | 2 +- src/elements/button/button/readme.md | 2 +- src/elements/button/common/button-common.ts | 3 ++- src/elements/button/mini-button-group/mini-button-group.ts | 3 ++- src/elements/button/mini-button-group/readme.md | 2 +- src/elements/button/secondary-button-link/readme.md | 2 +- src/elements/button/secondary-button-static/readme.md | 2 +- src/elements/button/secondary-button/readme.md | 2 +- src/elements/button/tertiary-button-link/readme.md | 2 +- src/elements/button/tertiary-button-static/readme.md | 2 +- src/elements/button/tertiary-button/readme.md | 2 +- src/elements/button/transparent-button-link/readme.md | 2 +- src/elements/button/transparent-button-static/readme.md | 2 +- src/elements/button/transparent-button/readme.md | 2 +- src/elements/card/card/card.ts | 4 +++- src/elements/card/card/readme.md | 2 +- src/elements/checkbox/checkbox-group/checkbox-group.ts | 3 ++- src/elements/checkbox/checkbox-group/readme.md | 2 +- src/elements/checkbox/checkbox-panel/checkbox-panel.ts | 3 ++- src/elements/checkbox/checkbox-panel/readme.md | 2 +- src/elements/checkbox/checkbox/checkbox.ts | 3 ++- src/elements/checkbox/checkbox/readme.md | 2 +- .../expansion-panel/expansion-panel/expansion-panel.ts | 3 ++- src/elements/expansion-panel/expansion-panel/readme.md | 2 +- src/elements/file-selector/file-selector.ts | 3 ++- src/elements/file-selector/readme.md | 2 +- src/elements/form-field/form-field/form-field.ts | 4 ++-- src/elements/form-field/form-field/readme.md | 2 +- src/elements/header/header/header.ts | 4 ++-- src/elements/header/header/readme.md | 2 +- src/elements/journey-header/journey-header.ts | 3 ++- src/elements/journey-header/readme.md | 2 +- src/elements/link-list/common/link-list-base.ts | 3 ++- src/elements/link-list/link-list-anchor/readme.md | 2 +- src/elements/link-list/link-list/readme.md | 2 +- src/elements/link/block-link-button/readme.md | 2 +- src/elements/link/block-link-static/readme.md | 2 +- src/elements/link/block-link/readme.md | 2 +- src/elements/link/common/link-common.ts | 3 ++- src/elements/link/link-button/readme.md | 2 +- src/elements/link/link-static/readme.md | 2 +- src/elements/link/link/readme.md | 2 +- src/elements/navigation/common/navigation-action-common.ts | 5 ++++- src/elements/navigation/navigation-button/readme.md | 2 +- src/elements/navigation/navigation-link/readme.md | 2 +- .../navigation/navigation-marker/navigation-marker.ts | 3 ++- src/elements/navigation/navigation-marker/readme.md | 2 +- src/elements/notification/notification.ts | 3 ++- src/elements/notification/readme.md | 2 +- src/elements/paginator/common/paginator-common.ts | 3 ++- src/elements/paginator/compact-paginator/readme.md | 2 +- src/elements/paginator/paginator/readme.md | 2 +- .../radio-button/radio-button-group/radio-button-group.ts | 3 ++- src/elements/radio-button/radio-button-group/readme.md | 2 +- .../radio-button/radio-button-panel/radio-button-panel.ts | 3 ++- src/elements/radio-button/radio-button-panel/readme.md | 2 +- src/elements/radio-button/radio-button/radio-button.ts | 3 ++- src/elements/radio-button/radio-button/readme.md | 2 +- src/elements/stepper/stepper/readme.md | 2 +- src/elements/stepper/stepper/stepper.ts | 4 ++-- src/elements/tag/tag-group/readme.md | 2 +- src/elements/tag/tag-group/tag-group.ts | 4 ++-- src/elements/tag/tag/readme.md | 2 +- src/elements/tag/tag/tag.ts | 3 ++- src/elements/toggle-check/readme.md | 2 +- src/elements/toggle-check/toggle-check.ts | 3 ++- src/elements/toggle/toggle/readme.md | 2 +- src/elements/toggle/toggle/toggle.ts | 3 ++- src/elements/visual-checkbox/readme.md | 2 +- src/elements/visual-checkbox/visual-checkbox.ts | 3 ++- 75 files changed, 106 insertions(+), 79 deletions(-) diff --git a/src/elements/accordion/accordion.ts b/src/elements/accordion/accordion.ts index 7e6ab50c03..fe4b117137 100644 --- a/src/elements/accordion/accordion.ts +++ b/src/elements/accordion/accordion.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbConnectedAbortController } from '../core/controllers.js'; import { forceType, handleDistinctChange } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { SbbHydrationMixin } from '../core/mixins.js'; import { SbbExpansionPanelElement } from '../expansion-panel.js'; import type { SbbTitleLevel } from '../title.js'; @@ -22,7 +23,7 @@ class SbbAccordionElement extends SbbHydrationMixin(LitElement) { /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. */ @property({ reflect: true }) - public accessor size: 's' | 'l' = 'l'; + public accessor size: 's' | 'l' = isLean() ? 's' : 'l'; /** * The heading level for the sbb-expansion-panel-headers within the component. diff --git a/src/elements/accordion/readme.md b/src/elements/accordion/readme.md index 3f5a5ba7df..790e71b5eb 100644 --- a/src/elements/accordion/readme.md +++ b/src/elements/accordion/readme.md @@ -53,7 +53,7 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------------------- | | `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. | -| `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. | +| `size` | `size` | public | `'s' \| 'l'` | | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. | | `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | ## Slots diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 5c09c0757f..45b56587ac 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { type LinkTargetType, SbbOpenCloseBaseElement } from '../../core/base-elements.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js'; import { SbbIconNameMixin } from '../../icon.js'; @@ -49,7 +50,7 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { public accessor readonly: boolean = false; /** You can choose between `s`, `m` or `l` size. */ - @property({ reflect: true }) public accessor size: 's' | 'm' | 'l' = 'm'; + @property({ reflect: true }) public accessor size: 's' | 'm' | 'l' = isLean() ? 's' : 'm'; /** * Name of the icon which will be forward to the nested `sbb-icon`. diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index cdd26b061f..2a2a3c185d 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -92,7 +92,7 @@ As a base rule, opening animations should be active if an alert arrives after th | `linkContent` | `link-content` | public | `string` | `''` | Content of the link. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m'` | You can choose between `s`, `m` or `l` size. | +| `size` | `size` | public | `'s' \| 'm' \| 'l'` | | You can choose between `s`, `m` or `l` size. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | | `titleContent` | `title-content` | public | `string` | `''` | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | diff --git a/src/elements/button/button-link/readme.md b/src/elements/button/button-link/readme.md index 49558eebbb..e14640dbb4 100644 --- a/src/elements/button/button-link/readme.md +++ b/src/elements/button/button-link/readme.md @@ -82,7 +82,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/button-static/readme.md b/src/elements/button/button-static/readme.md index e9741adf3f..85f156a5c3 100644 --- a/src/elements/button/button-static/readme.md +++ b/src/elements/button/button-static/readme.md @@ -62,7 +62,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | ## Slots diff --git a/src/elements/button/button/readme.md b/src/elements/button/button/readme.md index 979f647086..1653f9d6fd 100644 --- a/src/elements/button/button/readme.md +++ b/src/elements/button/button/readme.md @@ -87,7 +87,7 @@ guard against such cases in your component. | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/button/common/button-common.ts b/src/elements/button/common/button-common.ts index b86ab883a6..90a9968585 100644 --- a/src/elements/button/common/button-common.ts +++ b/src/elements/button/common/button-common.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import type { SbbActionBaseElement } from '../../core/base-elements.js'; import { hostAttributes, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import type { AbstractConstructor, SbbDisabledMixinType, @@ -38,7 +39,7 @@ export const SbbButtonCommonElementMixin = { /** Size variant, either l or m. */ - @property({ reflect: true }) public accessor size: SbbButtonSize = 'l'; + @property({ reflect: true }) public accessor size: SbbButtonSize = isLean() ? 's' : 'l'; protected override renderTemplate(): TemplateResult { return html` diff --git a/src/elements/button/mini-button-group/mini-button-group.ts b/src/elements/button/mini-button-group/mini-button-group.ts index 4715e89960..b66ebb787b 100644 --- a/src/elements/button/mini-button-group/mini-button-group.ts +++ b/src/elements/button/mini-button-group/mini-button-group.ts @@ -3,6 +3,7 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { forceType } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbNamedSlotListMixin, SbbNegativeMixin } from '../../core/mixins.js'; import type { SbbDividerElement } from '../../divider/divider.js'; import type { SbbMiniButtonElement } from '../mini-button/mini-button.js'; @@ -31,7 +32,7 @@ class SbbMiniButtonGroupElement extends SbbNegativeMixin( public accessor accessibilityLabel: string = ''; /** Size variant, either s, m, l or xl. */ - @property({ reflect: true }) public accessor size: SbbMiniButtonGroupSize = 'm'; + @property({ reflect: true }) public accessor size: SbbMiniButtonGroupSize = isLean() ? 's' : 'm'; protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); diff --git a/src/elements/button/mini-button-group/readme.md b/src/elements/button/mini-button-group/readme.md index cdc7b7368d..8337c6ef87 100644 --- a/src/elements/button/mini-button-group/readme.md +++ b/src/elements/button/mini-button-group/readme.md @@ -35,7 +35,7 @@ to ensure that the button list is read by screen readers with the correct size. | -------------------- | --------------------- | ------- | ------------------------ | ------- | --------------------------------------------------------------------------- | | `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the list that contains the buttons. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbMiniButtonGroupSize` | `'m'` | Size variant, either s, m, l or xl. | +| `size` | `size` | public | `SbbMiniButtonGroupSize` | | Size variant, either s, m, l or xl. | ## Slots diff --git a/src/elements/button/secondary-button-link/readme.md b/src/elements/button/secondary-button-link/readme.md index 54bc151fb5..793d976f2f 100644 --- a/src/elements/button/secondary-button-link/readme.md +++ b/src/elements/button/secondary-button-link/readme.md @@ -87,7 +87,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/secondary-button-static/readme.md b/src/elements/button/secondary-button-static/readme.md index ad9eb30407..9ab297da00 100644 --- a/src/elements/button/secondary-button-static/readme.md +++ b/src/elements/button/secondary-button-static/readme.md @@ -65,7 +65,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | ## Slots diff --git a/src/elements/button/secondary-button/readme.md b/src/elements/button/secondary-button/readme.md index 504ad5556a..33befac0bc 100644 --- a/src/elements/button/secondary-button/readme.md +++ b/src/elements/button/secondary-button/readme.md @@ -92,7 +92,7 @@ guard against such cases in your component. | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/button/tertiary-button-link/readme.md b/src/elements/button/tertiary-button-link/readme.md index 1252b2f40b..c6857bfbc7 100644 --- a/src/elements/button/tertiary-button-link/readme.md +++ b/src/elements/button/tertiary-button-link/readme.md @@ -87,7 +87,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/tertiary-button-static/readme.md b/src/elements/button/tertiary-button-static/readme.md index 9c3133deb3..3c3963d158 100644 --- a/src/elements/button/tertiary-button-static/readme.md +++ b/src/elements/button/tertiary-button-static/readme.md @@ -65,7 +65,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | ## Slots diff --git a/src/elements/button/tertiary-button/readme.md b/src/elements/button/tertiary-button/readme.md index 25599bf35a..1d8bebd247 100644 --- a/src/elements/button/tertiary-button/readme.md +++ b/src/elements/button/tertiary-button/readme.md @@ -92,7 +92,7 @@ guard against such cases in your component. | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/button/transparent-button-link/readme.md b/src/elements/button/transparent-button-link/readme.md index 7e5b799a00..137445f735 100644 --- a/src/elements/button/transparent-button-link/readme.md +++ b/src/elements/button/transparent-button-link/readme.md @@ -87,7 +87,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/transparent-button-static/readme.md b/src/elements/button/transparent-button-static/readme.md index 8b750e41b7..152ccf1573 100644 --- a/src/elements/button/transparent-button-static/readme.md +++ b/src/elements/button/transparent-button-static/readme.md @@ -65,7 +65,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | ## Slots diff --git a/src/elements/button/transparent-button/readme.md b/src/elements/button/transparent-button/readme.md index e76af3e528..cb958d509e 100644 --- a/src/elements/button/transparent-button/readme.md +++ b/src/elements/button/transparent-button/readme.md @@ -92,7 +92,7 @@ guard against such cases in your component. | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | `'l'` | Size variant, either l or m. | +| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/card/card/card.ts b/src/elements/card/card/card.ts index bb67f1ebb0..195913aae5 100644 --- a/src/elements/card/card/card.ts +++ b/src/elements/card/card/card.ts @@ -2,6 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; import { html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { isLean } from '../../core/dom.js'; + import style from './card.scss?lit&inline'; /** @@ -24,7 +26,7 @@ class SbbCardElement extends LitElement { | 'l' | 'xl' | 'xxl' - | 'xxxl' = 'm'; + | 'xxxl' = isLean() ? 'xs' : 'm'; /** Option to set the component's background color. */ @property({ reflect: true }) public accessor color: diff --git a/src/elements/card/card/readme.md b/src/elements/card/card/readme.md index 710fb68c67..bd67a5a97f 100644 --- a/src/elements/card/card/readme.md +++ b/src/elements/card/card/readme.md @@ -89,7 +89,7 @@ To improve coloring, it's needed to manually define styles for Window high contr | Name | Attribute | Privacy | Type | Default | Description | | ------- | --------- | ------- | ------------------------------------------------------------------------------ | --------- | -------------------------------------------------- | | `color` | `color` | public | `'white' \| 'milk' \| 'transparent-bordered' \| 'transparent-bordered-dashed'` | `'white'` | Option to set the component's background color. | -| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | +| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | | Size variant, either xs, s, m, l, xl, xxl or xxxl. | ## Slots diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.ts b/src/elements/checkbox/checkbox-group/checkbox-group.ts index 98dcb68c0c..ec92f4c377 100644 --- a/src/elements/checkbox/checkbox-group/checkbox-group.ts +++ b/src/elements/checkbox/checkbox-group/checkbox-group.ts @@ -5,6 +5,7 @@ import { customElement, property } from 'lit/decorators.js'; import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js'; import { SbbDisabledMixin } from '../../core/mixins.js'; import type { SbbCheckboxPanelElement } from '../checkbox-panel.js'; @@ -31,7 +32,7 @@ class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) { public accessor required: boolean = false; /** Size variant, either m or s. */ - @property() public accessor size: SbbCheckboxSize = 'm'; + @property() public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; /** Overrides the behaviour of `orientation` property. */ @property({ attribute: 'horizontal-from', reflect: true }) diff --git a/src/elements/checkbox/checkbox-group/readme.md b/src/elements/checkbox/checkbox-group/readme.md index 176068080b..7db302fca0 100644 --- a/src/elements/checkbox/checkbox-group/readme.md +++ b/src/elements/checkbox/checkbox-group/readme.md @@ -80,7 +80,7 @@ Two values are available, `s` and `m`, which is the default | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. | | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | | `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant, either m or s. | +| `size` | `size` | public | `SbbCheckboxSize` | | Size variant, either m or s. | ## Slots diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts index 43abf00d6d..efea179c93 100644 --- a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts +++ b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts @@ -9,6 +9,7 @@ import { import { customElement, property } from 'lit/decorators.js'; import { getOverride, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import type { SbbCheckedStateChange, @@ -60,7 +61,7 @@ class SbbCheckboxPanelElement extends SbbPanelMixin( /** Size variant. */ @property({ reflect: true }) @getOverride((i, v) => (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) - public accessor size: SbbPanelSize = 'm'; + public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; /** * @internal diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index a2a542115b..5824341659 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -86,7 +86,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbPanelSize` | | Size variant. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/checkbox/checkbox/checkbox.ts b/src/elements/checkbox/checkbox/checkbox.ts index 01afd89802..7cec535537 100644 --- a/src/elements/checkbox/checkbox/checkbox.ts +++ b/src/elements/checkbox/checkbox/checkbox.ts @@ -2,6 +2,7 @@ import { LitElement, html, type CSSResultGroup, type TemplateResult } from 'lit' import { customElement, property } from 'lit/decorators.js'; import { getOverride, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import type { SbbIconPlacement } from '../../core/interfaces.js'; import { SbbIconNameMixin } from '../../icon.js'; import { @@ -36,7 +37,7 @@ class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(SbbIconNameMixin( /** Size variant. */ @property({ reflect: true }) @getOverride((i, v) => i.group?.size ?? v) - public accessor size: SbbCheckboxSize = 'm'; + public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; /** The label position relative to the labelIcon. Defaults to end */ @property({ attribute: 'icon-placement', reflect: true }) diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index 6280437e87..cb8e1817b9 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -92,7 +92,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbCheckboxSize` | | Size variant. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts index f06d268127..e55304a0d7 100644 --- a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts @@ -5,6 +5,7 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import type { SbbOpenedClosedState } from '../../core/interfaces.js'; import { SbbHydrationMixin } from '../../core/mixins.js'; @@ -70,7 +71,7 @@ class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) { public accessor borderless: boolean = false; /** Size variant, either l or s. */ - @property({ reflect: true }) public accessor size: 's' | 'l' = 'l'; + @property({ reflect: true }) public accessor size: 's' | 'l' = isLean() ? 's' : 'l'; /** * The state of the notification. diff --git a/src/elements/expansion-panel/expansion-panel/readme.md b/src/elements/expansion-panel/expansion-panel/readme.md index 0b694e49f5..5ecf1f27d4 100644 --- a/src/elements/expansion-panel/expansion-panel/readme.md +++ b/src/elements/expansion-panel/expansion-panel/readme.md @@ -92,7 +92,7 @@ This can be achieved by adding an `aria-label`, `aria-labelledby` or `aria-descr | `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the panel is disabled, so its expanded state can't be changed. | | `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | -| `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s. | +| `size` | `size` | public | `'s' \| 'l'` | | Size variant, either l or s. | | `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | Heading level; if unset, a `div` will be rendered. | ## Events diff --git a/src/elements/file-selector/file-selector.ts b/src/elements/file-selector/file-selector.ts index c6d5d6c30d..4fd3f397ff 100644 --- a/src/elements/file-selector/file-selector.ts +++ b/src/elements/file-selector/file-selector.ts @@ -7,6 +7,7 @@ import type { SbbSecondaryButtonStaticElement } from '../button.js'; import { sbbInputModalityDetector } from '../core/a11y.js'; import { SbbLanguageController } from '../core/controllers.js'; import { forceType, slotState } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { EventEmitter, forwardEventToHost } from '../core/eventing.js'; import { i18nFileSelectorButtonLabel, @@ -50,7 +51,7 @@ class SbbFileSelectorElement extends SbbDisabledMixin(SbbFormAssociatedMixin(Lit @property() public accessor variant: 'default' | 'dropzone' = 'default'; /** Size variant, either s or m. */ - @property({ reflect: true }) public accessor size: 's' | 'm' = 'm'; + @property({ reflect: true }) public accessor size: 's' | 'm' = isLean() ? 's' : 'm'; /** Whether more than one file can be selected. */ @forceType() diff --git a/src/elements/file-selector/readme.md b/src/elements/file-selector/readme.md index c6842e925d..bb58cb37d3 100644 --- a/src/elements/file-selector/readme.md +++ b/src/elements/file-selector/readme.md @@ -98,7 +98,7 @@ It's suggested to have a different value for each variant, e.g.: | `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | | `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | +| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | | `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. | | `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | | `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts index 45e587a6fd..14531324d0 100644 --- a/src/elements/form-field/form-field/form-field.ts +++ b/src/elements/form-field/form-field/form-field.ts @@ -6,7 +6,7 @@ import type { SbbInputModality } from '../../core/a11y.js'; import { sbbInputModalityDetector } from '../../core/a11y.js'; import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js'; import { forceType, slotState } from '../../core/decorators.js'; -import { isFirefox, setOrRemoveAttribute } from '../../core/dom.js'; +import { isFirefox, isLean, setOrRemoveAttribute } from '../../core/dom.js'; import { i18nOptional } from '../../core/i18n.js'; import { SbbHydrationMixin, SbbNegativeMixin } from '../../core/mixins.js'; import type { SbbSelectElement } from '../../select.js'; @@ -76,7 +76,7 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) public accessor optional: boolean = false; /** Size variant, either l or m. */ - @property({ reflect: true }) public accessor size: 'l' | 'm' | 's' = 'm'; + @property({ reflect: true }) public accessor size: 'l' | 'm' | 's' = isLean() ? 's' : 'm'; /** Whether to display the form field without a border. */ @forceType() diff --git a/src/elements/form-field/form-field/readme.md b/src/elements/form-field/form-field/readme.md index 43d172a7cc..d444405b4f 100644 --- a/src/elements/form-field/form-field/readme.md +++ b/src/elements/form-field/form-field/readme.md @@ -157,7 +157,7 @@ technology will announce errors when they appear. | `inputElement` | - | public | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | Returns the input element. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `optional` | `optional` | public | `boolean` | `false` | Indicates whether the input is optional. | -| `size` | `size` | public | `'l' \| 'm' \| 's'` | `'m'` | Size variant, either l or m. | +| `size` | `size` | public | `'l' \| 'm' \| 's'` | | Size variant, either l or m. | | `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | ## Methods diff --git a/src/elements/header/header/header.ts b/src/elements/header/header/header.ts index f3627beda6..fc1f17385e 100644 --- a/src/elements/header/header/header.ts +++ b/src/elements/header/header/header.ts @@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { SbbFocusVisibleWithinController } from '../../core/a11y.js'; import { forceType } from '../../core/decorators.js'; -import { findReferencedElement } from '../../core/dom.js'; +import { findReferencedElement, isLean } from '../../core/dom.js'; import { SbbHydrationMixin } from '../../core/mixins.js'; import style from './header.scss?lit&inline'; @@ -51,7 +51,7 @@ class SbbHeaderElement extends SbbHydrationMixin(LitElement) { public accessor hideOnScroll: boolean = false; /** Size of the header. */ - @property({ reflect: true }) public accessor size: 'm' | 's' = 'm'; + @property({ reflect: true }) public accessor size: 'm' | 's' = isLean() ? 's' : 'm'; @state() private accessor _headerOnTop = true; diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md index 650ed05872..2f137b36e2 100644 --- a/src/elements/header/header/readme.md +++ b/src/elements/header/header/readme.md @@ -172,7 +172,7 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati | `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | | `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | | `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | -| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size of the header. | +| `size` | `size` | public | `'m' \| 's'` | | Size of the header. | ## CSS Properties diff --git a/src/elements/journey-header/journey-header.ts b/src/elements/journey-header/journey-header.ts index a8204a317d..6cf683a207 100644 --- a/src/elements/journey-header/journey-header.ts +++ b/src/elements/journey-header/journey-header.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbLanguageController } from '../core/controllers.js'; import { forceType } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo } from '../core/i18n.js'; import { SbbNegativeMixin } from '../core/mixins.js'; import type { SbbTitleLevel } from '../title.js'; @@ -49,7 +50,7 @@ class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) { @property() public accessor level: SbbTitleLevel = '3'; /** Journey header size. */ - @property({ reflect: true }) public accessor size: JourneyHeaderSize = 'm'; + @property({ reflect: true }) public accessor size: JourneyHeaderSize = isLean() ? 's' : 'm'; private _language = new SbbLanguageController(this); diff --git a/src/elements/journey-header/readme.md b/src/elements/journey-header/readme.md index 3111d26458..dc439400f2 100644 --- a/src/elements/journey-header/readme.md +++ b/src/elements/journey-header/readme.md @@ -55,4 +55,4 @@ The following one will be read as (locale: ENG): `Connection from Point A to Poi | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `origin` | `origin` | public | `string` | `''` | Origin location for the journey header. | | `roundTrip` | `round-trip` | public | `boolean` | `false` | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | -| `size` | `size` | public | `JourneyHeaderSize` | `'m'` | Journey header size. | +| `size` | `size` | public | `JourneyHeaderSize` | | Journey header size. | diff --git a/src/elements/link-list/common/link-list-base.ts b/src/elements/link-list/common/link-list-base.ts index c7b7ce1638..c1c253481c 100644 --- a/src/elements/link-list/common/link-list-base.ts +++ b/src/elements/link-list/common/link-list-base.ts @@ -3,6 +3,7 @@ import { html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; import { forceType, omitEmptyConverter, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbNamedSlotListMixin, SbbNegativeMixin, @@ -50,7 +51,7 @@ class SbbLinkListBaseElement extends SbbNegativeMixin( * Text size of the nested sbb-block-link instances. * This will overwrite the size attribute of nested sbb-block-link instances. */ - @property({ reflect: true }) public accessor size: SbbLinkSize = 's'; + @property({ reflect: true }) public accessor size: SbbLinkSize = isLean() ? 'xs' : 's'; protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); diff --git a/src/elements/link-list/link-list-anchor/readme.md b/src/elements/link-list/link-list-anchor/readme.md index c561bff4f4..7cd532b625 100644 --- a/src/elements/link-list/link-list-anchor/readme.md +++ b/src/elements/link-list/link-list-anchor/readme.md @@ -41,7 +41,7 @@ and it will sync its `size` and `negative` property with the inner links. | Name | Attribute | Privacy | Type | Default | Description | | -------------- | --------------- | ------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `size` | `size` | public | `SbbLinkSize` | | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | diff --git a/src/elements/link-list/link-list/readme.md b/src/elements/link-list/link-list/readme.md index afd475ed45..b55d8bb8c9 100644 --- a/src/elements/link-list/link-list/readme.md +++ b/src/elements/link-list/link-list/readme.md @@ -75,7 +75,7 @@ The title will not be displayed in the horizontal orientation. | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Selected breakpoint from which the list is rendered horizontally. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `size` | `size` | public | `SbbLinkSize` | | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | diff --git a/src/elements/link/block-link-button/readme.md b/src/elements/link/block-link-button/readme.md index 4e6dfba110..af9ea6030d 100644 --- a/src/elements/link/block-link-button/readme.md +++ b/src/elements/link/block-link-button/readme.md @@ -69,7 +69,7 @@ guard against such cases in your component. | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/link/block-link-static/readme.md b/src/elements/link/block-link-static/readme.md index 386d974f62..e9315299c1 100644 --- a/src/elements/link/block-link-static/readme.md +++ b/src/elements/link/block-link-static/readme.md @@ -44,7 +44,7 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | ## Slots diff --git a/src/elements/link/block-link/readme.md b/src/elements/link/block-link/readme.md index cbe1a34c04..e3e6531e32 100644 --- a/src/elements/link/block-link/readme.md +++ b/src/elements/link/block-link/readme.md @@ -60,7 +60,7 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/link/common/link-common.ts b/src/elements/link/common/link-common.ts index b91a48a627..3598660856 100644 --- a/src/elements/link/common/link-common.ts +++ b/src/elements/link/common/link-common.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import type { SbbActionBaseElement } from '../../core/base-elements.js'; import { hostAttributes, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbNegativeMixin, type SbbNegativeMixinType, @@ -34,7 +35,7 @@ export const SbbLinkCommonElementMixin = `; diff --git a/src/elements/link/link-button/readme.md b/src/elements/link/link-button/readme.md index 11745d680d..8ae64ac891 100644 --- a/src/elements/link/link-button/readme.md +++ b/src/elements/link/link-button/readme.md @@ -54,7 +54,7 @@ guard against such cases in your component. | `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/link/link-static/readme.md b/src/elements/link/link-static/readme.md index 0030673401..1340464b5a 100644 --- a/src/elements/link/link-static/readme.md +++ b/src/elements/link/link-static/readme.md @@ -25,7 +25,7 @@ The component can be displayed in `disabled` state using the self-named property | ---------- | ---------- | ------- | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | ## Slots diff --git a/src/elements/link/link/readme.md b/src/elements/link/link/readme.md index 249c57990e..26786af65d 100644 --- a/src/elements/link/link/readme.md +++ b/src/elements/link/link/readme.md @@ -39,7 +39,7 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). | `href` | `href` | public | `string` | `''` | The href value you want to link to. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/navigation/common/navigation-action-common.ts b/src/elements/navigation/common/navigation-action-common.ts index 04a91db9ae..419b92a352 100644 --- a/src/elements/navigation/common/navigation-action-common.ts +++ b/src/elements/navigation/common/navigation-action-common.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import type { SbbActionBaseElement } from '../../core/base-elements.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; +import { isLean } from '../../core/dom.js'; import type { AbstractConstructor } from '../../core/mixins.js'; import type { SbbNavigationButtonElement } from '../navigation-button.js'; import type { SbbNavigationLinkElement } from '../navigation-link.js'; @@ -36,7 +37,9 @@ export const SbbNavigationActionCommonElementMixin = < public static styles: CSSResultGroup = style; /** Action size variant. */ - @property({ reflect: true }) public accessor size: SbbNavigationActionSize = 'l'; + @property({ reflect: true }) public accessor size: SbbNavigationActionSize = isLean() + ? 's' + : 'l'; /** The section that is beign controlled by the action, if any. */ public connectedSection?: SbbNavigationSectionElement; diff --git a/src/elements/navigation/navigation-button/readme.md b/src/elements/navigation/navigation-button/readme.md index d2f78177ce..496be502ed 100644 --- a/src/elements/navigation/navigation-button/readme.md +++ b/src/elements/navigation/navigation-button/readme.md @@ -38,7 +38,7 @@ The component has three different sizes, which can be changed using the `size` p | `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | -| `size` | `size` | public | `SbbNavigationActionSize` | `'l'` | Action size variant. | +| `size` | `size` | public | `SbbNavigationActionSize` | | Action size variant. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/navigation/navigation-link/readme.md b/src/elements/navigation/navigation-link/readme.md index 5b6dd5e0e8..72a5da72a3 100644 --- a/src/elements/navigation/navigation-link/readme.md +++ b/src/elements/navigation/navigation-link/readme.md @@ -40,7 +40,7 @@ The component has three different sizes, which can be changed using the `size` p | `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | | `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | | `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | -| `size` | `size` | public | `SbbNavigationActionSize` | `'l'` | Action size variant. | +| `size` | `size` | public | `SbbNavigationActionSize` | | Action size variant. | | `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/navigation/navigation-marker/navigation-marker.ts b/src/elements/navigation/navigation-marker/navigation-marker.ts index 711b5fbadb..c8f1bee0a5 100644 --- a/src/elements/navigation/navigation-marker/navigation-marker.ts +++ b/src/elements/navigation/navigation-marker/navigation-marker.ts @@ -2,6 +2,7 @@ import { ResizeController } from '@lit-labs/observers/resize-controller.js'; import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js'; import type { SbbNavigationButtonElement } from '../navigation-button.js'; import type { SbbNavigationLinkElement } from '../navigation-link.js'; @@ -28,7 +29,7 @@ class SbbNavigationMarkerElement extends SbbNamedSlotListMixin< /** * Marker size variant. */ - @property({ reflect: true }) public accessor size: 'l' | 's' = 'l'; + @property({ reflect: true }) public accessor size: 'l' | 's' = isLean() ? 's' : 'l'; private _currentActiveAction?: SbbNavigationButtonElement | SbbNavigationLinkElement; diff --git a/src/elements/navigation/navigation-marker/readme.md b/src/elements/navigation/navigation-marker/readme.md index b89e7a35ce..26203654e4 100644 --- a/src/elements/navigation/navigation-marker/readme.md +++ b/src/elements/navigation/navigation-marker/readme.md @@ -29,7 +29,7 @@ Possible values are `l` (default) and `s`. | Name | Attribute | Privacy | Type | Default | Description | | ------ | --------- | ------- | ------------ | ------- | -------------------- | -| `size` | `size` | public | `'l' \| 's'` | `'l'` | Marker size variant. | +| `size` | `size` | public | `'l' \| 's'` | | Marker size variant. | ## Methods diff --git a/src/elements/notification/notification.ts b/src/elements/notification/notification.ts index 56d2960e18..bef33404ba 100644 --- a/src/elements/notification/notification.ts +++ b/src/elements/notification/notification.ts @@ -5,6 +5,7 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbLanguageController } from '../core/controllers.js'; import { forceType, omitEmptyConverter, slotState } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { EventEmitter } from '../core/eventing.js'; import { i18nCloseNotification } from '../core/i18n.js'; import type { SbbOpenedClosedState } from '../core/interfaces.js'; @@ -71,7 +72,7 @@ class SbbNotificationElement extends LitElement { public accessor readonly: boolean = false; /** Size variant, either s or m. */ - @property({ reflect: true }) public accessor size: 'm' | 's' = 'm'; + @property({ reflect: true }) public accessor size: 'm' | 's' = isLean() ? 's' : 'm'; /** The enabled animations. */ @property({ reflect: true }) public accessor animation: 'open' | 'close' | 'all' | 'none' = 'all'; diff --git a/src/elements/notification/readme.md b/src/elements/notification/readme.md index d972265720..a37872879b 100644 --- a/src/elements/notification/readme.md +++ b/src/elements/notification/readme.md @@ -84,7 +84,7 @@ As a base rule, opening animations should be active if a notification arrives af | -------------- | --------------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------- | | `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | -| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either s or m. | +| `size` | `size` | public | `'m' \| 's'` | | Size variant, either s or m. | | `titleContent` | `title-content` | public | `string` | `''` | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | | `type` | `type` | public | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification. | diff --git a/src/elements/paginator/common/paginator-common.ts b/src/elements/paginator/common/paginator-common.ts index ead400fb34..7e26fd90ad 100644 --- a/src/elements/paginator/common/paginator-common.ts +++ b/src/elements/paginator/common/paginator-common.ts @@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { hostAttributes } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import { i18nNextPage, i18nPreviousPage, i18nSelectedPage } from '../../core/i18n.js'; import type { SbbPaginatorPageEventDetails } from '../../core/interfaces.js'; @@ -86,7 +87,7 @@ export const SbbPaginatorCommonElementMixin = = new EventEmitter( this, diff --git a/src/elements/paginator/compact-paginator/readme.md b/src/elements/paginator/compact-paginator/readme.md index 585e2cb9de..a72badfa29 100644 --- a/src/elements/paginator/compact-paginator/readme.md +++ b/src/elements/paginator/compact-paginator/readme.md @@ -65,7 +65,7 @@ that describes the content controlled by the paginator. | `pageIndex` | `page-index` | public | `number` | `0` | Current page index. | | `pagerPosition` | `pager-position` | public | `'start' \| 'end'` | `'start'` | Position of the prev/next buttons. | | `pageSize` | `page-size` | public | `number` | `10` | Number of items per page. | -| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either m or s. | +| `size` | `size` | public | `'m' \| 's'` | | Size variant, either m or s. | ## Events diff --git a/src/elements/paginator/paginator/readme.md b/src/elements/paginator/paginator/readme.md index 7e9d77d7b6..a1f070c688 100644 --- a/src/elements/paginator/paginator/readme.md +++ b/src/elements/paginator/paginator/readme.md @@ -74,7 +74,7 @@ that describes the content controlled by the paginator. | `pagerPosition` | `pager-position` | public | `'start' \| 'end'` | `'start'` | Position of the prev/next buttons: if `pageSizeOptions` is set, the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center. | | `pageSize` | `page-size` | public | `number` | `10` | Number of items per page. | | `pageSizeOptions` | `page-size-options` | public | `number[] \| undefined` | | The available `pageSize` choices. | -| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either m or s. | +| `size` | `size` | public | `'m' \| 's'` | | Size variant, either m or s. | ## Events diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.ts b/src/elements/radio-button/radio-button-group/radio-button-group.ts index 871ec403a1..7a8792b6bb 100644 --- a/src/elements/radio-button/radio-button-group/radio-button-group.ts +++ b/src/elements/radio-button/radio-button-group/radio-button-group.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType, hostAttributes, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js'; import { SbbDisabledMixin } from '../../core/mixins.js'; @@ -79,7 +80,7 @@ class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) { /** * Size variant. */ - @property() public accessor size: SbbRadioButtonSize = 'm'; + @property() public accessor size: SbbRadioButtonSize = isLean() ? 'xs' : 'm'; /** * Overrides the behaviour of `orientation` property. diff --git a/src/elements/radio-button/radio-button-group/readme.md b/src/elements/radio-button/radio-button-group/readme.md index c2aeeda198..2f3e6ec799 100644 --- a/src/elements/radio-button/radio-button-group/readme.md +++ b/src/elements/radio-button/radio-button-group/readme.md @@ -79,7 +79,7 @@ In order to ensure readability for screen-readers, please provide an `aria-label | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Radio group's orientation, either horizontal or vertical. | | `radioButtons` | - | public | `(SbbRadioButtonElement \| SbbRadioButtonPanelElement)[]` | | List of contained radio buttons. | | `required` | `required` | public | `boolean` | `false` | Whether the radio group is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbRadioButtonSize` | | Size variant. | | `value` | `value` | public | `any \| null` | | The value of the radio group. | ## Events diff --git a/src/elements/radio-button/radio-button-panel/radio-button-panel.ts b/src/elements/radio-button/radio-button-panel/radio-button-panel.ts index a68c565acf..0e9d9cf888 100644 --- a/src/elements/radio-button/radio-button-panel/radio-button-panel.ts +++ b/src/elements/radio-button/radio-button-panel/radio-button-panel.ts @@ -9,6 +9,7 @@ import { import { customElement, property } from 'lit/decorators.js'; import { getOverride, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { panelCommonStyle, type SbbFormAssociatedRadioButtonMixinType, @@ -51,7 +52,7 @@ class SbbRadioButtonPanelElement extends SbbPanelMixin( /** Size variant. */ @property({ reflect: true }) @getOverride((i, v) => (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) - public accessor size: SbbPanelSize = 'm'; + public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; private _hasSelectionExpansionPanelElement: boolean = false; diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md index 42e972f771..65b91e731e 100644 --- a/src/elements/radio-button/radio-button-panel/readme.md +++ b/src/elements/radio-button/radio-button-panel/readme.md @@ -76,7 +76,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbPanelSize` | | Size variant. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/radio-button/radio-button/radio-button.ts b/src/elements/radio-button/radio-button/radio-button.ts index 191cb3dbbc..5f0b76d50e 100644 --- a/src/elements/radio-button/radio-button/radio-button.ts +++ b/src/elements/radio-button/radio-button/radio-button.ts @@ -3,6 +3,7 @@ import { LitElement, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { getOverride, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbRadioButtonCommonElementMixin, radioButtonCommonStyle, @@ -33,7 +34,7 @@ class SbbRadioButtonElement extends SbbRadioButtonCommonElementMixin(LitElement) /** Size variant. */ @property({ reflect: true }) @getOverride((i, v) => i.group?.size ?? v) - public accessor size: SbbRadioButtonSize = 'm'; + public accessor size: SbbRadioButtonSize = isLean() ? 'xs' : 'm'; protected override render(): TemplateResult { return html` diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index eede67914c..23b9b66401 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -67,7 +67,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbRadioButtonSize` | | Size variant. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/stepper/stepper/readme.md b/src/elements/stepper/stepper/readme.md index 882cc9e4f3..3f30fb61dd 100644 --- a/src/elements/stepper/stepper/readme.md +++ b/src/elements/stepper/stepper/readme.md @@ -110,7 +110,7 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | | `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. | | `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | +| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | | `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | ## Methods diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 1a5174d720..3af33ebb6f 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js'; import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; -import { breakpoints, isBreakpoint } from '../../core/dom.js'; +import { breakpoints, isBreakpoint, isLean } from '../../core/dom.js'; import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js'; import { SbbHydrationMixin } from '../../core/mixins.js'; import type { SbbStepElement, SbbStepValidateEventDetails } from '../step.js'; @@ -53,7 +53,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { public accessor orientation: SbbOrientation = 'horizontal'; /** Size variant, either s or m. */ - @property({ reflect: true }) public accessor size: 's' | 'm' = 'm'; + @property({ reflect: true }) public accessor size: 's' | 'm' = isLean() ? 's' : 'm'; /** The currently selected step. */ @property({ attribute: false }) diff --git a/src/elements/tag/tag-group/readme.md b/src/elements/tag/tag-group/readme.md index ca2dab053c..ac8daf1dfc 100644 --- a/src/elements/tag/tag-group/readme.md +++ b/src/elements/tag/tag-group/readme.md @@ -107,7 +107,7 @@ that communicates the collective meaning of all `sbb-tag`s. | ------------------------ | -------------------------- | ------- | -------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner list. | | `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | -| `size` | `size` | public | `SbbTagSize` | `'m'` | Tag group size. | +| `size` | `size` | public | `SbbTagSize` | | Tag group size. | | `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | | `value` | `value` | public | `string \| (string \| null)[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | diff --git a/src/elements/tag/tag-group/tag-group.ts b/src/elements/tag/tag-group/tag-group.ts index 5519e61c69..f5ecc426c4 100644 --- a/src/elements/tag/tag-group/tag-group.ts +++ b/src/elements/tag/tag-group/tag-group.ts @@ -9,7 +9,7 @@ import { import { customElement, property } from 'lit/decorators.js'; import { forceType } from '../../core/decorators.js'; -import { setOrRemoveAttribute } from '../../core/dom.js'; +import { isLean, setOrRemoveAttribute } from '../../core/dom.js'; import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js'; import type { SbbTagElement, SbbTagSize } from '../tag.js'; @@ -47,7 +47,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin i._group?.size ?? v) - public accessor size: SbbTagSize = 'm'; + public accessor size: SbbTagSize = isLean() ? 's' : 'm'; /** Reference to the connected tag group. */ private _group: SbbTagGroupElement | null = null; diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 532d0a7978..686651e316 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -73,7 +73,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `labelPosition` | `label-position` | public | `'before' \| 'after'` | `'after'` | The label position relative to the toggle. Defaults to 'after' | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `'xs' \| 's' \| 'm'` | `'s'` | Size variant, either m, s or xs. | +| `size` | `size` | public | `'xs' \| 's' \| 'm'` | | Size variant, either m, s or xs. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/toggle-check/toggle-check.ts b/src/elements/toggle-check/toggle-check.ts index 21382b758e..d3704d88f0 100644 --- a/src/elements/toggle-check/toggle-check.ts +++ b/src/elements/toggle-check/toggle-check.ts @@ -3,6 +3,7 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { forceType, slotState } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { SbbFormAssociatedCheckboxMixin } from '../core/mixins.js'; import { SbbIconNameMixin } from '../icon.js'; @@ -27,7 +28,7 @@ class SbbToggleCheckElement extends SbbFormAssociatedCheckboxMixin(SbbIconNameMi } as const; /** Size variant, either m, s or xs. */ - @property({ reflect: true }) public accessor size: 'xs' | 's' | 'm' = 's'; + @property({ reflect: true }) public accessor size: 'xs' | 's' | 'm' = isLean() ? 'xs' : 's'; /** The svg name for the true state - default -> 'tick-small' */ @forceType() diff --git a/src/elements/toggle/toggle/readme.md b/src/elements/toggle/toggle/readme.md index 4b2b55e154..3f335ea558 100644 --- a/src/elements/toggle/toggle/readme.md +++ b/src/elements/toggle/toggle/readme.md @@ -39,7 +39,7 @@ The component has two different sizes, `s` and `m` (default), which can be set u | `disabled` | `disabled` | public | `boolean` | `false` | Whether the toggle is disabled. | | `even` | `even` | public | `boolean` | `false` | If true, set the width of the component fixed; if false, the width is dynamic based on the label of the sbb-toggle-option. | | `options` | - | public | `SbbToggleOptionElement[]` | | The child instances of sbb-toggle-option as an array. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either m or s. | +| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either m or s. | | `value` | `value` | public | `string` | `null` | The value of the toggle. It needs to be mutable since it is updated whenever a new option is selected (see the `onToggleOptionSelect()` method). | ## Events diff --git a/src/elements/toggle/toggle/toggle.ts b/src/elements/toggle/toggle/toggle.ts index a228c57640..2b35793172 100644 --- a/src/elements/toggle/toggle/toggle.ts +++ b/src/elements/toggle/toggle/toggle.ts @@ -12,6 +12,7 @@ import { customElement, property } from 'lit/decorators.js'; import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType, handleDistinctChange, hostAttributes } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter } from '../../core/eventing.js'; import type { SbbToggleOptionElement } from '../toggle-option.js'; @@ -51,7 +52,7 @@ class SbbToggleElement extends LitElement { public accessor even: boolean = false; /** Size variant, either m or s. */ - @property({ reflect: true }) public accessor size: 's' | 'm' = 'm'; + @property({ reflect: true }) public accessor size: 's' | 'm' = isLean() ? 's' : 'm'; /** * The value of the toggle. It needs to be mutable since it is updated whenever diff --git a/src/elements/visual-checkbox/readme.md b/src/elements/visual-checkbox/readme.md index 03544c8ac1..d0ba77dd29 100644 --- a/src/elements/visual-checkbox/readme.md +++ b/src/elements/visual-checkbox/readme.md @@ -32,4 +32,4 @@ The component has three `size`, named `xs`, `s` and `m` (default). | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `indeterminate` | `indeterminate` | public | `boolean` | `false` | Indeterminate state. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size of the checkbox. | +| `size` | `size` | public | `SbbCheckboxSize` | | Size of the checkbox. | diff --git a/src/elements/visual-checkbox/visual-checkbox.ts b/src/elements/visual-checkbox/visual-checkbox.ts index 4309312db9..49df1fc001 100644 --- a/src/elements/visual-checkbox/visual-checkbox.ts +++ b/src/elements/visual-checkbox/visual-checkbox.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import type { SbbCheckboxSize } from '../checkbox/common.js'; import { forceType } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { SbbDisabledMixin, SbbNegativeMixin } from '../core/mixins.js'; import style from './visual-checkbox.scss?lit&inline'; @@ -27,7 +28,7 @@ class SbbVisualCheckboxElement extends SbbDisabledMixin(SbbNegativeMixin(LitElem public accessor indeterminate: boolean = false; /** Size of the checkbox. */ - @property({ reflect: true }) public accessor size: SbbCheckboxSize = 'm'; + @property({ reflect: true }) public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; protected override render(): TemplateResult { return html` From c8b12553d419794a3192f3ccdd8f8fe5c97db5d7 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 22 Nov 2024 16:50:24 +0100 Subject: [PATCH 03/14] feat: use isLean function, add new lean stories, refactor home stories --- .storybook/preview.ts | 26 +- docs/GETTING_STARTED.md | 15 + src/elements/action-group/action-group.ts | 5 +- src/elements/action-group/readme.md | 4 +- src/elements/alert/alert/alert.ts | 2 +- .../checkbox/checkbox-panel/checkbox-panel.ts | 4 +- src/elements/dialog/dialog-actions/readme.md | 4 +- .../navigation-list/navigation-list.ts | 3 +- .../paginator/common/paginator-common.ts | 5 +- .../radio-button-panel/radio-button-panel.ts | 4 +- src/elements/skiplink-list/skiplink-list.ts | 3 +- src/elements/tabs/tab-group/readme.md | 2 +- src/elements/tabs/tab-group/tab-group.ts | 3 +- src/elements/toast/toast.ts | 4 +- .../pages/home/home-lean-logged-in.ts | 262 ++++++++++++++++++ src/storybook/pages/home/home-lean.ts | 142 ++++++++++ ...logged-in.stories.ts => home-logged-in.ts} | 40 +-- src/storybook/pages/home/home.common.ts | 46 +-- src/storybook/pages/home/home.stories.ts | 165 ++--------- src/storybook/pages/home/home.ts | 143 ++++++++++ 20 files changed, 668 insertions(+), 214 deletions(-) create mode 100644 src/storybook/pages/home/home-lean-logged-in.ts create mode 100644 src/storybook/pages/home/home-lean.ts rename src/storybook/pages/home/{home--logged-in.stories.ts => home-logged-in.ts} (92%) create mode 100644 src/storybook/pages/home/home.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 02f4696a20..1a706f7e58 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,6 +5,30 @@ import type { Preview } from '@storybook/web-components'; import '../src/elements/core/styles/standard-theme.scss'; +/** + * The Lean design is applied by adding the 'sbb-lean' class to the document's body. + */ +const withLeanDecorator = makeDecorator({ + name: 'withLeanStyle', + parameterName: 'isLean', + skipIfNoParametersOrOptions: false, + wrapper: (getStory, context, { parameters }) => { + const isLean = parameters as unknown as boolean; + + const rootElement = (context.canvasElement as unknown as HTMLElement).closest( + '.docs-story, .sb-show-main', + )!; + + if (isLean) { + rootElement.classList.add('sbb-lean'); + } else { + rootElement.classList.remove('sbb-lean'); + } + + return getStory(context); + }, +}); + const withBackgroundDecorator = makeDecorator({ name: 'withContextSpecificBackgroundColor', parameterName: 'backgroundColor', @@ -78,7 +102,7 @@ const parameters: Parameters = { }; const preview: Preview = { - decorators: [withBackgroundDecorator], + decorators: [withBackgroundDecorator, withLeanDecorator], parameters, tags: ['autodocs'], }; diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 50c602ae87..72d93d3041 100644 --- a/docs/GETTING_STARTED.md +++ b/docs/GETTING_STARTED.md @@ -193,6 +193,21 @@ and on [storybook](https://lyne-storybook.app.sbb.ch). ## Styles +### Lean variant + +Lean uses a more compact design. To activate it, add the CSS class `sbb-lean` on the document's body tag. + +```html + + + Lyne Design System - Lean example + + + ... + + +``` + ### CSS files Basically, all our styles are included in 'standard-theme.css' which should be included in your application. diff --git a/src/elements/action-group/action-group.ts b/src/elements/action-group/action-group.ts index 49b7f0332c..fadcdde7d4 100644 --- a/src/elements/action-group/action-group.ts +++ b/src/elements/action-group/action-group.ts @@ -3,6 +3,7 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import type { SbbButtonCommonElement, SbbButtonSize } from '../button.js'; +import { isLean } from '../core/dom.js'; import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js'; import type { SbbBlockLinkButtonElement, @@ -46,14 +47,14 @@ class SbbActionGroupElement extends LitElement { * sbb-button instances. */ @property({ attribute: 'button-size', reflect: true }) - public accessor buttonSize: SbbButtonSize = 'l'; + public accessor buttonSize: SbbButtonSize = isLean() ? 's' : 'l'; /** * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested * sbb-block-link instances. */ @property({ attribute: 'link-size', reflect: true }) - public accessor linkSize: SbbLinkSize = 'm'; + public accessor linkSize: SbbLinkSize = isLean() ? 'xs' : 'm'; protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); diff --git a/src/elements/action-group/readme.md b/src/elements/action-group/readme.md index b595fd7fa2..492189745e 100644 --- a/src/elements/action-group/readme.md +++ b/src/elements/action-group/readme.md @@ -123,9 +123,9 @@ The values for `align-group` and `align-self` for the various allocations are as | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 45b56587ac..90df02f856 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -193,7 +193,7 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { > this.requestDismissal()} aria-label=${i18nCloseAlert[this._language.current]} diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts index efea179c93..b5e0c504bc 100644 --- a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts +++ b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts @@ -60,7 +60,9 @@ class SbbCheckboxPanelElement extends SbbPanelMixin( /** Size variant. */ @property({ reflect: true }) - @getOverride((i, v) => (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) + @getOverride((i, v) => + i.group?.size ? (isLean() || i.group.size === 'xs' ? 's' : i.group.size) : v, + ) public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; /** diff --git a/src/elements/dialog/dialog-actions/readme.md b/src/elements/dialog/dialog-actions/readme.md index f2e1616e29..91b3c764c4 100644 --- a/src/elements/dialog/dialog-actions/readme.md +++ b/src/elements/dialog/dialog-actions/readme.md @@ -17,9 +17,9 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/elements | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/elements/navigation/navigation-list/navigation-list.ts b/src/elements/navigation/navigation-list/navigation-list.ts index 7b0ccbad82..d98f2723b2 100644 --- a/src/elements/navigation/navigation-list/navigation-list.ts +++ b/src/elements/navigation/navigation-list/navigation-list.ts @@ -8,6 +8,7 @@ import { import { customElement, property } from 'lit/decorators.js'; import { forceType, omitEmptyConverter, slotState } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js'; import type { SbbNavigationButtonElement } from '../navigation-button.js'; import type { SbbNavigationLinkElement } from '../navigation-link.js'; @@ -44,7 +45,7 @@ class SbbNavigationListElement extends SbbNamedSlotListMixin< super.willUpdate(changedProperties); if (changedProperties.has('listChildren')) { - this.listChildren.forEach((c) => (c.size = 'm')); + this.listChildren.forEach((c) => (c.size = isLean() ? 's' : 'm')); } } diff --git a/src/elements/paginator/common/paginator-common.ts b/src/elements/paginator/common/paginator-common.ts index 7e26fd90ad..8aaf6d157b 100644 --- a/src/elements/paginator/common/paginator-common.ts +++ b/src/elements/paginator/common/paginator-common.ts @@ -149,7 +149,10 @@ export const SbbPaginatorCommonElementMixin = + (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) + @getOverride((i, v) => + i.group?.size ? (isLean() || i.group.size === 'xs' ? 's' : i.group.size) : v, + ) public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; private _hasSelectionExpansionPanelElement: boolean = false; diff --git a/src/elements/skiplink-list/skiplink-list.ts b/src/elements/skiplink-list/skiplink-list.ts index 269459060a..c0a9720550 100644 --- a/src/elements/skiplink-list/skiplink-list.ts +++ b/src/elements/skiplink-list/skiplink-list.ts @@ -9,6 +9,7 @@ import { import { customElement, property } from 'lit/decorators.js'; import { forceType, omitEmptyConverter, slotState } from '../core/decorators.js'; +import { isLean } from '../core/dom.js'; import { SbbNamedSlotListMixin, type WithListChildren } from '../core/mixins.js'; import type { SbbBlockLinkButtonElement, SbbBlockLinkElement } from '../link.js'; import type { SbbTitleLevel } from '../title.js'; @@ -49,7 +50,7 @@ class SbbSkiplinkListElement extends SbbNamedSlotListMixin< if (changedProperties.has('listChildren')) { for (const child of this.listChildren) { - child.size = 'm'; + child.size = isLean() ? 'xs' : 'm'; child.negative = true; } } diff --git a/src/elements/tabs/tab-group/readme.md b/src/elements/tabs/tab-group/readme.md index 5dba0c1b67..9fcaf34b12 100644 --- a/src/elements/tabs/tab-group/readme.md +++ b/src/elements/tabs/tab-group/readme.md @@ -60,7 +60,7 @@ type SbbTabChangedEventDetails = { | Name | Attribute | Privacy | Type | Default | Description | | ---------------------- | ------------------------ | ------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `initialSelectedIndex` | `initial-selected-index` | public | `number` | `0` | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. | -| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l'` | Size variant, either s, l or xl. | +| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | | Size variant, either s, l or xl. | ## Methods diff --git a/src/elements/tabs/tab-group/tab-group.ts b/src/elements/tabs/tab-group/tab-group.ts index 7cf1a3ca27..07998981f5 100644 --- a/src/elements/tabs/tab-group/tab-group.ts +++ b/src/elements/tabs/tab-group/tab-group.ts @@ -8,6 +8,7 @@ import { ref } from 'lit/directives/ref.js'; import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter, throttle } from '../../core/eventing.js'; import { SbbHydrationMixin } from '../../core/mixins.js'; import type { SbbTabLabelElement } from '../tab-label.js'; @@ -92,7 +93,7 @@ class SbbTabGroupElement extends SbbHydrationMixin(LitElement) { public get size(): InterfaceSbbTabGroupTab['size'] { return this._size; } - private _size: InterfaceSbbTabGroupTab['size'] = 'l'; + private _size: InterfaceSbbTabGroupTab['size'] = isLean() ? 's' : 'l'; /** * Sets the initial tab. If it matches a disabled tab or exceeds the length of diff --git a/src/elements/toast/toast.ts b/src/elements/toast/toast.ts index ddec52325f..4c8995a8b8 100644 --- a/src/elements/toast/toast.ts +++ b/src/elements/toast/toast.ts @@ -6,7 +6,7 @@ import type { SbbTransparentButtonElement, SbbTransparentButtonLinkElement } fro import { SbbOpenCloseBaseElement } from '../core/base-elements.js'; import { SbbConnectedAbortController, SbbLanguageController } from '../core/controllers.js'; import { forceType, slotState } from '../core/decorators.js'; -import { isFirefox } from '../core/dom.js'; +import { isFirefox, isLean } from '../core/dom.js'; import { composedPathHasAttribute } from '../core/eventing.js'; import { i18nCloseAlert } from '../core/i18n.js'; import { SbbHydrationMixin } from '../core/mixins.js'; @@ -170,7 +170,7 @@ class SbbToastElement extends SbbIconNameMixin(SbbHydrationMixin(SbbOpenCloseBas ) as (SbbTransparentButtonElement | SbbTransparentButtonLinkElement)[]; buttons.forEach((btn: SbbTransparentButtonElement | SbbTransparentButtonLinkElement) => { btn.negative = true; - btn.size = 'm'; + btn.size = isLean() ? 's' : 'm'; }); // Force negative on inline slotted links diff --git a/src/storybook/pages/home/home-lean-logged-in.ts b/src/storybook/pages/home/home-lean-logged-in.ts new file mode 100644 index 0000000000..751b1adf1b --- /dev/null +++ b/src/storybook/pages/home/home-lean-logged-in.ts @@ -0,0 +1,262 @@ +import type { Args } from '@storybook/web-components'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit'; + +import type { SbbDialogElement } from '../../../elements/dialog.js'; +import { + futureLeg, + pastLeg, +} from '../../../elements-experimental/pearl-chain/pearl-chain.sample-data.js'; + +import { + bikeProduct, + dailyTicketProduct, + footer, + liberoProduct, + navigation, + skiplinkList, + teaserHero, + timetableInput, +} from './home.common.js'; +import '../../../elements/dialog.js'; +import '../../../elements/journey-header.js'; +import '../../../elements-experimental/pearl-chain.js'; +import './home.scss'; + +export const homeLeanLoggedInTemplate = (args: Args): TemplateResult => html` +
+ ${skiplinkList()} + + + + + Menu + +
+ Search + + Christina Müller + + + Account + Tickets + + Shopping cart + + + Sign out + + + English + + + Deutsch + Français + Italiano + English + + + + + + + ${navigation(true)} + + + ${timetableInput()} + + +
+
+
+ + Welcome, Christina Müller +
+
+ Your current tickets & trips. +
    +
  • + + + % + from CHF + 92.50 + on + + + + View Ticket + + + + + + Saver ticket + GA + + Generalabonnement + + 2nd class, valid until 30.11.2022 + + + + + Ticket + + + +
    • +
  • + + + Buy saver ticket + + + + + + Saver ticket + Libero day ticket: All zones + Today, Valid 24 hours + + + Ticket + + + +
    • +
  • + + + Check details of the journey + + + + + + + Saturday, 21.02.2021, 1 h 26 min + + + + Details + + +
    • +
+ (document.getElementById('my-dialog') as SbbDialogElement).open()} + > + All purchased tickets + + + + My Dialog + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. +

+ + (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()} + > + Open stacked dialog + + + + + + Link + + Cancel + Button + + + + + Stacked Dialog + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + +
+
+
+ + +
+
+ Your tickets & subscriptions. +
+
+ + Purchase tickets again. + + ${dailyTicketProduct(true)} ${bikeProduct(true)} ${liberoProduct(true)} +
+
+ + Your subscriptions. + + + + Edit subscription + + + + + GA + Generalabonnement + 2nd class, valid until 30.11.2022 + + Edit subscription + + +
+
+
+
+ + + ${teaserHero()} + + + ${footer(args, true)} +
+`; diff --git a/src/storybook/pages/home/home-lean.ts b/src/storybook/pages/home/home-lean.ts new file mode 100644 index 0000000000..983d6b9835 --- /dev/null +++ b/src/storybook/pages/home/home-lean.ts @@ -0,0 +1,142 @@ +import type { Args } from '@storybook/web-components'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit'; + +import '../../../elements/alert.js'; +import '../../../elements/action-group.js'; +import { + bikeProduct, + dailyTicketProduct, + footer, + liberoProduct, + navigation, + skiplinkList, + teaserHero, + timetableInput, +} from './home.common.js'; +import './home.scss'; + +export const homeLeanTemplate = (args: Args): TemplateResult => html` +
+ ${skiplinkList()} + + + + + Menu + +
+ Search + + Sign in + + + English + + + Deutsch + Français + Italiano + English + + + + + + + ${navigation(true)} + + + ${timetableInput()} + + +
+
+ + + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + + + Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 + o'clock construction work will take place. You have to expect changed travel times and + changed connections. + + +
+
+ + +
+
+ Top Products. +
+ ${dailyTicketProduct(true)} ${bikeProduct(true)} ${liberoProduct(true)} + + + Buy daily ticket + + + + + Route map + For regular trips + + Buy + + + + + + Show all GAs at a glance + + + + GA + + Enjoy unlimited travel with the GA travel card. + + + All GAs at a glance + + + + + + Buy half price ticket + + + + + 1/2 + + Travel at half price with the half-fare travel card. + + + Ride at half price + + +
+ + + My tickets & subscriptions + + + All Products + + +
+
+ + + ${teaserHero()} + + + ${footer(args, true)} +
+`; diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home-logged-in.ts similarity index 92% rename from src/storybook/pages/home/home--logged-in.stories.ts rename to src/storybook/pages/home/home-logged-in.ts index 50f6de3620..235cf49a4b 100644 --- a/src/storybook/pages/home/home--logged-in.stories.ts +++ b/src/storybook/pages/home/home-logged-in.ts @@ -1,5 +1,4 @@ -import type { InputType } from '@storybook/types'; -import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components'; +import type { Args } from '@storybook/web-components'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; @@ -19,27 +18,12 @@ import { teaserHero, timetableInput, } from './home.common.js'; -import readme from './readme.md?raw'; import '../../../elements/dialog.js'; import '../../../elements/journey-header.js'; import '../../../elements-experimental/pearl-chain.js'; import './home.scss'; -const negative: InputType = { - control: { - type: 'boolean', - }, -}; - -const defaultArgTypes: ArgTypes = { - negative, -}; - -const defaultArgs: Args = { - negative: false, -}; - -const Template = (args: Args): TemplateResult => html` +export const homeLoggedInTemplate = (args: Args): TemplateResult => html`
${skiplinkList()} @@ -278,23 +262,3 @@ const Template = (args: Args): TemplateResult => html` ${footer(args)}
`; - -export const homeLoggedIn: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { ...defaultArgs }, -}; - -const meta: Meta = { - parameters: { - backgroundColor: (context: StoryContext) => - context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)', - docs: { - extractComponentDescription: () => readme, - }, - layout: 'fullscreen', - }, - title: 'pages/home', -}; - -export default meta; diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts index 29ab4be518..79586fe651 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -1,5 +1,5 @@ import type { Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; +import { nothing, type TemplateResult } from 'lit'; import { html } from 'lit'; import '../../../elements/button.js'; @@ -33,7 +33,7 @@ export const timetableInput = (): TemplateResult => html` `; -export const navigation = (): TemplateResult => html` +export const navigation = (isLean: boolean = false): TemplateResult => html` @@ -46,7 +46,7 @@ export const navigation = (): TemplateResult => html` - + Deutsch Français Italiano @@ -92,7 +92,9 @@ export const navigation = (): TemplateResult => html` Label - All Tickets & Offers + + All Tickets & Offers + @@ -146,15 +148,19 @@ export const navigation = (): TemplateResult => html` Label - + Travel Information `; -export const dailyTicketProduct = (): TemplateResult => html` - +export const dailyTicketProduct = (isLean: boolean = false): TemplateResult => html` + Buy Daily Ticket @@ -165,13 +171,15 @@ export const dailyTicketProduct = (): TemplateResult => html` Daily ticket Valid today - Buy + + Buy + `; -export const bikeProduct = (): TemplateResult => html` - +export const bikeProduct = (isLean: boolean = false): TemplateResult => html` + Buy Bike daily pass @@ -182,13 +190,15 @@ export const bikeProduct = (): TemplateResult => html` Bike day pass Valid today - Buy + + Buy + `; -export const liberoProduct = (): TemplateResult => html` - +export const liberoProduct = (isLean: boolean = false): TemplateResult => html` + Buy Libero short distance ticket @@ -199,7 +209,9 @@ export const liberoProduct = (): TemplateResult => html` Libero short distance ticket Valid today - Buy + + Buy + `; @@ -217,7 +229,7 @@ export const teaserHero = (): TemplateResult => html` `; -export const footer = (args: Args): TemplateResult => html` +export const footer = (args: Args, isLean: boolean = false): TemplateResult => html`
@@ -254,7 +266,7 @@ export const footer = (args: Args): TemplateResult => html` All help topics @@ -302,7 +314,7 @@ export const footer = (args: Args): TemplateResult => html` Subscribe diff --git a/src/storybook/pages/home/home.stories.ts b/src/storybook/pages/home/home.stories.ts index 0ff03467ad..d23acd75a5 100644 --- a/src/storybook/pages/home/home.stories.ts +++ b/src/storybook/pages/home/home.stories.ts @@ -1,22 +1,11 @@ import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; -import '../../../elements/alert.js'; -import '../../../elements/action-group.js'; -import { - bikeProduct, - dailyTicketProduct, - footer, - liberoProduct, - navigation, - skiplinkList, - teaserHero, - timetableInput, -} from './home.common.js'; +import { homeLeanLoggedInTemplate } from './home-lean-logged-in.js'; +import { homeLeanTemplate } from './home-lean.js'; +import { homeLoggedInTemplate } from './home-logged-in.js'; +import { homeTemplate } from './home.js'; import readme from './readme.md?raw'; -import './home.scss'; const negative: InputType = { control: { @@ -32,139 +21,31 @@ const defaultArgs: Args = { negative: false, }; -const Template = (args: Args): TemplateResult => html` -
- ${skiplinkList()} - - - - - Menu - -
- Search - - Sign in - - - English - - - Deutsch - Français - Italiano - English - - - - - - - ${navigation()} - - - ${timetableInput()} - - -
-
- - - The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. - - - Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 - o'clock construction work will take place. You have to expect changed travel times and - changed connections. - - -
-
- - -
-
- Top Products. -
- ${dailyTicketProduct()} ${bikeProduct()} ${liberoProduct()} - - - Buy daily ticket - - - - - Route map - For regular trips - - Buy - - - - - - Show all GAs at a glance - - - - GA - - Enjoy unlimited travel with the GA travel card. - - - All GAs at a glance - - - - - - Buy half price ticket - - - - - 1/2 - - Travel at half price with the half-fare travel card. - - - Ride at half price - - -
- - - My tickets & subscriptions - - - All Products - - -
-
+export const home: StoryObj = { + render: homeTemplate, +}; - - ${teaserHero()} +export const homeLoggedIn: StoryObj = { + render: homeLoggedInTemplate, +}; - - ${footer(args)} -
-`; +export const lean: StoryObj = { + render: homeLeanTemplate, + parameters: { + isLean: true, + }, +}; -export const home: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { ...defaultArgs }, +export const leanLoggedIn: StoryObj = { + render: homeLeanLoggedInTemplate, + parameters: { + isLean: true, + }, }; const meta: Meta = { + argTypes: defaultArgTypes, + args: defaultArgs, parameters: { backgroundColor: (context: StoryContext) => context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)', diff --git a/src/storybook/pages/home/home.ts b/src/storybook/pages/home/home.ts new file mode 100644 index 0000000000..ff22acbcac --- /dev/null +++ b/src/storybook/pages/home/home.ts @@ -0,0 +1,143 @@ +import type { Args } from '@storybook/web-components'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit'; + +import '../../../elements/alert.js'; +import '../../../elements/action-group.js'; +import { + bikeProduct, + dailyTicketProduct, + footer, + liberoProduct, + navigation, + skiplinkList, + teaserHero, + timetableInput, +} from './home.common.js'; +import './home.scss'; + +export const homeTemplate = (args: Args): TemplateResult => html` +
+ ${skiplinkList()} + + + + + Menu + +
+ Search + + Sign in + + + English + + + Deutsch + Français + Italiano + English + + + + + + + ${navigation()} + + + ${timetableInput()} + + +
+
+ + + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + + + Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 + o'clock construction work will take place. You have to expect changed travel times and + changed connections. + + +
+
+ + +
+
+ Top Products. +
+ ${dailyTicketProduct()} ${bikeProduct()} ${liberoProduct()} + + + Buy daily ticket + + + + + Route map + For regular trips + + Buy + + + + + + Show all GAs at a glance + + + + GA + + Enjoy unlimited travel with the GA travel card. + + + All GAs at a glance + + + + + + Buy half price ticket + + + + + 1/2 + + Travel at half price with the half-fare travel card. + + + Ride at half price + + +
+ + + My tickets & subscriptions + + + All Products + + +
+
+ + + ${teaserHero()} + + + ${footer(args)} +
+`; From 8275b22db91c87a8d48b9f477252cf30a607034c Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 22 Nov 2024 17:41:50 +0100 Subject: [PATCH 04/14] fix: ssr --- src/elements/core/dom/lean-context.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/elements/core/dom/lean-context.ts b/src/elements/core/dom/lean-context.ts index e7f1850705..65a8091a16 100644 --- a/src/elements/core/dom/lean-context.ts +++ b/src/elements/core/dom/lean-context.ts @@ -1,6 +1,8 @@ +import { isServer } from 'lit'; + /** * Checks if the body has the `sbb-lean` class. */ export function isLean(): boolean { - return document.body.classList.contains('sbb-lean'); + return !isServer && document.body.classList.contains('sbb-lean'); } From 27541c5414309fcb1e156ddff6e862cf900d751b Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 22 Nov 2024 18:06:28 +0100 Subject: [PATCH 05/14] fix: merge --- src/elements/file-selector/common/file-selector-common.ts | 3 ++- src/elements/file-selector/file-selector-dropzone/readme.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts index 96951e24c9..dbd841450a 100644 --- a/src/elements/file-selector/common/file-selector-common.ts +++ b/src/elements/file-selector/common/file-selector-common.ts @@ -8,6 +8,7 @@ import type { SbbSecondaryButtonStaticElement } from '../../button.js'; import { sbbInputModalityDetector } from '../../core/a11y.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; +import { isLean } from '../../core/dom.js'; import { EventEmitter, forwardEventToHost } from '../../core/eventing.js'; import { i18nFileSelectorButtonLabel, @@ -58,7 +59,7 @@ export const SbbFileSelectorCommonElementMixin = Date: Mon, 25 Nov 2024 14:21:03 +0100 Subject: [PATCH 06/14] fix: review Jeri pt.1 --- .storybook/preview.ts | 8 ++------ docs/GETTING_STARTED.md | 8 +++++--- src/elements/core/dom/lean-context.ts | 2 +- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 1a706f7e58..6b1b9fa1a7 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -15,14 +15,10 @@ const withLeanDecorator = makeDecorator({ wrapper: (getStory, context, { parameters }) => { const isLean = parameters as unknown as boolean; - const rootElement = (context.canvasElement as unknown as HTMLElement).closest( - '.docs-story, .sb-show-main', - )!; - if (isLean) { - rootElement.classList.add('sbb-lean'); + document.documentElement.classList.add('sbb-lean'); } else { - rootElement.classList.remove('sbb-lean'); + document.documentElement.classList.remove('sbb-lean'); } return getStory(context); diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 72d93d3041..ab7bbbfbac 100644 --- a/docs/GETTING_STARTED.md +++ b/docs/GETTING_STARTED.md @@ -195,14 +195,16 @@ and on [storybook](https://lyne-storybook.app.sbb.ch). ### Lean variant -Lean uses a more compact design. To activate it, add the CSS class `sbb-lean` on the document's body tag. +Lean uses a more compact design by defaulting the `size` property to the smallest available value. +Components that do not have a `size` property remain unchanged. +To enable lean mode, add the CSS class `sbb-lean` to the `html` tag. ```html - + Lyne Design System - Lean example - + ... diff --git a/src/elements/core/dom/lean-context.ts b/src/elements/core/dom/lean-context.ts index 65a8091a16..fb91aeb1b4 100644 --- a/src/elements/core/dom/lean-context.ts +++ b/src/elements/core/dom/lean-context.ts @@ -4,5 +4,5 @@ import { isServer } from 'lit'; * Checks if the body has the `sbb-lean` class. */ export function isLean(): boolean { - return !isServer && document.body.classList.contains('sbb-lean'); + return !isServer && document.documentElement.classList.contains('sbb-lean'); } From ef8301b71c6208fbadd9c7f24a8d0f6b8146b1fd Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 25 Nov 2024 17:15:04 +0100 Subject: [PATCH 07/14] fix: review Jeri pt.2 --- .../pages/home/home-lean-logged-in.ts | 262 ------------------ src/storybook/pages/home/home-lean.ts | 201 +++++++------- src/storybook/pages/home/home-logged-in.ts | 2 +- src/storybook/pages/home/home.common.ts | 31 +-- src/storybook/pages/home/home.scss | 23 ++ src/storybook/pages/home/home.stories.ts | 16 +- src/storybook/pages/home/home.ts | 2 +- 7 files changed, 149 insertions(+), 388 deletions(-) delete mode 100644 src/storybook/pages/home/home-lean-logged-in.ts diff --git a/src/storybook/pages/home/home-lean-logged-in.ts b/src/storybook/pages/home/home-lean-logged-in.ts deleted file mode 100644 index 751b1adf1b..0000000000 --- a/src/storybook/pages/home/home-lean-logged-in.ts +++ /dev/null @@ -1,262 +0,0 @@ -import type { Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import type { SbbDialogElement } from '../../../elements/dialog.js'; -import { - futureLeg, - pastLeg, -} from '../../../elements-experimental/pearl-chain/pearl-chain.sample-data.js'; - -import { - bikeProduct, - dailyTicketProduct, - footer, - liberoProduct, - navigation, - skiplinkList, - teaserHero, - timetableInput, -} from './home.common.js'; -import '../../../elements/dialog.js'; -import '../../../elements/journey-header.js'; -import '../../../elements-experimental/pearl-chain.js'; -import './home.scss'; - -export const homeLeanLoggedInTemplate = (args: Args): TemplateResult => html` -
- ${skiplinkList()} - - - - - Menu - -
- Search - - Christina Müller - - - Account - Tickets - - Shopping cart - - - Sign out - - - English - - - Deutsch - Français - Italiano - English - - - - - - - ${navigation(true)} - - - ${timetableInput()} - - -
-
-
- - Welcome, Christina Müller -
-
- Your current tickets & trips. -
    -
  • - - - % - from CHF - 92.50 - on - - - - View Ticket - - - - - - Saver ticket - GA - - Generalabonnement - - 2nd class, valid until 30.11.2022 - - - - - Ticket - - - -
    • -
  • - - - Buy saver ticket - - - - - - Saver ticket - Libero day ticket: All zones - Today, Valid 24 hours - - - Ticket - - - -
    • -
  • - - - Check details of the journey - - - - - - - Saturday, 21.02.2021, 1 h 26 min - - - - Details - - -
    • -
- (document.getElementById('my-dialog') as SbbDialogElement).open()} - > - All purchased tickets - - - - My Dialog - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. -

- - (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()} - > - Open stacked dialog - - - - - - Link - - Cancel - Button - - - - - Stacked Dialog - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - -
-
-
- - -
-
- Your tickets & subscriptions. -
-
- - Purchase tickets again. - - ${dailyTicketProduct(true)} ${bikeProduct(true)} ${liberoProduct(true)} -
-
- - Your subscriptions. - - - - Edit subscription - - - - - GA - Generalabonnement - 2nd class, valid until 30.11.2022 - - Edit subscription - - -
-
-
-
- - - ${teaserHero()} - - - ${footer(args, true)} -
-`; diff --git a/src/storybook/pages/home/home-lean.ts b/src/storybook/pages/home/home-lean.ts index 983d6b9835..9af2191215 100644 --- a/src/storybook/pages/home/home-lean.ts +++ b/src/storybook/pages/home/home-lean.ts @@ -3,25 +3,22 @@ import type { TemplateResult } from 'lit'; import { html } from 'lit'; import '../../../elements/alert.js'; +import '../../../elements/container.js'; import '../../../elements/action-group.js'; -import { - bikeProduct, - dailyTicketProduct, - footer, - liberoProduct, - navigation, - skiplinkList, - teaserHero, - timetableInput, -} from './home.common.js'; +import '../../../elements/checkbox.js'; +import '../../../elements/form-field.js'; +import '../../../elements/icon.js'; +import '../../../elements/paginator.js'; +import '../../../elements/radio-button.js'; +import '../../../elements/table.js'; +import { footer, navigation, skiplinkList } from './home.common.js'; import './home.scss'; export const homeLeanTemplate = (args: Args): TemplateResult => html`
${skiplinkList()} - - + Menu @@ -46,97 +43,101 @@ export const homeLeanTemplate = (args: Args): TemplateResult => html` ${navigation(true)} - - ${timetableInput()} - - -
-
- - - The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. - - - Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 - o'clock construction work will take place. You have to expect changed travel times and - changed connections. - - -
-
- - -
-
- Top Products. -
- ${dailyTicketProduct(true)} ${bikeProduct(true)} ${liberoProduct(true)} - - - Buy daily ticket - - - - - Route map - For regular trips - - Buy - - - - - - Show all GAs at a glance - - - - GA - - Enjoy unlimited travel with the GA travel card. - - - All GAs at a glance - - - - - - Buy half price ticket - - - - - 1/2 - - Travel at half price with the half-fare travel card. - - - Ride at half price + +
+
+ + + + Zug + Lucerne + Fribourg + + + + + + + + + Clear departure + Search +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StationDepartureArrival
Bern9:0010:00
Zurich9:1510:15
Basel9.4510.45
Geneva10:0011:00
Lausanne10:3011:30
Bellinzona11:0012:00
+ + +
+
+ + Value one + Value two + Value three + Value four + + + Label + Subtext + + + CHF 40.00 - + % +
- - - My tickets & subscriptions - - - All Products - - -
-
- - - ${teaserHero()} + + - ${footer(args, true)}
`; diff --git a/src/storybook/pages/home/home-logged-in.ts b/src/storybook/pages/home/home-logged-in.ts index 235cf49a4b..c3bb029e53 100644 --- a/src/storybook/pages/home/home-logged-in.ts +++ b/src/storybook/pages/home/home-logged-in.ts @@ -28,7 +28,7 @@ export const homeLoggedInTemplate = (args: Args): TemplateResult => html` ${skiplinkList()} - + Menu diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts index 79586fe651..0504f2d5da 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -159,8 +159,8 @@ export const navigation = (isLean: boolean = false): TemplateResult => html` `; -export const dailyTicketProduct = (isLean: boolean = false): TemplateResult => html` - +export const dailyTicketProduct = (): TemplateResult => html` + Buy Daily Ticket @@ -171,15 +171,13 @@ export const dailyTicketProduct = (isLean: boolean = false): TemplateResult => h Daily ticket Valid today - - Buy - + Buy `; -export const bikeProduct = (isLean: boolean = false): TemplateResult => html` - +export const bikeProduct = (): TemplateResult => html` + Buy Bike daily pass @@ -190,15 +188,13 @@ export const bikeProduct = (isLean: boolean = false): TemplateResult => html` Bike day pass Valid today - - Buy - + Buy `; -export const liberoProduct = (isLean: boolean = false): TemplateResult => html` - +export const liberoProduct = (): TemplateResult => html` + Buy Libero short distance ticket @@ -209,9 +205,7 @@ export const liberoProduct = (isLean: boolean = false): TemplateResult => html` Libero short distance ticket Valid today - - Buy - + Buy `; @@ -230,7 +224,12 @@ export const teaserHero = (): TemplateResult => html` `; export const footer = (args: Args, isLean: boolean = false): TemplateResult => html` - +
html` ${skiplinkList()} - + Menu From d571d65ad31db66348da5851ac27d768760cfcd6 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 25 Nov 2024 19:00:09 +0100 Subject: [PATCH 08/14] fix: integrity after merge --- src/elements/checkbox/checkbox-panel/readme.md | 2 +- src/elements/checkbox/checkbox/readme.md | 2 +- src/elements/file-selector/file-selector/readme.md | 2 +- src/elements/radio-button/radio-button-panel/readme.md | 2 +- src/elements/radio-button/radio-button/readme.md | 2 +- src/elements/toggle-check/readme.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index 774ba72acc..be24df2f60 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -86,7 +86,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbPanelSize` | | Size variant. | | `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index fd0d8e8de9..6400805c18 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -92,7 +92,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbCheckboxSize` | | Size variant. | | `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/file-selector/file-selector/readme.md b/src/elements/file-selector/file-selector/readme.md index d8e17288ec..b814942962 100644 --- a/src/elements/file-selector/file-selector/readme.md +++ b/src/elements/file-selector/file-selector/readme.md @@ -90,7 +90,7 @@ It's suggested to have a different value for each variant, e.g.: | `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | | `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | +| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | | `type` | - | public | `string` | `'file'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md index d429e77daf..7ff731026a 100644 --- a/src/elements/radio-button/radio-button-panel/readme.md +++ b/src/elements/radio-button/radio-button-panel/readme.md @@ -76,7 +76,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbPanelSize` | | Size variant. | | `type` | - | public | `string` | `'radio'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index 07363e8d2a..4d324344e0 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -67,7 +67,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant. | +| `size` | `size` | public | `SbbRadioButtonSize` | | Size variant. | | `type` | - | public | `string` | `'radio'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 734c4f79b1..2f9d84ee12 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -73,7 +73,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `labelPosition` | `label-position` | public | `'before' \| 'after'` | `'after'` | The label position relative to the toggle. Defaults to 'after' | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `'xs' \| 's' \| 'm'` | `'s'` | Size variant, either m, s or xs. | +| `size` | `size` | public | `'xs' \| 's' \| 'm'` | | Size variant, either m, s or xs. | | `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | From e4c15162f05d9c984658ea4d2ee938870e7aa3d3 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 26 Nov 2024 11:37:56 +0100 Subject: [PATCH 09/14] fix: add default in docs, refactor lean story --- src/elements/accordion/accordion.ts | 5 ++- src/elements/accordion/readme.md | 10 ++--- src/elements/action-group/action-group.ts | 5 ++- src/elements/action-group/readme.md | 14 +++--- src/elements/alert/alert/alert.ts | 5 ++- src/elements/alert/alert/readme.md | 28 ++++++------ src/elements/button/button-link/readme.md | 24 +++++----- src/elements/button/button-static/readme.md | 12 ++--- src/elements/button/button/readme.md | 22 ++++----- src/elements/button/common/button-common.ts | 5 ++- .../mini-button-group/mini-button-group.ts | 5 ++- .../button/mini-button-group/readme.md | 10 ++--- .../button/secondary-button-link/readme.md | 24 +++++----- .../button/secondary-button-static/readme.md | 12 ++--- .../button/secondary-button/readme.md | 22 ++++----- .../button/tertiary-button-link/readme.md | 24 +++++----- .../button/tertiary-button-static/readme.md | 12 ++--- src/elements/button/tertiary-button/readme.md | 22 ++++----- .../button/transparent-button-link/readme.md | 24 +++++----- .../transparent-button-static/readme.md | 12 ++--- .../button/transparent-button/readme.md | 22 ++++----- src/elements/card/card/card.ts | 5 ++- src/elements/card/card/readme.md | 8 ++-- .../checkbox/checkbox-group/checkbox-group.ts | 5 ++- .../checkbox/checkbox-group/readme.md | 16 +++---- .../checkbox/checkbox-panel/checkbox-panel.ts | 9 ++-- .../checkbox/checkbox-panel/readme.md | 28 ++++++------ src/elements/checkbox/checkbox/checkbox.ts | 5 ++- src/elements/checkbox/checkbox/readme.md | 28 ++++++------ src/elements/dialog/dialog-actions/readme.md | 14 +++--- .../expansion-panel/expansion-panel.ts | 5 ++- .../expansion-panel/expansion-panel/readme.md | 16 +++---- .../common/file-selector-common.ts | 5 ++- .../file-selector-dropzone/readme.md | 28 ++++++------ .../file-selector/file-selector/readme.md | 26 +++++------ .../form-field/form-field/form-field.ts | 5 ++- src/elements/form-field/form-field/readme.md | 22 ++++----- src/elements/header/header/header.ts | 5 ++- src/elements/header/header/readme.md | 14 +++--- src/elements/journey-header/journey-header.ts | 5 ++- src/elements/journey-header/readme.md | 16 +++---- .../link-list/common/link-list-base.ts | 1 + .../link-list/link-list-anchor/readme.md | 12 ++--- src/elements/link-list/link-list/readme.md | 16 +++---- src/elements/link/block-link-button/readme.md | 22 ++++----- src/elements/link/block-link-static/readme.md | 12 ++--- src/elements/link/block-link/readme.md | 22 ++++----- src/elements/link/common/link-common.ts | 1 + src/elements/link/link-button/readme.md | 20 ++++----- src/elements/link/link-static/readme.md | 10 ++--- src/elements/link/link/readme.md | 20 ++++----- .../common/navigation-action-common.ts | 5 ++- .../navigation/navigation-button/readme.md | 20 ++++----- .../navigation/navigation-link/readme.md | 22 ++++----- .../navigation-marker/navigation-marker.ts | 1 + .../navigation/navigation-marker/readme.md | 6 +-- src/elements/notification/notification.ts | 5 ++- src/elements/notification/readme.md | 16 +++---- .../paginator/common/paginator-common.ts | 10 ++--- .../paginator/compact-paginator/readme.md | 18 ++++---- src/elements/paginator/paginator/readme.md | 20 ++++----- .../radio-button-group/radio-button-group.ts | 3 +- .../radio-button/radio-button-group/readme.md | 2 +- .../radio-button-panel/radio-button-panel.ts | 9 ++-- .../radio-button/radio-button-panel/readme.md | 28 ++++++------ .../radio-button/radio-button/radio-button.ts | 5 ++- .../radio-button/radio-button/readme.md | 24 +++++----- src/elements/stepper/stepper/readme.md | 18 ++++---- src/elements/stepper/stepper/stepper.ts | 5 ++- src/elements/tabs/tab-group/readme.md | 8 ++-- src/elements/tabs/tab-group/tab-group.ts | 5 ++- src/elements/tag/tag-group/readme.md | 14 +++--- src/elements/tag/tag-group/tag-group.ts | 5 ++- src/elements/tag/tag/readme.md | 24 +++++----- src/elements/tag/tag/tag.ts | 5 ++- src/elements/toggle-check/readme.md | 24 +++++----- src/elements/toggle-check/toggle-check.ts | 5 ++- src/elements/toggle/toggle/readme.md | 14 +++--- src/elements/toggle/toggle/toggle.ts | 5 ++- src/elements/visual-checkbox/readme.md | 14 +++--- .../visual-checkbox/visual-checkbox.ts | 5 ++- src/storybook/pages/home/home.common.ts | 22 ++++----- src/storybook/pages/home/home.scss | 23 ---------- src/storybook/pages/home/home.stories.ts | 8 ---- src/storybook/pages/lean/lean.scss | 24 ++++++++++ .../home-lean.ts => lean/lean.stories.ts} | 45 ++++++++++++------- 86 files changed, 630 insertions(+), 557 deletions(-) create mode 100644 src/storybook/pages/lean/lean.scss rename src/storybook/pages/{home/home-lean.ts => lean/lean.stories.ts} (84%) diff --git a/src/elements/accordion/accordion.ts b/src/elements/accordion/accordion.ts index fe4b117137..35d90333c1 100644 --- a/src/elements/accordion/accordion.ts +++ b/src/elements/accordion/accordion.ts @@ -21,7 +21,10 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) { public static override styles: CSSResultGroup = style; - /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. */ + /** + * Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. + * @default 'l' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 's' | 'l' = isLean() ? 's' : 'l'; diff --git a/src/elements/accordion/readme.md b/src/elements/accordion/readme.md index 790e71b5eb..fdb381f8c9 100644 --- a/src/elements/accordion/readme.md +++ b/src/elements/accordion/readme.md @@ -50,11 +50,11 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------------------- | -| `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. | -| `size` | `size` | public | `'s' \| 'l'` | | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | ----------------------- | ------------------ | --------------------------------------------------------------------------------------- | +| `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. | +| `size` | `size` | public | `'s' \| 'l'` | `'l' / 's' (lean)` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | ## Slots diff --git a/src/elements/action-group/action-group.ts b/src/elements/action-group/action-group.ts index fadcdde7d4..33c29e1ef3 100644 --- a/src/elements/action-group/action-group.ts +++ b/src/elements/action-group/action-group.ts @@ -43,8 +43,9 @@ class SbbActionGroupElement extends LitElement { public accessor orientation: SbbOrientation = 'horizontal'; /** - * Size of the nested sbb-button instances. This will overwrite the size attribute of nested - * sbb-button instances. + * Size of the nested sbb-button instances. + * This will overwrite the size attribute of nested sbb-button instances. + * @default 'l' / 's' (lean) */ @property({ attribute: 'button-size', reflect: true }) public accessor buttonSize: SbbButtonSize = isLean() ? 's' : 'l'; diff --git a/src/elements/action-group/readme.md b/src/elements/action-group/readme.md index 492189745e..744b9eef34 100644 --- a/src/elements/action-group/readme.md +++ b/src/elements/action-group/readme.md @@ -120,13 +120,13 @@ The values for `align-group` and `align-self` for the various allocations are as ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index d183d40f65..1f617b3d3d 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -46,7 +46,10 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { @property({ reflect: true, type: Boolean }) public accessor readonly: boolean = false; - /** You can choose between `s`, `m` or `l` size. */ + /** + * You can choose between `s`, `m` or `l` size. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 's' | 'm' | 'l' = isLean() ? 's' : 'm'; /** diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index fc5a5529dc..6e10f49095 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -78,20 +78,20 @@ As a base rule, opening animations should be active if an alert arrives after th ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the relevant nested element. | -| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | -| `isOpen` | - | public | `boolean` | | Whether the element is open. | -| `linkContent` | `link-content` | public | `string` | `''` | Content of the link. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `'s' \| 'm' \| 'l'` | | You can choose between `s`, `m` or `l` size. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | -| `titleContent` | `title-content` | public | `string` | `''` | Content of title. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | -------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the relevant nested element. | +| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | +| `isOpen` | - | public | `boolean` | | Whether the element is open. | +| `linkContent` | `link-content` | public | `string` | `''` | Content of the link. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m' / 's' (lean)` | You can choose between `s`, `m` or `l` size. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| `titleContent` | `title-content` | public | `string` | `''` | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | ## Methods diff --git a/src/elements/button/button-link/readme.md b/src/elements/button/button-link/readme.md index e14640dbb4..1aafdbe444 100644 --- a/src/elements/button/button-link/readme.md +++ b/src/elements/button/button-link/readme.md @@ -72,18 +72,18 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/button-static/readme.md b/src/elements/button/button-static/readme.md index 85f156a5c3..ae76c43d72 100644 --- a/src/elements/button/button-static/readme.md +++ b/src/elements/button/button-static/readme.md @@ -57,12 +57,12 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | ## Slots diff --git a/src/elements/button/button/readme.md b/src/elements/button/button/readme.md index 1653f9d6fd..85c8fe12fd 100644 --- a/src/elements/button/button/readme.md +++ b/src/elements/button/button/readme.md @@ -79,17 +79,17 @@ guard against such cases in your component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/button/common/button-common.ts b/src/elements/button/common/button-common.ts index 90a9968585..19bc5a2b6c 100644 --- a/src/elements/button/common/button-common.ts +++ b/src/elements/button/common/button-common.ts @@ -38,7 +38,10 @@ export const SbbButtonCommonElementMixin = { - /** Size variant, either l or m. */ + /** + * Size variant, either l, m or s. + * @default 'l' / 's' (lean) + */ @property({ reflect: true }) public accessor size: SbbButtonSize = isLean() ? 's' : 'l'; protected override renderTemplate(): TemplateResult { diff --git a/src/elements/button/mini-button-group/mini-button-group.ts b/src/elements/button/mini-button-group/mini-button-group.ts index b66ebb787b..465324121c 100644 --- a/src/elements/button/mini-button-group/mini-button-group.ts +++ b/src/elements/button/mini-button-group/mini-button-group.ts @@ -31,7 +31,10 @@ class SbbMiniButtonGroupElement extends SbbNegativeMixin( @property({ attribute: 'accessibility-label' }) public accessor accessibilityLabel: string = ''; - /** Size variant, either s, m, l or xl. */ + /** + * Size variant, either s, m, l or xl. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: SbbMiniButtonGroupSize = isLean() ? 's' : 'm'; protected override willUpdate(changedProperties: PropertyValues): void { diff --git a/src/elements/button/mini-button-group/readme.md b/src/elements/button/mini-button-group/readme.md index 8337c6ef87..b46153c1c5 100644 --- a/src/elements/button/mini-button-group/readme.md +++ b/src/elements/button/mini-button-group/readme.md @@ -31,11 +31,11 @@ to ensure that the button list is read by screen readers with the correct size. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | ------------------------ | ------- | --------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the list that contains the buttons. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbMiniButtonGroupSize` | | Size variant, either s, m, l or xl. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | ------------------------ | ------------------ | --------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the list that contains the buttons. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbMiniButtonGroupSize` | `'m' / 's' (lean)` | Size variant, either s, m, l or xl. | ## Slots diff --git a/src/elements/button/secondary-button-link/readme.md b/src/elements/button/secondary-button-link/readme.md index 793d976f2f..776a2b588e 100644 --- a/src/elements/button/secondary-button-link/readme.md +++ b/src/elements/button/secondary-button-link/readme.md @@ -77,18 +77,18 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/secondary-button-static/readme.md b/src/elements/button/secondary-button-static/readme.md index 9ab297da00..498db6c3ed 100644 --- a/src/elements/button/secondary-button-static/readme.md +++ b/src/elements/button/secondary-button-static/readme.md @@ -60,12 +60,12 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | ## Slots diff --git a/src/elements/button/secondary-button/readme.md b/src/elements/button/secondary-button/readme.md index 33befac0bc..56bde81767 100644 --- a/src/elements/button/secondary-button/readme.md +++ b/src/elements/button/secondary-button/readme.md @@ -84,17 +84,17 @@ guard against such cases in your component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/button/tertiary-button-link/readme.md b/src/elements/button/tertiary-button-link/readme.md index c6857bfbc7..3d08544f5d 100644 --- a/src/elements/button/tertiary-button-link/readme.md +++ b/src/elements/button/tertiary-button-link/readme.md @@ -77,18 +77,18 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/tertiary-button-static/readme.md b/src/elements/button/tertiary-button-static/readme.md index 3c3963d158..0540d86a47 100644 --- a/src/elements/button/tertiary-button-static/readme.md +++ b/src/elements/button/tertiary-button-static/readme.md @@ -60,12 +60,12 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | ## Slots diff --git a/src/elements/button/tertiary-button/readme.md b/src/elements/button/tertiary-button/readme.md index 1d8bebd247..0c7102b851 100644 --- a/src/elements/button/tertiary-button/readme.md +++ b/src/elements/button/tertiary-button/readme.md @@ -84,17 +84,17 @@ guard against such cases in your component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/button/transparent-button-link/readme.md b/src/elements/button/transparent-button-link/readme.md index 137445f735..487767d837 100644 --- a/src/elements/button/transparent-button-link/readme.md +++ b/src/elements/button/transparent-button-link/readme.md @@ -77,18 +77,18 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | -------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/button/transparent-button-static/readme.md b/src/elements/button/transparent-button-static/readme.md index 152ccf1573..9541c5e7ba 100644 --- a/src/elements/button/transparent-button-static/readme.md +++ b/src/elements/button/transparent-button-static/readme.md @@ -60,12 +60,12 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | ## Slots diff --git a/src/elements/button/transparent-button/readme.md b/src/elements/button/transparent-button/readme.md index cb958d509e..c8740fed05 100644 --- a/src/elements/button/transparent-button/readme.md +++ b/src/elements/button/transparent-button/readme.md @@ -84,17 +84,17 @@ guard against such cases in your component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbButtonSize` | | Size variant, either l or m. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size variant, either l, m or s. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/card/card/card.ts b/src/elements/card/card/card.ts index 195913aae5..3af1637e29 100644 --- a/src/elements/card/card/card.ts +++ b/src/elements/card/card/card.ts @@ -18,7 +18,10 @@ export class SbbCardElement extends LitElement { public static override styles: CSSResultGroup = style; - /** Size variant, either xs, s, m, l, xl, xxl or xxxl. */ + /** + * Size variant, either xs, s, m, l, xl, xxl or xxxl. + * @default 'm' / 'xs' (lean) + */ @property({ reflect: true }) public accessor size: | 'xs' | 's' diff --git a/src/elements/card/card/readme.md b/src/elements/card/card/readme.md index bd67a5a97f..c35086c2d0 100644 --- a/src/elements/card/card/readme.md +++ b/src/elements/card/card/readme.md @@ -86,10 +86,10 @@ To improve coloring, it's needed to manually define styles for Window high contr ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------- | --------- | ------- | ------------------------------------------------------------------------------ | --------- | -------------------------------------------------- | -| `color` | `color` | public | `'white' \| 'milk' \| 'transparent-bordered' \| 'transparent-bordered-dashed'` | `'white'` | Option to set the component's background color. | -| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | | Size variant, either xs, s, m, l, xl, xxl or xxxl. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------- | --------- | ------- | ------------------------------------------------------------------------------ | ------------------- | -------------------------------------------------- | +| `color` | `color` | public | `'white' \| 'milk' \| 'transparent-bordered' \| 'transparent-bordered-dashed'` | `'white'` | Option to set the component's background color. | +| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m' / 'xs' (lean)` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | ## Slots diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.ts b/src/elements/checkbox/checkbox-group/checkbox-group.ts index ec92f4c377..c68d3bd13b 100644 --- a/src/elements/checkbox/checkbox-group/checkbox-group.ts +++ b/src/elements/checkbox/checkbox-group/checkbox-group.ts @@ -31,7 +31,10 @@ class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) { @property({ reflect: true, type: Boolean }) public accessor required: boolean = false; - /** Size variant, either m or s. */ + /** + * Size variant, either m, s or xs. + * @default 'm' / 'xs' (lean) + */ @property() public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; /** Overrides the behaviour of `orientation` property. */ diff --git a/src/elements/checkbox/checkbox-group/readme.md b/src/elements/checkbox/checkbox-group/readme.md index 7db302fca0..0b63b74a44 100644 --- a/src/elements/checkbox/checkbox-group/readme.md +++ b/src/elements/checkbox/checkbox-group/readme.md @@ -73,14 +73,14 @@ Two values are available, `s` and `m`, which is the default ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | --------------------------------------------------- | -------------- | ------------------------------------------------------------------------------ | -| `checkboxes` | - | public | `(SbbCheckboxElement \| SbbCheckboxPanelElement)[]` | | List of contained checkbox elements. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | -| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | -| `size` | `size` | public | `SbbCheckboxSize` | | Size variant, either m or s. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | --------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------ | +| `checkboxes` | - | public | `(SbbCheckboxElement \| SbbCheckboxPanelElement)[]` | | List of contained checkbox elements. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m' / 'xs' (lean)` | Size variant, either m, s or xs. | ## Slots diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts index 102c71106f..112f55b4ab 100644 --- a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts +++ b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts @@ -58,11 +58,12 @@ class SbbCheckboxPanelElement extends SbbPanelMixin( panelConnected: 'panelConnected', } as const; - /** Size variant. */ + /** + * Size variant, either m or s. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) - @getOverride((i, v) => - i.group?.size ? (isLean() || i.group.size === 'xs' ? 's' : i.group.size) : v, - ) + @getOverride((i, v) => (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; /** diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index be24df2f60..f5061af527 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -75,20 +75,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | --------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------- | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | | Size variant. | -| `type` | - | public | `string` | `'checkbox'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | --------------- | ------- | --------------------------------- | ------------------ | -------------------------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbPanelSize` | `'m' / 's' (lean)` | Size variant, either m or s. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/checkbox/checkbox/checkbox.ts b/src/elements/checkbox/checkbox/checkbox.ts index 7cec535537..ce15844dd9 100644 --- a/src/elements/checkbox/checkbox/checkbox.ts +++ b/src/elements/checkbox/checkbox/checkbox.ts @@ -34,7 +34,10 @@ class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(SbbIconNameMixin( didChange: 'didChange', } as const; - /** Size variant. */ + /** + * Size variant, either m, s or xs. + * @default 'm' / 'xs' (lean) + */ @property({ reflect: true }) @getOverride((i, v) => i.group?.size ?? v) public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index 6400805c18..361edbca01 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -81,20 +81,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbCheckboxSize` | | Size variant. | -| `type` | - | public | `string` | `'checkbox'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | --------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m' / 'xs' (lean)` | Size variant, either m, s or xs. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/dialog/dialog-actions/readme.md b/src/elements/dialog/dialog-actions/readme.md index 91b3c764c4..bf8371a639 100644 --- a/src/elements/dialog/dialog-actions/readme.md +++ b/src/elements/dialog/dialog-actions/readme.md @@ -14,13 +14,13 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/elements ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts index e55304a0d7..938655dba3 100644 --- a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts @@ -70,7 +70,10 @@ class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) { @property({ reflect: true, type: Boolean }) public accessor borderless: boolean = false; - /** Size variant, either l or s. */ + /** + * Size variant, either l or s. + * @default 'l' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 's' | 'l' = isLean() ? 's' : 'l'; /** diff --git a/src/elements/expansion-panel/expansion-panel/readme.md b/src/elements/expansion-panel/expansion-panel/readme.md index 5ecf1f27d4..e26eb9aadf 100644 --- a/src/elements/expansion-panel/expansion-panel/readme.md +++ b/src/elements/expansion-panel/expansion-panel/readme.md @@ -86,14 +86,14 @@ This can be achieved by adding an `aria-label`, `aria-labelledby` or `aria-descr ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | ----------------------- | --------- | ---------------------------------------------------------------------- | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | -| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the panel is disabled, so its expanded state can't be changed. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | -| `size` | `size` | public | `'s' \| 'l'` | | Size variant, either l or s. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | Heading level; if unset, a `div` will be rendered. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | ----------------------- | ------------------ | ---------------------------------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | +| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the panel is disabled, so its expanded state can't be changed. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | +| `size` | `size` | public | `'s' \| 'l'` | `'l' / 's' (lean)` | Size variant, either l or s. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | Heading level; if unset, a `div` will be rendered. | ## Events diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts index 4b649db0ef..835dd4f68c 100644 --- a/src/elements/file-selector/common/file-selector-common.ts +++ b/src/elements/file-selector/common/file-selector-common.ts @@ -58,7 +58,10 @@ export const SbbFileSelectorCommonElementMixin = []` | `[]` | The list of selected files. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | -| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | -| `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. | -| `type` | - | public | `string` | `'file'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------- | ------------------ | ----------------------------------------------------------------------------- | +| `accept` | `accept` | public | `string` | `''` | A comma-separated list of allowed unique file type specifiers. | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the native input element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `files` | - | public | `Readonly[]` | `[]` | The list of selected files. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | +| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. | +| `type` | - | public | `string` | `'file'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | ## Methods diff --git a/src/elements/file-selector/file-selector/readme.md b/src/elements/file-selector/file-selector/readme.md index b814942962..241835ecab 100644 --- a/src/elements/file-selector/file-selector/readme.md +++ b/src/elements/file-selector/file-selector/readme.md @@ -80,19 +80,19 @@ It's suggested to have a different value for each variant, e.g.: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | --------------------------- | ----------- | ----------------------------------------------------------------------------- | -| `accept` | `accept` | public | `string` | `''` | A comma-separated list of allowed unique file type specifiers. | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the native input element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `files` | - | public | `Readonly[]` | `[]` | The list of selected files. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | -| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | -| `type` | - | public | `string` | `'file'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------- | ------------------ | ----------------------------------------------------------------------------- | +| `accept` | `accept` | public | `string` | `''` | A comma-separated list of allowed unique file type specifiers. | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the native input element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `files` | - | public | `Readonly[]` | `[]` | The list of selected files. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | +| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `type` | - | public | `string` | `'file'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | ## Methods diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts index 3408dd978a..88338b7051 100644 --- a/src/elements/form-field/form-field/form-field.ts +++ b/src/elements/form-field/form-field/form-field.ts @@ -75,7 +75,10 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) @property({ type: Boolean }) public accessor optional: boolean = false; - /** Size variant, either l or m. */ + /** + * Size variant, either l, m or s. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 'l' | 'm' | 's' = isLean() ? 's' : 'm'; /** Whether to display the form field without a border. */ diff --git a/src/elements/form-field/form-field/readme.md b/src/elements/form-field/form-field/readme.md index 914df628e0..df44efe6d0 100644 --- a/src/elements/form-field/form-field/readme.md +++ b/src/elements/form-field/form-field/readme.md @@ -148,17 +148,17 @@ technology will announce errors when they appear. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether to display the form field without a border. | -| `errorSpace` | `error-space` | public | `'none' \| 'reserve'` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | -| `floatingLabel` | `floating-label` | public | `boolean` | `false` | Whether the label should float. If activated, the placeholder of the input is hidden. | -| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | -| `inputElement` | - | public | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | Returns the input element. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `optional` | `optional` | public | `boolean` | `false` | Indicates whether the input is optional. | -| `size` | `size` | public | `'l' \| 'm' \| 's'` | | Size variant, either l or m. | -| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether to display the form field without a border. | +| `errorSpace` | `error-space` | public | `'none' \| 'reserve'` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | +| `floatingLabel` | `floating-label` | public | `boolean` | `false` | Whether the label should float. If activated, the placeholder of the input is hidden. | +| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | +| `inputElement` | - | public | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | Returns the input element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `optional` | `optional` | public | `boolean` | `false` | Indicates whether the input is optional. | +| `size` | `size` | public | `'l' \| 'm' \| 's'` | `'m' / 's' (lean)` | Size variant, either l, m or s. | +| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | ## Methods diff --git a/src/elements/header/header/header.ts b/src/elements/header/header/header.ts index fc1f17385e..1231ef8689 100644 --- a/src/elements/header/header/header.ts +++ b/src/elements/header/header/header.ts @@ -50,7 +50,10 @@ class SbbHeaderElement extends SbbHydrationMixin(LitElement) { @property({ attribute: 'hide-on-scroll', reflect: true, type: Boolean }) public accessor hideOnScroll: boolean = false; - /** Size of the header. */ + /** + * Size of the header, either m or s. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 'm' | 's' = isLean() ? 's' : 'm'; @state() private accessor _headerOnTop = true; diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md index 2f137b36e2..d42697bcef 100644 --- a/src/elements/header/header/readme.md +++ b/src/elements/header/header/readme.md @@ -39,7 +39,7 @@ For the latter, the usage of the `sbb-signet` with `protective-room='panel'` is Search - + ``` @@ -167,12 +167,12 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------- | ---------------- | ------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | -| `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | -| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | -| `size` | `size` | public | `'m' \| 's'` | | Size of the header. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------- | ---------------- | ------- | ----------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------- | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | +| `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | +| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | +| `size` | `size` | public | `'m' \| 's'` | `'m' / 's' (lean)` | Size of the header, either m or s. | ## CSS Properties diff --git a/src/elements/journey-header/journey-header.ts b/src/elements/journey-header/journey-header.ts index 6cf683a207..00c8e60944 100644 --- a/src/elements/journey-header/journey-header.ts +++ b/src/elements/journey-header/journey-header.ts @@ -49,7 +49,10 @@ class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) { /** Heading level of the journey header element (e.g. h1-h6). */ @property() public accessor level: SbbTitleLevel = '3'; - /** Journey header size. */ + /** + * Journey header size, either s, m or l. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: JourneyHeaderSize = isLean() ? 's' : 'm'; private _language = new SbbLanguageController(this); diff --git a/src/elements/journey-header/readme.md b/src/elements/journey-header/readme.md index dc439400f2..0b0a7ac464 100644 --- a/src/elements/journey-header/readme.md +++ b/src/elements/journey-header/readme.md @@ -48,11 +48,11 @@ The following one will be read as (locale: ENG): `Connection from Point A to Poi ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------- | ------------- | ------- | ------------------- | ------- | --------------------------------------------------------------------------------- | -| `destination` | `destination` | public | `string` | `''` | Destination location for the journey header. | -| `level` | `level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `origin` | `origin` | public | `string` | `''` | Origin location for the journey header. | -| `roundTrip` | `round-trip` | public | `boolean` | `false` | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | -| `size` | `size` | public | `JourneyHeaderSize` | | Journey header size. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | ------------- | ------- | ------------------- | ------------------ | --------------------------------------------------------------------------------- | +| `destination` | `destination` | public | `string` | `''` | Destination location for the journey header. | +| `level` | `level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `origin` | `origin` | public | `string` | `''` | Origin location for the journey header. | +| `roundTrip` | `round-trip` | public | `boolean` | `false` | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | +| `size` | `size` | public | `JourneyHeaderSize` | `'m' / 's' (lean)` | Journey header size, either s, m or l. | diff --git a/src/elements/link-list/common/link-list-base.ts b/src/elements/link-list/common/link-list-base.ts index c1c253481c..8756b62031 100644 --- a/src/elements/link-list/common/link-list-base.ts +++ b/src/elements/link-list/common/link-list-base.ts @@ -50,6 +50,7 @@ class SbbLinkListBaseElement extends SbbNegativeMixin( /** * Text size of the nested sbb-block-link instances. * This will overwrite the size attribute of nested sbb-block-link instances. + * @default 's' / 'xs' (lean) */ @property({ reflect: true }) public accessor size: SbbLinkSize = isLean() ? 'xs' : 's'; diff --git a/src/elements/link-list/link-list-anchor/readme.md b/src/elements/link-list/link-list-anchor/readme.md index 7cd532b625..a9c17eb6e4 100644 --- a/src/elements/link-list/link-list-anchor/readme.md +++ b/src/elements/link-list/link-list-anchor/readme.md @@ -38,12 +38,12 @@ and it will sync its `size` and `negative` property with the inner links. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------- | --------------- | ------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbLinkSize` | | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------- | --------------- | ------- | --------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | ## Slots diff --git a/src/elements/link-list/link-list/readme.md b/src/elements/link-list/link-list/readme.md index b55d8bb8c9..107a529375 100644 --- a/src/elements/link-list/link-list/readme.md +++ b/src/elements/link-list/link-list/readme.md @@ -70,14 +70,14 @@ The title will not be displayed in the horizontal orientation. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | --------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Selected breakpoint from which the list is rendered horizontally. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | -| `size` | `size` | public | `SbbLinkSize` | | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | --------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Selected breakpoint from which the list is rendered horizontally. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `titleContent` | `title-content` | public | `string` | `''` | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | ## Slots diff --git a/src/elements/link/block-link-button/readme.md b/src/elements/link/block-link-button/readme.md index af9ea6030d..5c42841482 100644 --- a/src/elements/link/block-link-button/readme.md +++ b/src/elements/link/block-link-button/readme.md @@ -61,17 +61,17 @@ guard against such cases in your component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ---------------------- | ------- | ------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | +| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/link/block-link-static/readme.md b/src/elements/link/block-link-static/readme.md index e9315299c1..a88f14d3f3 100644 --- a/src/elements/link/block-link-static/readme.md +++ b/src/elements/link/block-link-static/readme.md @@ -39,12 +39,12 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | -| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | +| `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | ## Slots diff --git a/src/elements/link/block-link/readme.md b/src/elements/link/block-link/readme.md index e3e6531e32..2643cb52a2 100644 --- a/src/elements/link/block-link/readme.md +++ b/src/elements/link/block-link/readme.md @@ -51,17 +51,17 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | -------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `SbbLinkSize` | | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | -------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean` | `false` | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string` | `''` | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | +| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | ## Slots diff --git a/src/elements/link/common/link-common.ts b/src/elements/link/common/link-common.ts index 3598660856..2e0a82b053 100644 --- a/src/elements/link/common/link-common.ts +++ b/src/elements/link/common/link-common.ts @@ -34,6 +34,7 @@ export const SbbLinkCommonElementMixin = = new EventEmitter( @@ -149,10 +152,7 @@ export const SbbPaginatorCommonElementMixin = + - i.group?.size ? (isLean() || i.group.size === 'xs' ? 's' : i.group.size) : v, - ) + @getOverride((i, v) => (i.group?.size ? (i.group.size === 'xs' ? 's' : i.group.size) : v)) public accessor size: SbbPanelSize = isLean() ? 's' : 'm'; private _hasSelectionExpansionPanelElement: boolean = false; diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md index 7ff731026a..732f9eef42 100644 --- a/src/elements/radio-button/radio-button-panel/readme.md +++ b/src/elements/radio-button/radio-button-panel/readme.md @@ -65,20 +65,20 @@ The component's label can be displayed in bold using the `sbb-text--bold` class ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ----------------------- | ------- | ------------------------------------ | --------- | -------------------------------------------------------------- | -| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | -| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | | Size variant. | -| `type` | - | public | `string` | `'radio'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ----------------------- | ------- | ------------------------------------ | ------------------ | -------------------------------------------------------------- | +| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | +| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbPanelSize` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `type` | - | public | `string` | `'radio'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/radio-button/radio-button/radio-button.ts b/src/elements/radio-button/radio-button/radio-button.ts index 5f0b76d50e..0c790053ab 100644 --- a/src/elements/radio-button/radio-button/radio-button.ts +++ b/src/elements/radio-button/radio-button/radio-button.ts @@ -31,7 +31,10 @@ class SbbRadioButtonElement extends SbbRadioButtonCommonElementMixin(LitElement) input: 'input', } as const; - /** Size variant. */ + /** + * Size variant. + * @default 'm' / 'xs' (lean) + */ @property({ reflect: true }) @getOverride((i, v) => i.group?.size ?? v) public accessor size: SbbRadioButtonSize = isLean() ? 'xs' : 'm'; diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index 4d324344e0..883a5b3227 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -58,18 +58,18 @@ The component's label can be displayed in bold using the `sbb-text--bold` class ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ----------------------- | ------- | ------------------------------------ | --------- | -------------------------------------------------------------- | -| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | | Size variant. | -| `type` | - | public | `string` | `'radio'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ----------------------- | ------- | ------------------------------------ | ------------------- | -------------------------------------------------------------- | +| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbRadioButtonSize` | `'m' / 'xs' (lean)` | Size variant. | +| `type` | - | public | `string` | `'radio'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/stepper/stepper/readme.md b/src/elements/stepper/stepper/readme.md index 3f30fb61dd..79e723bd5f 100644 --- a/src/elements/stepper/stepper/readme.md +++ b/src/elements/stepper/stepper/readme.md @@ -103,15 +103,15 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | -------------------------------- | -------------- | --------------------------------------------------------------------------------- | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | -| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | -| `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. | -| `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. | -| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either s or m. | -| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | -------------------------------- | ------------------ | --------------------------------------------------------------------------------- | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | +| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | +| `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. | +| `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | ## Methods diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 3af33ebb6f..1c67f89cf2 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -52,7 +52,10 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { @property({ reflect: true }) public accessor orientation: SbbOrientation = 'horizontal'; - /** Size variant, either s or m. */ + /** + * Size variant, either s or m. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 's' | 'm' = isLean() ? 's' : 'm'; /** The currently selected step. */ diff --git a/src/elements/tabs/tab-group/readme.md b/src/elements/tabs/tab-group/readme.md index 9fcaf34b12..c99f00886a 100644 --- a/src/elements/tabs/tab-group/readme.md +++ b/src/elements/tabs/tab-group/readme.md @@ -57,10 +57,10 @@ type SbbTabChangedEventDetails = { ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------------- | ------------------------ | ------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| `initialSelectedIndex` | `initial-selected-index` | public | `number` | `0` | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. | -| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | | Size variant, either s, l or xl. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------------- | ------------------------ | ------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| `initialSelectedIndex` | `initial-selected-index` | public | `number` | `0` | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. | +| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l' / 's' (lean)` | Size variant, either s, l or xl. | ## Methods diff --git a/src/elements/tabs/tab-group/tab-group.ts b/src/elements/tabs/tab-group/tab-group.ts index 07998981f5..a3378703da 100644 --- a/src/elements/tabs/tab-group/tab-group.ts +++ b/src/elements/tabs/tab-group/tab-group.ts @@ -84,7 +84,10 @@ class SbbTabGroupElement extends SbbHydrationMixin(LitElement) { callback: (entries) => this._onTabContentElementResize(entries), }); - /** Size variant, either s, l or xl. */ + /** + * Size variant, either s, l or xl. + * @default 'l' / 's' (lean) + */ @property() public set size(value: InterfaceSbbTabGroupTab['size']) { this._size = value; diff --git a/src/elements/tag/tag-group/readme.md b/src/elements/tag/tag-group/readme.md index ac8daf1dfc..4adc7721d6 100644 --- a/src/elements/tag/tag-group/readme.md +++ b/src/elements/tag/tag-group/readme.md @@ -103,13 +103,13 @@ that communicates the collective meaning of all `sbb-tag`s. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------------------ | -------------------------- | ------- | -------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `listAccessibilityLabel` | `list-accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner list. | -| `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | -| `size` | `size` | public | `SbbTagSize` | | Tag group size. | -| `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | -| `value` | `value` | public | `string \| (string \| null)[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------------ | -------------------------- | ------- | -------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `listAccessibilityLabel` | `list-accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the inner list. | +| `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | +| `size` | `size` | public | `SbbTagSize` | `'m' / 's' (lean)` | Tag group size, either s or m. | +| `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | +| `value` | `value` | public | `string \| (string \| null)[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | ## Slots diff --git a/src/elements/tag/tag-group/tag-group.ts b/src/elements/tag/tag-group/tag-group.ts index f5ecc426c4..5211bb0762 100644 --- a/src/elements/tag/tag-group/tag-group.ts +++ b/src/elements/tag/tag-group/tag-group.ts @@ -46,7 +46,10 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin i._group?.size ?? v) public accessor size: SbbTagSize = isLean() ? 's' : 'm'; diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 2f9d84ee12..48ee0f4883 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -64,18 +64,18 @@ you can not provide it and then use `aria-label` to specify an appropriate label ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------- | -------------- | -------------------------------------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `iconName` | `icon-name` | public | `string` | `'tick-small'` | The svg name for the true state - default -> 'tick-small' | -| `labelPosition` | `label-position` | public | `'before' \| 'after'` | `'after'` | The label position relative to the toggle. Defaults to 'after' | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `'xs' \| 's' \| 'm'` | | Size variant, either m, s or xs. | -| `type` | - | public | `string` | `'checkbox'` | Form type of element. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------- | ------------------- | -------------------------------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `iconName` | `icon-name` | public | `string` | `'tick-small'` | The svg name for the true state - default -> 'tick-small' | +| `labelPosition` | `label-position` | public | `'before' \| 'after'` | `'after'` | The label position relative to the toggle. Defaults to 'after' | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `'xs' \| 's' \| 'm'` | `'s' / 'xs' (lean)` | Size variant, either m, s or xs. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/toggle-check/toggle-check.ts b/src/elements/toggle-check/toggle-check.ts index 2417e3b3e4..c362948eb5 100644 --- a/src/elements/toggle-check/toggle-check.ts +++ b/src/elements/toggle-check/toggle-check.ts @@ -27,7 +27,10 @@ class SbbToggleCheckElement extends SbbFormAssociatedCheckboxMixin(SbbIconNameMi didChange: 'didChange', } as const; - /** Size variant, either m, s or xs. */ + /** + * Size variant, either m, s or xs. + * @default 's' / 'xs' (lean) + */ @property({ reflect: true }) public accessor size: 'xs' | 's' | 'm' = isLean() ? 'xs' : 's'; /** The svg name for the true state - default -> 'tick-small' */ diff --git a/src/elements/toggle/toggle/readme.md b/src/elements/toggle/toggle/readme.md index 3f335ea558..7553d7e839 100644 --- a/src/elements/toggle/toggle/readme.md +++ b/src/elements/toggle/toggle/readme.md @@ -34,13 +34,13 @@ The component has two different sizes, `s` and `m` (default), which can be set u ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the toggle is disabled. | -| `even` | `even` | public | `boolean` | `false` | If true, set the width of the component fixed; if false, the width is dynamic based on the label of the sbb-toggle-option. | -| `options` | - | public | `SbbToggleOptionElement[]` | | The child instances of sbb-toggle-option as an array. | -| `size` | `size` | public | `'s' \| 'm'` | | Size variant, either m or s. | -| `value` | `value` | public | `string` | `null` | The value of the toggle. It needs to be mutable since it is updated whenever a new option is selected (see the `onToggleOptionSelect()` method). | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | -------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the toggle is disabled. | +| `even` | `even` | public | `boolean` | `false` | If true, set the width of the component fixed; if false, the width is dynamic based on the label of the sbb-toggle-option. | +| `options` | - | public | `SbbToggleOptionElement[]` | | The child instances of sbb-toggle-option as an array. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either m or s. | +| `value` | `value` | public | `string` | `null` | The value of the toggle. It needs to be mutable since it is updated whenever a new option is selected (see the `onToggleOptionSelect()` method). | ## Events diff --git a/src/elements/toggle/toggle/toggle.ts b/src/elements/toggle/toggle/toggle.ts index 2b35793172..f91ee4a170 100644 --- a/src/elements/toggle/toggle/toggle.ts +++ b/src/elements/toggle/toggle/toggle.ts @@ -51,7 +51,10 @@ class SbbToggleElement extends LitElement { @property({ reflect: true, type: Boolean }) public accessor even: boolean = false; - /** Size variant, either m or s. */ + /** + * Size variant, either m or s. + * @default 'm' / 's' (lean) + */ @property({ reflect: true }) public accessor size: 's' | 'm' = isLean() ? 's' : 'm'; /** diff --git a/src/elements/visual-checkbox/readme.md b/src/elements/visual-checkbox/readme.md index d0ba77dd29..4ed6a2e9de 100644 --- a/src/elements/visual-checkbox/readme.md +++ b/src/elements/visual-checkbox/readme.md @@ -26,10 +26,10 @@ The component has three `size`, named `xs`, `s` and `m` (default). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | --------------- | ------- | ----------------- | ------- | ---------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Checked state. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Indeterminate state. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `size` | `size` | public | `SbbCheckboxSize` | | Size of the checkbox. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | --------------- | ------- | ----------------- | ------------------- | ---------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Checked state. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Indeterminate state. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m' / 'xs' (lean)` | Size of the checkbox, either xs, s or m. | diff --git a/src/elements/visual-checkbox/visual-checkbox.ts b/src/elements/visual-checkbox/visual-checkbox.ts index 49df1fc001..143540d66f 100644 --- a/src/elements/visual-checkbox/visual-checkbox.ts +++ b/src/elements/visual-checkbox/visual-checkbox.ts @@ -27,7 +27,10 @@ class SbbVisualCheckboxElement extends SbbDisabledMixin(SbbNegativeMixin(LitElem @property({ reflect: true, type: Boolean }) public accessor indeterminate: boolean = false; - /** Size of the checkbox. */ + /** + * Size of the checkbox, either xs, s or m. + * @default 'm' / 'xs' (lean) + */ @property({ reflect: true }) public accessor size: SbbCheckboxSize = isLean() ? 'xs' : 'm'; protected override render(): TemplateResult { diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts index 0504f2d5da..5a72f68418 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -1,5 +1,5 @@ import type { Args } from '@storybook/web-components'; -import { nothing, type TemplateResult } from 'lit'; +import type { TemplateResult } from 'lit'; import { html } from 'lit'; import '../../../elements/button.js'; @@ -33,7 +33,7 @@ export const timetableInput = (): TemplateResult => html` `; -export const navigation = (isLean: boolean = false): TemplateResult => html` +export const navigation = (): TemplateResult => html` @@ -46,7 +46,7 @@ export const navigation = (isLean: boolean = false): TemplateResult => html` - + Deutsch Français Italiano @@ -92,9 +92,7 @@ export const navigation = (isLean: boolean = false): TemplateResult => html` Label - - All Tickets & Offers - + All Tickets & Offers @@ -148,11 +146,7 @@ export const navigation = (isLean: boolean = false): TemplateResult => html` Label - + Travel Information @@ -223,7 +217,7 @@ export const teaserHero = (): TemplateResult => html` `; -export const footer = (args: Args, isLean: boolean = false): TemplateResult => html` +export const footer = (args: Args): TemplateResult => html` h All help topics @@ -313,7 +307,7 @@ export const footer = (args: Args, isLean: boolean = false): TemplateResult => h Subscribe diff --git a/src/storybook/pages/home/home.scss b/src/storybook/pages/home/home.scss index e6c173a248..155cde0624 100644 --- a/src/storybook/pages/home/home.scss +++ b/src/storybook/pages/home/home.scss @@ -227,26 +227,3 @@ section sbb-title { .grid-span-2 { grid-area: span 2; } - -.lean-section { - display: flex; - flex-wrap: wrap; - margin-block: var(--sbb-spacing-fixed-4x); -} - -.lean-container { - width: 100%; - display: flex; - gap: var(--sbb-spacing-fixed-4x); - padding: var(--sbb-spacing-fixed-4x); - flex-wrap: wrap; -} - -.lean-container-half { - width: 100%; - display: flex; - flex-direction: column; - flex: 50%; - gap: var(--sbb-spacing-fixed-4x); - padding: var(--sbb-spacing-fixed-4x); -} diff --git a/src/storybook/pages/home/home.stories.ts b/src/storybook/pages/home/home.stories.ts index 934ce851aa..cbd6b6670c 100644 --- a/src/storybook/pages/home/home.stories.ts +++ b/src/storybook/pages/home/home.stories.ts @@ -1,7 +1,6 @@ import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components'; -import { homeLeanTemplate } from './home-lean.js'; import { homeLoggedInTemplate } from './home-logged-in.js'; import { homeTemplate } from './home.js'; import readme from './readme.md?raw'; @@ -36,13 +35,6 @@ export const homeLoggedIn: StoryObj = { render: homeLoggedInTemplate, }; -export const lean: StoryObj = { - render: homeLeanTemplate, - parameters: { - isLean: true, - }, -}; - const meta: Meta = { argTypes: defaultArgTypes, args: defaultArgs, diff --git a/src/storybook/pages/lean/lean.scss b/src/storybook/pages/lean/lean.scss new file mode 100644 index 0000000000..b527216d4f --- /dev/null +++ b/src/storybook/pages/lean/lean.scss @@ -0,0 +1,24 @@ +@use '../../../elements/core/styles' as sbb; + +.lean-section { + display: flex; + flex-wrap: wrap; + margin-block: var(--sbb-spacing-fixed-4x); +} + +.lean-container { + width: 100%; + display: flex; + gap: var(--sbb-spacing-fixed-4x); + padding: var(--sbb-spacing-fixed-4x); + flex-wrap: wrap; +} + +.lean-container-half { + width: 100%; + display: flex; + flex-direction: column; + flex: 50%; + gap: var(--sbb-spacing-fixed-4x); + padding: var(--sbb-spacing-fixed-4x); +} diff --git a/src/storybook/pages/home/home-lean.ts b/src/storybook/pages/lean/lean.stories.ts similarity index 84% rename from src/storybook/pages/home/home-lean.ts rename to src/storybook/pages/lean/lean.stories.ts index 9af2191215..d9bc3ec6e4 100644 --- a/src/storybook/pages/home/home-lean.ts +++ b/src/storybook/pages/lean/lean.stories.ts @@ -1,25 +1,28 @@ -import type { Args } from '@storybook/web-components'; +import type { Meta, StoryObj } from '@storybook/web-components'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; import '../../../elements/alert.js'; import '../../../elements/container.js'; import '../../../elements/action-group.js'; +import '../../../elements/button.js'; +import '../../../elements/card.js'; import '../../../elements/checkbox.js'; import '../../../elements/form-field.js'; +import '../../../elements/header.js'; import '../../../elements/icon.js'; +import '../../../elements/menu.js'; import '../../../elements/paginator.js'; import '../../../elements/radio-button.js'; +import '../../../elements/signet.js'; import '../../../elements/table.js'; -import { footer, navigation, skiplinkList } from './home.common.js'; -import './home.scss'; -export const homeLeanTemplate = (args: Args): TemplateResult => html` -
- ${skiplinkList()} +import './lean.scss'; +const leanExampleTemplate = (): TemplateResult => html` +
- + Menu
@@ -36,15 +39,13 @@ export const homeLeanTemplate = (args: Args): TemplateResult => html` Italiano English - - + + - ${navigation(true)} - -
+
@@ -64,10 +65,10 @@ export const homeLeanTemplate = (args: Args): TemplateResult => html` Search
-
+
- +
@@ -137,7 +138,19 @@ export const homeLeanTemplate = (args: Args): TemplateResult => html` - - ${footer(args, true)} `; + +export const leanExample: StoryObj = { + render: leanExampleTemplate, +}; + +const meta: Meta = { + parameters: { + isLean: true, + layout: 'fullscreen', + }, + title: 'pages/lean', +}; + +export default meta; From 2c47a371f3d5feed7a8cfa890288f90e6f8edecd Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 27 Nov 2024 09:52:40 +0100 Subject: [PATCH 10/14] chore: fix on method doc --- .storybook/preview.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 6b1b9fa1a7..aaf30b2224 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -6,7 +6,7 @@ import type { Preview } from '@storybook/web-components'; import '../src/elements/core/styles/standard-theme.scss'; /** - * The Lean design is applied by adding the 'sbb-lean' class to the document's body. + * The Lean design is applied by adding the 'sbb-lean' class to the document. */ const withLeanDecorator = makeDecorator({ name: 'withLeanStyle', From 35a56da61d7095c6c0cfced12f3ad2c7a9a95097 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 27 Nov 2024 09:54:08 +0100 Subject: [PATCH 11/14] chore: fix on method doc --- src/elements/core/dom/lean-context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/core/dom/lean-context.ts b/src/elements/core/dom/lean-context.ts index fb91aeb1b4..4f487ccba0 100644 --- a/src/elements/core/dom/lean-context.ts +++ b/src/elements/core/dom/lean-context.ts @@ -1,7 +1,7 @@ import { isServer } from 'lit'; /** - * Checks if the body has the `sbb-lean` class. + * Checks if the document has the `sbb-lean` class. */ export function isLean(): boolean { return !isServer && document.documentElement.classList.contains('sbb-lean'); From 025da5de0a29ee4eb0b688bd8271dd8faebadbd0 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 27 Nov 2024 10:02:22 +0100 Subject: [PATCH 12/14] chore: fix doc --- .../navigation/navigation-marker/navigation-marker.ts | 2 +- src/elements/navigation/navigation-marker/readme.md | 6 +++--- src/elements/radio-button/radio-button/radio-button.ts | 2 +- src/elements/radio-button/radio-button/readme.md | 2 +- src/elements/tag/tag/readme.md | 2 +- src/elements/tag/tag/tag.ts | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/elements/navigation/navigation-marker/navigation-marker.ts b/src/elements/navigation/navigation-marker/navigation-marker.ts index 095e818149..9bb9e4d17d 100644 --- a/src/elements/navigation/navigation-marker/navigation-marker.ts +++ b/src/elements/navigation/navigation-marker/navigation-marker.ts @@ -27,7 +27,7 @@ class SbbNavigationMarkerElement extends SbbNamedSlotListMixin< ]; /** - * Marker size variant. + * Marker size variant, either s or l. * @default 'l' / 's' (lean) */ @property({ reflect: true }) public accessor size: 'l' | 's' = isLean() ? 's' : 'l'; diff --git a/src/elements/navigation/navigation-marker/readme.md b/src/elements/navigation/navigation-marker/readme.md index 1e74213bb9..295a66599f 100644 --- a/src/elements/navigation/navigation-marker/readme.md +++ b/src/elements/navigation/navigation-marker/readme.md @@ -27,9 +27,9 @@ Possible values are `l` (default) and `s`. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------ | --------- | ------- | ------------ | ------------------ | -------------------- | -| `size` | `size` | public | `'l' \| 's'` | `'l' / 's' (lean)` | Marker size variant. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------ | --------- | ------- | ------------ | ------------------ | ----------------------------------- | +| `size` | `size` | public | `'l' \| 's'` | `'l' / 's' (lean)` | Marker size variant, either s or l. | ## Methods diff --git a/src/elements/radio-button/radio-button/radio-button.ts b/src/elements/radio-button/radio-button/radio-button.ts index 0c790053ab..4cb03f1c8a 100644 --- a/src/elements/radio-button/radio-button/radio-button.ts +++ b/src/elements/radio-button/radio-button/radio-button.ts @@ -32,7 +32,7 @@ class SbbRadioButtonElement extends SbbRadioButtonCommonElementMixin(LitElement) } as const; /** - * Size variant. + * Size variant, either xs, s or m. * @default 'm' / 'xs' (lean) */ @property({ reflect: true }) diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index 883a5b3227..ae2b7e6fae 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -67,7 +67,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m' / 'xs' (lean)` | Size variant. | +| `size` | `size` | public | `SbbRadioButtonSize` | `'m' / 'xs' (lean)` | Size variant, either xs, s or m. | | `type` | - | public | `string` | `'radio'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/tag/tag/readme.md b/src/elements/tag/tag/readme.md index 099ef3e26c..1a0377a2e6 100644 --- a/src/elements/tag/tag/readme.md +++ b/src/elements/tag/tag/readme.md @@ -87,7 +87,7 @@ This can be achieved by adding an `aria-label`, `aria-labelledby` or `aria-descr | `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `size` | `size` | public | `SbbTagSize` | `'m' / 's' (lean)` | Tag size, either s or m | +| `size` | `size` | public | `SbbTagSize` | `'m' / 's' (lean)` | Tag size, either s or m. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/tag/tag/tag.ts b/src/elements/tag/tag/tag.ts index 5f1fd26211..5ecb27de53 100644 --- a/src/elements/tag/tag/tag.ts +++ b/src/elements/tag/tag/tag.ts @@ -47,7 +47,7 @@ class SbbTagElement extends SbbIconNameMixin(SbbDisabledTabIndexActionMixin(SbbB public accessor checked: boolean = false; /** - * Tag size, either s or m + * Tag size, either s or m. * @default 'm' / 's' (lean) */ @property({ reflect: true }) From a30267797610c4f748d8b4ecf0e92cba88abe8c6 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 27 Nov 2024 14:51:01 +0100 Subject: [PATCH 13/14] fix: review Jeri --- src/elements/action-group/action-group.ts | 5 +- src/elements/action-group/readme.md | 14 +- src/elements/alert/alert/alert.ts | 2 +- src/elements/dialog/dialog-actions/readme.md | 14 +- src/storybook/pages/lean/lean.scss | 6 +- src/storybook/pages/lean/lean.stories.ts | 231 +++++++++---------- 6 files changed, 134 insertions(+), 138 deletions(-) diff --git a/src/elements/action-group/action-group.ts b/src/elements/action-group/action-group.ts index 33c29e1ef3..137472a38e 100644 --- a/src/elements/action-group/action-group.ts +++ b/src/elements/action-group/action-group.ts @@ -51,8 +51,9 @@ class SbbActionGroupElement extends LitElement { public accessor buttonSize: SbbButtonSize = isLean() ? 's' : 'l'; /** - * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested - * sbb-block-link instances. + * Size of the nested sbb-block-link instances. + * This will overwrite the size attribute of nested sbb-block-link instances. + * @default 'm' / 'xs' (lean) */ @property({ attribute: 'link-size', reflect: true }) public accessor linkSize: SbbLinkSize = isLean() ? 'xs' : 'm'; diff --git a/src/elements/action-group/readme.md b/src/elements/action-group/readme.md index 744b9eef34..0bbda6dee0 100644 --- a/src/elements/action-group/readme.md +++ b/src/elements/action-group/readme.md @@ -120,13 +120,13 @@ The values for `align-group` and `align-self` for the various allocations are as ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | -| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m' / 'xs' (lean)` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 1f617b3d3d..60aedc7fc4 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -177,7 +177,7 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { > this.close()} aria-label=${i18nCloseAlert[this._language.current]} diff --git a/src/elements/dialog/dialog-actions/readme.md b/src/elements/dialog/dialog-actions/readme.md index bf8371a639..b6890aaacf 100644 --- a/src/elements/dialog/dialog-actions/readme.md +++ b/src/elements/dialog/dialog-actions/readme.md @@ -14,13 +14,13 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/elements ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | -| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l' / 's' (lean)` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m' / 'xs' (lean)` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/storybook/pages/lean/lean.scss b/src/storybook/pages/lean/lean.scss index b527216d4f..063b22e20c 100644 --- a/src/storybook/pages/lean/lean.scss +++ b/src/storybook/pages/lean/lean.scss @@ -9,8 +9,7 @@ .lean-container { width: 100%; display: flex; - gap: var(--sbb-spacing-fixed-4x); - padding: var(--sbb-spacing-fixed-4x); + padding-block: var(--sbb-spacing-fixed-4x); flex-wrap: wrap; } @@ -19,6 +18,5 @@ display: flex; flex-direction: column; flex: 50%; - gap: var(--sbb-spacing-fixed-4x); - padding: var(--sbb-spacing-fixed-4x); + padding-block: var(--sbb-spacing-fixed-4x); } diff --git a/src/storybook/pages/lean/lean.stories.ts b/src/storybook/pages/lean/lean.stories.ts index d9bc3ec6e4..5707eff763 100644 --- a/src/storybook/pages/lean/lean.stories.ts +++ b/src/storybook/pages/lean/lean.stories.ts @@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; +import '../../../elements/action-group.js'; import '../../../elements/alert.js'; import '../../../elements/container.js'; -import '../../../elements/action-group.js'; import '../../../elements/button.js'; import '../../../elements/card.js'; import '../../../elements/checkbox.js'; @@ -20,125 +20,122 @@ import '../../../elements/table.js'; import './lean.scss'; const leanExampleTemplate = (): TemplateResult => html` -
- - - Menu - -
- Search - - Sign in - - - English - - - Deutsch - Français - Italiano - English - - - - - + + + Menu + +
+ Search + + Sign in + + + English + + + Deutsch + Français + Italiano + English + + + + + - -
-
- - - - Zug - Lucerne - Fribourg - - - - - - - - + +
+
+ + + + Zug + Lucerne + Fribourg + + + + + + + + + Clear departure Search -
-
-
-
- -
Station Departure
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
StationDepartureArrival
Bern9:0010:00
Zurich9:1510:15
Basel9.4510.45
Geneva10:0011:00
Lausanne10:3011:30
Bellinzona11:0012:00
- - -
-
- - Value one - Value two - Value three - Value four - - - Label - Subtext - - - CHF 40.00 - - % - -
-
- -
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StationDepartureArrival
Bern9:0010:00
Zurich9:1510:15
Basel9.4510.45
Geneva10:0011:00
Lausanne10:3011:30
Bellinzona11:0012:00
+ + +
+
+ + Value one + Value two + Value three + Value four + + + Label + Subtext + + + CHF 40.00 + + % + +
+
+ `; export const leanExample: StoryObj = { From 333159f993397e8797b26f864624d4330cde3e56 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 28 Nov 2024 11:15:04 +0100 Subject: [PATCH 14/14] fix: review Jeri --- src/elements/core/styles/table.scss | 4 ++++ src/storybook/pages/lean/lean.scss | 28 ++++++++++++++---------- src/storybook/pages/lean/lean.stories.ts | 8 +++---- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/elements/core/styles/table.scss b/src/elements/core/styles/table.scss index d783451a67..7d5be705dd 100644 --- a/src/elements/core/styles/table.scss +++ b/src/elements/core/styles/table.scss @@ -59,3 +59,7 @@ sbb-table-wrapper[negative] .sbb-table, .sbb-table-caption { @include table.table-caption; } + +html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) { + @include table.table--s; +} diff --git a/src/storybook/pages/lean/lean.scss b/src/storybook/pages/lean/lean.scss index 063b22e20c..9eb7bc912e 100644 --- a/src/storybook/pages/lean/lean.scss +++ b/src/storybook/pages/lean/lean.scss @@ -1,22 +1,28 @@ @use '../../../elements/core/styles' as sbb; .lean-section { - display: flex; - flex-wrap: wrap; - margin-block: var(--sbb-spacing-fixed-4x); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--sbb-grid-base-gutter-responsive); + padding-block: var(--sbb-spacing-fixed-4x); } -.lean-container { - width: 100%; +.lean-wrapper { display: flex; - padding-block: var(--sbb-spacing-fixed-4x); - flex-wrap: wrap; + gap: var(--sbb-spacing-fixed-4x); + grid-column: 1 / -1; + + @include sbb.mq($to: medium) { + flex-direction: column; + } } -.lean-container-half { - width: 100%; +.lean-wrapper-half { display: flex; flex-direction: column; - flex: 50%; - padding-block: var(--sbb-spacing-fixed-4x); + gap: var(--sbb-spacing-fixed-4x); + + @include sbb.mq($to: large) { + grid-column: 1/-1; + } } diff --git a/src/storybook/pages/lean/lean.stories.ts b/src/storybook/pages/lean/lean.stories.ts index 5707eff763..81dbd13635 100644 --- a/src/storybook/pages/lean/lean.stories.ts +++ b/src/storybook/pages/lean/lean.stories.ts @@ -45,7 +45,7 @@ const leanExampleTemplate = (): TemplateResult => html`
-
+
@@ -67,9 +67,9 @@ const leanExampleTemplate = (): TemplateResult => html`
-
+
- +
@@ -111,7 +111,7 @@ const leanExampleTemplate = (): TemplateResult => html` -
+
Value one Value two
Station Departure