Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(organisms): Burger Menu #20

Merged
merged 5 commits into from Jan 24, 2020
Merged

feat(organisms): Burger Menu #20

merged 5 commits into from Jan 24, 2020

Conversation

gudwin
Copy link
Contributor

@gudwin gudwin commented Jan 10, 2020

Changes

  • 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

Test Instructions

  1. 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
  1. Resize the browser screen to small size
  2. Check that burger menu button is visible
  3. Open the burger menu
  4. Check that close button works as expected
  5. Check that items with submenu rendered as accordionns
  6. Check that item with link and with submenu has an "Overview" link in the accordion body

References:

Related Issues

@gudwin gudwin marked this pull request as ready for review January 10, 2020 10:55
wodenx
wodenx suggested changes Jan 13, 2020
View reviewed changes
examples/test-site/src/components/Menus/BurgerMenu/index.tsx Show resolved Hide resolved
examples/test-site/src/components/Layout/header.tsx Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/BurgerMenu/asEditableBurgerSubMenu.tsx Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/asEditableMainMenu.tsx Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/asEditableMenu.tsx Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/asEditableSubMenu.tsx Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/asSubMenu.tsx Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/asSubMenu.tsx Outdated Show resolved Hide resolved
packages/bodiless-organisms/src/components/MainMenu/withEditableTitle.tsx Outdated Show resolved Hide resolved
@e2thex e2thex added the enhancement New feature or request label Jan 14, 2020
wodenx
wodenx suggested changes Jan 18, 2020
View reviewed changes
packages/bodiless-organisms/src/components/MainMenu/asMainSubMenu.tsx Outdated
asMainMenu,
withDesign({
Wrapper: replaceWith<any>(stylable(SubMenu)),
// @ts-ignore: Types of parameters are incompatible.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not sufficient documentation. Please explain why it's not practical to resolve this type error.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated with an attempt to resolve a type error

@konst8
Copy link
Collaborator

konst8 commented Jan 20, 2020

Works as described in test instructions. Passed at a7892a4.

@konst8 konst8 self-requested a review January 20, 2020 11:48
konst8
konst8 previously approved these changes Jan 20, 2020
View reviewed changes
Dmitry added 2 commits January 21, 2020 12:43
Merge remote-tracking branch 'upstream/master'
a137a84
Changes:
b0b22d2 
        - 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
@konst8 konst8 self-requested a review January 21, 2020 14:37
konst8
konst8 previously approved these changes Jan 21, 2020
View reviewed changes
wodenx
wodenx previously approved these changes Jan 21, 2020
View reviewed changes
@asiarheyeu
Copy link
Collaborator

According to requirements the breakpoints width of the screen when the main menu should turn into burger menu should be 1024px. Currently it toggles at 768px.

STR
Open the site at 1023 screen width.

ER
Burger menu is shown

AR
Main menu is shown

- burger menu visible on screens with width less than 1024,
bd2e73f 
- main visible visible on screens with width 1024px or more
@gudwin gudwin dismissed stale reviews from wodenx and konst8 via bd2e73f January 23, 2020 13:57
@konst8 konst8 self-requested a review January 24, 2020 16:52
@konst8 konst8 merged commit 05f5833 into johnsonandjohnson:master Jan 24, 2020
@asiarheyeu asiarheyeu mentioned this pull request Jan 27, 2020
Closed
beliayeu pushed a commit to beliayeu/Bodiless-JS that referenced this pull request Aug 24, 2020
@hvanyo
Merge pull request johnsonandjohnson#20 from johnsonandjohnson/master
63e7bfc 
Refresh my fork
Guilherme-Almeida-Zeni referenced this pull request in Guilherme-Almeida-Zeni/Bodiless-JS Feb 9, 2022
@wodenx
Merge pull request #20 from wodenx/chore/remove-migration-tool
f8fbed5 
Remove migration tool.
misterjones pushed a commit to misterjones/Bodiless-JS that referenced this pull request Apr 7, 2022
@wodenx @Guilherme-Almeida-Zeni
Feature/cx navigation toggler (johnsonandjohnson#20)
d0db1cd 
* Replace WTB with styled link

* Fix lint

* Remove burger menu toggler component.

Co-authored-by: Guilherme Almeida Zeni <gzeni@ciandt.com>
Guilherme-Almeida-Zeni added a commit that referenced this pull request Apr 12, 2022
@Guilherme-Almeida-Zeni @wodenx
@hvanyo @guilhermegpessoa
feat(cx-navigation): Add Cx Navigation #12 (#1495)
c191dac 
* feature(bc-footer): Add Brand.com Footer

* feature(bc-footer): Final Styles Adjustments

* feature(bc-footer): Copyright as RTE, Add TODO On Social Links AND Removed Unnecessary FlowHoc

* feature(bc-footer): Move Sepator Styles To Its Own Token

* feature(bc-footer): Rename GlobalFooter To Footer

* feature(bc-footer): Address PR Feedback - Batch 1

* Reorganize menu. (#7)

* Reorganize menu.

* Remove redundant footer menu styling.

* Add submenu titles.

* Remove duplication in MenuTitleClean

* Fix lint

* Add canvasx token docs.

* feature(bc-footer): Fix doc typo

Co-authored-by: hvanyo <58534559+hvanyo@users.noreply.github.com>

* feature(bc-footer): Fix doc typo

Co-authored-by: hvanyo <58534559+hvanyo@users.noreply.github.com>

Co-authored-by: Guilherme Almeida Zeni <gzeni@ciandt.com>
Co-authored-by: hvanyo <58534559+hvanyo@users.noreply.github.com>

* feature(bc-footer): Update Footer Menu Data

* feature(bc-footer): Update Package.Lock

* feature(bc-footer): Remove Console Log From Menu Separator

* feature(bc-footer): Improve Footer Structure For Later Static Implementation

* feature(bc-footer): Add Todo Comments

* feature(bc-footer): Rename SiteHeader And SiteFooter To Header And Footer

* feature(bc-footer): Add Cx Navigation To TSConfig

* feature(bc-footer): Rename Remaining SiteHeader And SiteFooter To Header And Footer

* feature(bc-footer): Adjust Layout After Updates

* Token site constrains (#8)

* feature(bc-footer): Add Footer Slots Wrappers

* feature(bc-footer): Refactor Footer Copyright RichText

* feature(bc-footer): Update Footer And Copyright Keys

* feature(bc-footer): Add Footer Page Example

* feature(bc-footer): Feedback Fixes - Batch 2

* feature(bc-footer): Update Cx Navigation Package Version

* fix(bc-footer): Fix Footer Issues (#10)

* bugfix(bc-footer): Fix Footer Issues

* Remove top margin from in footnote

* Add uppercase to submenu items

* Removing unused imports

* bugfix(bc-footer): Fix comments on PR

* bugfix(bc-footer): Fix link issues

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>
Co-authored-by: guilhermegpessoa <guilherme.gpessoa@hotmail.com>

* feature(bc-footer): Fix issues after main branch update

* feature(cx-navigation): Add CX Navigation

* feature(cx-navigation): Add WTB Button Placeholder

* feature(navigation): Update Content For Better Styling

* feature(bc-navigation): Style Burger Menu For Mobile And Tablet

* feature(bc-navigation): Fix Where To Buy Components Name

* feature(bc-navigation): Fix Issues Due To Conflict Resolution

* feature(bc-navigation): Reupdate Header After Conflicts Resolution

* feature(bc-navigation): Add Navigation Desktop Style

* fix(bc-footer): Fix footer issues (#13)

* fix(bc-footer): Fix padding issues

* fix(bc-footer) Fix padding values

* fix(bc-footer): Fix padding issues

* feature(navigation): Remove Unused Module Import

* feature(bc-navigation): Add NoWrap To Menus

* feature(bc-navigation): Address Feedback

* feature(bc-footer): Update Footer Content

* bugfix(bc-footer): Fix Footer Menu Issues Issues (#16)

* bugfix(bc-footer): Fix Footer Menu Accessibility Issues

* bugfix(bc-footer): Add External And Download Icons To Menu Title Links

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>

* Feature/bc navigation (#19)

* Replace WTB with styled link

* Fix lint

* Feature/cx navigation toggler (#20)

* Replace WTB with styled link

* Fix lint

* Remove burger menu toggler component.

Co-authored-by: Guilherme Almeida Zeni <gzeni@ciandt.com>

* feature(bc-navigation): Last Updates

* feature(bc-navigation): Remove Old Index File

* feature(bc-navigation): Update Header Constrains To Be In Container Component

* feature(bc-navigation): Fix Header BG After Main Updates

* docs(bc-navigation): BC Navigation Docs

* bugfix(bc-navigation): Fix Navigation Issues (#21)

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>

* feature(bc-navigation): Fix Submenu Paddings

* bugfix(bc-navigation): Fix Safari Burger Menu Issue And Add ID To Header (#22)

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>

* feature(bc-navigation): Fix Safari Issues (#24)

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>

* feature(cx-navigation): Update Tailwind Configs After Merge Conflicts Resolution

* feature(bc-navigation): Fix Top Nav Menu Style

Co-authored-by: Guilherme Zeni <gzeni@its.jnj.com>
Co-authored-by: wodenx <wodenx@gmail.com>
Co-authored-by: hvanyo <58534559+hvanyo@users.noreply.github.com>
Co-authored-by: guilhermegpessoa <guilherme.gpessoa@hotmail.com>
Co-authored-by: guilhermegpessoa <48322825+guilhermegpessoa@users.noreply.github.com>
hvanyo pushed a commit that referenced this pull request Apr 27, 2022
@lucas-varela
Merge pull request #20 from dewen/feature/canvasx-hero-and-card
edd1e11 
feat(vital-card): Merge in Vital Card
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wodenx wodenx wodenx approved these changes

@konst8 konst8 konst8 approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@gudwin @konst8 @asiarheyeu @wodenx @e2thex