chore: mega menu prep changes for glossary (#2047)

* chore: mega menu prep changes for glossary * chore: add glossary lord icon * chore: changeset * chore: apply suggested changes --------- Co-authored-by: Timon Rey Turak <[email protected]> Co-authored-by: Timon Turak <[email protected]>
commercetools · Aug 20, 2024 · 522ec0f · 522ec0f
1 parent c349fc4
commit 522ec0f
Show file tree

Hide file tree

Showing 13 changed files with 22,075 additions and 5 deletions.
diff --git a/.changeset/quick-horses-rest.md b/.changeset/quick-horses-rest.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': minor
+'@commercetools-docs/ui-kit': minor
+---
+
+Mega menu changes for Glossary implementation
diff --git a/packages/gatsby-theme-docs/src/components/top-menu-components.js b/packages/gatsby-theme-docs/src/components/top-menu-components.js
@@ -144,6 +144,39 @@ const MenuColumWrapper = styled.div`
     `}
 `;
 
+const BottomMenuColumnWrapper = styled.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 96px;
+
+  ${(props) =>
+    props.level === 3 &&
+    css`
+      opacity: 0;
+    `}
+
+  ${(props) =>
+    props.level === 3 &&
+    props.isExpanded &&
+    css`
+      animation: ${showContentAnimation} 0.25s ease-out;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    `}
+
+  ${(props) =>
+    props.level === 3 &&
+    !props.isExpanded &&
+    css`
+      animation: ${hideContentAnimation} 0.25s ease-out;
+      animation-fill-mode: backwards;
+      white-space: nowrap;
+      overflow: hidden;
+    `}
+`;
+
 export const MenuColumn = (props) => {
   const [localItems, setLocalItems] = useState([]);
   useEffect(() => {
@@ -226,17 +259,18 @@ MenuColumn.propTypes = {
 
 export const BottomItems = (props) => {
   return (
-    <MenuColumWrapper>
+    <BottomMenuColumnWrapper>
       {props.items.map((item, index) => (
         <TopMenuItem
           id={`boottom-item-${index}`}
           key={index}
           icon={item.icon}
           text={item.footerTitle}
           href={item.href}
+          isBottomItem
         />
       ))}
-    </MenuColumWrapper>
+    </BottomMenuColumnWrapper>
   );
 };
 

diff --git a/packages/gatsby-theme-docs/src/components/top-menu-item.js b/packages/gatsby-theme-docs/src/components/top-menu-item.js
@@ -10,6 +10,7 @@ const MenuItemWrapper = styled.div`
   padding: ${({ isSmall }) =>
     isSmall ? '4px 12px 4px 8px' : '8px 12px 8px 8px'};
   height: 32px;
+  min-width: ${({ isBottomItem }) => (isBottomItem ? '160px' : '0')};
 
   a {
     color: ${designSystem.colors.light.textPrimary};
@@ -144,6 +145,7 @@ export const TopMenuItem = (props) => {
       onClick={onClickHandler}
       isSelected={props.isSelected}
       isSmall={props.level > 1 && !props.isExpandable}
+      isBottomItem={props.isBottomItem}
     >
       {props.icon && (
         <MenuIconWrapper>
@@ -188,6 +190,7 @@ TopMenuItem.propTypes = {
   level: PropTypes.number,
   // eslint-disable-next-line react/no-unused-prop-types
   shouldShrink: PropTypes.bool,
+  isBottomItem: PropTypes.bool,
 };
 
 export const TopMenuLabelItem = styled.div`

diff --git a/packages/gatsby-theme-docs/src/components/top-menu.js b/packages/gatsby-theme-docs/src/components/top-menu.js
@@ -245,7 +245,7 @@ const MenuBottom = styled.div`
 `;
 
 const ItemsArea = styled.div`
-  width: ${designSystem.dimensions.widths.topMenuSingleCoumn};
+  width: ${designSystem.dimensions.widths.topMenuTwoColums};
 `;
 const FeedbackArea = styled.div`
   padding-right: 40px;
@@ -255,7 +255,7 @@ const FeedbackArea = styled.div`
   transition: opacity 0.3s ease-in-out;
 
   @media screen and (${designSystem.dimensions.viewports.laptop}) {
-    display: flex;
+    display: ${(props) => (props.isVisible ? 'flex' : 'none')};
   }
 `;
 

diff --git a/packages/gatsby-theme-docs/src/data/top-menu.yaml b/packages/gatsby-theme-docs/src/data/top-menu.yaml
@@ -34,8 +34,14 @@
             - title: Getting started item 2
               href: /
 
+- footer-title: Support
+  icon: headset
+  href: /
+- footer-title: System status
+  icon: heartbeat
+  href: /
 - footer-title: Free trial
-  icon: free
+  icon: padlock
   href: /
 - footer-title: Log in to Merchant Center
   icon: login

diff --git a/packages/ui-kit/src/icons/generated/LordIconMmGlossary.tsx b/packages/ui-kit/src/icons/generated/LordIconMmGlossary.tsx
diff --git a/packages/ui-kit/src/icons/generated/LordIconMmPadlock.tsx b/packages/ui-kit/src/icons/generated/LordIconMmPadlock.tsx
diff --git a/packages/ui-kit/src/icons/generated/index.ts b/packages/ui-kit/src/icons/generated/index.ts