refactor: rename 'modal' component to 'drawer' -- refactor and port over as a new Preact component.

Author: bolt-bot

packages/uikit-workshop/src/html/index.html

@@ -18,7 +18,7 @@
     <!-- wrapper so the iframe + modal can switch flex directions in vertical vs horizontal layouts  -->
     <div class="pl-c-viewport-modal-wrapper">
       ${require('./partials/iframe.html') }
-      ${require('./partials/modal.html') }
+      <pl-drawer></pl-drawer>
     </div>
   </pl-layout>
 

packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss

@@ -103,7 +103,7 @@
   /**
      * Modal inside a light theme
      */
-  .pl-c-modal {
+  .pl-c-drawer {
     background-color: $pl-color-white;
     color: $pl-color-gray-70;
     border-top: 1px solid $pl-color-gray-20;
@@ -113,7 +113,7 @@
     * Modal close button
     * 1) Closes the modal popup
     */
-  .pl-c-modal__close-btn,
+  .pl-c-drawer__close-btn,
   .pl-c-tools__action {
     background-color: $pl-color-white;
 

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -175,7 +175,7 @@
       *    so it fits in remaining available space
       *    TODO: revisit to find ways to resize
       */
-    .pl-c-modal {
+    .pl-c-drawer {
       right: 0; /* 1 */
       width: auto;
     }

packages/uikit-workshop/src/scripts/actions/app.js

@@ -1,5 +1,9 @@
 export const UPDATE_THEME_MODE = 'UPDATE_THEME_MODE';
 export const UPDATE_LAYOUT_MODE = 'UPDATE_LAYOUT_MODE';
+export const UPDATE_DRAWER_ANIMATION_STATE = 'UPDATE_DRAWER_ANIMATION_STATE';
+export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE';
+export const UPDATE_DRAWER_HEIGHT = 'UPDATE_DRAWER_HEIGHT';
+export const IS_VIEWALL_PAGE = 'IS_VIEWALL_PAGE';
 
 export const updateLayoutMode = layoutMode => (dispatch, getState) => {
   if (getState().app.layoutMode !== layoutMode) {
@@ -18,3 +22,42 @@ export const updateThemeMode = themeMode => (dispatch, getState) => {
     });
   }
 };
+
+export const updateDrawerState = opened => (dispatch, getState) => {
+  if (getState().app.drawerOpened !== opened) {
+    dispatch({
+      type: UPDATE_DRAWER_STATE,
+      opened,
+    });
+  }
+};
+
+export const updateDrawerAnimationState = drawerIsAnimating => (
+  dispatch,
+  getState
+) => {
+  if (getState().app.drawerIsAnimating !== drawerIsAnimating) {
+    dispatch({
+      type: UPDATE_DRAWER_ANIMATION_STATE,
+      drawerIsAnimating,
+    });
+  }
+};
+
+export const updateDrawerHeight = height => (dispatch, getState) => {
+  if (getState().app.drawerHeight !== height) {
+    dispatch({
+      type: UPDATE_DRAWER_HEIGHT,
+      height,
+    });
+  }
+};
+
+export const isViewallPage = isViewall => (dispatch, getState) => {
+  if (getState().app.isViewallPage !== isViewall) {
+    dispatch({
+      type: IS_VIEWALL_PAGE,
+      isViewall,
+    });
+  }
+};