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

docs: sort members, slots, css properties and events in readme files #2653

Merged
merged 1 commit into from
May 14, 2024
Merged

docs: sort members, slots, css properties and events in readme files #2653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 26 additions & 1 deletion scripts/docs_generate.ts
View file
Open in desktop
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
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions src/components/action-group/readme.md
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion src/components/alert/alert-group/readme.md
View file
Open in desktop
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
16 changes: 8 additions & 8 deletions src/components/alert/alert/readme.md
View file
Open in desktop
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
12 changes: 6 additions & 6 deletions src/components/autocomplete/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,28 +99,28 @@ using `aria-activedescendant` to support navigation though the autocomplete opti

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor. |
| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. |
| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. |
| `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. |
| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. |
| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. |
| `triggerElement` | - | public | `HTMLInputElement \| undefined` | | Returns the trigger element. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |

## Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------- | ------- | ------------------------ | ---------- | ------ | -------------- |
| `open` | public | Opens the autocomplete. | | `void` | |
| `close` | public | Closes the autocomplete. | | `void` | |
| `open` | public | Opens the autocomplete. | | `void` | |

## Events

| Name | Type | Description | Inherited From |
| ----------- | ------------------- | ------------------------------------------------------------------------------------- | -------------- |
| `willOpen` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | |
| `didClose` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is closed. | |
| `didOpen` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is opened. | |
| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled. | |
| `didClose` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` is closed. | |
| `willOpen` | `CustomEvent<void>` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | |

## CSS Properties

Expand Down
Loading
Loading