feat: final radio button group

telekom · Jul 27, 2021 · 6e978c4 · 6e978c4
1 parent 4161e8b
commit 6e978c4
Show file tree

Hide file tree

Showing 3 changed files with 1,331 additions and 15 deletions.
diff --git a/packages/components/src/components/radio-button-group/radio-button-group.css b/packages/components/src/components/radio-button-group/radio-button-group.css
@@ -1,3 +1,9 @@
+radio-button-group {
+  /*label*/
+  --font-weight-label: var(--scl-font-weight-medium);
+  --font-size-label: 16px;
+}
+
 .radio-button-group {
   display: inline-flex;
   flex-direction: column;
@@ -6,9 +12,16 @@
 .radio-button-group__container {
   display: flex;
   flex-direction: column;
-  margin-left: 1.5rem;
 }
 
-.radio-button-group__checkbox {
-  margin-top: 0.5rem;
+.radio-button-group__helper-text {
+  color: red;
+  font-size: 12px;
+  margin-top: -0.7rem;
+  padding-bottom: 0.5rem;
+}
+
+.radio-button-group__title {
+  font-size: var(--font-size-label);
+  font-weight: 500;
 }
diff --git a/packages/components/src/components/radio-button-group/radio-button-group.tsx b/packages/components/src/components/radio-button-group/radio-button-group.tsx
@@ -1,17 +1,25 @@
-import { Component, h, Host } from '@stencil/core';
-
+import { Component, h, Host, Prop } from '@stencil/core';
 @Component({
   tag: 'scale-radio-button-group',
   styleUrl: './radio-button-group.css',
   shadow: true,
 })
 export class CheckboxGroup {
+  /** (optional) Input label */
+  @Prop() label: string = '';
+  /** (optional) Input helper text */
+  @Prop() helperText?: string = '';
   render() {
     return (
       <Host>
         <div class="radio-button-group">
           <div class="radio-button-group__label">
-            <slot name="radio-button-label" />
+            <h1 class="radio-button-group__title">{this.label}</h1>
+            {this.helperText && (
+              <div class="radio-button-group__helper-text">
+                {this.helperText}
+              </div>
+            )}
           </div>
           <div class="radio-button-group__container">
             <slot name="radio-button-list" />