global.css re-added, radio button sizes added

Infineon · Jun 29, 2023 · 4357099 · 4357099
1 parent d9787a5
commit 4357099
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()
   ],