feat: refactor + convert pl-toggle-theme to lit-element

Author: sghoweri

packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.js

@@ -0,0 +1,84 @@
+/* eslint-disable no-unused-vars, no-param-reassign */
+import { LitElement, html, customElement } from 'lit-element';
+import { store } from '../../store.js'; // connect to the Redux store.
+import { updateThemeMode } from '../../actions/app.js'; // redux actions needed
+import './pl-toggle-theme.scss?external';
+
+@customElement('pl-toggle-theme')
+class ThemeToggle extends LitElement {
+  constructor(self) {
+    self = super(self);
+    self.targetOrigin =
+      window.location.protocol === 'file:'
+        ? '*'
+        : window.location.protocol + '//' + window.location.host;
+    return self;
+  }
+
+  static get properties() {
+    return {
+      themeMode: {
+        attribute: true,
+        type: String,
+      },
+    };
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+
+    const state = store.getState();
+    this.themeMode = state.app.themeMode || 'dark';
+
+    this.__storeUnsubscribe = store.subscribe(() =>
+      this._stateChanged(store.getState())
+    );
+    this._stateChanged(store.getState());
+
+    store.dispatch(updateThemeMode(this.themeMode));
+  }
+
+  disconnectedCallback() {
+    this.__storeUnsubscribe && this.__storeUnsubscribe();
+
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+  }
+
+  _stateChanged(state) {
+    this.themeMode = state.app.themeMode;
+    this.iframeElement = document.querySelector('.pl-js-iframe');
+
+    if (this.iframeElement) {
+      const obj = JSON.stringify({
+        event: 'patternLab.stateChange',
+        state,
+      });
+      this.iframeElement.contentWindow.postMessage(obj, this.targetOrigin);
+    }
+  }
+
+  render() {
+    const toggleThemeMode = this.themeMode !== 'dark' ? 'dark' : 'light';
+    return html`
+      <pl-button
+        class="pl-c-tools__action pl-c-toggle-theme__action"
+        title="Switch Theme"
+        @click="${_ => store.dispatch(updateThemeMode(toggleThemeMode))}"
+      >
+        Switch Theme
+
+        <pl-icon slot="after" name="theme-${this.themeMode}"></pl-icon>
+      </pl-button>
+    `;
+  }
+}
+
+export { ThemeToggle };

packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.scss

@@ -0,0 +1,16 @@
+@import '../../../sass/scss/core.scss';
+
+pl-toggle-theme {
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  width: 100%;
+  cursor: pointer;
+}
+
+.pl-c-toggle-theme,
+.pl-c-toggle-theme__action {
+  width: 100%;
+}