Skip to content

Commit

Permalink
feat: provide lean context config (#3233)
Browse files Browse the repository at this point in the history 
To activate the lean mode, add the `sbb-lean` class on the document tag. The `sbb-table` will automatically take the CSS rules of the `sbb-table-s` class. The following components will take the smallest available value for the `size` property as default:
- sbb-accordion
- sbb-action-group
- sbb-alert
- sbb-button
- sbb-button-link
- sbb-button-static
- sbb-secondary-button
- sbb-secondary-button-link
- sbb-secondary-button-static
- sbb-tertiary-button
- sbb-tertiary-button-link
- sbb-tertiary-button-static
- sbb-transparent-button
- sbb-transparent-button-link
- sbb-transparent-button-static
- sbb-mini-button
- sbb-mini-button-group
- sbb-card
- sbb-checkbox
- sbb-checkbox-group
- sbb-checkbox-panel
- sbb-dialog-actions
- sbb-file-selector
- sbb-file-selector-dropzone
- sbb-form-field
- sbb-header
- sbb-journey header
- sbb-link list
- sbb-link list-anchor
- sbb-block-link
- sbb-block-link-button
- sbb-block-link-static
- sbb-link
- sbb-link-button
- sbb-link-static
- sbb-navigation-button
- sbb-navigation-link
- sbb-navigation-list
- sbb-navigation marker
- sbb-notification
- sbb-paginator
- sbb-paginator-compact
- sbb-radio-button
- sbb-radio-button-group
- sbb-radio-button-panel
- sbb-skiplink-list
- sbb-stepper
- sbb-tab-group
- sbb-tag
- sbb-tag-group
- sbb-toast
- sbb-toggle
- sbb-toggle-check
- sbb-visual checkbox
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons authored Nov 28, 2024
1 parent a3d0b51 commit 0e2a847
Show file tree
Hide file tree
Showing 95 changed files with 1,042 additions and 713 deletions.
22 changes: 21 additions & 1 deletion .storybook/preview.ts
View file
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
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
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
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
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
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
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
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

0 comments on commit 0e2a847

Please sign in to comment.