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. {{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``); 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``); + 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 @@ {{#each this.options as |option|}} - + -

{{option.host.description}}

-
+ onChange={{fn @toggleHost option.host}} /> + {{option.host.name}} {{option.host.address}}
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}` +});