refactor: add new pl-toggle-info component

Author: bolt-bot

packages/uikit-workshop/src/html/partials/controls.html

@@ -61,9 +61,7 @@
 
 	<ul class="pl-c-tools__list pl-js-acc-panel">
 		<li class="pl-c-tools__item">
-			<button class="pl-c-tools__action pl-js-pattern-info-toggle">Show Pattern Info</button>
-			<!-- WIP - commenting out for now -->
-			<!-- <pl-info-toggle></pl-info-toggle> -->
+			<pl-toggle-info></pl-toggle-info>
 		</li>
 		<li class="pl-c-tools__item">
 			<pl-toggle-layout text="Switch Layout"><pl-toggle-layout>

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

@@ -0,0 +1,40 @@
+import { define, props } from 'skatejs';
+import { h } from 'preact';
+
+import { store } from '../../store.js'; // connect to the Redux store.
+import { updateDrawerState } from '../../actions/app.js'; // redux actions
+import { BaseComponent } from '../base-component.js';
+
+@define
+class InfoToggle extends BaseComponent {
+  static is = 'pl-toggle-info';
+
+  constructor(self) {
+    self = super(self);
+    return self;
+  }
+
+  static props = {
+    _drawerOpened: props.boolean,
+  };
+
+  _stateChanged(state) {
+    this._drawerOpened = state.app.drawerOpened;
+    this.isViewallPage = state.app.isViewallPage;
+  }
+
+  render({ _drawerOpened, isViewallPage }) {
+    return (
+      <button
+        class="pl-c-tools__action"
+        onClick={_ => store.dispatch(updateDrawerState(!_drawerOpened))}
+      >
+        {_drawerOpened
+          ? `Hide ${isViewallPage ? 'all ' : ''}Pattern Info`
+          : `Show ${isViewallPage ? 'all ' : ''}Pattern Info`}
+      </button>
+    );
+  }
+}
+
+export { InfoToggle };

packages/uikit-workshop/src/scripts/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%;
+}

packages/uikit-workshop/src/scripts/patternlab-viewer.js

@@ -1,16 +1,17 @@
 import { loadPolyfills } from './utils/polyfills';
 
 loadPolyfills.then(res => {
-  import(/* webpackMode: 'eager', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout').then(
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout').then(
     () => {
       // this ensures that the old-school way the styleguide JS binds to the page isn't thrown off by the <pl-layout> component rendering -- temp workaround till the logic in styleguide.js gets broken down and refactored.
       import(/* webpackMode: 'lazy', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
       import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
     }
   );
-  import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
-  import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
-  import(/* webpackMode: 'eager', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
 });
 
 import './components/panels';