Skip to content

Commit

Permalink
Docs(web-twig): Default icon according to color variant in the `A…
Browse files Browse the repository at this point in the history
…lert`
  • Loading branch information
dlouhak authored and literat committed Aug 17, 2023
1 parent 17471cf commit 4d51643
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 9 deletions.
16 changes: 8 additions & 8 deletions packages/web-react/src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ import { Alert } from '@lmc-eu/spirit-web-react/components';

## Available props

| Name | Type | Default | Required | Description |
| ------------------ | -------------------------------------------- | ---------------- | -------- | -------------------------- |
| `children` | `ReactNode` | - || Content of the Alert |
| `color` | [Emotion Color dictionary][dictionary-color] | `success` || Color of the component |
| `iconName` | `string` | `info` \* || Icon used in Alert |
| `isCentered` . | `boolean` | `false` || If true, Alert is centered |
| `UNSAFE_className` | `string` | - || Wrapper custom class name |
| `UNSAFE_style` | `CSSProperties` | - || Wrapper custom style |
| Name | Type | Default | Required | Description |
| ------------------ | -------------------------------------------- | --------- | -------- | -------------------------- |
| `children` | `ReactNode` | - || Content of the Alert |
| `color` | [Emotion Color dictionary][dictionary-color] | `success` || Color of the component |
| `iconName` | `string` | `info` \* || Icon used in Alert |
| `isCentered` . | `boolean` | `false` || If true, Alert is centered |
| `UNSAFE_className` | `string` | - || Wrapper custom class name |
| `UNSAFE_style` | `CSSProperties` | - || Wrapper custom style |

(\*) For each emotion color, a default icon is defined.
The icons come from the [Icon package], or from your custom source of icons.
Expand Down
17 changes: 16 additions & 1 deletion packages/web-twig/src/Resources/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,34 @@ Without lexer:
{% endembed %}
```

## Default Icons according to Color Variant

| Color name | Icon name |
| ------------- | ------------- |
| `danger` | `warning` |
| `default` | `info` |
| `informative` | `info` |
| `success` | `check-plain` |
| `warning` | `warning` |

## API

| Prop name | Type | Default | Required | Description |
| ------------- | -------------------------------------------- | --------- | -------- | -------------------------- |
| `color` | [Emotion Color dictionary][dictionary-color] | `success` | no | Color variant |
| `elementType` | `string` | `div` | no | HTML tag to render |
| `iconName` | `string` | `null` | no | Icon used in Alert |
| `iconName` | `string` | `info` \* | no | Icon used in Alert |
| `isCentered` | `bool` | `false` | no | If true, Alert is centered |

(\*) For each emotion color, a default icon is defined.
The icons come from the [Icon package], or from your custom source of icons.
Read the section [Default Icons according to Color Variant](#default-icons-according-to-color-variant).

You can add `id`, `data-*` or `aria-*` attributes to further extend the component's
descriptiveness and accessibility. Also, UNSAFE styling props are available,
see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.

[alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
[icon package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons

0 comments on commit 4d51643

Please sign in to comment.