Merge pull request #1696 from Infineon/1695-storybook-add-alert-notif…

…ication-above-the-icon-snippet Storybook: adds notification in the icon library
Infineon · Jan 31, 2025 · 857eea7 · 857eea7
2 parents 3c06ba7 + f10d55a
commit 857eea7
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 61 deletions.
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+    "@infineon/infineon-design-system-react": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+    "@infineon/infineon-design-system-vue": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "command": {
     "publish": {
       "verifyAccess": false

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+    "@infineon/infineon-design-system-angular": "^30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0"
+    "@infineon/infineon-design-system-stencil": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+    "@infineon/infineon-design-system-stencil": "^30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0"
+    "@infineon/infineon-design-system-stencil": "^30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0"
   },
   "auto": {
     "plugins": [

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "30.14.2--canary.1703.033458615fa20d28a05b873c01f6c9c7d1209ec4.0",
+  "version": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

diff --git a/packages/components/src/components/icons-preview/icons-preview.scss b/packages/components/src/components/icons-preview/icons-preview.scss
@@ -6,6 +6,10 @@
   gap: 10px;
 }
 
+.alert__wrapper { 
+  margin-bottom: 40px;
+}
+
 .html-wrapper {
   background: rgb(38, 38, 38);
   padding: 20px;

diff --git a/packages/components/src/components/icons-preview/icons-preview.tsx b/packages/components/src/components/icons-preview/icons-preview.tsx
@@ -42,6 +42,16 @@ export class IconsPreview {
   render() {
     return (
       <div class='container'>
+        <div class="alert__wrapper">
+            <ifx-notification 
+              icon="c-check-16" 
+              variant="success" 
+              link-text="Figma icon library" 
+              link-href="https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0"
+              link-target="_blank">
+              You can also find the UI icons in Figma for use in mockups.
+            </ifx-notification>
+        </div>
         <div class='html-wrapper'>
           <span class="html-tag">&lt;</span>
           <span class="component-name">ifx-icon</span>

diff --git a/packages/components/src/components/icons-preview/readme.md b/packages/components/src/components/icons-preview/readme.md
@@ -9,12 +9,16 @@
 
 ### Depends on
 
+- [ifx-notification](../notification)
 - [ifx-icon](../icon)
 
 ### Graph
 ```mermaid
 graph TD;
+  ifx-icons-preview --> ifx-notification
   ifx-icons-preview --> ifx-icon
+  ifx-notification --> ifx-icon
+  ifx-notification --> ifx-link
   style ifx-icons-preview fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/notification/readme.md b/packages/components/src/components/notification/readme.md
@@ -18,6 +18,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [ifx-icons-preview](../icons-preview)
+
 ### Depends on
 
 - [ifx-icon](../icon)
@@ -28,6 +32,7 @@
 graph TD;
   ifx-notification --> ifx-icon
   ifx-notification --> ifx-link
+  ifx-icons-preview --> ifx-notification
   style ifx-notification fill:#f9f,stroke:#333,stroke-width:4px
 ```