Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into feat/lean-form-field-…
Browse files Browse the repository at this point in the history
…size-s

# Conflicts:
#	src/components/form-field/form-field/readme.md
  • Loading branch information
DavideMininni-Fincons committed May 14, 2024
2 parents 28fadb4 + cd4a5ff commit 66ea6b8
Show file tree
Hide file tree
Showing 177 changed files with 1,095 additions and 1,190 deletions.
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@
"@types/node": "20.12.11",
"@types/react": "18.3.2",
"@types/react-dom": "18.3.0",
"@typescript-eslint/eslint-plugin": "7.8.0",
"@typescript-eslint/parser": "7.8.0",
"@typescript-eslint/eslint-plugin": "7.9.0",
"@typescript-eslint/parser": "7.9.0",
"@web/test-runner": "0.18.2",
"@web/test-runner-commands": "0.9.0",
"@web/test-runner-playwright": "0.11.0",
Expand Down Expand Up @@ -123,9 +123,9 @@
"stylelint-config-standard-scss": "13.1.0",
"stylelint-scss": "6.3.0",
"ts-lit-plugin": "2.0.2",
"tsx": "4.10.1",
"tsx": "4.10.2",
"typescript": "5.4.5",
"typescript-eslint": "7.8.0",
"typescript-eslint": "7.9.0",
"vite": "5.2.11",
"vite-plugin-dts": "3.9.1"
},
Expand Down
27 changes: 26 additions & 1 deletion scripts/docs_generate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
import fs from 'fs';

import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
import type { Attribute, CustomElement, Package } from 'custom-elements-manifest/schema';
import type {
Attribute,
ClassDeclaration,
CustomElement,
Package,
} from 'custom-elements-manifest/schema';
import * as glob from 'glob';
// eslint-disable-next-line @typescript-eslint/naming-convention
import MagicString from 'magic-string';
Expand Down Expand Up @@ -125,6 +130,26 @@ async function updateComponentReadme(
}

const manifest: Package = JSON.parse(fs.readFileSync(manifestFilePath, 'utf-8'));

type ExtendedClassDeclaration = ClassDeclaration & {
cssProperties: { name: string }[];
events: { name: string }[];
members: { name: string }[];
slots: { name: string }[];
};

manifest.modules.forEach((module) => {
module.declarations
?.filter((declaration): declaration is ExtendedClassDeclaration => declaration.kind === 'class')
.forEach((declaration) =>
['members', 'slots', 'cssProperties', 'events'].forEach((type) =>
(declaration[type as keyof ExtendedClassDeclaration] as { name: string }[])?.sort((a, b) =>
a.name.localeCompare(b.name),
),
),
);
});

