chore: 🤖 tweak checkbox styles for descriptions

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

@@ -25,6 +25,7 @@ Renders a form input checkbox.
       <Rose::Form::Checkbox
         @name={{name}}
         @label={{label}}
+        @description={{description}}
         @checked={{checked}}
         @error={{error}}
         @disabled={{disabled}}
@@ -32,6 +33,7 @@ Renders a form input checkbox.
     `,
     context: {
       label: text('text', 'Checkbox 🛎'),
+      description: text('description', 'This is an optional description paragraph.'),
       name: text('name', 'checkbox-1'),
       checked: boolean('checked', false),
       error: boolean('error', false),

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

@@ -16,7 +16,15 @@
     // label styles
     @include type.type(s, semibold);
     color: currentColor;
-    padding-left: sizing.rems(l);
+
+    &,
+    .rose-form-checkbox-label-description {
+      padding-left: sizing.rems(l);
+    }
+
+    .rose-form-checkbox-label-description {
+      margin-top: sizing.rems(xs);
+    }
 
     // custom checkbox styles
     &::before {

addons/rose/addon/templates/components/rose/form/checkbox.hbs

@@ -11,7 +11,10 @@
     aria-describedby="{{if @error (concat 'errors-' this.id)}}" />
 
   <label class="rose-form-checkbox-label" for={{this.id}}>
-    {{@label}}
+    <span class="rose-form-checkbox-label-text">{{@label}}</span>
+    {{#if @description}}
+      <p class="rose-form-checkbox-label-description">{{@description}}</p>
+    {{/if}}
   </label>
 
   {{yield (hash

addons/rose/tests/integration/components/rose/form/checkbox-test.js

@@ -7,9 +7,19 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
+    assert.expect(3);
     await render(hbs`<Rose::Form::Checkbox @label="Label" />`);
     assert.equal(await find('label').textContent.trim(), 'Label');
     assert.ok(await find('input'));
+    assert.notOk(await find('.rose-form-checkbox-label-description'));
+  });
+
+  test('it renders optional description paragraph', async function (assert) {
+    assert.expect(3);
+    await render(hbs`<Rose::Form::Checkbox @label="Label" @description="Hello world" />`);
+    assert.equal(await find('.rose-form-checkbox-label-text').textContent.trim(), 'Label');
+    assert.equal(await find('.rose-form-checkbox-label-description').textContent.trim(), 'Hello world');
+    assert.ok(await find('input'));
   });
 
   test('it displays optional errors', async function (assert) {

ui/core/app/components/form/host-set/hosts/index.hbs

@@ -33,14 +33,13 @@
     <table.body as |body|>
       {{#each this.options as |option|}}
         <body.row as |row|>
-          <row.headerCell>
+          <row.cell>
             <form.checkbox
               @label={{option.host.id}}
+              @description={{option.host.description}}
               @checked={{option.selected}}
-              onChange={{fn @toggleHost option.host}}
-            />
-            <p>{{option.host.description}}</p>
-          </row.headerCell>
+              onChange={{fn @toggleHost option.host}} />
+          </row.cell>
           <row.cell>{{option.host.name}}</row.cell>
           <row.cell>{{option.host.address}}</row.cell>
         </body.row>

ui/core/app/styles/app.scss

@@ -30,4 +30,13 @@
   p {
     margin-bottom: 0;
   }
+
+  .rose-form-checkbox {
+    margin-bottom: 0;
+
+    .rose-form-checkbox-label-text {
+      color: var(--stark);
+      text-decoration: underline;
+    }
+  }
 }

ui/core/mirage/factories/host.js

@@ -1,3 +1,5 @@
 import factory from '../generated/factories/host';
 
-export default factory.extend();
+export default factory.extend({
+  id: (i) => `host-id-${i}`
+});