fix: 🐛 add radiocard support to group

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

@@ -1,3 +1,6 @@
-{{yield (hash
+<div class="radio-field-wrapper {{if @inline "inline"}}">
+  {{yield (hash
   radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
-)}}
+  card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline layout=@layout)
+)}}
+</div>

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

@@ -81,3 +81,159 @@ Renders a form radiofield group.
   }
   }}</Story>
 </Preview>
+
+```htmlbars
+<Rose::Form::Radio::Group
+  @disabled={{false}}
+  @name={{name}}
+  @selectedValue="disagree"
+  @changed={{fn}}
+  @inline={{false}}
+  as |radioGroup|
+>
+  <radioGroup.Card
+    @label="Agree"
+    @value="agree"
+    @layout='tile'
+       @helperText="dwsd"
+  />
+  <radioGroup.Card
+    @label="disagree"
+    @value="disagree"
+    @layout='tile'
+       @helperText="dwsd"
+  />
+  <radioGroup.Card
+    @label="maybe"
+    @value="maybe"
+    @layout='tile'
+    @helperText="dwsd"
+  />
+</Rose::Form::Radio::Group>
+```
+<Preview>
+  <Story name="Basic radio group - Tile" height="10rem">{{
+  template: hbs`
+    <Rose::Form::Radio::Group
+      @disabled={{disabled}}
+      @name={{name}}
+      @selectedValue={{selectedValue}}
+      @changed={{changed}}
+      @inline={{inline}}
+      as |radioGroup|
+    >
+      <radioGroup.card
+        @label={{firstFieldLabel}}
+        @value={{firstFieldValue}}
+        @icon={{firstFieldIcon}}
+        @layout='tile'
+      />
+      <radioGroup.card
+        @label={{secondFieldLabel}}
+        @value={{secondFieldValue}}
+        @layout="tile"
+      />
+      <radioGroup.card
+        @label={{thirdFieldLabel}}
+        @value={{thirdFieldValue}}
+        @layout="tile"
+      />
+    </Rose::Form::Radio::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'),
+    firstFieldIcon: select(
+        'firstFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+    secondFieldLabel: text('second label', 'Maybe'),
+    secondFieldValue: text('second value', 'maybe'),
+    thirdFieldLabel: text('third label', 'Disagree'),
+    thirdFieldValue: text('third value', 'disagree'),
+    changed: action('changed')
+  }
+  }}</Story>
+</Preview>
+
+```htmlbars
+<Rose::Form::Radio::Group
+  @disabled={{false}}
+  @name={{name}}
+  @selectedValue="disagree"
+  @changed={{fn}}
+  @inline={{false}}
+  as |radioGroup|
+>
+  <radioGroup.Card
+    @label="Agree"
+    @value="agree"
+    @layout='wide'
+  />
+  <radioGroup.Card
+    @label="disagree"
+    @value="disagree"
+    @layout='wide'
+  />
+</Rose::Form::Radio::Group>
+```
+<Preview>
+  <Story name="Basic radio group - Wide" height="10rem">{{
+  template: hbs`
+    <Rose::Form::Radio::Group
+      @disabled={{disabled}}
+      @name={{name}}
+      @selectedValue={{selectedValue}}
+      @changed={{changed}}
+      @inline={{inline}}
+      as |radioGroup|
+    >
+      <radioGroup.card
+        @label={{firstFieldLabel}}
+        @value={{firstFieldValue}}
+        @icon={{firstFieldIcon}}
+        @layout="wide"
+      />
+      <radioGroup.card
+        @label={{secondFieldLabel}}
+        @value={{secondFieldValue}}
+        @layout="wide"
+      />
+      <radioGroup.card
+        @label={{thirdFieldLabel}}
+        @value={{thirdFieldValue}}
+        @layout="wide"
+      />
+    </Rose::Form::Radio::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'),
+    firstFieldIcon: select(
+        'firstFieldIcon',
+        {
+          'none': null,
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
+        },
+        null
+      ),
+    secondFieldLabel: text('second label', 'Maybe'),
+    secondFieldValue: text('second value', 'maybe'),
+    thirdFieldLabel: text('third label', 'Disagree'),
+    thirdFieldValue: text('third value', 'disagree'),
+    changed: action('changed')
+  }
+  }}</Story>
+</Preview>

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

@@ -22,6 +22,17 @@ $radio-svg: (
 );
 
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
+.radio-field-wrapper {
+  &.inline {
+    display: inline-flex;
+    .rose-form-radio-label {
+      margin-right: sizing.rems(s);
+    }
+  }
+  .rose-form-radio-card {
+    margin-bottom: sizing.rems(s);
+  }
+}
 .rose-form-radio {
   &.inline {
     display: inline-block;