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

Author: sghoweri

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

@@ -0,0 +1,80 @@
+import { LitElement, html, customElement } from 'lit-element';
+import { store } from '../../store.js'; // connect to the Redux store.
+import { updateDrawerState } from '../../actions/app.js'; // redux actions
+import styles from './pl-toggle-info.scss?external';
+
+@customElement('pl-toggle-info')
+class InfoToggle extends LitElement {
+  constructor(self) {
+    self = super(self);
+    self.handleClick = self.handleClick.bind(self);
+    return self;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  static get properties() {
+    return {
+      isDrawerOpen: {
+        attribute: true,
+        type: Boolean,
+      },
+      isViewallPage: {
+        attribute: true,
+        type: Boolean,
+      },
+    };
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+
+    const state = store.getState();
+    this.isDrawerOpen = state.app.drawerOpened;
+    this.isViewallPage = state.app.isViewallPage;
+
+    this.__storeUnsubscribe = store.subscribe(() =>
+      this._stateChanged(store.getState())
+    );
+    this._stateChanged(store.getState());
+  }
+
+  disconnectedCallback() {
+    this.__storeUnsubscribe && this.__storeUnsubscribe();
+
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+  }
+
+  _stateChanged(state) {
+    this.isDrawerOpen = state.app.drawerOpened;
+    this.isViewallPage = state.app.isViewallPage;
+  }
+
+  handleClick() {
+    this.isDrawerOpen = !this.isDrawerOpen;
+    store.dispatch(updateDrawerState(this.isDrawerOpen));
+  }
+
+  render() {
+    return html`
+      <pl-button @click="${this.handleClick}">
+        <span slot="default"
+          >${this.isDrawerOpen ? 'Hide' : 'Show'}
+          ${this.isViewallPage ? 'all' : ''} Pattern Info</span
+        >
+        <pl-icon
+          name="${this.isDrawerOpen ? 'hide' : 'show'}"
+          slot="after"
+        ></pl-icon>
+      </pl-button>
+    `;
+  }
+}
+
+export { InfoToggle };

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

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