From da9d3c914cb38d199a57966994a8b2abf7539bb9 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 18:21:17 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20tweak=20checkbox=20styl?=
 =?UTF-8?q?es=20for=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/checkbox.stories.mdx    |  2 ++
 .../addon/styles/rose/components/form/_checkbox.scss   | 10 +++++++++-
 .../addon/templates/components/rose/form/checkbox.hbs  |  5 ++++-
 .../integration/components/rose/form/checkbox-test.js  | 10 ++++++++++
 ui/core/app/components/form/host-set/hosts/index.hbs   |  9 ++++-----
 ui/core/app/styles/app.scss                            |  9 +++++++++
 ui/core/mirage/factories/host.js                       |  4 +++-
 7 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3a15884dc..539f531c0 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/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),
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 485f49227..d18e8b7d9 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/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 {
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index 0984f1bc0..eed07f19d 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/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
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index 6ceb4abf9..53f5ef87b 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/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) {
diff --git a/ui/core/app/components/form/host-set/hosts/index.hbs b/ui/core/app/components/form/host-set/hosts/index.hbs
index 558d4d10b..1943e26aa 100644
--- a/ui/core/app/components/form/host-set/hosts/index.hbs
+++ b/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>
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 1a31665e6..ba08e2b36 100644
--- a/ui/core/app/styles/app.scss
+++ b/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;
+    }
+  }
 }
diff --git a/ui/core/mirage/factories/host.js b/ui/core/mirage/factories/host.js
index eb463f1f9..f322cb4d4 100644
--- a/ui/core/mirage/factories/host.js
+++ b/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}`
+});