Merge pull request #1474 from Infineon/1432-new-component-content-swi…

…tcher Enhancement: Add content-switcher component
Infineon · Oct 11, 2024 · 79199ac · 79199ac
2 parents 54a0b01 + 977dcbc
commit 79199ac
Show file tree

Hide file tree

Showing 30 changed files with 860 additions and 314 deletions.
diff --git a/.github/workflows/shipit_master_and_example_apps_deployment.yml b/.github/workflows/shipit_master_and_example_apps_deployment.yml
@@ -212,8 +212,8 @@ jobs:
           cd examples/wrapper-components/react-vite-js
           REACT_VERSION=$(jq -r '.dependencies["@infineon/infineon-design-system-react"]' package.json)
           STENCIL_VERSION=$(npm list @infineon/infineon-design-system-stencil --depth=1 | grep @infineon/infineon-design-system-stencil@ | awk -F@ '{print $3}')
+          npm install
           echo "Installed version Stencil: $STENCIL_VERSION - Installed version React: $REACT_VERSION"
-          npm ci
           npm run build
 
       - name: Deploy React Example🚀

diff --git a/.github/workflows/shipit_pr_and_example_apps_deployment.yml b/.github/workflows/shipit_pr_and_example_apps_deployment.yml
@@ -106,6 +106,7 @@ jobs:
             jq --arg CANARY_VERSION "$CANARY_VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package-lock.json > package-lock.json.tmp && mv package-lock.json.tmp package-lock.json
           else
             npm install
+            npm ci
           fi
 
           cd ../../
@@ -226,6 +227,7 @@ jobs:
           REACT_VERSION=$(jq -r '.dependencies["@infineon/infineon-design-system-react"]' package.json)
           STENCIL_VERSION=$(npm list @infineon/infineon-design-system-stencil --depth=1 | grep @infineon/infineon-design-system-stencil@ | awk -F@ '{print $3}')
           echo "Installed version Stencil: $STENCIL_VERSION - Installed version React: $REACT_VERSION"
+          rm -rf node_modules
           npm install
           npm run build
 

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -234,6 +234,25 @@ <h2>Chip</h2>
 
     <br />
 
+    <h2>Content Switcher</h2>
+    <ifx-content-switcher>
+      <ifx-content-switcher-item selected>
+        <ifx-icon icon="applications-16"></ifx-icon>Item 1
+      </ifx-content-switcher-item>
+      <ifx-content-switcher-item>
+        <ifx-icon icon="applications-16"></ifx-icon>Item 2
+      </ifx-content-switcher-item>
+      <ifx-content-switcher-item>
+        <ifx-icon icon="applications-16"></ifx-icon>Item 3
+      </ifx-content-switcher-item>
+      <ifx-content-switcher-item>
+        <ifx-icon icon="applications-16"></ifx-icon>Item 4
+      </ifx-content-switcher-item>
+    </ifx-content-switcher>
+
+    <br>
+
+
     <h2>Dropdown</h2>
     <ifx-dropdown placement="bottom-start" no-close-on-menu-click="true">
       <ifx-dropdown-trigger-button icon="calendar16">

diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -37,6 +37,7 @@ import Chip from './components/Chip/Chip'
 import Stepper from './components/Stepper/Stepper';
 import List from './components/List/List';
 import FilterTypeGroup from './components/FilterTypeGroup/FilterTypeGroup';
+import ContentSwitcher from './components/ContentSwitcher/ContentSwitcher.js';
 
 
 function App() {
@@ -78,6 +79,9 @@ function App() {
       <Chip />
       <br />
 
+      <h2>Content Switcher</h2>
+      <ContentSwitcher />
+
       <h2>Date Picker</h2>
       <DatePicker />
       <br />

diff --git a/...les/wrapper-components/react-javascript/src/components/ContentSwitcher/ContentSwitcher.js b/...les/wrapper-components/react-javascript/src/components/ContentSwitcher/ContentSwitcher.js
@@ -0,0 +1,20 @@
+
+import React from 'react';
+
+import { IfxContentSwitcher, IfxContentSwitcherItem, IfxIcon } from '@infineon/infineon-design-system-react';
+
+function ContentSwitcher() {
+
+  return (
+    <div>
+      <IfxContentSwitcher>
+          <IfxContentSwitcherItem><IfxIcon icon="applications-16"/>Item 1</IfxContentSwitcherItem>
+          <IfxContentSwitcherItem><IfxIcon icon="applications-16"/>Item 2</IfxContentSwitcherItem>
+          <IfxContentSwitcherItem><IfxIcon icon="applications-16"/>Item 3</IfxContentSwitcherItem>
+          <IfxContentSwitcherItem><IfxIcon icon="applications-16"/>Item 4</IfxContentSwitcherItem>
+      </IfxContentSwitcher>
+    </div>
+  );
+}
+
+export default ContentSwitcher;