upd(mox/input): update mox/input + mox/label comp. with light mode va…

…riants

addon/components/mox/form-error.hbs

@@ -1,5 +1,8 @@
 <div class="h-4 relative" ...attributes>
  {{#if @error}}
- <p class="text-red-500 text-xs absolute" data-test-mox-form-error>{{@error}}</p>
+ <p
+ class="text-red-600 dark:text-red-500 text-xs absolute"
+ data-test-mox-form-error
+ >{{@error}}</p>
  {{/if}}
-</div>
+</div>

addon/components/mox/input.hbs

@@ -4,9 +4,13 @@
 <input
  id={{@id}}
  type="text"
- class="px-4 py-2 w-full text-white text-sm rounded bg-gray-800
- disabled:bg-gray-700 disabled:border-gray-700 disabled:text-gray-500 disabled:cursor-not-allowed
- {{if this.isValid 'border-gray-500 focus:border-cyan-500 focus:ring-cyan-500' 'border-red-800 active:border-red-900 focus:border-red-900 focus:ring-red-900'}}"
+ class="px-4 py-2 w-full text-gray-800 dark:text-white text-sm rounded bg-white dark:bg-gray-800
+ read-only:text-gray-800 dark:read-only:text-white disabled:text-gray-600 dark:disabled:text-gray-500
+ disabled:bg-gray-200 read-only:bg-gray-200 disabled:border-gray-200 read-only:border-gray-200
+ dark:disabled:bg-gray-700 dark:read-only:bg-gray-700 dark:disabled:border-gray-700 dark:read-only:border-gray-700 disabled:cursor-not-allowed
+ read-only:focus:border-cyan-500 dark:read-only:focus:border-white dark:ready-only:focus:ring-white
+ {{if this.isValid 'border-gray-100 dark:border-gray-500 focus:border-cyan-500 focus:ring-cyan-500'
+ 'border-red-500 dark:border-red-800 active:border-red-500 dark:active:border-red-900 focus:border-red-500 dark:focus:border-red-900 focus:ring-red-500 dark:focus:ring-red-900'}}"
  value={{@value}}
  placeholder={{@placeholder}}
  aria-invalid={{not this.isValid}}

addon/components/mox/label.hbs

@@ -1,3 +1,3 @@
-<label class="mox-label text-xs text-gray-300 uppercase {{if @isRequired "required"}}" data-test-mox-label ...attributes>
+<label class="mox-label text-xs text-gray-700 dark:text-gray-300 uppercase {{if @isRequired "required"}}" data-test-mox-label ...attributes>
  {{yield}}
 </label>

addon/tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
  safelist: [
  {
  pattern: /(mxa-btn\S*|\S*cyan\S*|\S*red\S*)/,
- variants: ['active', 'checked', 'dark', 'dark:active', 'dark:disabled', 'dark:focus', 'dark:hover', 'disabled', 'focus', 'hover'],
+ variants: ['active', 'checked', 'dark', 'dark:active', 'dark:disabled', 'dark:focus', 'dark:hover', 'dark:read-only', 'dark:read-only:focus', 'disabled', 'focus', 'hover', 'read-only', 'read-only:focus'],
  },
  ],
  theme: {

stories/mox-input-light.stories.js

@@ -0,0 +1,117 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+ title: 'Mox Light/Mox::Input',
+ parameters: {
+ backgrounds: {
+ default: 'Mute',
+ values: [
+ {
+ name: 'White',
+ value: '#ffffff',
+ },
+ {
+ name: 'Mute',
+ value: '#FBFBFB',
+ },
+ ],
+ },
+ },
+ inputAction: () => {},
+};
+
+const Template = (args) => ({
+ template: hbs`
+ <Mox::Input
+ @value={{this.value}} @onInput={{this.inputAction}}
+ @placeholder={{this.placeholder}} @label={{this.label}}
+ disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
+ readonly={{this.readOnly}}
+ @isValid={{this.isValid}} @error={{this.error}} />
+ `,
+ context: args,
+});
+
+const TemplateStackedFormFields = (args) => ({
+ template: hbs`
+ <div class="flex flex-col">
+ <Mox::Input
+ @value={{this.value}} @onInput={{this.inputAction}}
+ @placeholder={{this.placeholder}} @label={{this.label}}
+ disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
+ @isValid={{this.isValid}} @error={{this.error}} />
+ <Mox::Input
+ @value={{this.secondValue}} @onInput={{this.inputAction}}
+ @placeholder={{this.placeholder}} @label={{this.secondLabel}}
+ disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
+ @isValid={{this.isValid}} @error={{this.secondError}} />
+ </div>`,
+ context: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+ value: 'Sun',
+ placeholder: 'Name',
+ label: 'Name',
+ inputAction: () => {},
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ value: 'Rain',
+ isDisabled: true,
+ label: 'Name',
+ inputAction: () => {},
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+ value: 'my_source_collection',
+ isDisabled: false,
+ readOnly: true,
+ label: 'Source',
+ inputAction: () => {},
+};
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+ value: '',
+ placeholder: 'Your Name',
+ label: 'Name',
+ inputAction: () => {},
+};
+
+export const Required = Template.bind({});
+Required.args = {
+ value: 'Neptune',
+ placeholder: 'Your Name',
+ label: 'Name',
+ isRequired: true,
+ inputAction: () => {},
+};
+
+export const Errors = Template.bind({});
+Errors.args = {
+ value: '',
+ placeholder: 'Your Name',
+ label: 'Name',
+ isRequired: true,
+ isValid: false,
+ error: 'You forgot to specify a planet',
+ inputAction: () => {},
+};
+
+export const Stacked = TemplateStackedFormFields.bind({});
+Stacked.args = {
+ value: 'Mercury',
+ secondValue: 'Moon',
+ placeholder: 'Your Name',
+ label: 'Planet',
+ secondLabel: 'Other',
+ isRequired: true,
+ isValid: false,
+ error: 'You forgot to specify a planet',
+ secondError: 'You forgot to specify a natural satellite',
+ inputAction: () => {},
+};

stories/mox-input.stories.js

@@ -12,17 +12,20 @@ export default {
 
 const Template = (args) => ({
  template: hbs`
+ <div class="dark">
  <Mox::Input
  @value={{this.value}} @onInput={{this.inputAction}}
  @placeholder={{this.placeholder}} @label={{this.label}}
  disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
- @isValid={{this.isValid}} @error={{this.error}} />`,
+ readonly={{this.readOnly}}
+ @isValid={{this.isValid}} @error={{this.error}} />
+ </div>`,
  context: args,
 });
 
 const TemplateStackedFormFields = (args) => ({
  template: hbs`
- <div class="flex flex-col">
+ <div class="dark flex flex-col">
  <Mox::Input
  @value={{this.value}} @onInput={{this.inputAction}}
  @placeholder={{this.placeholder}} @label={{this.label}}
@@ -53,6 +56,15 @@ Disabled.args = {
  inputAction: () => {},
 };
 
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+ value: 'my_source_collection',
+ isDisabled: false,
+ readOnly: true,
+ label: 'Source',
+ inputAction: () => {},
+};
+
 export const Placeholder = Template.bind({});
 Placeholder.args = {
  value: '',

stories/mox-label-light.stories.js

@@ -0,0 +1,28 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+ title: 'Mox Light/Mox::Label',
+ parameters: {
+ backgrounds: {
+ default: 'Mute',
+ values: [
+ {
+ name: 'White',
+ value: '#ffffff',
+ },
+ {
+ name: 'Mute',
+ value: '#FBFBFB',
+ },
+ ],
+ },
+ },
+};
+
+export const DefaultLabel = () => hbs`
+ <Mox::Label>Label</Mox::Label>
+`;
+
+export const RequiredLabel = () => hbs`
+ <Mox::Label @isRequired={{true}}>This is required</Mox::Label>
+`;

stories/mox-label.stories.js

@@ -9,6 +9,12 @@ export default {
  },
 };
 
-export const DefaultLabel = () => hbs`<Mox::Label>Label</Mox::Label>`;
+export const DefaultLabel = () => hbs`
+<div class="dark">
+ <Mox::Label>Label</Mox::Label>
+</div>`;
 
-export const RequiredLabel = () => hbs`<Mox::Label @isRequired={{true}}>This is required</Mox::Label>`;
+export const RequiredLabel = () => hbs`
+<div class="dark">
+ <Mox::Label @isRequired={{true}}>This is required</Mox::Label>
+</div>`;

tests/integration/components/mox/form-error-test.js

@@ -5,32 +5,66 @@ import { hbs } from 'ember-cli-htmlbars';
 
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 
-module('Integration | Component | mox/form-error', function(hooks) {
+module('Integration | Component | mox/form-error', function (hooks) {
  setupRenderingTest(hooks);
 
- test('it is blank by default', async function(assert) {
+ test('it is blank by default', async function (assert) {
  await render(hbs`<Mox::FormError @error="" />`);
 
  assert.dom('[data-test-mox-form-error]').doesNotExist();
  assert.dom(this.element).hasNoText();
  });
 
- test('it renders an error', async function(assert) {
- await render(hbs`<Mox::FormError @error="This does not add up" />`);
+ module('light mode', function () {
+ test('it renders an error', async function (assert) {
+ await render(hbs`<Mox::FormError @error="This does not add up" />`);
 
- assert.dom('[data-test-mox-form-error]').exists();
- assert.dom('[data-test-mox-form-error]').includesText('This does not add up');
- assert.dom('[data-test-mox-form-error]').hasClass('text-red-500');
- });
+ assert.dom('[data-test-mox-form-error]').exists();
+ assert
+ .dom('[data-test-mox-form-error]')
+ .includesText('This does not add up');
+ assert.dom('[data-test-mox-form-error]').hasClass('text-red-600');
+ assert.dom('[data-test-mox-form-error]').hasStyle({
+ color: 'rgb(220, 38, 38)',
+ });
+ });
+
+ test('it is accessible', async function (assert) {
+ await render(hbs`
+ <div class="bg-white">
+ <Mox::FormError @error="This does not add up" />
+ </div>`);
 
+ await a11yAudit();
+ assert.ok(true, 'no accessibility errors');
+ });
+ });
 
- test('it is accessible', async function(assert) {
- await render(hbs`
- <div class="bg-gray-900">
+ module('dark mode', function () {
+ test('it renders an error', async function (assert) {
+ await render(hbs`
+ <div class="dark bg-gray-900 p-4">
  <Mox::FormError @error="This does not add up" />
  </div>`);
 
- await a11yAudit();
- assert.ok(true, 'no accessibility errors');
+ assert.dom('[data-test-mox-form-error]').exists();
+ assert
+ .dom('[data-test-mox-form-error]')
+ .includesText('This does not add up');
+ assert.dom('[data-test-mox-form-error]').hasClass('dark:text-red-500');
+ assert.dom('[data-test-mox-form-error]').hasStyle({
+ color: 'rgb(239, 68, 68)',
+ });
+ });
+
+ test('it is accessible', async function (assert) {
+ await render(hbs`
+ <div class="bg-gray-900 dark p-4">
+ <Mox::FormError @error="This does not add up" />
+ </div>`);
+
+ await a11yAudit();
+ assert.ok(true, 'no accessibility errors');
+ });
  });
 });