[Project Solar / Phase 1 / Showcase] Add support for "column" layout to comparison grid and "no equivalent" block (#3682)

Author: didoo

showcase/app/components/page-carbonization/components/application-state/index.gts

@@ -22,7 +22,7 @@ const ApplicationStateCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwCarbonizationComparisonGrid
       @label="With icon and error code"
-      @sideBySide={{true}}
+      @layout="side-by-side"
     >
       <:theming>
         <CodeFragmentWithActionVariants

showcase/app/components/page-carbonization/components/badge/index.gts

@@ -316,8 +316,8 @@ const BadgeCarbonizationIndex: TemplateOnlyComponent = <template>
           {{/each}}
         </ShwFlex>
       </:theming>
-      <:reference>
-        <code>???</code>
+      <:reference as |R|>
+        <R.NoEquivalent @isCompact={{true}} />
       </:reference>
     </ShwCarbonizationComparisonGrid>
 

showcase/app/components/page-carbonization/components/form/radio-card/index.gts

@@ -157,7 +157,7 @@ export default class FormRadioCardCarbonizationIndex extends Component {
 
       <ShwCarbonizationComparisonGrid
         @label="With standard content"
-        @sideBySide={{true}}
+        @layout="side-by-side"
       >
         <:theming as |T|>
           <HdsFormRadioCardGroup
@@ -209,7 +209,7 @@ export default class FormRadioCardCarbonizationIndex extends Component {
 
       <ShwCarbonizationComparisonGrid
         @label="With helper text, required, error"
-        @sideBySide={{true}}
+        @layout="side-by-side"
       >
         <:theming as |T|>
           <HdsFormRadioCardGroup
@@ -269,7 +269,7 @@ export default class FormRadioCardCarbonizationIndex extends Component {
       {{#each CONTROL_POSITIONS as |position|}}
         <ShwCarbonizationComparisonGrid
           @label="Position = {{position}}"
-          @sideBySide={{true}}
+          @layout="side-by-side"
         >
           <:theming as |T|>
             <HdsFormRadioCardGroup
@@ -326,7 +326,7 @@ export default class FormRadioCardCarbonizationIndex extends Component {
       {{#each ALIGNMENTS as |alignment|}}
         <ShwCarbonizationComparisonGrid
           @label="Alignment = {{alignment}}"
-          @sideBySide={{true}}
+          @layout="side-by-side"
         >
           <:theming as |T|>
             <HdsFormRadioCardGroup
@@ -385,7 +385,7 @@ export default class FormRadioCardCarbonizationIndex extends Component {
       {{#each LAYOUT_TYPES as |layout|}}
         <ShwCarbonizationComparisonGrid
           @label="Layout = {{layout}}"
-          @sideBySide={{true}}
+          @layout="side-by-side"
         >
           <:theming as |T|>
             <HdsFormRadioCardGroup

showcase/app/components/page-carbonization/components/modal/index.gts

@@ -40,7 +40,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
     {{#each COLORS as |color|}}
       <ShwCarbonizationComparisonGrid
         @label={{capitalize color}}
-        @sideBySide={{true}}
+        @layout="side-by-side"
       >
         <:theming>
           <HdsModal
@@ -105,7 +105,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwTextH3>Header</ShwTextH3>
 
-    <ShwCarbonizationComparisonGrid @label="With icon" @sideBySide={{true}}>
+    <ShwCarbonizationComparisonGrid @label="With icon" @layout="side-by-side">
       <:theming>
         <HdsModal open id="modal-example-icon" @size="small" as |M|>
           <M.Header @icon="info">
@@ -145,7 +145,10 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
       </:reference>
     </ShwCarbonizationComparisonGrid>
 
-    <ShwCarbonizationComparisonGrid @label="With tagline" @sideBySide={{true}}>
+    <ShwCarbonizationComparisonGrid
+      @label="With tagline"
+      @layout="side-by-side"
+    >
       <:theming>
         <HdsModal open id="modal-example-tagline" @size="small" as |M|>
           <M.Header @tagline="Tagline">
@@ -188,7 +191,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwCarbonizationComparisonGrid
       @label="With tagline and icon"
-      @sideBySide={{true}}
+      @layout="side-by-side"
     >
       <:theming>
         <HdsModal open id="modal-example-tagline-icon" @size="small" as |M|>
@@ -236,7 +239,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwCarbonizationComparisonGrid
       @label="With basic style"
-      @sideBySide={{true}}
+      @layout="side-by-side"
     >
       <:theming>
         <HdsModal open id="modal-example-basic-content" @size="small" as |M|>
@@ -299,7 +302,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwTextH2>Footer</ShwTextH2>
 
-    <ShwCarbonizationComparisonGrid @label="One action" @sideBySide={{true}}>
+    <ShwCarbonizationComparisonGrid @label="One action" @layout="side-by-side">
       <:theming>
         <HdsModal open id="modal-example-one-action" @size="small" as |M|>
           <M.Header>
@@ -335,7 +338,7 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
       </:reference>
     </ShwCarbonizationComparisonGrid>
 
-    <ShwCarbonizationComparisonGrid @label="Two actions" @sideBySide={{true}}>
+    <ShwCarbonizationComparisonGrid @label="Two actions" @layout="side-by-side">
       <:theming>
         <HdsModal open id="modal-example-two-actions" @size="small" as |M|>
           <M.Header>
@@ -375,7 +378,10 @@ const ModalCarbonizationIndex: TemplateOnlyComponent = <template>
       </:reference>
     </ShwCarbonizationComparisonGrid>
 
-    <ShwCarbonizationComparisonGrid @label="Three actions" @sideBySide={{true}}>
+    <ShwCarbonizationComparisonGrid
+      @label="Three actions"
+      @layout="side-by-side"
+    >
       <:theming>
         <HdsModal open id="modal-example-three-actions" @size="small" as |M|>
           <M.Header>