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

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831

Closed
12 tasks
ibmdotcom-bot opened this issue Jan 6, 2021 · 1 comment
Closed
12 tasks

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831

ibmdotcom-bot opened this issue Jan 6, 2021 · 1 comment
Assignees
@annawen1
Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high sprint demo
Milestone
Sprint 21-13

Comments

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 6, 2021 •
edited by RobertaJHahn
Loading

User Story

As a [user role below]:
IBM.com Library developer

I need to:
create/change the Mega Menu animation enhancement

so that I can:
provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

Acceptance criteria

  • Include README for the web component and corresponding styles
  • Create Web Components styles in styles package
  • Do not create knobs in Storybook that include JSON objects
  • Break out Storybook stories into multiple variation stories, if applicable
  • Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
  • Minimum 80% unit test coverage
  • Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
  • If a design is provided, the Designer is included as a Reviewer in the Pull Request
  • Provide a direct link to the deploy preview for the designer in the Pull Request description
  • A comment is posted in the Design QA issue, tagging Designer, when development is finished
  • The Storybook link is added to the Design QA issue for their testing
  • A comment is posted in the Prod QA issue, tagging Praveen when development is finished
@ibmdotcom-bot ibmdotcom-bot added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Jan 6, 2021
This was referenced Jan 6, 2021
Closed
Closed
@RobertaJHahn RobertaJHahn changed the title Web Component: Develop/Change Mega Menu animation enhancement component ?stand alone template? Web Component: Change Mega Menu to include animation enhancement Jan 6, 2021
@RobertaJHahn RobertaJHahn added this to the Sprint 21-03 milestone Jan 7, 2021
@RobertaJHahn RobertaJHahn changed the title Web Component: Change Mega Menu to include animation enhancement Web Component: Change Mega Menu to include animation (back button & forward motion) Jan 29, 2021
@annawen1 annawen1 self-assigned this Feb 8, 2021
@RobertaJHahn
Copy link

Sprint 21-09 is focused on the bug takedown. Moving to June release and sprint 10

@RobertaJHahn RobertaJHahn removed the moved label Jun 7, 2021
@annawen1 annawen1 mentioned this issue Jun 9, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Jun 9, 2021
@annawen1
fix(masthead-l1): match data structure to react and reuse general `re…
dfcbce5 
…nderNavItems` function (#6331)

### Related Ticket(s)

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831

### Description

React version data structure for L1 menu items is the same as L0 menu items from translation API. This should match expected structure of L1 in web-components.

Use the same structure and remove the L1 specific left nav item function, instead use the same function used to render the L0 top nav and left nav items.

Use same custom data as React storybook example

### Changelog

**Changed**

- use custom data from React example.
- edit `MastheadL1` type in the services-store translateAPI to use `MastheadLink[]` as the data structure shouldn't differ

**Removed**

- `renderL1Items()` and ulitize `renderNavItems()` instead as the structure of the L1 data and L0 data is the same

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@annawen1 annawen1 mentioned this issue Jun 16, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Jul 1, 2021
@annawen1
feat(left-nav): refactor into left-nav-sections and include animations (
17a70e4 
#6393)

### Related Ticket(s)

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831
[Left Nav: Web Components]: L1 items are visible when on L2 menu items #6209
Web component: Masthead-With custom data - Hybrid cloud options are missing from the menu options. #5135

### Description

Refactor `left-nav` so all menu panels/sections are on the same level instead of nested. 

Align animations for forward and backward movement.

![Jun-16-2021 17-42-51](https://user-images.githubusercontent.com/54281166/122298092-5170e180-ceca-11eb-8c57-3f7d6123b514.gif)

### Changelog

**New**

- `left-nav-menu-section` component that handles all the focus of first element, back button functionality
- add L1 platform name to the left-nav

**Changed**

- set tabindex to -1 for `left-nav-menu` and `left-nav-menu-item`
- reduced logic of `left-nav-menu` to only render menu items that have a menu
- move cloud profile and cta menu items to within a menu section in `cloud-masthead-composite`
- add conditional to `focuswrap` utility when focus doesn't hit start or end sentinel which allows the first menu item to focus when left-nav is expanded

**Removed**

- styles that are no longer needed

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@annawen1 annawen1

Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high sprint demo
Projects
None yet
Milestone
Sprint 21-13
Development

No branches or pull requests
3 participants
@RobertaJHahn @ibmdotcom-bot @annawen1