Merge pull request #1732 from Infineon/1418-new-component-radio-group

New component: Radio button group

Author: tishoyanchev

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

@@ -380,7 +380,15 @@ <h2>Radio Button</h2>
       <ifx-radio-button error="false" disabled="false" size="s" name="fruit" value="orange">Orange</ifx-radio-button>
       <ifx-button type="submit">Submit</ifx-button>
     </form>
+    <br />
 
+    <h2>Radio Button Group</h2>
+    <ifx-radio-button-group alignment="vertical" show-group-label="true" group-label-text="Group Label" show-caption="true" caption-text="Caption text, description, error notification" show-caption-icon="true">
+      <ifx-radio-button value="0" disabled="false" checked="false" size="m" error="false">Option 0</ifx-radio-button>
+      <ifx-radio-button value="1" disabled="false" checked="false" size="m" error="false">Option 1</ifx-radio-button>
+      <ifx-radio-button value="2" disabled="false" checked="false" size="m" error="false">Option 2</ifx-radio-button>
+      <ifx-radio-button value="3" disabled="false" checked="false" size="m" error="false">Option 3</ifx-radio-button>
+    </ifx-radio-button-group>
     <br />
 
     <h2>Spinner</h2>

examples/wrapper-components/react-vite-js/package-lock.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "32.1.2--canary.1731.3fd7f9c0f096716fb3c31291a3ab92da9790285b.0",
+    "@infineon/infineon-design-system-react": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/react-vite-js/package.json

@@ -6,6 +6,7 @@ import ProgressBar from './components/ProgressBar/ProgressBar';
 import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
+import RadioButtonGroup from './components/RadioButtonGroup/RadioButtonGroup';
 import Sidebar from './components/Sidebar/Sidebar'
 import Notification from './components/Notification/Notification'
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
@@ -136,6 +137,10 @@ function App() {
       <RadioButton />
       <br />
 
+      <h2>Radio Button Group</h2>
+      <RadioButtonGroup />
+      <br />
+
 
       <h2>SingleSelect</h2>
       <SingleSelect />

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

@@ -0,0 +1,17 @@
+import { IfxRadioButtonGroup, IfxRadioButton } from '@infineon/infineon-design-system-react';
+
+function RadioButtonGroup() {
+
+  return (
+    <div>
+      <IfxRadioButtonGroup alignment="vertical" show-group-label="true" group-label-text="Group Label" show-caption="true" caption-text="Caption text, description, error notification" show-caption-icon="true">
+          <IfxRadioButton value="0" disabled="false" checked="false" size="m" error="false">Option 0</IfxRadioButton>
+          <IfxRadioButton value="1" disabled="false" checked="false" size="m" error="false">Option 1</IfxRadioButton>
+          <IfxRadioButton value="2" disabled="false" checked="false" size="m" error="false">Option 2</IfxRadioButton>
+          <IfxRadioButton value="3" disabled="false" checked="false" size="m" error="false">Option 3</IfxRadioButton>
+      </IfxRadioButtonGroup>
+    </div>
+  );
+}
+
+export default RadioButtonGroup;

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

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "32.1.2--canary.1731.3fd7f9c0f096716fb3c31291a3ab92da9790285b.0",
+    "@infineon/infineon-design-system-vue": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

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

@@ -24,6 +24,7 @@
   <Pagination />
   <ProgressBar />
   <RadioButton />
+  <RadioButtonGroup />
   <SearchField />
   <SearchBar />
   <SegmentedControl />
@@ -54,6 +55,7 @@ import CheckboxGroup from './components/CheckboxGroup.vue'
 import Chip from './components/Chip.vue'
 import ProgressBar from './components/ProgressBar.vue'
 import RadioButton from './components/RadioButton.vue'
+import RadioButtonGroup from './components/RadioButtonGroup.vue'
 import TextField from './components/TextField.vue'
 import Tag from './components/Tag.vue'
 import Spinner from './components/Spinner.vue'

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

@@ -0,0 +1,18 @@
+
+<template>
+  <div>
+    <h2>Radio Button Group</h2>
+    <ifx-radio-button-group alignment="vertical" show-group-label="false" group-label-text="Group Label" show-caption="false" caption-text="Caption text, description, error notification" show-caption-icon="false">
+        <ifx-radio-button value="0" disabled="false" checked="false" size="m" error="false">Option 0</ifx-radio-button>
+        <ifx-radio-button value="1" size="m">Option 1</ifx-radio-button>
+        <ifx-radio-button value="2" size="m">Option 2</ifx-radio-button>
+    </ifx-radio-button-group>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+
+
+</script>

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

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "32.1.2--canary.1731.3fd7f9c0f096716fb3c31291a3ab92da9790285b.0",
+  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
   "command": {
     "publish": {
       "verifyAccess": false