feat: 🎸 add stories for inline radio & checkbox, radiogrp

addons/rose/addon/components/rose/form/checkbox/index.stories.mdx

@@ -16,7 +16,6 @@ Renders a form input checkbox.
   @checked={{false}}
   @error={{false}}
   @disabled={{false}}
-  @inline={{true}}
   />
 ```
 
@@ -69,3 +68,60 @@ Renders a form input checkbox.
     }
   }}</Story>
 </Preview>
+
+
+```htmlbars
+<Rose::Form::Checkbox
+  @name="boolean-value"
+  @label="Yes?"
+  @checked={{false}}
+  @error={{false}}
+  @disabled={{false}}
+  @inline={{true}}
+  />
+```
+
+<Preview>
+  <Story name="Checkbox with inline style" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Checkbox
+        @name='checkbox-1'
+        @label='Checkbox1 🛎'
+        @description={{description}}
+        @helperText={{helperText}}
+        @checked={{checked}}
+        @error={{error}}
+        @disabled={{disabled}}
+        @inline={{true}}
+        />
+      <Rose::Form::Checkbox
+        @name='checkbox-2'
+        @label='Checkbox2 🛎'
+        @description={{description}}
+        @helperText={{helperText}}
+        @checked={{checked}}
+        @error={{error}}
+        @disabled={{disabled}}
+        @inline={{true}}
+        />
+      <Rose::Form::Checkbox
+        @name='checkbox-3'
+        @label='Checkbox3 🛎'
+        @description={{description}}
+        @helperText={{helperText}}
+        @checked={{checked}}
+        @error={{error}}
+        @disabled={{disabled}}
+        @inline={{true}}
+        />
+    `,
+    context: {
+      description: text('description', 'Short description in label'),
+      helperText: text('helperText', 'This is an optional help text.'),
+      checked: boolean('checked', false),
+      error: boolean('error', false),
+      disabled: boolean('disabled', false),
+    }
+  }}</Story>
+  
+</Preview>

addons/rose/addon/components/rose/form/radio/group/index.hbs

@@ -1,3 +1,3 @@
 {{yield (hash
-  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed)
-)}}
+  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
+)}}

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -15,6 +15,7 @@ Renders a form radiofield group.
   @name={{name}}
   @selectedValue="disagree"
   @changed={{fn}}
+  @inline={{false}}
   as |radioGroup|
 >
   <radioGroup.radio
@@ -39,6 +40,7 @@ Renders a form radiofield group.
       @name={{name}}
       @selectedValue={{selectedValue}}
       @changed={{changed}}
+      @inline={{inline}}
       as |radioGroup|
     >
       <radioGroup.radio
@@ -59,6 +61,7 @@ Renders a form radiofield group.
   context: {
     name: text('name', 'mustagree'),
     disabled: boolean('disabled', false),
+    inline: boolean('inline', true),
     selectedValue: text('selectedValue', 'disagree'),
     firstFieldLabel: text('first label', 'Agree'),
     firstFieldValue: text('first value', 'agree'),

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -16,7 +16,6 @@ Renders a form radiofield.
   @selectedValue="yes-agree"
   @disabled={{false}}
   @changed={{fn}}
-  @inline={{true}}
   />
 ```
 
@@ -55,3 +54,70 @@ Renders a form radiofield.
     }
   }}</Story>
 </Preview>
+
+
+```htmlbars
+<Rose::Form::Radio::Radio
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @inline={{true}}
+  />
+```
+
+<Preview>
+  <Story name="Radio with inline style" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::Radio
+        @label='Radiofield1'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{true}}
+        />
+      <Rose::Form::Radio::Radio
+        @label='Radiofield2'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{true}}
+        />
+      <Rose::Form::Radio::Radio
+        @label='Radiofield3'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{true}}
+        />
+    `,
+    context: {
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'user-organization': 'user-organization',
+          'copy-action': 'copy-action',
+          'unfold-more': 'unfold-more',
+          'unfold-less': 'unfold-less',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/form/_radio.scss

@@ -21,14 +21,17 @@ $radio-svg: (
 );
 
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
-.radio-group-inline {
-  display: flex;
-  .rose-form-radio {
+  .rose-form-radio {   
+    &.inline {
+    display: inline-block;
+     .rose-form-radio-label {
+      margin-right: sizing.rems(s);
+     }
+  }
+  .radio-group-inline {
+    display: flex;
     margin-right: sizing.rems(s);
   }
-}
-
-.rose-form-radio {
   @include type.type(m);
   position: relative;
   margin-bottom: sizing.rems(xs);