Theme Switcher Component

.changeset/mean-bikes-laugh.md

@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+Add Theme Switcher Component 

addon/components/mox/theme-switch.hbs

@@ -0,0 +1,25 @@
+<div class="mox-theme-switch" ...attributes>
+ <div class="flex items-center space-x-2 relative {{if this.isChecked "text-gray-800"}}">
+ <input
+ id={{this.fieldId}}
+ aria-label={{this.label}}
+ type="checkbox"
+ class="transform appearance-none outline-none
+ flex items-center rounded-full p-1 cursor-pointer transition"
+ checked={{this.isChecked}}
+ {{on 'change' (fn this.switchTheme this.otherTheme)}}
+ data-test-mox-theme-switch
+ />
+ <div class="mox-theme-switch-icon pointer-events-none {{if this.isChecked "is-checked"}}">
+ {{#if (eq this.currentTheme "dark")}}
+ <div class="text-white" data-test-mox-theme-switch-current="dark">
+ {{yield to="dark-icon"}}
+ </div>
+ {{else}}
+ <div class="text-gray-900" data-test-mox-theme-switch-current="light">
+ {{yield to="light-icon"}}
+ </div>
+ {{/if}}
+ </div>
+ </div>
+</div>

addon/components/mox/theme-switch.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { dasherize } from '@ember/string';
+import { tracked } from '@glimmer/tracking';
+
+export default class MoxThemeSwitchComponent extends Component {
+ @tracked
+ isChecked = false;
+
+ allThemes = ['dark', 'light'];
+
+ constructor() {
+ super(...arguments);
+ this.isChecked = this.args.isChecked || false;
+ }
+
+ get currentTheme() {
+ return this.isChecked ? 'dark' : 'light';
+ }
+
+ get otherTheme() {
+ return this.allThemes.filter(theme => theme !== this.currentTheme)[0];
+ }
+
+ get label() {
+ if (this.args.label) {
+ return this.args.label;
+ }
+
+ return `Use ${this.otherTheme} mode`;
+ }
+
+ get fieldId() {
+ return this.args.id ? this.args.id : dasherize(this.label);
+ }
+
+ @action
+ switchTheme(newTheme, event) {
+ this.isChecked = !this.isChecked;
+ this.args.toggleAction(newTheme, event);
+ }
+}

addon/styles/mx-ui-components.css

@@ -1,10 +1,12 @@
 .mxa-toggle input:checked,
-.mox-toggle input:checked {
+.mox-toggle input:checked,
+.mox-theme-switch input:checked {
  background-image: none;
 }
 
 .mxa-toggle input:after,
-.mox-toggle input:after {
+.mox-toggle input:after,
+.mox-theme-switch input:after {
  content: "";
  height: 20px;
  width: 20px;
@@ -38,6 +40,55 @@
  left: 2px;
 }
 
+.mox-theme-switch input {
+ height: 1.5rem;
+ width: 2.5rem;
+ outline: 2px solid #e5e7eb; /* bg-gray-200 */
+ background-color: #e5e7eb; /* bg-gray-200 */
+ outline-offset: 0;
+ border: none;
+}
+
+.mox-theme-switch input:checked {
+ background-color: #1f2937; /* bg-gray-800 */
+ outline: 2px solid #1f2937; /* bg-gray-800 */
+ color: #1f2937; /* bg-gray-800 */
+}
+
+.mox-theme-switch input:focus {
+ outline: 2px solid #06B6D4;
+ box-shadow: none;
+ outline-offset: 0;
+}
+
+.mox-theme-switch input:after {
+ height: 18px;
+ width: 18px;
+ top: 3px;
+ left: 3px;
+}
+
+.mox-theme-switch-icon {
+ position: absolute;
+ left: -4px;
+ top: 4px;
+ right: auto;
+ display: block;
+ outline: none;
+ transform: translateX(0);
+ transition: transform 0.15s;
+ transition-timing-function: ease-in-out;
+}
+
+.mox-theme-switch input:checked:after,
+.mox-theme-switch-icon.is-checked {
+ transform: translateX(15px);
+}
+
+.mox-theme-switch input:checked:after {
+ background-color: transparent;
+}
+
 .mxa-toggle input:checked:after,
 .mox-toggle input:checked:after {
  transform: translateX(20px);

app/components/mox/theme-switch.js

@@ -0,0 +1 @@
+export { default } from 'mx-ui-components/components/mox/theme-switch';

stories/mox-accordion.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Accordion',
+ title: 'Mox Dark/Mox::Accordion',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-badge.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Badge',
+ title: 'Mox Dark/Mox::Badge',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-button.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Button',
+ title: 'Mox Dark/Mox::Button',
  argTypes: {
  children: { control: 'text' },
  buttonType: { control: 'text' },

stories/mox-card.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Card',
+ title: 'Mox Dark/Mox::Card',
  argTypes: {
  title: { control: 'text' },
  subtitle: { control: 'text' },

stories/mox-code-block.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::CodeBlock',
+ title: 'Mox Dark/Mox::CodeBlock',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-confirm-modal.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
- title: 'Mox/Mox::ConfirmModal',
+ title: 'Mox Dark/Mox::ConfirmModal',
 };
 
 const actionsData = {

stories/mox-form-field.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::FormField',
+ title: 'Mox Dark/Mox::FormField',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-global-header.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::GlobalHeader',
+ title: 'Mox Dark/Mox::GlobalHeader',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-icon.stories.js

@@ -3,7 +3,7 @@ import { hbs } from 'ember-cli-htmlbars';
 let colorOptions = ['text-white', 'text-gray-300', 'text-red-500', 'text-cyan-500'];
 
 export default {
- title: 'Mox/Mox::Icon',
+ title: 'Mox Dark/Mox::Icon',
  argTypes: {
  color: {
  control: {

stories/mox-input.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Input',
+ title: 'Mox Dark/Mox::Input',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-label.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Label',
+ title: 'Mox Dark/Mox::Label',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-link.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Link',
+ title: 'Mox Dark/Mox::Link',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-list.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::List',
+ title: 'Mox Dark/Mox::List',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-modal-dialog.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
- title: 'Mox/Mox::ModalDialog',
+ title: 'Mox Dark/Mox::ModalDialog',
 };
 
 const actionsData = {

stories/mox-modal.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
- title: 'Mox/Mox::Modal',
+ title: 'Mox Dark/Mox::Modal',
 };
 
 const actionsData = {

stories/mox-navigation.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Navigation',
+ title: 'Mox Dark/Mox::Navigation',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-search-input.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::SearchInput',
+ title: 'Mox Dark/Mox::SearchInput',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-select.stories.js

@@ -24,7 +24,7 @@ const resourceTypes = [
 ];
 
 export default {
- title: 'Mox/Mox::Select',
+ title: 'Mox Dark/Mox::Select',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-tabs.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Tabs',
+ title: 'Mox Dark/Mox::Tabs',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-text-area.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::TextArea',
+ title: 'Mox Dark/Mox::TextArea',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-theme-switch.stories.js

@@ -0,0 +1,35 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+ title: 'Mox Dark/Mox::ThemeSwitch',
+ parameters: {
+ backgrounds: {
+ default: 'Dark',
+ },
+ },
+};
+
+const Template = (args) => ({
+ template: hbs`
+ <Mox::ThemeSwitch @isChecked={{this.isChecked}}>
+ <:light-icon>
+ <Mox::Icon @iconName="sun" @size="small" />
+ </:light-icon>
+ <:dark-icon>
+ <Mox::Icon @iconName="moon" @size="small" />
+ </:dark-icon>
+ </Mox::ThemeSwitch>`,
+ context: args,
+});
+
+export const DefaultTheme = Template.bind({});
+DefaultTheme.args = {
+ message: '',
+ isChecked: false,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+ message: '',
+ isChecked: true,
+};

stories/mox-toast.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Toast',
+ title: 'Mox Dark/Mox::Toast',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-toggle.stories.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
- title: 'Mox/Mox::Toggle',
+ title: 'Mox Dark/Mox::Toggle',
  parameters: {
  backgrounds: {
  default: 'Dark',

stories/mox-typeahead-select.stories.js

@@ -8,7 +8,7 @@ const options = [
 ];
 
 export default {
- title: 'Mox/Mox::TypeaheadSelect',
+ title: 'Mox Dark/Mox::TypeaheadSelect',
  argTypes: {
  options: { control: 'text' },
  buttonType: { control: 'text' },

stories/mox-upload.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@ember/object';
 
 export default {
- title: 'Mox/Mox::Upload',
+ title: 'Mox Dark/Mox::Upload',
  parameters: {
  backgrounds: {
  default: 'Dark',