Mega menu link group styles

Author: yvonnetangsu

components/Cta/Cta.styles.ts

@@ -61,7 +61,8 @@ export const ctaTextColors = {
 // Additional CTA variants we use for this site, e.g., as subcomponents for other components. These include styles for sizes, colors, icon styles, and other properties.
 export const ctaVariants = {
   'local-footer': 'text-digital-red hocus:text-black underline leading-snug font-normal text-16 md:text-18 *:[&_svg]:hocus:text-digital-red',
-  'sub-menu': 'text-14 sm:text-16 text-white leading-[4rem] md:leading-cozy hocus:text-white md:text-cool-grey md:hocus:text-digital-red font-normal no-underline hocus:underline',
+  'sub-menu': 'text-14 sm:text-16 py-6 md:py-10 text-white leading-[4rem] md:leading-cozy hocus:text-white md:text-cool-grey md:hocus:text-digital-red font-normal no-underline hocus:underline',
+  'mega-menu-link-lvl2': 'text-black hocus:text-digital-red no-underline hocus:underline leading-display font-normal text-19 *:[&_svg]:text-digital-red',
 };
 
 // Maps to linkButtonSize prop in SbCtaLink. Only used for the button styles

components/Cta/CtaContent.tsx

@@ -7,7 +7,7 @@ import * as types from './Cta.types';
 type CtaContentProps = Omit<types.CtaCommonProps, 'buttonSize' | 'textColor'>;
 
 export const CtaContent = ({
-  icon = 'su-link--action',
+  icon,
   iconProps,
   srText,
   children,

components/Storyblok/SbMegaMenu/SbMegaMenu.styles.ts

@@ -12,7 +12,13 @@ export const navItem = 'mb-0';
 
 export const MegaMenuNavLevel1Cta = 'relative inline-block text-20 lg:text-21 lg:py-16 font-semibold leading-cozy no-underline hocus:no-underline text-black hocus:text-digital-red before:absolute before:inline-block before:h-10 before:w-full before:left-0 before:bottom-0 before:bg-digital-red before:scale-x-0 before:transition-transform hocus:before:scale-x-100 aria-expanded:before:scale-x-100';
 
-export const MegaMenuNavLinkGroupHeading = 'mb-14 pt-10 md:pt-0 border-t border-black-40 first:border-t-0 md:border-t-0 text-17';
+/**
+ * Mega menu link group
+ */
+export const linkGroup = 'mb-20 md:mb-0 empty:mb-0';
+export const linkGroupHeading = 'mb-[1.4em] pt-10 md:pt-0 border-t border-black-40 first:border-t-0 md:border-t-0 text-17';
+export const linkGroupList = 'list-unstyled';
+export const linkGroupItem = 'mb-20 last:mb-0';
 
 /**
  * Mega menu card

components/Storyblok/SbMegaMenu/SbMegaMenuLinkGroup.tsx

@@ -1,27 +1,44 @@
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
-import { CreateBloks } from '@/components/CreateBloks';
+import { CtaLink } from '@/components/Cta';
 import { FlexCell } from '@/components/Storyblok/partials/FlexCell';
-import { Heading } from '../../Typography';
+import { Heading } from '@/components/Typography';
+import { getNumBloks } from '@/utilities/getNumBloks';
+import { type SbOodMegaMenuNavItemProps } from '@/components/Storyblok/Storyblok.types';
 import * as styles from './SbMegaMenu.styles';
 
 export type SbMegaMenuLinkGroupProps = {
   blok: SbBlokData & {
     heading?: string;
-    links?: SbBlokData[];
+    links?: SbOodMegaMenuNavItemProps[];
   };
 };
 
-export const SbMegaMenuLinkGroup = (props: SbMegaMenuLinkGroupProps) => (
-  <FlexCell {...storyblokEditable(props.blok)} md={4} className="ood-mega-nav__link-group mb-20 md:mb-0 empty:mb-0">
-    {props.blok.heading && (
-      <Heading font="sans" weight="bold" uppercase tracking="widest" className={`ood-mega-nav__link-group-heading ${styles.MegaMenuNavLinkGroupHeading}`}>
-        {props.blok.heading}
-      </Heading>
-    )}
-    {!!props.blok.links?.length && (
-      <ul className="ood-mega-nav__menu-lv2 list-unstyled">
-        <CreateBloks blokSection={props.blok.links} className="!text-plum" />
-      </ul>
-    )}
-  </FlexCell>
-);
+export const SbMegaMenuLinkGroup = (props: SbMegaMenuLinkGroupProps) => {
+  const { heading, links } = props.blok;
+
+  return (
+    <FlexCell {...storyblokEditable(props.blok)} md={4} className={styles.linkGroup}>
+      {heading && (
+        <Heading font="sans" weight="bold" uppercase tracking="widest" className={styles.linkGroupHeading}>
+          {heading}
+        </Heading>
+      )}
+      {!!getNumBloks(links) && (
+        <ul className={styles.linkGroupList}>
+          {links?.map(({ _uid, link, linkText }) => (
+            <li key={_uid} className={styles.linkGroupItem}>
+              <CtaLink
+                sbLink={link}
+                variant="mega-menu-link-lvl2"
+                align="right"
+                icon={link.linktype === 'story' ? 'su-link--no-icon' : 'su-link--external'}
+              >
+                {linkText}
+              </CtaLink>
+            </li>
+          ))}
+        </ul>
+      )}
+    </FlexCell>
+  );
+};

components/Storyblok/SbMegaMenu/SbMegaMenuSection.tsx

@@ -44,7 +44,9 @@ export const SbMegaMenuSection = (props: SbMegaMenuSectionProps) => {
                   <Grid gap="default" lg={3} className="ood-mega-nav__section-links">
                     <CreateBloks blokSection={props.blok.linkGroups} />
                   </Grid>
-                  <CreateBloks blokSection={props.blok.sectionCtaLink} />
+                  <div className="rs-mt-4">
+                    <CreateBloks blokSection={props.blok.sectionCtaLink} />
+                  </div>
                 </div>
                 <div className="lg:col-span-1">
                   <CreateBloks blokSection={props.blok.card} />

components/Storyblok/SbSubMenu.tsx

@@ -4,6 +4,10 @@ import { CtaLink } from '@/components/Cta';
 import { FlexBox } from '@/components/FlexBox';
 import { type SbNavItemProps } from './Storyblok.types';
 
+/**
+ * Deprecating the topBarColor prop because we no longer have a brand bar.
+ * The digital red top border instead of a brand bar is always used.
+ */
 export type SbSubMenuProps = {
   blok: SbBlokData & {
     menuLinkItems?: SbNavItemProps[];

components/Storyblok/Storyblok.types.ts

@@ -68,3 +68,9 @@ export type SbNavItemProps = {
   link?: SbLinkType;
   linkClass?: CtaIconType;
 };
+
+export type SbOodMegaMenuNavItemProps = {
+  _uid: string;
+  linkText?: string;
+  link?: SbLinkType;
+}