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 all 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
22 changes: 21 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,26 @@ 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.
*/
const withLeanDecorator = makeDecorator({
name: 'withLeanStyle',
parameterName: 'isLean',
skipIfNoParametersOrOptions: false,
wrapper: (getStory, context, { parameters }) => {
const isLean = parameters as unknown as boolean;

if (isLean) {
document.documentElement.classList.add('sbb-lean');
} else {
document.documentElement.classList.remove('sbb-lean');
}

return getStory(context);
},
});

const withBackgroundDecorator = makeDecorator({
name: 'withContextSpecificBackgroundColor',
parameterName: 'backgroundColor',
Expand Down Expand Up @@ -78,7 +98,7 @@ const parameters: Parameters = {
};

const preview: Preview = {
decorators: [withBackgroundDecorator],
decorators: [withBackgroundDecorator, withLeanDecorator],
parameters,
tags: ['autodocs'],
};
Expand Down
17 changes: 17 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,23 @@ and on [storybook](https://lyne-storybook.app.sbb.ch).

## Styles

### Lean variant

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
<html lang="en" class="sbb-lean">
<head>
<title>Lyne Design System - Lean example</title>
</head>
<body>
...
</body>
</html>
```

### CSS files

Basically, all our styles are included in 'standard-theme.css' which should be included in your application.
Expand Down
8 changes: 6 additions & 2 deletions 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 @@ -20,9 +21,12 @@ 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' = 'l';
public accessor size: 's' | 'l' = isLean() ? 's' : 'l';

/**
* The heading level for the sbb-expansion-panel-headers within the component.
Expand Down
10 changes: 5 additions & 5 deletions src/elements/accordion/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'` | `'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

Expand Down
15 changes: 9 additions & 6 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 @@ -42,18 +43,20 @@ 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 = '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.
* 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 = 'm';
public accessor linkSize: SbbLinkSize = isLean() ? 'xs' : 'm';

protected override willUpdate(changedProperties: PropertyValues<this>): void {
super.willUpdate(changedProperties);
Expand Down
14 changes: 7 additions & 7 deletions src/elements/action-group/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<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. |
| `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. |
| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`. |
| 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' / '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 `<sbb-action-group>`. |

## Slots

Expand Down
8 changes: 6 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 @@ -45,8 +46,11 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) {
@property({ reflect: true, type: Boolean })
public accessor readonly: boolean = false;

/** You can choose between `s`, `m` or `l` size. */
@property({ reflect: true }) public accessor size: 's' | 'm' | 'l' = 'm';
/**
* 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';

/**
* Name of the icon which will be forward to the nested `sbb-icon`.
Expand Down
28 changes: 14 additions & 14 deletions src/elements/alert/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'` | `'m'` | 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

Expand Down
Loading
Loading