update: cart added

src/components/Cart/Indicator.tsx

@@ -0,0 +1,27 @@
+import { Typography, styled } from '@mui/material';
+
+const Indicator = styled(Typography)(({ theme }) => {
+
+  const transformPos = Math.sqrt(2) / 2;
+
+  return ({
+    position: 'absolute',
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: theme.Sizes.icon.default.height,
+    minWidth: theme.Sizes.icon.default.width,
+    padding: theme.Spaces.xxs,
+    aspectRatio: '1/1',
+    fontSize: '0.6rem',
+    alignSelf: 'flex-start',
+    top: '0',
+    right: '0',
+    transform: `translate(40%, -40%)`,
+  })
+});
+
+export default Indicator;

src/components/Cart/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Icon from '@icons/utility/CartIcon';
+import { styled } from '@mui/system';
+import IconButton from '@components/Button/IconButton';
+import Indicator from './Indicator';
+
+const CartIcon = styled(Icon)(({ theme }) => ({
+
+  ...theme.Sizes.icon.small,
+  '& path': {
+    stroke: theme.palette.primary.contrastText,
+    transition: theme.Transitions.createTransition({
+      property: 'stroke',
+      duration: 'shorter',
+      easing: 'easeInOut'
+    }),
+  },
+}));
+
+const CartIconBtn = styled(IconButton)(({ theme }) => ({
+  margin: `0 ${theme?.Spaces.xs}`,
+}));
+
+const itemsInCart = 6;
+const getItemsInCart = () => itemsInCart > 5 ? '5+' : itemsInCart;
+
+const Cart = () => {
+  return (
+    <CartIconBtn
+      aria-label="cart"
+      vocab='Cart'
+      onClick={() => window.alert('cart button was clicked')}
+    >
+      <Indicator
+        variant='h4'
+        content='span'
+      >
+        {getItemsInCart()}
+      </Indicator>
+      <CartIcon />
+    </CartIconBtn>
+  )
+};
+
+export default Cart;

src/components/Search/InputSearch/index.tsx

