-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- New component Burger Menu added into bodiless-organisms
- header uses new design API
- Added Burger Menu to the site header (visible only on mobile screens)
- Added new page /burger-menu/ with burger-menu example
- Basic Documentation for the Burger Menu
- updated package* files with new dependency - negomi/react-burger-menu
- Submenus in Burger Menu implemented as accordions
- If menu item with submenu is a link, than "Overview" link added to accordion body. "Overview" text is configurable by site-builder
- Updates for Main Menu: new HOC's: asMainMenu, asEditableMainMenu
Technical Details:
- Extended the site tailwind.config
- Burger Menu API matches Main Menu API
- new HOC - asStatic sets the component and its children to read-only mode
- fix for List, preventing unwanted properties to appear into static mode
- Standardized API for applying responsive classes between
- withEditableTitle HOC: Allow injection of asEditable to support different kinds of editors
References:
- https://www.npmjs.com/package/react-burger-menu
How To Test:
- Add to site's Main Menu next items:
- Item with link and with submenu
- Item without link and with submenu
- Item with link and without submenu
- Item without link and without submenu
- Resize the browser screen to small size
- Check that burger menu button is visible
- Open the burger menu
- Check that close button works as expected
- Check that items with submenu rendered as accordionns
- Check that item with link and with submenu has an "Overview" link in the accordion body- Loading branch information
Dmitry
committed
Jan 21, 2020
1 parent
a137a84
commit b0b22d2
Showing
31 changed files
with
908 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
examples/test-site/src/components/Menus/BurgerMenu/burger-menu.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
94 changes: 94 additions & 0 deletions
94
examples/test-site/src/components/Menus/BurgerMenu/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.