docs(#1528): add documentation for content switcher

Merge pull request #1533 from Infineon/1528-documentation-content-switcher

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": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "@infineon/infineon-design-system-react": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "path": "^0.12.7",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"

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": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "@infineon/infineon-design-system-vue": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "@vitejs/plugin-vue": "^4.0.0",
  "@vitejs/plugin-vue-jsx": "^3.0.1",
  "vite": "^5.0.12",

lerna.json

@@ -1,6 +1,6 @@
 {
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "command": {
  "publish": {
  "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
  "name": "components-angular",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.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": "^25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "@infineon/infineon-design-system-angular": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "typescript": "~5.4.4",

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@infineon/infineon-design-system-angular",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.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.3",
- "@infineon/infineon-design-system-stencil": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0"
+ "@infineon/infineon-design-system-stencil": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0"
  },
  "dependencies": {
  "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@infineon/infineon-design-system-react",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.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.3",
- "@infineon/infineon-design-system-stencil": "^25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "@infineon/infineon-design-system-stencil": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "@stencil/react-output-target": "^0.7.1"
  },
  "auto": {

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@infineon/infineon-design-system-vue",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "description": "Infineon design system Stencil web components for Vue",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
  },
  "dependencies": {
  "@infineon/design-system-tokens": "3.3.3",
- "@infineon/infineon-design-system-stencil": "^25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0"
+ "@infineon/infineon-design-system-stencil": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0"
  },
  "auto": {
  "plugins": [

packages/components/.storybook/main.js

@@ -33,8 +33,8 @@ function getAbsolutePath(value) {
 
  const findAndExcludeFiles = () => {
  const allStories = [
- ...glob.sync(path.join(__dirname, '../src/**/*.stories.@(js|jsx|ts|tsx)')),
- ...glob.sync(path.join(__dirname, '../src/**/*.mdx'))
+ ...glob.sync(path.join(__dirname, '../src/**/*.stories.@(js|jsx|ts|tsx)').replaceAll('\\', '/')),
+ ...glob.sync(path.join(__dirname, '../src/**/*.mdx').replaceAll('\\', '/'))
  ];
 
  // Exclude specific files or patterns
@@ -43,6 +43,5 @@ function getAbsolutePath(value) {
  });
 
  const sortedStories = filteredStories.sort();
-
  return sortedStories;
 };

packages/components/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@infineon/infineon-design-system-stencil",
- "version": "25.9.0--canary.1493.3990970d0cb0aa7c6a11fcae7306039d5f12eada.0",
+ "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
  "private": false,
  "description": "Infineon design system Stencil web components",
  "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/content-switcher/Usage.mdx

@@ -0,0 +1,51 @@
+
+import { Meta } from '@storybook/blocks'
+
+import * as ContentSwitcherStories from './content-switcher.stories';
+import ContentSwitcherAnatomy from '../../../public-storybook/images/content-switcher/content-switcher-anatomy.png';
+import ContentSwitcherMouseInteraction from '../../../public-storybook/images/content-switcher/content-switcher-mouse-interaction.png';
+import ContentSwitcherStates from '../../../public-storybook/images/content-switcher/content-switcher-states.png';
+import ContentSwitcherVariants from '../../../public-storybook/images/content-switcher/content-switcher-variants.png';
+
+<Meta of={ContentSwitcherStories} /> 
+
+# Content Switcher
+The Content switcher component allows users to toggle between two or more content sections within the entire content area.
+
+| Resources |
+|--------------------------------------------------------------------------------------------------------------------------|
+| [Figma Content Switcher component →](https://www.figma.com/design/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?node-id=63857-4879) |
+
+## Usage
+
+### When to use
+- When you need to switch between different content views or layouts dynamically, often in more complex or interactive scenarios.
+
+### When not to use
+- If you only want to switch between on/off. For this scenario use the switcher component instead.
+
+## Anatomy
+<img src={ContentSwitcherAnatomy} alt="Content Switcher Anatomy" />
+
+**Selected Content Tab(1)**\
+Only one tab can be selected at a time.
+
+**Content Tab(2)**\
+This shows a selectable item which switches the content.
+
+**Label Text(3)**\
+This is the primary text that describes the selected tab. 
+
+**Content Area(4)**\
+The content area is the part where the actual content related to the active tab is displayed. When a user clicks on a tab, the content area updates to show the corresponding content associated with that tab.
+
+## Mouse interaction
+Users can activate and navigate between content switcher tabs by clicking a content tab.
+<img src={ContentSwitcherMouseInteraction} alt="Content Switcher Mouse Interaction" width="50%" />
+
+## States
+<img src={ContentSwitcherStates} alt="Content Switcher States" />
+
+## Variants
+The content switcher allows a various amount of tabs. Consider using max. 5 tabs to ensure a suitable user experience. The vertical divider can be toggled on/off via its “Visible” property. 
+<img src={ContentSwitcherVariants} alt="Content Switcher Variants" />