Merge pull request #1062 from Infineon/1055-alert-align-design-with-code

Alert: renamed variant secondary with success and aligned the variant design color
Infineon · Mar 18, 2024 · 8654e08 · 8654e08
2 parents 262f4be + db6b89e
commit 8654e08
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git 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 (
     <div >
-      <IfxAlert color="primary" icon="c-info-24">Attention! This is an alert message — check it out!</IfxAlert>
+      <IfxAlert variant="primary" icon="c-info-24">Attention! This is an alert message — check it out!</IfxAlert>
 
     </div>
   )

diff --git 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
@@ -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
@@ -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
@@ -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