Merge pull request #27 from Infineon/feature/alert-component

new alert component
Infineon · Feb 3, 2023 · bfcd1c7 · bfcd1c7
2 parents 6b3feef + 3ea115c
commit bfcd1c7
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -6,6 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
+    interface IfxAlert {
+        "color": 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+        "icon": string;
+        "overflowing": boolean;
+    }
     interface IfxButton {
         "color": 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
         "disabled": boolean;
@@ -70,6 +75,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLIfxAlertElement extends Components.IfxAlert, HTMLStencilElement {
+    }
+    var HTMLIfxAlertElement: {
+        prototype: HTMLIfxAlertElement;
+        new (): HTMLIfxAlertElement;
+    };
     interface HTMLIfxButtonElement extends Components.IfxButton, HTMLStencilElement {
     }
     var HTMLIfxButtonElement: {
@@ -119,6 +130,7 @@ declare global {
         new (): HTMLInfineonIconStencilElement;
     };
     interface HTMLElementTagNameMap {
+        "ifx-alert": HTMLIfxAlertElement;
         "ifx-button": HTMLIfxButtonElement;
         "ifx-card": HTMLIfxCardElement;
         "ifx-dropdown": HTMLIfxDropdownElement;
@@ -130,6 +142,11 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface IfxAlert {
+        "color"?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+        "icon"?: string;
+        "overflowing"?: boolean;
+    }
     interface IfxButton {
         "color"?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
         "disabled"?: boolean;
@@ -192,6 +209,7 @@ declare namespace LocalJSX {
         "icon"?: any;
     }
     interface IntrinsicElements {
+        "ifx-alert": IfxAlert;
         "ifx-button": IfxButton;
         "ifx-card": IfxCard;
         "ifx-dropdown": IfxDropdown;
@@ -206,6 +224,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ifx-alert": LocalJSX.IfxAlert & JSXBase.HTMLAttributes<HTMLIfxAlertElement>;
             "ifx-button": LocalJSX.IfxButton & JSXBase.HTMLAttributes<HTMLIfxButtonElement>;
             "ifx-card": LocalJSX.IfxCard & JSXBase.HTMLAttributes<HTMLIfxCardElement>;
             "ifx-dropdown": LocalJSX.IfxDropdown & JSXBase.HTMLAttributes<HTMLIfxDropdownElement>;

diff --git a/src/components/alert/_alert.scss b/src/components/alert/_alert.scss
@@ -0,0 +1,108 @@
+@use "../../../node_modules/@infineon/design-system-tokens/dist/tokens";
+
+.ifx {
+
+  &__alert-text {
+    font-size: 16px;
+    width: 100%;
+    padding: 12px 0px 12px 12px;
+    color: tokens.$color-text-black;
+    &.text-overflow { 
+      word-break:break-all
+    }
+  }
+
+  &__alert-icon-wrapper {
+    position: relative;
+    min-width: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: tokens.$color-default-500;
+
+    & svg { 
+      stroke: tokens.$color-text-white;
+    }
+  }
+
+  &__close-icon-wrapper { 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+
+    & a { 
+      line-height: 0;
+
+      & svg { 
+        stroke: tokens.$color-black;
+      }
+
+      &:hover svg { 
+        stroke: tokens.$color-default-500;
+      }
+    }
+  }
+}
+
+.alert {
+  display: flex;
+  border: 1px solid tokens.$color-default-500;
+  border-radius: 1px;
+  max-width: 800px;
+}
+
+.alert-primary,
+.alert-secondary,
+.alert-danger,
+.alert-success,
+.alert-warning {
+  color: tokens.$color-text-black;
+  background-color: tokens.$color-bg-white;
+}
+
+.alert-primary {
+  border: 1px solid tokens.$color-default-500;
+
+  & .ifx__alert-icon-wrapper {
+    background-color: tokens.$color-default-500;
+  }
+}
+
+.alert-secondary {
+  border: 1px solid tokens.$color-highlight-500;
+
+  & .ifx__alert-icon-wrapper {
+    background-color: tokens.$color-highlight-500;
+  }
+}
+
+.alert-success {
+  border: 1px solid tokens.$color-success-500;
+
+  & .ifx__alert-icon-wrapper {
+    background-color: tokens.$color-success-500;
+  }
+}
+
+.alert-danger {
+  border: 1px solid tokens.$color-danger-500;
+
+  & .ifx__alert-icon-wrapper {
+    background-color: tokens.$color-danger-500;
+  }
+}
+
+.alert-warning {
+  border: 1px solid tokens.$color-warning-500;
+
+  & .ifx__alert-icon-wrapper {
+    background-color: tokens.$color-warning-500;
+  }
+}
+
+
+
+
+
+
diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts
@@ -0,0 +1,29 @@
+export default {
+  title: "Components/Alert",
+  args: {
+    label: 'Attention! This is an alert message — check it out!',
+    color: "primary",
+    icon: true,
+    iconType: 'c-info-24',
+  },
+
+  argTypes: {
+    color: {
+      options: ['primary', 'secondary', 'success', 'danger', 'warning'],
+      control: { type: 'radio' },
+    },
+
+    iconType: { 
+      options: ['c-info-24', 'calendar-24', 'download-24', 'upload-24'],
+      control: {type: 'select'}
+    }
+
+  }
+};
+
+
+const DefaultTemplate = (args) =>
+  `<ifx-alert  color="${args.color}" icon="${args.icon ? args.iconType : ""}">${args.label}</ifx-alert>`;
+
+  export const Default = DefaultTemplate.bind({});
+
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
@@ -0,0 +1,88 @@
+import { Component, Prop, h, State, Element } from '@stencil/core';
+import classNames from 'classnames';
+
+@Component({
+  tag: 'ifx-alert',
+  styleUrl: '_alert.scss',
+  shadow: true,
+})
+
+export class Card {
+  @Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
+  @Prop() icon: string;
+  @Prop() overflowing: boolean
+  @Element() el;
+  @State() iconsArray: any[] = [<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>c info 24</title><g stroke-linecap="round" stroke-width="2" fill="none" stroke="" stroke-linejoin="round"><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke=""></line><circle cx="12" cy="7" r="1" stroke="" fill="#000000"></circle></g></svg>]
+
+  isOverflowing() { 
+    const el = this.el.shadowRoot.querySelector('.ifx__alert-text')
+    if(el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight) {
+      el.classList.add('text-overflow')
+    } else if(el.classList.contains('text-overflow')) { 
+      el.classList.remove('text-overflow')
+    }
+  }
+
+  verifyIcons(icon1, icon2) { 
+    if(icon1 === icon2) { 
+      return true;
+    } else if(icon2?.split(" ").join("") === icon1?.split(" ").join("-")) {
+      return true
+    } else if(icon2?.split(" ").join("").toLowerCase() === icon1?.split(" ").join("").toLowerCase()) {
+      return true
+    } else {
+      console.error('Icon name does not exist!')
+      return false
+    }
+  }
+
+
+  getIcon() { 
+    const svgIcon = this.iconsArray.find((icons) => {
+      let titleIndex = icons['$children$'].findIndex((val) => val['$tag$'] === 'title');
+      let titleArray = icons['$children$'][titleIndex]['$children$']
+      let title = titleArray[0]['$text$']
+      const icon =  this.verifyIcons(title, this.icon)
+      return icon
+    })
+
+    return svgIcon
+  }
+
+
+  componentDidRender() { 
+    this.isOverflowing()
+  }
+
+
+  render() {
+
+    const iconSVG_close = <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16"><title>cross 16</title><g stroke-width="1" stroke-linejoin="round" fill="none" stroke="" stroke-linecap="round" class="nc-icon-wrapper"><line x1="13.5" y1="2.5" x2="2.5" y2="13.5" data-cap="butt"></line> <line x1="2.5" y1="2.5" x2="13.5" y2="13.5" data-cap="butt"></line> </g></svg>
+
+    return (
+      <div class={this.getClassNames()}>
+       {this.icon &&  
+       <div class="ifx__alert-icon-wrapper">
+         {this.getIcon()}
+        </div>}
+        <div class="ifx__alert-text">
+          <slot />
+        </div>
+        <div class="ifx__close-icon-wrapper">
+        <a href="#">
+          {iconSVG_close}
+        </a>
+        </div>
+      </div>
+    );
+  }
+
+
+  getClassNames() {
+    return classNames(
+      'alert',
+      `alert-${this.color}`,
+    );
+  }
+
+}
diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md
@@ -0,0 +1,19 @@
+# ifx-alert
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description | Type                                                             | Default     |
+| ------------- | ------------- | ----------- | ---------------------------------------------------------------- | ----------- |
+| `color`       | `color`       |             | `"danger" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` |
+| `icon`        | `icon`        |             | `string`                                                         | `undefined` |
+| `overflowing` | `overflowing` |             | `boolean`                                                        | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/index.html b/src/index.html
@@ -12,6 +12,7 @@
 </head>
 
 <body>
+  <ifx-alert color="secondary" icon="cInfo24">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, error.</ifx-alert>
 
   <ifx-dropdown-menu>
     <ifx-dropdown-item checkable>item 1</ifx-dropdown-item>
@@ -20,8 +21,7 @@
     <ifx-dropdown-item>item 4</ifx-dropdown-item>
   </ifx-dropdown-menu>
 
-
-
+
 
 </body>