diff --git a/convenience/generate-component/boilerplate/readme.md b/convenience/generate-component/boilerplate/readme.md index ad92aa4f194..fef26ab3ff7 100644 --- a/convenience/generate-component/boilerplate/readme.md +++ b/convenience/generate-component/boilerplate/readme.md @@ -1,11 +1,45 @@ -To be documented... +> Explain the use and the purpose of the component, add minor details if needed, and provide a basic example.
+> If you reference other components, link at least once their documentation page (the path must start from "/docs/...").
+> Use triple backticks for the examples code block. -### Prop, event, method, accessibility... - -Brief description +The `__name__` is a component... ```html <__name__> ``` +> The following list of "## Paragraph" is only suggested; remove, create and adapt based on needs. + +## Slots + +> Describe slot naming and usage and provide an example of slotted content. + +## States + +> Describe the component states (`disabled`, `readonly`, etc.) and provide an example. + +## Style + +> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide an example. + +## Interactions + +> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide an example. + +## Events + +> Describe events triggered by the component and possibly how to get information from the payload. + +## Keyboard interaction + +> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it. + +| Keyboard | Action | +|----------------|---------------| +| Key | What it does. | + +## Accessibility + +> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers. + \ No newline at end of file diff --git a/src/components/sbb-accordion/readme.md b/src/components/sbb-accordion/readme.md index 2a610c3b9d5..82454063bc5 100644 --- a/src/components/sbb-accordion/readme.md +++ b/src/components/sbb-accordion/readme.md @@ -14,7 +14,7 @@ for one or more [sbb-expansion-panel](/docs/components-sbb-accordion-sbb-expansi ``` -### Variants +## Variants The `multi` property, if set, allows having more than one `sbb-expansion-panel` expanded at the same time. @@ -24,7 +24,7 @@ The `multi` property, if set, allows having more than one `sbb-expansion-panel` ``` -### Style +## Style The component has a `titleLevel` property, which is proxied to each inner `sbb-expansion-panel-header`, and can be used to wrap the header of each `sbb-expansion-panel` in a heading tag; if the property is unset, a `div` is used. diff --git a/src/components/sbb-action-group/readme.md b/src/components/sbb-action-group/readme.md index 9dc5992c7db..3f58c2116b4 100644 --- a/src/components/sbb-action-group/readme.md +++ b/src/components/sbb-action-group/readme.md @@ -2,9 +2,9 @@ The `sbb-action-group` component is a generic content container which can contai ([sbb-button](/docs/components-sbb-button--docs) or [sbb-link](/docs/components-sbb-link--docs) or other HTML elements) in various [allocations](#allocations). -### Style +## Style -#### Orientation +### Orientation The `orientation` property is used to set item's orientation. Possible values are `horizontal` (default) and `vertical`. @@ -26,7 +26,7 @@ indicate the minimum breakpoint from which the orientation changes to `horizonta ``` -#### Button-size and link-size +### Button-size and link-size The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-link`. Default values are `l` for `sbb-button` and `m` for `sbb-link`. @@ -43,7 +43,7 @@ Default values are `l` for `sbb-button` and `m` for `sbb-link`. ``` -#### Align-group and align-self +### Align-group and align-self The `align-group` property can be used to set the default alignment of the contained elements; possible values are `start`, `center`, `stretch` and `end`. @@ -63,7 +63,7 @@ opposite direction to the group; possible values are `start`, `center` or `end`. ``` -### Allocations +## Allocations Items can be displayed inside `sbb-action-group` in different allocations. @@ -82,7 +82,7 @@ and we consider a template like the following one (possibly removing the link fo The values for `align-group` and `align-self` for the various allocations are as follows: -#### Horizontal +### Horizontal | orientation='horizontal' | align-group | align-self | |:------------------------:|:-----------:|:------------------:| @@ -93,7 +93,7 @@ The values for `align-group` and `align-self` for the various allocations are as | 2-0-0 | start | / | | 1-0-1 | start | Button 2: 'end' | -#### Vertical +### Vertical | orientation='vertical' | align-group | align-self | |:----------------------:|:-----------:|:----------:| diff --git a/src/components/sbb-alert-group/readme.md b/src/components/sbb-alert-group/readme.md index 22e820d812f..deef26a15e7 100644 --- a/src/components/sbb-alert-group/readme.md +++ b/src/components/sbb-alert-group/readme.md @@ -18,7 +18,7 @@ The `sbb-alert-group` manages the dismissal and accessibility of one or multiple ``` -### Interactions +## Interactions If all the `sbb-alert`s are dismissed, it's recommended to completely remove the `sbb-alert-group` from DOM. diff --git a/src/components/sbb-alert/readme.md b/src/components/sbb-alert/readme.md index 515fbcabec8..4a0d81d2a06 100644 --- a/src/components/sbb-alert/readme.md +++ b/src/components/sbb-alert/readme.md @@ -3,7 +3,7 @@ The `sbb-alert` is a component which should be used to display important message Multiple instances of this component can be used within the [sbb-alert-group](/docs/components-sbb-alert-sbb-alert-group--docs) component. -### Slots +## Slots The text content is projected using and unnamed slot, while the title uses the slot named `title` or alternatively the `titleContent` property. The component can optionally display a `sbb-icon` at the component start using the `iconName` property or via custom content using the `icon` slot. @@ -24,7 +24,7 @@ The component can optionally display a `sbb-icon` at the component start using t ``` -### Interactions +## Interactions It's possible to place an action, which by clicking navigates somewhere to display more information. This can be done using the `linkContent` property combined with the `href` one. @@ -50,7 +50,7 @@ which automatically removes an alert after clicking the close button. ``` -### Style +## Style Users can choose between two `size`, `m` (default) and `l`. diff --git a/src/components/sbb-autocomplete/readme.md b/src/components/sbb-autocomplete/readme.md index 3f39d9ffc85..df53e72f896 100644 --- a/src/components/sbb-autocomplete/readme.md +++ b/src/components/sbb-autocomplete/readme.md @@ -18,7 +18,7 @@ Both accept an id or an element reference. ``` -### In `sbb-form-field` +## In `sbb-form-field` If the component is used within a [sbb-form-field](/docs/components-sbb-form-field-sbb-form-field--docs), it will automatically connect to the native `` as trigger and will display the option panel above or below the `sbb-form-field`. @@ -38,14 +38,14 @@ it will automatically connect to the native `` as trigger and will displa ``` -### Style +## Style -#### Option highlight +### Option highlight By default, the autocomplete will highlight the label of the `sbb-option` in the panel, if it matches the typed text. See the [sbb-option](/docs/components-sbb-option-sbb-option--docs) for more details. -#### Option grouping +### Option grouping The displayed `sbb-option` can be collected into groups using `sbb-optgroup` element: @@ -68,11 +68,11 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele ``` -### Events +## Events The `sbb-option` emits the `option-selected` event when selected via user interaction. -### Keyboard interaction +## Keyboard interaction The options panel opens on `focus`, `click` or `input` events on the trigger element, or on `ArrowDown` keypress; it can be closed on backdrop click, or using the `Escape` or `Tab` keys. diff --git a/src/components/sbb-breadcrumb-group/readme.md b/src/components/sbb-breadcrumb-group/readme.md index 9c14ef649f1..6d25dfc2541 100644 --- a/src/components/sbb-breadcrumb-group/readme.md +++ b/src/components/sbb-breadcrumb-group/readme.md @@ -13,7 +13,7 @@ which are meant to represent the hierarchy of visited pages before arriving to t ``` -### Style +## Style If the width of all the nested `sbb-breadcrumb` exceeds the container width, only the first and the last breadcrumb are displayed, and a new one with the ellipsis symbol appears between them. diff --git a/src/components/sbb-breadcrumb/readme.md b/src/components/sbb-breadcrumb/readme.md index 9229d5b1cbd..a7d42dfeee3 100644 --- a/src/components/sbb-breadcrumb/readme.md +++ b/src/components/sbb-breadcrumb/readme.md @@ -3,7 +3,7 @@ The `sbb-breadcrumb` is a component used to display a link to a page. When it's used within the [sbb-breadcrumb-group](/docs/components-sbb-breadcrumb-sbb-breadcrumb-group--docs) component, it can display the list of the links the user visited to arrive at the current page. -### Slots +## Slots It is possible to provide a text via an unnamed slot; the component can optionally display a `sbb-icon` at the component start using the `iconName` property or via custom content using the `icon` slot. @@ -20,7 +20,7 @@ Text and icon are not exclusive and can be used together. ``` -### Link properties +## Link properties It's possible to set all the link related properties (`download`, `href`, `rel` and `target`). diff --git a/src/components/sbb-button/readme.md b/src/components/sbb-button/readme.md index 1e040c0f063..f271f3abe41 100644 --- a/src/components/sbb-button/readme.md +++ b/src/components/sbb-button/readme.md @@ -4,7 +4,7 @@ The `sbb-button` component provides the same functionality as a native `