const markdown: string = customElementsManifestToMarkdown(manifest, {
headingOffset: -1, // Default heading is '###'
private: 'details', // We use 'details' because it's the only way to remove 'protected' members from the tables. We remove details section later.
Expand Down
2 changes: 1 addition & 1 deletion src/components/accordion/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped

| Name | Attribute | Privacy | Type | Default | Description |
| ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- |
| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. |
| `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. |

## Slots

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ snapshots["sbb-action-group renders renders - Dom"] =
href="https://github.com/lyne-design-system/lyne-components"
icon-name="chevron-small-left-small"
icon-placement="start"
role="link"
size="m"
tabindex="0"
>
Link
</sbb-block-link>
Expand Down Expand Up @@ -60,13 +58,7 @@ snapshots["sbb-action-group renders A11y tree Chrome"] =
},
{
"role": "link",
"name": "Link",
"children": [
{
"role": "link",
"name": "Link"
}
]
"name": "Link"
}
]
}
Expand All @@ -87,13 +79,7 @@ snapshots["sbb-action-group renders A11y tree Firefox"] =
{
"role": "link",
"name": "Link",
"children": [
{
"role": "link",
"name": "Link",
"value": "https://github.com/lyne-design-system/lyne-components"
}
]
"value": "https://github.com/lyne-design-system/lyne-components"
}
]
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/action-group/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,10 @@ 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. |
| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. |
| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`. |
| `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>`. |

## Slots

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,7 @@ snapshots["sbb-alert-group should render A11y tree Chrome"] =
},
{
"role": "link",
"name": "Find out more",
"children": [
{
"role": "link",
"name": "Find out more"
}
]
"name": "Find out more"
},
{
"role": "button",
Expand Down Expand Up @@ -96,13 +90,7 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] =
{
"role": "link",
"name": "Find out more",
"children": [
{
"role": "link",
"name": "Find out more",
"value": "https://www.sbb.ch/"
}
]
"value": "https://www.sbb.ch/"
},
{
"role": "button",
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert-group/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ and therefore interrupts screen reader flow, to immediately read out the alert c

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------------- | --------------------------- | ------- | ------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. |
| `accessibilityTitle` | `accessibility-title` | public | `string \| undefined` | | Title for this alert group which is only visible for screen reader users. |
| `accessibilityTitleLevel` | `accessibility-title-level` | public | `SbbTitleLevel` | `'2'` | Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. |
| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. |

## Events

Expand Down
20 changes: 3 additions & 17 deletions src/components/alert/alert/__snapshots__/alert.spec.snap.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ snapshots["sbb-alert should render customized properties"] =
</slot>
</p>
<sbb-link
aria-label="label"
accessibility-label="label"
data-action=""
data-link=""
data-sbb-link=""
Expand All @@ -106,9 +106,7 @@ snapshots["sbb-alert should render customized properties"] =
href="https://www.sbb.ch"
negative=""
rel="noopener"
role="link"
size="s"
tabindex="0"
target="_blank"
>
Show much more
Expand Down Expand Up @@ -161,13 +159,7 @@ snapshots["sbb-alert A11y tree Chrome"] =
},
{
"role": "link",
"name": "test-a11y-label",
"children": [
{
"role": "link",
"name": "Find out more"
}
]
"name": "test-a11y-label"
},
{
"role": "button",
Expand Down Expand Up @@ -197,13 +189,7 @@ snapshots["sbb-alert A11y tree Firefox"] =
{
"role": "link",
"name": "test-a11y-label",
"children": [
{
"role": "link",
"name": "Find out more",
"value": "https://www.sbb.ch/"
}
]
"value": "https://www.sbb.ch/"
},
{
"role": "button",
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert/alert.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
</p>
${this.href
? html` <sbb-link
aria-label=${this.accessibilityLabel ?? nothing}
accessibility-label=${this.accessibilityLabel ?? nothing}
href=${this.href ?? nothing}
target=${this.target ?? nothing}
rel=${this.rel ?? nothing}
Expand Down
16 changes: 8 additions & 8 deletions src/components/alert/alert/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,17 +84,17 @@ As a base rule, opening animations should be active if an alert arrives after th

| Name | Attribute | Privacy | Type | Default | Description |
| -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. |
| `animation` | `animation` | public | `'open' \| 'none'` | `'open'` | The enabled animations. |
| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
| `iconName` | `icon-name` | public | `string \| undefined` | `'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. |
| `linkContent` | `link-content` | public | `string \| undefined` | | 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 \| undefined` | | The relationship of the linked URL as space-separated link types. |
| `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m'` | You can choose between `m` or `l` size. |
| `iconName` | `icon-name` | public | `string \| undefined` | `'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. |
| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. |
| `titleContent` | `title-content` | public | `string \| undefined` | | 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. |
| `linkContent` | `link-content` | public | `string \| undefined` | | Content of the link. |
| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. |
| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. |
| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. |
| `animation` | `animation` | public | `'open' \| 'none'` | `'open'` | The enabled animations. |

## Methods

Expand All @@ -106,9 +106,9 @@ As a base rule, opening animations should be active if an alert arrives after th

| Name | Type | Description | Inherited From |
| -------------------- | ------------------- | ------------------------------------------------------------------ | -------------- |
| `willOpen` | `CustomEvent<void>` | Emits when the fade in animation starts. | |
| `didOpen` | `CustomEvent<void>` | Emits when the fade in animation ends and the button is displayed. | |
| `dismissalRequested` | `CustomEvent<void>` | Emits when dismissal of an alert was requested. | |
| `willOpen` | `CustomEvent<void>` | Emits when the fade in animation starts. | |

## Slots

Expand Down
Loading

0 comments on commit 66ea6b8

Please sign in to comment.