diff --git a/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js b/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js index 8cfc19c420..c042acf8fd 100644 --- a/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js +++ b/examples/wrapper-components/react-javascript/src/components/Alert/Alert.js @@ -4,7 +4,7 @@ import { IfxAlert } from '@infineon/infineon-design-system-react'; function Alert() { return (
- Attention! This is an alert message — check it out! + Attention! This is an alert message — check it out!
) diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss index 43e744d333..ff5d2bf6c6 100644 --- a/packages/components/src/components/alert/alert.scss +++ b/packages/components/src/components/alert/alert.scss @@ -111,11 +111,11 @@ } } - &.secondary { - border: 1px solid tokens.$ifxColorBerry500; + &.success { + border: 1px solid tokens.$ifxColorGreen500; & .icon-wrapper { - background-color: tokens.$ifxColorBerry500; + background-color: tokens.$ifxColorGreen500; color: tokens.$ifxColorBaseWhite; } } diff --git a/packages/components/src/components/alert/alert.stories.ts b/packages/components/src/components/alert/alert.stories.ts index 4084ff435d..079258c594 100644 --- a/packages/components/src/components/alert/alert.stories.ts +++ b/packages/components/src/components/alert/alert.stories.ts @@ -14,7 +14,7 @@ export default { argTypes: { variant: { - options: ['primary', 'secondary', 'danger', 'warning'], + options: ['primary', 'success', 'danger', 'warning'], control: { type: 'radio' }, }, diff --git a/packages/components/src/components/alert/alert.tsx b/packages/components/src/components/alert/alert.tsx index 307112222f..7f1adcaac2 100644 --- a/packages/components/src/components/alert/alert.tsx +++ b/packages/components/src/components/alert/alert.tsx @@ -7,7 +7,7 @@ import { Component, Prop, h, Event, EventEmitter } from '@stencil/core'; }) export class Alert { - @Prop() variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'info' = 'primary'; + @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary'; @Prop() icon: string; @Event() ifxClose: EventEmitter; @Prop() closable: boolean = true; diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md index 9076efe702..0e30747368 100644 --- a/packages/components/src/components/alert/readme.md +++ b/packages/components/src/components/alert/readme.md @@ -7,11 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------- | ------------------------------------------------------------- | ----------- | -| `closable` | `closable` | | `boolean` | `true` | -| `icon` | `icon` | | `string` | `undefined` | -| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "secondary" \| "warning"` | `'primary'` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------- | ----------------------------------------------------------- | ----------- | +| `closable` | `closable` | | `boolean` | `true` | +| `icon` | `icon` | | `string` | `undefined` | +| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` | ## Events