Skip to content

Commit

Permalink
docs: sort members, slots, css properties and events in readme files
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeripeierSBB
jeripeierSBB committed May 13, 2024
1 parent 52344e9 commit d434056
Show file tree
Hide file tree
Showing 101 changed files with 379 additions and 354 deletions.
27 changes: 26 additions & 1 deletion scripts/docs_generate.ts
View file
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
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
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
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
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
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

0 comments on commit d434056

Please sign in to comment.