Merge pull request #1425 from Infineon/1416-new-component-segmented-c…

…ontrols

New component - Segmented controls

.github/workflows/shipit_pr_and_example_apps_deployment.yml

@@ -41,7 +41,7 @@ jobs:
             ~/.npm
             **/node_modules
 
-          key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/lerna.json') }}
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/lerna.json') }}-${{ github.run_id }}
           restore-keys: |
             ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}-
             ${{ runner.os }}-build-
@@ -99,11 +99,15 @@ jobs:
 
           # Update React package
           cd ../components-react
-          jq --arg CANARY_VERSION "$CANARY_VERSION" '.dependencies["@infineon/infineon-design-system-stencil"] |= sub("^"; "") | .dependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' package.json > package.json.tmp && mv package.json.tmp package.json
+          jq --arg CANARY_VERSION "$CANARY_VERSION" \
+            '.dependencies["@infineon/infineon-design-system-stencil"] = $CANARY_VERSION' \
+            package.json > package.json.tmp && mv package.json.tmp package.json
 
+          # Install the updated dependency
+          npm install @infineon/infineon-design-system-stencil@$CANARY_VERSION
           cd ../../
-
-          npm ci
+                 
+          npm install
 
           # Verify updates
           echo "Verifying updates in Angular package"
@@ -216,11 +220,11 @@ jobs:
       - name: Install and Build
         run: |
           cd examples/wrapper-components/react-vite-js
+          rm -rf node_modules
+          npm install
           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
 
       - name: Deploy preview

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
           registry-url: "https://registry.npmjs.org"
 
       - name: Install dependencies
-        run: npm ci
+        run: npm i
 
       - name: Run tests
         env:

examples/wrapper-components/react-javascript/package.json

@@ -27,9 +27,9 @@
     "watch:library": "cd ../../../packages/components && npm run watch:stencil",
     "build:wrapper": "cd ../../../packages/components && npm i && npm run build:stencil && cd ../components-react && npm run build",
     "link-clean": "node ../../../utils/os-type.js",
-    "link-clean-win": "cd ../../../packages/components-react && rmdir /s /q node_modules && npm run build && npm link && cd ../../examples/wrapper-components/react-javascript && npm link @infineon/infineon-design-system-react",
-    "link-clean-unix": "cd ../../../packages/components-react && rm -rf node_modules &&  npm run build && npm link && cd ../../examples/wrapper-components/react-javascript && npm link @infineon/infineon-design-system-react",
-    "preview:link": "run-s link-clean start",
+    "link-clean-win": "cd ../../../packages/components-react && echo Step 1: Current Directory: %cd% && dir && if exist node_modules (echo Step 2: Removing node_modules && rmdir /s /q node_modules) else (echo Step 2: node_modules directory does not exist) && echo Step 3: Running build && npm run build && echo Step 4: Linking package && npm link && cd ../../examples/wrapper-components/react-vite-js && echo Step 5: Current Directory: %cd% && dir && echo Step 6: Linking @infineon/infineon-design-system-react && npm link @infineon/infineon-design-system-react",
+    "link-clean-unix": "cd ../../../packages/components-react && echo Step 1: Current Directory: $(pwd) && ls && if [ -d node_modules ]; then echo Step 2: Removing node_modules && rm -rf node_modules; else echo Step 2: node_modules directory does not exist; fi && echo Step 3: Running build && npm run build && echo Step 4: Linking package && npm link && cd ../../examples/wrapper-components/react-vite-js && echo Step 5: Current Directory: $(pwd) && ls && echo Step 6: Linking @infineon/infineon-design-system-react && npm link @infineon/infineon-design-system-react",
+   "preview:link": "run-s link-clean start",
     "test:local": "run-p preview:link watch:library"
   },
   "eslintConfig": {

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

@@ -38,7 +38,7 @@ 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';
-
+import SegmentedControl from './components/SegmentedControl/SegmentedControl';
 
 function App() {
   return (
@@ -152,6 +152,10 @@ function App() {
       <SearchBar />
       <br />
 
+      <h2>Segmented Control</h2>
+      <SegmentedControl />
+      <br />
+
       <h2>Search Field</h2>
       <SearchField />
 

examples/wrapper-components/react-javascript/src/components/SegmentedControl/SegmentedControl.jsx

@@ -0,0 +1,17 @@
+import { IfxSegmentedControl, IfxSegment } from '@infineon/infineon-design-system-react';
+
+function SegmentedControls() {
+    return (
+        <div>
+            <IfxSegmentedControl caption='Caption text to describe the controls' label='Group Label' size='regular'>
+                <IfxSegment selected={true} icon='star16' value='value1'> Label </IfxSegment>
+                <IfxSegment icon='star16' value='value2'> Label </IfxSegment>
+                <IfxSegment icon='star16' value='value3'> Label </IfxSegment>
+                <IfxSegment icon='star16' value='value4'> Label </IfxSegment>
+            </IfxSegmentedControl>
+        </div>
+    )
+}
+
+export default SegmentedControls;
+