Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: provide lean context config #3233

Merged
merged 17 commits into from
Nov 28, 2024
Merged

feat: provide lean context config #3233

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5d4d977
feat: add isLean function
DavideMininni-Fincons Nov 20, 2024
b32d5d3
feat: use isLean function
DavideMininni-Fincons Nov 21, 2024
c8b1255
feat: use isLean function, add new lean stories, refactor home stories
DavideMininni-Fincons Nov 22, 2024
8275b22
fix: ssr
DavideMininni-Fincons Nov 22, 2024
cd6e4ea
Merge remote-tracking branch 'origin/main' into feat/provide-lean-con…
DavideMininni-Fincons Nov 22, 2024
27541c5
fix: merge
DavideMininni-Fincons Nov 22, 2024
e5f72a4
fix: review Jeri pt.1
DavideMininni-Fincons Nov 25, 2024
ef8301b
fix: review Jeri pt.2
DavideMininni-Fincons Nov 25, 2024
c3955b0
Merge remote-tracking branch 'origin/main' into feat/provide-lean-con…
DavideMininni-Fincons Nov 25, 2024
d571d65
fix: integrity after merge
DavideMininni-Fincons Nov 25, 2024
e4c1516
fix: add default in docs, refactor lean story
DavideMininni-Fincons Nov 26, 2024
2c47a37
chore: fix on method doc
DavideMininni-Fincons Nov 27, 2024
35a56da
chore: fix on method doc
DavideMininni-Fincons Nov 27, 2024
025da5d
chore: fix doc
DavideMininni-Fincons Nov 27, 2024
a302677
fix: review Jeri
DavideMininni-Fincons Nov 27, 2024
333159f
fix: review Jeri
DavideMininni-Fincons Nov 28, 2024
bdd3ff4
Merge branch 'main' into feat/provide-lean-context-config
jeripeierSBB Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLElement>(
'.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',
Expand Down Expand Up @@ -78,7 +102,7 @@ const parameters: Parameters = {
};

const preview: Preview = {
decorators: [withBackgroundDecorator],
decorators: [withBackgroundDecorator, withLeanDecorator],
parameters,
tags: ['autodocs'],
};
Expand Down
15 changes: 15 additions & 0 deletions docs/GETTING_STARTED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
DavideMininni-Fincons marked this conversation as resolved.
Show resolved Hide resolved

```html
<html lang="en">
<head>
<title>Lyne Design System - Lean example</title>
</head>
<body class="sbb-lean">
DavideMininni-Fincons marked this conversation as resolved.
Show resolved Hide resolved
...
</body>
</html>
```

### CSS files

Basically, all our styles are included in 'standard-theme.css' which should be included in your application.
Expand Down
3 changes: 2 additions & 1 deletion src/elements/accordion/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/elements/accordion/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`. |
DavideMininni-Fincons marked this conversation as resolved.
Show resolved Hide resolved
| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. |

## Slots
Expand Down
5 changes: 3 additions & 2 deletions src/elements/action-group/action-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
DavideMininni-Fincons marked this conversation as resolved.
Show resolved Hide resolved
*/
@property({ attribute: 'link-size', reflect: true })
public accessor linkSize: SbbLinkSize = 'm';
public accessor linkSize: SbbLinkSize = isLean() ? 'xs' : 'm';

protected override willUpdate(changedProperties: PropertyValues<this>): void {
super.willUpdate(changedProperties);
Expand Down
4 changes: 2 additions & 2 deletions src/elements/action-group/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<sbb-action-group>` 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 `<sbb-action-group>`. |

## Slots
Expand Down
5 changes: 3 additions & 2 deletions src/elements/alert/alert/alert.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js';
import { SbbIconNameMixin } from '../../icon.js';
import type { SbbTitleLevel } from '../../title.js';
Expand Down Expand Up @@ -46,7 +47,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`.
Expand Down Expand Up @@ -173,7 +174,7 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) {
></sbb-divider>
<sbb-transparent-button
negative
size=${this.size === 'l' ? 'm' : this.size}
size=${isLean() ? 's' : this.size === 'l' ? 'm' : this.size}
DavideMininni-Fincons marked this conversation as resolved.
Show resolved Hide resolved
icon-name="cross-small"
@click=${() => this.close()}
aria-label=${i18nCloseAlert[this._language.current]}
Expand Down
2 changes: 1 addition & 1 deletion src/elements/alert/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,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. |
Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/button-link/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/button-static/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |

Expand Down
3 changes: 2 additions & 1 deletion src/elements/button/common/button-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -38,7 +39,7 @@ export const SbbButtonCommonElementMixin = <T extends AbstractConstructor<SbbAct
implements Partial<SbbButtonCommonElementMixinType>
{
/** 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`
Expand Down
3 changes: 2 additions & 1 deletion src/elements/button/mini-button-group/mini-button-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<this>): void {
super.willUpdate(changedProperties);
Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/mini-button-group/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/secondary-button-link/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/secondary-button-static/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading
Loading