Skip to content

Commit

Permalink
feat: expandable mega menu (#1820)
Browse files Browse the repository at this point in the history
* feat: expandible mega menu

* chore: add menu slide animation

* feat: added div container for menu bottom part

* chore: implement top menu bottom part

* chore: menu opening animation

* chore: additional menu styling

* chore: implementing columns item layout

* chore: finalise top menu upper part

* chore: animation for icons completed

* chore: feedback area

* chore: ensure navigation works

* chore: start working on breakpoints

* feat: implement sliding menu

* chore: resize the menu when 3rd column is closed

* chore: drawer animation

* chore: tweak animation

* chore: fix animation timings

* chore: tablet breakpoint

* chore: fixed tablet breakpoint

* feat: implemented mobile top menu

* chore: refactor

* chore: changeset

* chore: font size and animation tweaks

* chore: replace lord icon icons

* chore: replace lord icon icons

* chore: tweak generated svgs

* chore: unlocked svg

* chore: change padding

* chore: add docs

* fix: fix bug with 1st column playing animation out of context

* chore: fix wrong icon

* feat: add custom trigger for lord icon

* chore: pr tweaks

* chore: change font size and font weight

* chore: first column size change

* chore: sub label items styling

* chore: make only direct links small

* chore: make only direct links small

* chore: move expandable items to the top of the menu column

* chore: auto sort expandable/non-expandable items

* chore: spelling

* chore: wrong icon

* chore: adjust bottom menu width

* chore: use smoke test menu structure

* chore: fix e2e failing tests

* chore: wait for js on SSR

* chore: add breadcrumbs site metadata

* chore: pr comments
  • Loading branch information
gabriele-ct authored Oct 6, 2023
1 parent 2a6133c commit 2886e98
Show file tree
Hide file tree
Showing 84 changed files with 17,843 additions and 3,366 deletions.
6 changes: 6 additions & 0 deletions .changeset/young-apes-sniff.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@commercetools-docs/gatsby-theme-docs': minor
'@commercetools-docs/ui-kit': minor
---

Top Menu redesign
2 changes: 1 addition & 1 deletion api-specs/api/examples/approval-flows.example.json
Original file line number Diff line number Diff line change
Expand Up @@ -166,4 +166,4 @@
]
}
]
}
}
2 changes: 1 addition & 1 deletion api-specs/api/examples/approval-rules.example.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,4 @@
}
}
]
}
}
45 changes: 36 additions & 9 deletions cypress/e2e/docs-smoke-test/top-menu.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ describe('Top menu', () => {
cy.findByText('Mermaid Diagrams').click({ force: true });
cy.get('div[data-testid="mermaid-diagram"]');
cy.findByLabelText('Open Top Menu').click();
cy.findByRole('top-menu').should('be.visible');
cy.findByRole('top-menu').within(() => {
cy.findByText('Documentation').should('be.visible');
cy.percySnapshot();
});
cy.get('div[data-testid="desktop-top-menu"]').should('be.visible');
cy.get('div[data-testid="desktop-top-menu"]')
.filter(':visible')
.within(() => {
cy.findByText('Documentation').filter(':visible').should('be.visible');
cy.percySnapshot();
});
cy.findByLabelText('Close Top Menu').should('exist');
});
it('should load mermaid diagram and then toggle top menu after clicking on the search input', () => {
Expand All @@ -23,11 +25,36 @@ describe('Top menu', () => {
cy.findByText('Mermaid Diagrams').click({ force: true });
cy.get('div[data-testid="mermaid-diagram"]');
cy.findByLabelText('Open Top Menu').click();
cy.findByRole('top-menu').should('be.visible');
cy.findByRole('top-menu').within(() => {
cy.findByText('Documentation').should('be.visible');
});
cy.get('div[data-testid="desktop-top-menu"]').should('be.visible');
cy.get('div[data-testid="desktop-top-menu"]')
.filter(':visible')
.within(() => {
cy.findByText('Documentation').filter(':visible').should('be.visible');
cy.percySnapshot();
});
cy.findByLabelText('Search').click();
cy.findByLabelText('Open Top Menu').should('exist');
});
it('should expand and contract level 3 when selecting a three levels menu item', () => {
cy.visit(URL_DOCS_SMOKE_TEST);
cy.findByText('Components').click();
cy.findByText('Mermaid Diagrams').click({ force: true });
cy.get('div[data-testid="mermaid-diagram"]');
cy.findByLabelText('Open Top Menu').click();
cy.get('div[data-testid="desktop-top-menu"]').should('be.visible');
cy.get('div[data-testid="desktop-top-menu"]')
.filter(':visible')
.within(() => {
cy.findByText('Product with a long title that spans multiple lines')
.filter(':visible')
.click();
cy.findByText('Getting started resources').filter(':visible').click();
cy.findByText('GETTING STARTED PAGES').should('be.visible');

cy.findByText('Product with a long title that spans multiple lines')
.filter(':visible')
.click();
cy.findByText('GETTING STARTED PAGES').should('not.be.visible');
});
});
});
1 change: 1 addition & 0 deletions packages/gatsby-theme-docs/gatsby-config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const config = (themeOptions = {}) => {
author: 'commercetools',
productionHostname,
betaLink: '.',
breadcrumbs: '',
excludeFromSearchIndex: false,
beta: false,
isSelfLearning: false,
Expand Down
15 changes: 10 additions & 5 deletions packages/gatsby-theme-docs/gatsby-node.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -182,13 +182,18 @@ export const createSchemaCustomization = ({ actions, schema }) => {
type TopMenuYaml implements Node @dontInfer {
id: ID!
menuTitle: String! @proxy(from: "menu-title")
items: [TopMenuItem!]
menuTitle: String @proxy(from: "menu-title")
icon: String!
footerTitle: String @proxy(from: "footer-title")
href: String
items: [TopMenuSubItem]
}
type TopMenuItem {
label: String!
href: String!
type TopMenuSubItem {
title: String
label: String
href: String
beta: Boolean
items: [TopMenuSubItem]
}
type TopSideMenuYaml implements Node @dontInfer {
id: ID!
Expand Down
8 changes: 1 addition & 7 deletions packages/gatsby-theme-docs/src/components/seo.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useSiteData } from '../hooks/use-site-data';
import useTopMenuItems from '../hooks/use-top-menu-items';
import getSiteContextTitleByPath from '../utils/get-site-context-title';

const SEO = (props) => {
const siteData = useSiteData();
const siteContextMap = useTopMenuItems();
const siteContextTitle = getSiteContextTitleByPath(
siteContextMap,
siteData.pathPrefix
);
const siteContextTitle = siteData?.siteMetadata?.breadcrumbs;
const excludeFromSearchIndex =
props.excludeFromSearchIndex ||
siteData.siteMetadata.excludeFromSearchIndex;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ThemeProvider = (props) => {
siteMetadata {
title
description
breadcrumbs
beta
author
productionHostname
Expand Down
Loading

0 comments on commit 2886e98

Please sign in to comment.