Merge pull request #917 from Infineon/905-alert-implement-closable-pr…

…operty Added closable property to the alert component
Infineon · Jan 22, 2024 · ecb86f3 · ecb86f3
2 parents 0e4663c + c28b815
commit ecb86f3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -25,6 +25,7 @@ export const IfxAccordionItem = /*@__PURE__*/ defineContainer<JSX.IfxAccordionIt
 export const IfxAlert = /*@__PURE__*/ defineContainer<JSX.IfxAlert>('ifx-alert', undefined, [
   'variant',
   'icon',
+  'closable',
   'ifxClose'
 ]);
 

diff --git a/packages/components/src/components/alert/alert.stories.ts b/packages/components/src/components/alert/alert.stories.ts
@@ -8,6 +8,7 @@ export default {
     label: 'Attention! This is an alert message — check it out!',
     variant: "primary",
     showIcon: true,
+    closable: true,
     iconName: 'c-info-24',
   },
 
@@ -22,6 +23,11 @@ export default {
       control: { type: 'select' }
     },
 
+    closable: {
+      control: 'boolean',
+      default: true
+    },
+
     ifxClose: {
       action: 'ifxClose',
       description: 'Custom event emitted when close button clicked',
@@ -38,7 +44,7 @@ export default {
 
 
 const DefaultTemplate = (args) =>
-  `<ifx-alert variant="${args.variant}" icon="${args.showIcon ? args.iconName : ""}">${args.label}</ifx-alert>`;
+  `<ifx-alert variant="${args.variant}" icon="${args.showIcon ? args.iconName : ""}" closable="${args.closable}">${args.label}</ifx-alert>`;
 
 
 export const Default = DefaultTemplate.bind({});

diff --git a/packages/components/src/components/alert/alert.tsx b/packages/components/src/components/alert/alert.tsx
@@ -10,6 +10,7 @@ export class Alert {
   @Prop() variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'info' = 'primary';
   @Prop() icon: string;
   @Event() ifxClose: EventEmitter;
+  @Prop() closable: boolean = true;
 
   handleClose() { 
     this.ifxClose.emit()
@@ -27,11 +28,11 @@ export class Alert {
             <slot name='desc' />
           </div>
         </div>
-        <div class="close-icon-wrapper">
+        { this.closable && <div class="close-icon-wrapper">
           <a href="javascript:void(0);" onClick={this.handleClose.bind(this)}>
             <ifx-icon icon='cross-16' />
           </a>
-        </div>
+        </div> }
       </div>
      : <div class={`alert ${this.variant}`}>
         {this.icon && (
@@ -43,11 +44,11 @@ export class Alert {
         <div class="alert-text">
           <slot />
         </div>
-        <div class="close-icon-wrapper">
+        { this.closable && <div class="close-icon-wrapper">
           <a href="javascript:void(0);" onClick={this.handleClose.bind(this)}>
             <ifx-icon icon='cross-16' />
           </a>
-        </div>
+        </div> }
       </div >
     );
   }

diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type                                                          | Default     |
-| --------- | --------- | ----------- | ------------------------------------------------------------- | ----------- |
-| `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" \| "secondary" \| "warning"` | `'primary'` |
 
 
 ## Events