feat(organisms): Burger Menu

examples/test-site/src/components/Elements.token.ts

@@ -37,6 +37,10 @@ const asYMargin = addClasses('my-2');
 const asNegXMargin = addClasses('-mx-1');
 const asNegYMargin = addClasses('-my-1');
 
+/* Responsive design */
+const asMobileOnly = addClasses('block lg:hidden');
+const asExceptMobile = addClasses('hidden lg:block');
+
 /* Primary coloring */
 const asPrimaryColorBackground = addClasses('bg-gray-200');
 const asTextColorPrimary = addClasses('text-black');
@@ -84,6 +88,7 @@ export {
   asAlignRight,
   asAlignCenter,
   asAlignJustify,
+  asExceptMobile,
   asHeader1,
   asHeader2,
   asHeader3,
@@ -96,6 +101,7 @@ export {
   asEditableLink,
   asEditable,
   asImageRounded,
+  asMobileOnly,
   asSuperScript,
   asTextColorPrimary,
   asXMargin,

examples/test-site/src/components/Layout/header.tsx

@@ -12,36 +12,52 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, ComponentType, HTMLProps } from 'react';
 import { Link } from 'gatsby';
 import { flow } from 'lodash';
 import {
-  applyDesign,
   addClasses,
   withDesign,
+  designable,
+  DesignableComponentsProps,
   DesignableProps,
   Div,
 } from '@bodiless/fclasses';
 import MainMenu from '../Menus/MainMenu';
+import BurgerMenu from '../Menus/BurgerMenu';
 import {
   asPageContainer,
   asHeader1,
   asPrimaryColorBackground,
 } from '../Elements.token';
 
-const getHeaderComponents = applyDesign({
+type HeaderComponents = {
+  Wrapper: ComponentType<any>,
+  Container: ComponentType<any>,
+  MobileContainer: ComponentType<any>,
+  SiteReturn: ComponentType<any>,
+  DesktopMenu: ComponentType<any>,
+  MobileMenu: ComponentType<any>,
+};
+export type Props = {
+  siteLogo: string,
+} & DesignableComponentsProps<HeaderComponents> & HTMLProps<HTMLElement>;
+
+const headerComponents:HeaderComponents = {
   Wrapper: Div,
   Container: Div,
   SiteReturn: Div,
-  Menu: MainMenu,
-});
-const Header: FC<DesignableProps & { siteLogo: string }> = ({ design, siteLogo }) => {
+  DesktopMenu: MainMenu,
+  MobileMenu: BurgerMenu,
+};
+const Header: FC<DesignableProps & { siteLogo: string }> = ({ siteLogo, components }) => {
   const {
     Wrapper,
     Container,
     SiteReturn,
-    Menu,
-  } = getHeaderComponents(design);
+    DesktopMenu,
+    MobileMenu,
+  } = components;
 
   return (
     <Wrapper>
@@ -53,14 +69,18 @@ const Header: FC<DesignableProps & { siteLogo: string }> = ({ design, siteLogo }
         </SiteReturn>
       </Container>
       <div className="container mx-auto">
-        <Menu nodeKey="MainMenu" nodeCollection="site" />
+        <DesktopMenu nodeKey="MainMenu" nodeCollection="site" />
+        <MobileMenu nodeKey="MainMenu" nodeCollection="site" />
       </div>
     </Wrapper>
   );
 };
-const asSiteHeader = withDesign({
-  Wrapper: flow(asPrimaryColorBackground, addClasses('')),
-  Container: flow(asPageContainer, addClasses('flex min-h-16 items-end')),
-  SiteReturn: flow(asHeader1, addClasses('flex-shrink')),
-});
+const asSiteHeader = flow(
+  designable(headerComponents),
+  withDesign({
+    Wrapper: flow(asPrimaryColorBackground, addClasses('')),
+    Container: flow(asPageContainer, addClasses('flex min-h-16 items-end')),
+    SiteReturn: flow(asHeader1, addClasses('flex-shrink')),
+  }),
+);
 export default asSiteHeader(Header);

examples/test-site/src/components/Menus/BurgerMenu/burger-menu.css

@@ -0,0 +1,52 @@
+/**
+ * Copyright © 2019 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Position and sizing of burger button */
+.bm-burger-button {
+  position: relative;
+  width: 30px;
+  height: 24px;
+  margin-left: calc(100% - 30px - 1rem);
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+/* Color/shape of burger icon bars */
+.bm-burger-bars {
+  background: white;
+}
+.bm-burger-bars-hover {
+  background: black;
+}
+
+/* Position and sizing of clickable cross button */
+.bm-cross-button {
+  height: 36px;
+  width: 36px;
+}
+
+/* Color/shape of close button cross */
+.bm-cross {
+  background: white;
+}
+
+/*
+Sidebar wrapper styles
+Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
+*/
+.bm-menu-wrap {
+  position: fixed;
+  height: 100%;
+  top: 0;
+}

examples/test-site/src/components/Menus/BurgerMenu/index.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright © 2019 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { FunctionComponent } from 'react';
+import { flow } from 'lodash';
+import {
+  A,
+  addProps,
+  withDesign,
+  addClasses,
+  Li,
+  replaceWith,
+} from '@bodiless/fclasses';
+import { withChild, asStatic } from '@bodiless/core';
+import {
+  asEditableMenu,
+  asEditableBurgerSubMenu,
+  BurgerMenuClean,
+  SingleAccordionClean,
+  withSubmenu,
+} from '@bodiless/organisms';
+import { asEditable, List } from '@bodiless/components';
+import { asMobileOnly } from '../../Elements.token';
+import './burger-menu.css';
+
+const defaultTopMenuLinksStyles = flow(
+  addClasses('text-black'),
+);
+
+const EditableLinkList = flow(
+  asEditableMenu(asEditable),
+  defaultTopMenuLinksStyles,
+)(List);
+
+const BurgerSubMenu = flow(
+  asEditableBurgerSubMenu('Overview', asEditable),
+  withDesign({
+    Wrapper: replaceWith(Li),
+    TitleWrapper: addClasses('font-bold text-black'),
+    Body: withDesign({
+      Wrapper: addClasses('pl-1'),
+    }),
+  }),
+)(SingleAccordionClean);
+
+const Body = withSubmenu(BurgerSubMenu)(EditableLinkList);
+
+const HeaderContents: FunctionComponent = () => (
+  <A href="/">
+    <img src="/images/bodiless_logo.png" className="h-16" alt="Return To Home" />
+  </A>
+);
+
+const asBurgerMenuDefaultStyles = flow(
+  withDesign({
+    Wrapper: flow(
+      asMobileOnly,
+      addClasses('bg-teal-600'),
+    ),
+    Slide: flow(
+      addClasses('bg-burger-menu'),
+      addProps({
+        noOverlay: true,
+        width: '100%',
+        right: true,
+      }),
+    ),
+    Header: flow(
+      withChild(HeaderContents),
+      addClasses('bg-teal-600 pt-3 pb-4'),
+    ),
+    Body: flow(
+      replaceWith(Body),
+      addClasses('p-3'),
+    ),
+  }),
+);
+
+const BurgerMenu = flow(
+  asStatic,
+  asBurgerMenuDefaultStyles,
+)(BurgerMenuClean);
+
+export default BurgerMenu;

examples/test-site/src/components/Menus/MainMenu.tsx

@@ -20,15 +20,17 @@ import {
   withDesign,
 } from '@bodiless/fclasses';
 import {
+  asEditable,
   List,
 } from '@bodiless/components';
 import {
   asHorizontalMenu,
   asHorizontalSubMenu,
-  asEditableMenu,
-  asEditableSubMenu,
+  asEditableMainMenu,
+  asEditableMainSubMenu,
   withSubmenu,
 } from '@bodiless/organisms';
+import { asExceptMobile } from '../Elements.token';
 
 const asWhiteColoredLink = flow(
   removeClasses('bl-text-primary hover:bl-underline'),
@@ -44,7 +46,7 @@ const withTealBackground = addClasses('bg-teal-600');
 const withLimitedHeightStyles = addClasses('overflow-y-hidden max-h-menu-row');
 const withSubmenuStyles = addClasses('-ml-2');
 const MenuSubList = flow(
-  asEditableSubMenu,
+  asEditableMainSubMenu(asEditable),
   asHorizontalSubMenu,
   withDesign({
     Title: withLinkStyles,
@@ -61,7 +63,7 @@ const MenuSubList = flow(
 )(List);
 
 const MenuList = flow(
-  asEditableMenu,
+  asEditableMainMenu(asEditable),
   asHorizontalMenu,
   withDesign({
     Title: withLinkStyles,
@@ -75,6 +77,7 @@ const MenuList = flow(
       withMenuStyles,
     ),
   }),
+  asExceptMobile,
 )(List);
 
 export default withSubmenu(MenuSubList)(MenuList);

examples/test-site/src/data/pages/burger-menu/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright © 2019 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { graphql } from 'gatsby';
+import { Page } from '@bodiless/gatsby-theme-bodiless';
+
+import Layout from '../../../components/Layout';
+import MainMenu from '../../../components/Menus/MainMenu';
+import BurgerMenu from '../../../components/Menus/BurgerMenu';
+
+export default (props: any) => (
+  <Page {...props}>
+    <Layout>
+      <h1 className="text-3xl font-bold">Burger Menu Demo</h1>
+      <div className="ml-10">
+        <p className="py-3">
+          The following is an burger menu shares the same data as MainMenu
+        </p>
+      </div>
+      <div className="ml-10">
+        <BurgerMenu nodeKey="my-menu" />
+        <MainMenu nodeKey="my-menu" />
+      </div>
+    </Layout>
+  </Page>
+);
+
+export const query = graphql`
+  query($slug: String!) {
+    ...PageQuery
+    ...SiteQuery
+  }
+`;

examples/test-site/tailwind.config.js

@@ -57,7 +57,6 @@ module.exports = {
     |
     */
 
-    // screens: {},
 
     /*
     |---------------------------------------------------------------------------
@@ -172,7 +171,10 @@ module.exports = {
     |
     */
 
-    // backgroundColor: theme => theme('colors'),
+    backgroundColor: theme => ({
+      ...theme('colors'),
+      'burger-menu': '#D7D7D7',
+    }),
 
     /*
     |---------------------------------------------------------------------------