@@ -2,8 +2,8 @@ import { styled } from '@mui/material';
 import React from 'react'
 
 const StyledInput = styled('input')(({ theme }) => ({
-  margin: '0 1rem',
-  padding: '0.5rem 1rem',
+  padding: `${theme.Spaces.sm} ${theme.Spaces.md}`,
+  paddingRight: theme.Spaces.xxl,
   borderRadius: '2rem',
   border: 'none',
   outline: 'none',

src/components/Search/index.tsx

@@ -8,11 +8,14 @@ const SearchWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   margin: `0 ${theme.Spaces.xs}`,
   justifySelf: 'end',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'end',
 }));
 
 const SearchIcon = styled(Icon)(({ theme }) => ({
 
-  ...theme.Sizes.icon.default,
+  ...theme.Sizes.icon.small,
   '& path': {
     stroke: theme.palette.primary.contrastText,
     transition: theme.Transitions.createTransition({
@@ -23,17 +26,22 @@ const SearchIcon = styled(Icon)(({ theme }) => ({
   },
 }));
 
+const SearchIconBtn = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  marginRight: theme.Spaces.xxs,
+}));
+
 const Search = () => {
   return (
     <SearchWrapper>
       <InputSearch />
-      <IconButton
+      <SearchIconBtn
         aria-label="search"
         vocab='Search in IMS'
         onClick={() => window.alert('search button was clicked')}
       >
         <SearchIcon />
-      </IconButton>
+      </SearchIconBtn>
     </SearchWrapper>
   )
 }

src/components/navigation/NavBar/Toolbar/index.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import Hamburger from './Hamburger';
 import Join from './Join';
 import Search from '@components/Search';
+import Cart from '@components/Cart';
 
 const Toolbar = () => {
   return (
     <React.Fragment>
       <Search />
+      <Cart />
       <Join />
       <Hamburger />
     </React.Fragment>

src/components/navigation/NavBar/index.tsx

@@ -28,6 +28,10 @@ const Bar = styled(Card)<BarProps>(({ theme, open }) => ({
     }
   ]),
   height: open ? theme.Heights.header.expanded : theme.Heights.header.default,
+
+  [theme.Breakpoints.down('tall')]: {
+    height: theme.Heights.header.default,
+  },
 }));
 
 const BarContent = styled('nav')(({ theme }) => ({
@@ -36,7 +40,7 @@ const BarContent = styled('nav')(({ theme }) => ({
   maxWidth: theme.breakpoints.values.xl,
   margin: '0 auto',
   display: 'grid',
-  gridTemplateColumns: 'auto 1fr auto auto auto',
+  gridTemplateColumns: 'auto 1fr auto auto auto auto',
   alignItems: 'center',
   alignContent: 'center',
   transition: theme.Transitions.createTransition({

src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx

@@ -32,6 +32,10 @@ const Navgroup = styled('ul')<NavgroupProps>(({ theme, active, show }) => ({
       property: 'height',
       duration: 'longest'
     },
+    {
+      property: 'width',
+      duration: 'longest'
+    },
     {
       property: 'border-radius',
       duration: 'longest'
@@ -51,6 +55,7 @@ const Navgroup = styled('ul')<NavgroupProps>(({ theme, active, show }) => ({
   [theme.Breakpoints.down('navGroupTablet')]: {
     width: '100%',
     margin: `0 ${theme.Spaces.lg}`,
+    height: show ? '10.75rem' : '3rem',
 
     '&:hover': {
       '& .nav__group-card': {
@@ -59,6 +64,11 @@ const Navgroup = styled('ul')<NavgroupProps>(({ theme, active, show }) => ({
     },
   },
 
+  [theme.Breakpoints.down('navGroupPhablet')]: {
+    width: '100%',
+    margin: `0 ${theme.Spaces.md}`,
+    height: show ? '10.75rem' : '3rem',
+  },
 
 }));
 
@@ -78,6 +88,9 @@ const NavGroups = ({ index, title, videoUrl, items }: NavGroupsProps) => {
   };
 
   const handleMouseClick = (event: React.MouseEvent<HTMLUListElement>) => {
+    if (show) {
+      return setActiveMenu(null as unknown as HTMLUListElement);
+    };
     setActiveMenu(event.currentTarget);
   };
 
@@ -98,7 +111,7 @@ const NavGroups = ({ index, title, videoUrl, items }: NavGroupsProps) => {
       onClick={handleMouseClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      active={!matchesTablet || false}
+      active={!matchesTablet}
       show={show}
     >
       <GroupCard >

src/components/navigation/NavMenu/Megamenu/index.tsx

@@ -4,7 +4,12 @@ import { styled } from '@mui/material';
 import NavGropus from './NavGroups';
 import { MegamenuStateProvider } from '@helpers/MegamenuStateProvider';
 
-const MegamenuSection = styled('section')(({ theme }) => ({
+interface MegamenuSectionProps extends React.HTMLAttributes<HTMLSelectElement> {
+  children: React.ReactNode;
+  numberOfItems?: number;
+};
+
+const MegamenuSection = styled('section')<MegamenuSectionProps>(({ theme, numberOfItems }) => ({
   gridColumn: '1 / 25',
   gridRow: '3 / 19',
   zIndex: theme.Shadows.high.zIndex,
@@ -21,9 +26,6 @@ const MegamenuSection = styled('section')(({ theme }) => ({
   flexWrap: 'wrap',
   alignContent: 'flex-start',
 
-  [theme.Breakpoints.down('tall')]: {
-    alignContent: 'center',
-  },
 }));
 
 const Megamenu = () => {

src/icons/utility/CartIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { UtilityIconProps } from '@interfaces/SVGProps';
+import svgCommonProps from '@utils/svgCommonProps';
+import { styled } from '@mui/material';
+
+export const CartIcon = ({ hovered, active, ...props }: UtilityIconProps) => {
+  return (
+    <svg
+      {...svgCommonProps}
+      data-name='Cart Icon'
+      width='50'
+      height='50'
+      viewBox='0 0 50 50'
+      {...props}
+    >
+      <path d="M38.09174,16.58629,35.68542,6.94417a5.04823,5.04823,0,0,0-4.89679-3.81982H19.21137a5.04823,5.04823,0,0,0-4.89679,3.81982l-2.40632,9.64212H1.71084L8.324,43.05583a5.04823,5.04823,0,0,0,4.89678,3.81982H36.7792A5.04823,5.04823,0,0,0,41.676,43.05583l6.61318-26.46954ZM23.41921,33.31178v9.48475H19.98889L18.2026,33.31178ZM17.6177,30.1502l-1.78629-9.48475h7.5878V30.1502Zm8.96309,3.16158H31.7974l-1.78629,9.48475H26.58079Zm0-3.16158V20.66545h7.5878l-1.7863,9.48475Zm10.7968-9.48475h5.45374L40.46014,30.1502H35.5913ZM18.3027,7.76872a1.55209,1.55209,0,0,1,1.51866-1.27889h10.4484a1.55209,1.55209,0,0,1,1.51866,1.27889l1.89833,8.81757H16.31325ZM12.62241,20.66545,14.4087,30.1502H9.53986L7.16868,20.66545Zm-.26874,20.92968-2.02341-8.28335h4.74237l1.77049,9.48475H13.93446A1.58079,1.58079,0,0,1,12.35367,41.59513Zm25.19781,0a1.58079,1.58079,0,0,1-1.48594,1.2014H33.23592l1.77049-9.48475h4.74237Z" transform="translate(-1.71084 -3.12435)"/>
+    </svg>
+  )
+};
+
+export default styled(CartIcon)(({ theme }) => ({
+  '& path': {
+    strokeWidth: 0,
+    fill: theme.palette.primary.contrastText,
+  },
+}));

src/interfaces/ButtonProps.ts

@@ -1,7 +1,7 @@
 import { ButtonProps as MuiButtonProps } from "@mui/material";
 
 export interface ButtonProps extends MuiButtonProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 export interface ContainedButtonProps extends ButtonProps {
@@ -15,4 +15,7 @@ export interface OutlinedButtonProps extends ButtonProps {
 };
 
 export interface TextButtonProps extends ButtonProps {
+};
+
+export interface CartButtonProps extends IconButtonProps {
 };

src/interfaces/TypographyProps.ts

@@ -18,4 +18,7 @@ export interface CopyrightTextProps extends TypographyProps {
 };
 
 export interface ThemeNameProps extends TypographyProps {
+};
+
+export interface CartBadgeProps extends TypographyProps {
 };

src/theme/Breakpoints/index.tsx

@@ -20,20 +20,24 @@ interface Heights {
   short: number;
   medium: number;
   tall: number;
+  extraTall?: number;
 }
 
 export const heights: Heights = {
   short: 0,
   medium: 400,
-  tall: 800,
+  tall: 650,
+  extraTall: 800,
 };
 
 interface Misc {
   navGroupTablet: number;
+  navGroupPhablet: number;
 }
 
 export const misc: Misc = {
   navGroupTablet: 1190,
+  navGroupPhablet: 760,
 };
 
 export interface Breakpoints {