chore: 🤖 merge from develop

addons/rose/addon/components/rose/form/checkbox.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/checkbox';
+
+/**
+ * A simple HTML `<input type="checkbox">` element.
+ *
+ * @example
+ *  <Rose::Form::Checkbox
+ *    @label="Label"
+ *    @id="fieldId"
+ *    name="fieldName"
+ *    disabled={{true}}
+ *    @error={{true}}
+ *    @checked={{true}}
+ *    />
+ */
+export default Component.extend({
+  layout,
+
+  tagName: '',
+});

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

@@ -0,0 +1,122 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-form-checkbox {
+  position: relative;
+  margin-bottom: sizing.rems(xs);
+  color: var(--ui-gray);
+
+  .rose-form-checkbox-label {
+    // label styles
+    @include type.type(s, semibold);
+    color: currentColor;
+    padding-left: sizing.rems(l);
+
+    // custom checkbox styles
+    &::before {
+      position: absolute;
+      top: sizing.rems(xxxs);
+      left: 0;
+      display: block;
+      width: sizing.rems(m);
+      height: sizing.rems(m);
+      pointer-events: none;
+      content: ' ';
+      border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+      border-radius: sizing.rems(xxxs);
+    }
+
+    &::after {
+      position: absolute;
+      top: -#{sizing.rems(xxxxs)};
+      left: -#{sizing.rems(xxxs) + sizing.rems(xxxxs)};
+      display: block;
+      width: sizing.rems(l);
+      height: sizing.rems(l);
+      transform: scale(0.9);
+      pointer-events: none;
+      content: ' ';
+      background: no-repeat 50%/50% 50%;
+    }
+  }
+
+  .rose-form-checkbox-field {
+    // mostly this just visually hides the native checkbox
+    position: absolute;
+    left: 0;
+    z-index: -1;
+    width: sizing.rems(m);
+    height: sizing.rems(m);
+    opacity: 0;
+
+    // Visual states for custom checkbox.
+    // Yeah.  It's complicated.
+    &:not(:disabled) {
+      &:hover {
+        ~ .rose-form-checkbox-label {
+          &::before {
+            border-color: var(--ui-gray);
+          }
+        }
+      }
+
+      &:focus {
+        ~ .rose-form-checkbox-label {
+          &::before {
+            border-color: var(--info);
+          }
+        }
+      }
+
+      &:checked {
+        ~ .rose-form-checkbox-label {
+          &::before {
+            border-color: var(--info);
+          }
+          &::after {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%231563ff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+          }
+        }
+      }
+    }
+
+    &:disabled {
+      ~ .rose-form-checkbox-label {
+        &::before {
+          border-color: var(--ui-gray-subtler-2);
+          background-color: var(--ui-gray-subtler-4);
+        }
+      }
+
+      &:checked {
+        ~ .rose-form-checkbox-label {
+          &::after {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%23bac1cc' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+          }
+        }
+      }
+    }
+  }
+
+  &.error {
+    color: var(--failure);
+
+    .rose-form-checkbox-field {
+      &:not(:disabled):not(:focus) {
+        ~ .rose-form-checkbox-label {
+          &::before {
+            border-color: var(--failure);
+          }
+        }
+
+        &:checked {
+          ~ .rose-form-checkbox-label {
+            &::after {
+              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%23c73445' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1 +1,2 @@
 @import 'input';
+@import 'checkbox';

addons/rose/addon/styles/rose/variables/_sizing.scss

@@ -23,7 +23,8 @@ $size-coefficients: (
   //  4
     xxxs: 0.125,
   //  2
-    xxxxs: 0.0625 //  1,,,,,
+    xxxxs: 0.0625,
+  //  1
 );
 
 /**

addons/rose/addon/styles/rose/variables/_typography.scss

@@ -40,7 +40,8 @@ $font-sizes: (
   // 20
     h3: sizing.size(m),
   // 16
-    button: sizing.size(m) * 0.8125 // 13,,,,,
+    button: sizing.size(m) * 0.8125,
+  // 13
 );
 
 // Line height expressed as ratio.

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

@@ -0,0 +1,16 @@
+<div class="rose-form-checkbox{{if @error " error"}}">
+
+  <Input
+    ...attributes
+    class="rose-form-checkbox-field"
+    id={{@id}}
+    @type="checkbox"
+    @checked={{if @checked true false}} />
+
+  <label class="rose-form-checkbox-label" for={{@id}}>
+    {{@label}}
+  </label>
+
+  {{yield}}
+
+</div>

addons/rose/app/components/rose/form/checkbox.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/checkbox';

addons/rose/app/templates/index.hbs

@@ -1,7 +1,9 @@
 Dummy app index template
 
-<Rose::Icon @name="unfold-more" />
+<h2>Icon</h2>
+<Rose::Icon @name="alert-circle-fill" />
 
+<h2>Button</h2>
 <Rose::Button @style="primary">Primary</Rose::Button>
 <br>
 <Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
@@ -12,7 +14,7 @@ Dummy app index template
 <Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
 <br>
 
-
+<h2>Form</h2>
 <Rose::Form::Input
   @label="Label"
   @value="Read only"
@@ -65,3 +67,30 @@ Dummy app index template
   @value="Text"
   disabled={{true}}
   />
+
+<h2>Checkbox</h2>
+<Rose::Form::Checkbox
+  @id="checkbox-1"
+  @label="Label"
+  />
+<Rose::Form::Checkbox
+  @id="checkbox-2"
+  @error={{true}}
+  @label="Error"
+  />
+<Rose::Form::Checkbox
+  @id="checkbox-3"
+  @checked={{true}}
+  @label="Checked"
+  />
+<Rose::Form::Checkbox
+  @id="checkbox-4"
+  @label="Disabled"
+  disabled={{true}}
+  />
+<Rose::Form::Checkbox
+  @id="checkbox-5"
+  @checked={{true}}
+  @label="Disabled + Checked"
+  disabled={{true}}
+  />

addons/rose/stories/form/checkbox.stories.js

@@ -0,0 +1,27 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Rose::Form::Checkbox',
+};
+
+export const Normal = () => ({
+  template: hbs`
+    <Rose::Form::Checkbox
+      @id={{id}}
+      name={{name}}
+      @label={{label}}
+      @checked={{checked}}
+      @error={{error}}
+      disabled={{disabled}}
+      />
+  `,
+  context: {
+    label: text('text', 'Checkbox 🛎'),
+    id: text('id', 'checkbox-1'),
+    name: text('name', 'checkbox-1'),
+    checked: boolean('checked', false),
+    error: boolean('error', false),
+    disabled: boolean('disabled', false),
+  },
+});

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

@@ -0,0 +1,39 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/checkbox', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox @label="Label" />`);
+    assert.equal(await find('label').textContent.trim(), 'Label');
+    assert.ok(await find('input'));
+  });
+
+  test('it is not checked by default', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox />`);
+    assert.equal(await find('input').checked, false);
+  });
+
+  test('it is not disabled by default', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox />`);
+    assert.equal(await find('input').disabled, false);
+  });
+
+  test('it is checked when @checked={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox @checked={{true}} />`);
+    assert.equal(await find('input').checked, true);
+  });
+
+  test('it marks error when @error={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox @error={{true}} />`);
+    assert.ok(await find('.error'));
+  });
+
+  test('it is disabled when disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox disabled={{true}} />`);
+    assert.equal(await find('input').disabled, true);
+  });
+});