feat(1447): Add Notification Component

examples/stencil-components/vanilla-cdn/index.html

@@ -279,6 +279,15 @@ <h2>Multi-Select</h2>
     <br />
     <br />
 
+    <h2>Notification</h2>
+    <ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success notification</ifx-notification>
+    <br />
+    <ifx-notification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning notification</ifx-notification>
+    <br />
+    <ifx-notification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error notification</ifx-notification>
+
+    <br />
+    <br />
 
     <h2>Number Indicator</h2>
     <ifx-number-indicator id="number-indicator" inverted='false'>1</ifx-number-indicator>

examples/wrapper-components/react-javascript/src/App.js

@@ -8,6 +8,7 @@ import SearchBar from './components/SearchBar/SearchBar.js';
 import Accordion from './components/Accordion/Accordion.js';
 import RadioButton from './components/RadioButton/RadioButton.js';
 import Sidebar from './components/Sidebar/Sidebar.js';
+import Notification from './components/Notification/Notification.js'
 import NumberIndicator from './components/NumberIndicator/NumberIndicator.js'
 import Spinner from './components/Spinner/Spinner.js';
 import Checkbox from './components/Checkbox/Checkbox.js';
@@ -103,6 +104,10 @@ function App() {
       <MultiSelect />
       <br />
 
+      <h2>Notification</h2>
+      <Notification />
+      <br />
+
       <h2>Number indicator</h2>
       <NumberIndicator />
       <br />

examples/wrapper-components/react-javascript/src/components/Notification/Notification.js

@@ -0,0 +1,15 @@
+import { IfxNotification } from '@infineon/infineon-design-system-react';
+
+function Notification() {
+  return (
+    <div>
+      <IfxNotification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success notification</IfxNotification>
+      <br />
+      <IfxNotification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning notification</IfxNotification>
+      <br />
+      <IfxNotification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error notification</IfxNotification>
+    </div>
+  );
+}
+
+export default Notification;

examples/wrapper-components/react-vite-js/src/App.jsx

@@ -7,6 +7,7 @@ import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
 import Sidebar from './components/Sidebar/Sidebar'
+import Notification from './components/Notification/Notification'
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
 import Spinner from './components/Spinner/Spinner'
 import Checkbox from './components/Checkbox/Checkbox';
@@ -103,6 +104,10 @@ function App() {
       <MultiSelect />
       <br />
 
+      <h2>Notification</h2>
+      <Notification />
+      <br />
+
       <h2>Number indicator</h2>
       <NumberIndicator />
       <br />

examples/wrapper-components/react-vite-js/src/components/Notification/Notification.jsx

@@ -0,0 +1,15 @@
+import { IfxNotification } from '@infineon/infineon-design-system-react';
+
+function Notification() {
+  return (
+    <div>
+      <IfxNotification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success notification</IfxNotification>
+      <br />
+      <IfxNotification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning notification</IfxNotification>
+      <br />
+      <IfxNotification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error notification</IfxNotification>
+    </div>
+  );
+}
+
+export default Notification;

examples/wrapper-components/vue-javascript/src/App.vue

@@ -18,6 +18,7 @@
   <Link />
   <Modal />
   <MultiSelect />
+  <Notification />
   <NumberIndicator />
   <Pagination />
   <ProgressBar />
@@ -75,6 +76,7 @@ import Icon from './components/Icon.vue'
 import Slider from './components/Slider.vue'
 import Status from './components/Status.vue'
 import Stepper from './components/Stepper.vue'
+import Notification from './components/Notification.vue'
 
 
 </script>

examples/wrapper-components/vue-javascript/src/components/Notification.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h2>Notification</h2>
+    <ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success notification</ifx-notification>
+    <br />
+    <ifx-notification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning notification</ifx-notification>
+    <br />
+    <ifx-notification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error notification</ifx-notification>
+  </div>
+</template>

packages/components-angular/projects/component-library/src/lib/stencil-generated/index.ts

@@ -43,6 +43,7 @@ export const DIRECTIVES = [
   d.IfxNavbar,
   d.IfxNavbarItem,
   d.IfxNavbarProfile,
+  d.IfxNotification,
   d.IfxNumberIndicator,
   d.IfxOverviewTable,
   d.IfxPagination,

packages/components-react/src/components.ts

@@ -49,6 +49,7 @@ import { IfxMultiselect as IfxMultiselectElement, defineCustomElement as defineI
 import { IfxNavbarItem as IfxNavbarItemElement, defineCustomElement as defineIfxNavbarItem } from "@infineon/infineon-design-system-stencil/dist/components/ifx-navbar-item.js";
 import { IfxNavbarProfile as IfxNavbarProfileElement, defineCustomElement as defineIfxNavbarProfile } from "@infineon/infineon-design-system-stencil/dist/components/ifx-navbar-profile.js";
 import { IfxNavbar as IfxNavbarElement, defineCustomElement as defineIfxNavbar } from "@infineon/infineon-design-system-stencil/dist/components/ifx-navbar.js";
+import { IfxNotification as IfxNotificationElement, defineCustomElement as defineIfxNotification } from "@infineon/infineon-design-system-stencil/dist/components/ifx-notification.js";
 import { IfxNumberIndicator as IfxNumberIndicatorElement, defineCustomElement as defineIfxNumberIndicator } from "@infineon/infineon-design-system-stencil/dist/components/ifx-number-indicator.js";
 import { IfxOverviewTable as IfxOverviewTableElement, defineCustomElement as defineIfxOverviewTable } from "@infineon/infineon-design-system-stencil/dist/components/ifx-overview-table.js";
 import { IfxPagination as IfxPaginationElement, defineCustomElement as defineIfxPagination } from "@infineon/infineon-design-system-stencil/dist/components/ifx-pagination.js";
@@ -518,6 +519,16 @@ export const IfxNavbarProfile: StencilReactComponent<IfxNavbarProfileElement, If
     defineCustomElement: defineIfxNavbarProfile
 });
 
+type IfxNotificationEvents = NonNullable<unknown>;
+
+export const IfxNotification: StencilReactComponent<IfxNotificationElement, IfxNotificationEvents> = /*@__PURE__*/ createComponent<IfxNotificationElement, IfxNotificationEvents>({
+    tagName: 'ifx-notification',
+    elementClass: IfxNotificationElement,
+    react: React,
+    events: {} as IfxNotificationEvents,
+    defineCustomElement: defineIfxNotification
+});
+
 type IfxNumberIndicatorEvents = NonNullable<unknown>;
 
 export const IfxNumberIndicator: StencilReactComponent<IfxNumberIndicatorElement, IfxNumberIndicatorEvents> = /*@__PURE__*/ createComponent<IfxNumberIndicatorElement, IfxNumberIndicatorEvents>({

packages/components/src/components/icon/readme.md

@@ -39,6 +39,7 @@
  - [ifx-multiselect](../select/multi-select)
  - [ifx-navbar](../navigation/navbar)
  - [ifx-navbar-item](../navigation/navbar)
+ - [ifx-notification](../notification)
  - [ifx-overview-table](../overview-table)
  - [ifx-search-bar](../search-bar)
  - [ifx-search-field](../search-field)
@@ -69,6 +70,7 @@ graph TD;
   ifx-multiselect --> ifx-icon
   ifx-navbar --> ifx-icon
   ifx-navbar-item --> ifx-icon
+  ifx-notification --> ifx-icon
   ifx-overview-table --> ifx-icon
   ifx-search-bar --> ifx-icon
   ifx-search-field --> ifx-icon

packages/components/src/components/link/readme.md

@@ -21,13 +21,15 @@
 ### Used by
 
  - [ifx-footer](../footer)
+ - [ifx-notification](../notification)
  - [ifx-overview-table](../overview-table)
  - [ifx-step](../stepper/step)
 
 ### Graph
 ```mermaid
 graph TD;
   ifx-footer --> ifx-link
+  ifx-notification --> ifx-link
   ifx-overview-table --> ifx-link
   ifx-step --> ifx-link
   style ifx-link fill:#f9f,stroke:#333,stroke-width:4px

packages/components/src/components/notification/notification.e2e.ts

@@ -0,0 +1,68 @@
+import { newE2EPage } from "@stencil/core/testing";
+
+describe('Notification', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification>42</ifx-notification>');
+
+    const notification = await page.find('ifx-notification');
+    expect(notification).toHaveClass('hydrated');
+  });
+
+  it('should apply success class', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification variant="success">42</ifx-notification>');
+
+    const notification = await page.find('ifx-notification >>> .ifx-notification__wrapper');
+    expect(notification).toHaveClass('ifx-notification__wrapper--success');
+  });
+
+  it('should apply warning class', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification variant="warning">42</ifx-notification>');
+
+    const notification = await page.find('ifx-notification >>> .ifx-notification__wrapper');
+    expect(notification).toHaveClass('ifx-notification__wrapper--warning');
+  });
+
+  it('should apply error class', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification variant="error">42</ifx-notification>');
+
+    const notification = await page.find('ifx-notification >>> .ifx-notification__wrapper');
+    expect(notification).toHaveClass('ifx-notification__wrapper--error');
+  });
+
+  it('should render icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification icon="c-check-16">42</ifx-notification>');
+
+    const icon = await page.find('ifx-notification >>> .ifx-notification__icon');
+    expect(icon).not.toBeNull();
+  });
+
+  it('should render link', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification link-text="Link" link-href="https://www.example.com">42</ifx-notification>');
+
+    const link = await page.find('ifx-notification >>> .ifx-notification__link');
+    expect(await link.find('ifx-link')).not.toBeNull();
+    expect(link).not.toBeNull();
+  });
+
+  it('should render content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification>42</ifx-notification>');
+
+    const content = await page.find('ifx-notification >>> .ifx-notification__content');
+    expect(content).not.toBeNull();
+  });
+
+  it('should render slot content', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-notification>42</ifx-notification>');
+
+    const content = await page.find('ifx-notification >>> .ifx-notification__content');
+    expect(await content.find('slot')).not.toBeNull();
+  });
+});

packages/components/src/components/notification/notification.scss

@@ -0,0 +1,65 @@
+@use "~@infineon/design-system-tokens/dist/tokens";
+@use "../../global/font.scss";
+
+.ifx-notification__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;
+
+  background-color: tokens.$ifxColorBaseWhite;
+  font-family: var(--ifx-font-family);
+  color: tokens.$ifxColorBaseBlack;
+
+  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;
+
+  &.ifx-notification__wrapper--success {
+    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;
+
+    & .ifx-notification__icon {
+      color: tokens.$ifxColorGreen500;
+    }
+  }
+
+  &.ifx-notification__wrapper--warning {
+    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;
+
+    & .ifx-notification__icon {
+      color: tokens.$ifxColorOrange500;
+    }
+  }
+
+  &.ifx-notification__wrapper--error {
+    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;
+
+    & .ifx-notification__icon {
+      color: tokens.$ifxColorRed500;
+    }
+  }
+
+  & .ifx-notification__icon {
+    margin-right: tokens.$ifxSpace100;
+    display: flex;
+  }
+
+  & .ifx-notification__body {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+
+    & .ifx-notification__slot {
+      flex-grow: 1;
+    }
+  }
+
+  @media (max-width: tokens.$ifxBreakpointXs) {
+    & .ifx-notification__icon {
+      align-self: flex-start;
+    }
+
+    & .ifx-notification__body {
+      flex-direction: column;
+    }
+  }
+}

packages/components/src/components/notification/notification.stories.ts

@@ -0,0 +1,48 @@
+export default {
+  title: 'Components/Notification',
+  tags: ['autodocs'],
+
+  args: {
+    content: "Sample Notification",
+    variant: 'success',
+    icon: 'c-check-16',
+    linkText: 'Link',
+    linkHref: 'https://www.example.com',
+    linkTarget: '_blank',
+  },
+  argTypes: {
+    content: {
+      description: 'Text inside the notification is passed as slot.',
+    },
+    variant: {
+      description: 'Variant of the notification.',
+      options: ['success', 'warning', 'error'],
+      control: { type: 'radio' },
+    },
+    icon: {
+      description: 'The icon to be displayed in the notification.',
+    },
+    linkText: {
+      description: 'Text for the link.',
+    },
+    linkHref: {
+      description: 'URL for the link.',
+    },
+    linkTarget:{
+      options: ['_blank', '_self', '_parent'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+const DefaultTemplate = args => `<ifx-notification 
+  icon="${args.icon}" 
+  variant="${args.variant}" 
+  link-text="${args.linkText}" 
+  link-href="${args.linkHref}"
+  link-target="${args.linkTarget}">
+  ${args.content}
+</ifx-notification>`;
+
+export const Default = DefaultTemplate.bind({});
+Default.argTypes = {};