From 4357099f70e20503d481371bd0670b15777e0bd2 Mon Sep 17 00:00:00 2001
From: verena-ifx <lechneve@ISCN5CG1201S7M.infineon.com>
Date: Thu, 29 Jun 2023 11:05:17 +0200
Subject: [PATCH] global.css re-added, radio button sizes added

---
 .../stencil-components/vanilla-cdn/index.html |  3 +--
 packages/components-vue/lib/components.ts     |  1 +
 .../components/radio-button/radio-button.scss | 26 +++++++++++++------
 .../radio-button/radio-button.stories.ts      | 15 ++++++-----
 .../components/radio-button/radio-button.tsx  |  3 ++-
 .../src/components/radio-button/readme.md     | 11 ++++----
 packages/components/stencil.config.ts         |  1 +
 7 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
index 44fb4ee318..083fad15ce 100644
--- a/examples/stencil-components/vanilla-cdn/index.html
+++ b/examples/stencil-components/vanilla-cdn/index.html
@@ -8,7 +8,6 @@
   <script type="module" src="dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js"></script>
   <link rel="stylesheet" href="dist/infineon-design-system-stencil/infineon-design-system-stencil.css">
 
-  <link rel="stylesheet" href="dist/infineon-design-system-stencil/infineon-design-system-stencil.css">
 
   <title>Vanilla</title>
 </head>
@@ -63,7 +62,7 @@ <h2>Text Input</h2>
     <br />
 
     <h2>Radio Button</h2>
-    <ifx-radio-button id="radio-btn" error="false" disabled="false" value="false">Text</ifx-radio-button>
+    <ifx-radio-button id="radio-btn" size="s" error="false" disabled="false" value="false">Text</ifx-radio-button>
 
   </div>
 
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
index 0206c28b03..2a195d2edd 100644
--- a/packages/components-vue/lib/components.ts
+++ b/packages/components-vue/lib/components.ts
@@ -253,6 +253,7 @@ export const IfxRadioButton = /*@__PURE__*/ defineContainer<JSX.IfxRadioButton,
   'disabled',
   'value',
   'error',
+  'size',
   'ifxChange'
 ],
 'value', 'ifxChange');
diff --git a/packages/components/src/components/radio-button/radio-button.scss b/packages/components/src/components/radio-button/radio-button.scss
index 56052376be..6068df0425 100644
--- a/packages/components/src/components/radio-button/radio-button.scss
+++ b/packages/components/src/components/radio-button/radio-button.scss
@@ -8,13 +8,21 @@
     padding: 0px;
     gap: 8px;
 
+    &.s .radioButton__wrapper {
+        width: 20px;
+        height: 20px;
+    }
+
+    &.m .radioButton__wrapper {
+        width: 24px;
+        height: 24px;
+    }
+
     & .radioButton__wrapper {
-        position: relative; // New
-        display: block; // Updated
+        position: relative;
+        display: block;
         justify-content: center;
         align-items: center;
-        width: 20px;
-        height: 20px;
         border-radius: 50%;
         background-color: tokens.$color-bg-white;
         border: 1px solid #575352;
@@ -25,10 +33,10 @@
         padding: 0;
 
         & .radioButton__wrapper-mark {
-            position: absolute; // New
-            top: 50%; // New
-            left: 50%; // New
-            transform: translate(-50%, -50%); // New
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             background-color: #0A8276;
             width: 8.75px;
             height: 8.75px;
@@ -91,6 +99,8 @@
     }
 
     & .label {
+        display: flex;
+        align-items: center;
         width: 25px;
         height: 20px;
         font-style: normal;
diff --git a/packages/components/src/components/radio-button/radio-button.stories.ts b/packages/components/src/components/radio-button/radio-button.stories.ts
index 9b1455144c..b45e4eac38 100644
--- a/packages/components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/components/src/components/radio-button/radio-button.stories.ts
@@ -1,7 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import RadioButtonDocumentation from './radio-button_docs.mdx';
 
-
 export default {
   title: "Components/Radio Button",
   parameters: {
@@ -14,14 +13,19 @@ export default {
     error: false,
     disabled: false,
     value: false,
+    size: 's',
     label: 'Text'
   },
-  argTypes: { onIfxChange: { action: 'checked' } },
-
+  argTypes: {
+    onIfxChange: { action: 'checked' },
+    size: {
+      options: ['s', 'm'],
+      control: { type: 'radio' },
+    },
 
+  },
 };
 
-
 const DefaultTemplate = (args) => {
   // Create the radio button element
   const element = document.createElement('ifx-radio-button');
@@ -30,6 +34,7 @@ const DefaultTemplate = (args) => {
   element.setAttribute('error', args.error);
   element.setAttribute('disabled', args.disabled);
   element.setAttribute('value', args.value);
+  element.setAttribute('size', args.size);  // Added size prop
 
   // Add the label as a text node
   element.appendChild(document.createTextNode(args.label));
@@ -41,6 +46,4 @@ const DefaultTemplate = (args) => {
   return element;
 }
 
-
 export const Default = DefaultTemplate.bind({});
-
diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 5d44318a94..94b2773968 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -11,6 +11,7 @@ export class RadioButton {
   @Prop() disabled: boolean = false;
   @Prop() value: boolean = false;
   @Prop() error: boolean = false;
+  @Prop() size: "s" | "m" = "s"; // New size prop
   @State() internalValue: boolean;
   @State() hasSlot: boolean = true;
 
@@ -43,7 +44,7 @@ export class RadioButton {
 
   render() {
     return (
-      <div class="radioButton__container">
+      <div class={`radioButton__container ${this.size}`}>
         <div
           tabindex="0"
           onClick={this.handleRadioButtonClick.bind(this)}
diff --git a/packages/components/src/components/radio-button/readme.md b/packages/components/src/components/radio-button/readme.md
index ec2d30c148..bda5a6c336 100644
--- a/packages/components/src/components/radio-button/readme.md
+++ b/packages/components/src/components/radio-button/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type      | Default |
-| ---------- | ---------- | ----------- | --------- | ------- |
-| `disabled` | `disabled` |             | `boolean` | `false` |
-| `error`    | `error`    |             | `boolean` | `false` |
-| `value`    | `value`    |             | `boolean` | `false` |
+| Property   | Attribute  | Description | Type         | Default |
+| ---------- | ---------- | ----------- | ------------ | ------- |
+| `disabled` | `disabled` |             | `boolean`    | `false` |
+| `error`    | `error`    |             | `boolean`    | `false` |
+| `size`     | `size`     |             | `"m" \| "s"` | `"s"`   |
+| `value`    | `value`    |             | `boolean`    | `false` |
 
 
 ## Events
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 7a2d4e3b89..331426ab65 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -5,6 +5,7 @@ import { frameworkTargets } from './framework-output-targets';
 
 export const config: Config = {
   namespace: 'infineon-design-system-stencil',
+  globalStyle: 'src/global/global.scss',
   plugins: [
     sass()
   ],