DS-42 DS-496 | Decanter and fonts update; small visual regression and bug fixes

.browserslistrc

@@ -1 +1,4 @@
-last 2 versions
+> 0.5%,
+last 2 versions,
+Firefox ESR,
+not dead

package.json

@@ -14,14 +14,11 @@
     "@fortawesome/pro-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/react": "^1.0.6",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.7",
     "adapt-auth-sdk": "^1.0.20",
     "algoliasearch": "^4.20.0",
     "body-parser": "^1.20.2",
     "cnbuilder": "^3.1.0",
     "cookie-parser": "^1.4.6",
-    "decanter": "^7.1.2",
     "fast-sort": "^3.4.0",
     "gatsby": "^4.25.7",
     "gatsby-link": "^4.25.0",
@@ -65,7 +62,6 @@
     "storyblok-react": "^0.1.2",
     "storyblok-rich-text-react-renderer-ts": "^3.2.0",
     "tabbable": "^5.3.3",
-    "tailwindcss-interaction-variants": "^5.0.0",
     "url-parse": "^1.5.10",
     "use-query-params": "^1.2.3",
     "xml2js": "^0.6.2"
@@ -110,10 +106,12 @@
     "@babel/plugin-transform-runtime": "^7.23.4",
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
+    "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.16",
     "axios-mock-adapter": "^1.22.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.0",
+    "decanter": "^7.1.2",
     "dotenv": "^16.3.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",

src/components/cards/GradientCard/GradientCard.styles.js

@@ -2,24 +2,24 @@ import { dcnb } from 'cnbuilder';
 
 export const root = ({ orientation, isDark }) =>
   dcnb(
-    'su-group su-relative su-w-full su-overflow-hidden su-bg-saa-black su-break-words su-basefont-23 su-bg-clip-padding su-border su-border-solid su-backface-hidden',
+    'su-group su-relative su-w-full su-overflow-hidden su-bg-saa-black su-break-words su-basefont-23 su-bg-clip-padding su-border su-backface-hidden',
     {
       'su-w-full md:su-flex-row xl:su-h-500': orientation === 'horizontal',
       'sm:su-max-w-[42rem] md:su-max-w-full': orientation !== 'horizontal',
       'su-border-black hover:su-border-black-90 focus-within:su-border-black-90':
         isDark || orientation === 'horizontal',
-      'su-border-black-30-opacity-40 hover:su-border-black-30 focus-within:su-border-black-30':
+      'su-border-black-30/40 hover:su-border-black-30 focus-within:su-border-black-30':
         !isDark && orientation !== 'horizontal',
     }
   );
 export const imageWrapper = ({ orientation }) =>
   dcnb('su-relative su-overflow-hidden', {
-    'su-w-full su-mb-[-4em] md:su-mb-0 md:su-w-1/2 su-h-[60vw] sm:su-h-[50vw] lg:su-h-[40vw] xl:su-h-500 su-flex-shrink-0 su-h-full':
+    'su-w-full su-mb-[-4em] md:su-mb-0 md:su-w-1/2 su-h-[60vw] sm:su-h-[50vw] lg:su-h-[40vw] xl:su-h-500 su-shrink-0 su-h-full':
       orientation === 'horizontal',
     'su-aspect-w-3 su-aspect-h-2 su-mb-[-3em]': orientation !== 'horizontal',
   });
 export const image =
-  'su-w-full su-h-full su-transition-transform su-transform-gpu group-hover:su-scale-[1.03] group-focus-within:su-scale-[1.03]';
+  'su-w-full su-h-full su-transition-transform su-transform-gpu group-hocus-within:su-scale-[1.03]';
 export const gradient = ({ orientation }) =>
   dcnb(
     'su-absolute su-block su-w-full su-h-[101%] su-top-0 su-left-0 su-from-transparent su-to-saa-black su-backface-hidden su-bg-gradient-to-b',
@@ -31,7 +31,7 @@ export const contentWrapper = ({ orientation }) =>
   dcnb('su-rs-px-2 su-rs-pb-3', {
     'su-w-full md:su-w-9/12 lg:su-w-7/12 lg:su-max-w-[72rem] md:su-self-end md:su-rs-pt-3 md:su-pl-0 md:su-ml-[-7em]':
       orientation === 'horizontal',
-    'su-flex-grow': orientation !== 'horizontal',
+    'su-grow': orientation !== 'horizontal',
   });
 export const link = ({ orientation }) =>
   dcnb(
@@ -43,8 +43,8 @@ export const link = ({ orientation }) =>
   );
 export const heading = 'su-relative su-inline su-type-0';
 export const icon =
-  'su-relative su-inline-block su-text-digital-red-xlight group-hover:su-text-white group-focus:su-text-white';
+  'su-relative su-inline-block su-text-digital-red-xlight group-hocus:su-text-white';
 export const description = ({ orientation }) =>
-  dcnb('su-relative su-text-black-20 su-flex-grow su-mb-0 su-card-paragraph', {
+  dcnb('su-relative su-text-black-20 su-grow su-mb-0 su-card-paragraph', {
     'xl:su-big-paragraph xl:su-leading-snug': orientation === 'horizontal',
   });

src/components/cards/TripCard/TripCard.styles.js

@@ -3,14 +3,13 @@ export const root =
 export const content = 'su-rs-pt-1 su-rs-px-2 su-rs-pb-3';
 export const imageWrapper = 'su-aspect-w-3 su-aspect-h-2 su-overflow-hidden';
 export const image =
-  'su-w-full su-h-full su-transition-transform su-transform-gpu group-hover:su-scale-[1.03] group-focus-within:su-scale-[1.03]';
+  'su-w-full su-h-full su-transition-transform su-transform-gpu group-hocus-within:su-scale-[1.03]';
 export const date = 'su-rs-ml-1 su-relative su-mt-[-5.1rem] su-z-1';
 export const link =
   'su-stretched-link su-group su-z-20 su-mb-08em su-type-2 su-no-underline hocus:su-underline su-underline-offset-[3px] su-decoration-[0.12em] su-decoration-digital-red-xlight focus:su-outline-none';
 export const heading =
   'su-type-0 su-mt-0 su-font-bold su-relative su-inline su-text-white';
-export const icon =
-  'su-relative su-inline-block group-hover:su-text-white group-focus:su-text-white';
+export const icon = 'su-relative su-inline-block group-hocus:su-text-white';
 export const subheading =
   'su-mt-4 su-mb-0 su-font-semibold su-text-white su-leading-display';
 export const description =

src/components/cards/basicCard.js

@@ -24,7 +24,7 @@ const BasicCard = ({
 }) => {
   // Default wrapper classes for white, non-minimal cards
   let wrapperClasses =
-    'su-bg-white su-text-black su-border su-border-solid su-border-black-30-opacity-40 su-bg-clip-padding su-shadow-sm';
+    'su-bg-white su-text-black su-border su-border-black-30/40 su-bg-clip-padding su-shadow-sm';
 
   // Card content padding for non-minimal cards
   let bodyPadding = 'su-rs-px-2 su-rs-pt-2 su-rs-pb-4';

src/components/cards/basicCardHorizontal.js

@@ -24,7 +24,7 @@ const BasicCardHorizontal = ({
 }) => {
   // Default wrapper classes for white, non-minimal cards
   let wrapperClasses =
-    'su-bg-white su-text-black su-border su-border-solid su-border-black-30-opacity-40 su-bg-clip-padding su-shadow-sm su-rs-pt-2 su-rs-px-2 su-rs-pb-3';
+    'su-bg-white su-text-black su-border su-border-black-30/40 su-bg-clip-padding su-shadow-sm su-rs-pt-2 su-rs-px-2 su-rs-pb-3';
 
   // Basic card image has aspect ratio 3x2 for non-round option
   let cardImage = (
@@ -90,7 +90,7 @@ const BasicCardHorizontal = ({
           cta={cta}
           className={dcnb(
             'card-body',
-            `${isRound && filename ? '' : 'su-mt-[-0.3em]'}`
+            `${isRound && filename ? '' : 'su--mt-03em'}`
           )}
         />
       </Grid>

src/components/cards/ctaCard.js

@@ -34,7 +34,7 @@ const CtaCard = ({
           {srText && <SrOnlyText>{` ${srText}`}</SrOnlyText>}
           <HeroIcon
             iconType={link.linktype === 'url' ? 'external' : 'arrow-right'}
-            className="su-relative su-inline-block su-text-white group-hover:su-text-white group-focus:su-text-white"
+            className="su-relative su-inline-block su-text-white group-hocus:su-text-white"
             isAnimate
           />
         </SbLink>

src/components/cards/iconCard.js

@@ -17,23 +17,21 @@ const IconCard = ({
   blok,
   isDark,
 }) => {
-  let cardStyles = 'su-bg-white su-border-black-30-opacity-40';
-  let iconColor =
-    'su-text-digital-red group-hover:!su-text-digital-red-light group-focus:!su-text-digital-red-light';
+  let cardStyles = 'su-bg-white su-border-black-30/40';
+  let iconColor = 'su-text-digital-red group-hocus:!su-text-digital-red-light';
   let headlineColor = 'su-text-black hocus:su-text-digital-red-light';
   let headlineIconStyles = 'su-relative su-inline-block';
-  let headlineIconColor =
-    'su-text-black group-hover:su-text-digital-red-light group-focus:su-text-digital-red-light';
+  let headlineIconColor = 'su-text-black group-hocus:su-text-digital-red-light';
 
   // isDark prop is passed from the parent ankle component
   // If isDark is true, then the dark themed icon card will be used automatically
   if (isDark) {
     cardStyles = 'su-bg-saa-black su-border-black-90';
     iconColor =
-      'su-text-digital-red-light group-hover:su-text-digital-red-xlight group-focus:su-text-digital-red-xlight';
+      'su-text-digital-red-light group-hocus:su-text-digital-red-xlight';
     headlineColor = 'su-text-black-10 hocus:su-text-digital-red-xlight';
     headlineIconColor =
-      'su-text-black-10 group-hover:su-text-digital-red-xlight group-focus:su-text-digital-red-xlight';
+      'su-text-black-10 group-hocus:su-text-digital-red-xlight';
   }
 
   headlineIconStyles = dcnb(headlineIconStyles, headlineIconColor);
@@ -43,7 +41,7 @@ const IconCard = ({
       <FlexBox
         direction="col"
         className={dcnb(
-          'icon-card print:su-hidden su-group su-relative su-block children:su-mx-auto su-text-center sm:su-max-w-[42rem] lg:su-max-w-[50rem] xl:su-max-w-full su-w-full su-mx-auto su-rs-px-3 md:su-rs-px-1 xl:su-rs-px-3 su-rs-py-3 xl:su-rs-py-4 su-basefont-23 su-break-words su-border su-border-solid su-shadow-sm hover:su-shadow-md',
+          'icon-card print:su-hidden su-group su-relative su-block children:su-mx-auto su-text-center sm:su-max-w-[42rem] lg:su-max-w-[50rem] xl:su-max-w-full su-w-full su-mx-auto su-rs-px-3 md:su-rs-px-1 xl:su-rs-px-3 su-rs-py-3 xl:su-rs-py-4 su-basefont-23 su-break-words su-border su-shadow-sm hover:su-shadow-md',
           cardStyles
         )}
       >

src/components/cards/membershipCard.js

@@ -62,14 +62,14 @@ const MembershipCard = ({ blok: { publicCtaGroup, ctaGroup }, blok }) => {
   return (
     <SbEditable content={blok}>
       {!auth.isAuthenticating && (
-        <div className="print:su-w-[3in] print:su-h-[2in] sm:su-w-[520px] md:su-w-full md:su-w-full su-mx-auto lg:su--mt-[70px]">
+        <div className="print:su-w-[3in] print:su-h-[2in] sm:su-w-[52rem] md:su-w-full su-mx-auto lg:su--mt-70">
           {!noCard && (
             <h2 className="su-mb-34 md:su-mb-58 su-font-serif">Your card</h2>
           )}
           <div className="lg:su-flex lg:su-px-20">
             <div
               className={dcnb(
-                'su-relative su-overflow-hidden su-rounded-[3rem] sm:su-w-[520px] su-mb-50 sm:su-mb-90 lg:su-mb-0',
+                'su-relative su-overflow-hidden su-rounded-[3rem] sm:su-w-[52rem] su-mb-50 sm:su-mb-90 lg:su-mb-0',
                 userType !== 'affiliate' ? 'su-text-white' : '',
                 bgColor
               )}
@@ -79,7 +79,7 @@ const MembershipCard = ({ blok: { publicCtaGroup, ctaGroup }, blok }) => {
               ) : (
                 <div className="su-relative su-w-full su-pt-[63%]">
                   <div className="su-absolute su-top-0 su-w-full su-h-full">
-                    <div className="su-relative su-flex su-flex-col su-h-full su-flex su-text-[38px] su-z-10 su-pl-[5%]">
+                    <div className="su-relative su-flex su-flex-col su-h-full su-text-[3.8rem] su-z-10 su-pl-[5%]">
                       <div className="su-top-0 su-left-0 su-flex su-items-center su-w-[63%] su-h-[35%]">
                         <img
                           src={logo}
@@ -88,13 +88,13 @@ const MembershipCard = ({ blok: { publicCtaGroup, ctaGroup }, blok }) => {
                         />
                       </div>
 
-                      <div className="su-font-bold su-font-serif su-text-18 sm:su-text-22 su-w-[50%] su-h-[30%] su-pr-8 su-flex su-items-center">
+                      <div className="su-font-bold su-font-serif su-text-18 sm:su-text-22 su-w-1/2 su-h-[30%] su-pr-8 su-flex su-items-center">
                         {userType === 'saa' ? 'Alumni' : 'Affiliate'} Membership
                       </div>
 
                       <div
                         className={dcnb(
-                          'su-flex su-flex-col su-pb-[2.3rem] md:su-pb-[4rem] su-text-14 sm:su-text-22 su-mt-auto'
+                          'su-flex su-flex-col su-pb-23 md:su-pb-40 su-text-14 sm:su-text-22 su-mt-auto'
                         )}
                       >
                         <span className="su-text-22 sm:su-type-2 su-font-semibold">
@@ -133,12 +133,12 @@ const MembershipCard = ({ blok: { publicCtaGroup, ctaGroup }, blok }) => {
                     You are not currently a Stanford Alumni Association (SAA)
                     Member
                   </p>
-                  <div className="[&>.cta-group]:su-gap-[10px] [&>.cta-group]:sm:su-gap-[20px]">
+                  <div className="[&>.cta-group]:su-gap-10 [&>.cta-group]:sm:su-gap-20">
                     <CreateBloks blokSection={publicCtaGroup} />
                   </div>
                 </div>
               ) : (
-                <div className="[&>.cta-group]:su-gap-[10px] [&>.cta-group]:sm:su-gap-[20px]">
+                <div className="[&>.cta-group]:su-gap-10 [&>.cta-group]:sm:su-gap-20">
                   <CreateBloks blokSection={ctaGroup} />
                 </div>
               )}

src/components/cards/promoCodeBanner.js

@@ -20,15 +20,15 @@ const PromoCodeBanner = ({ blok }) => (
         <span>
           <HeroIcon
             iconType="check"
-            className="su-text-[3rem] su-inline-block su-text-palo-verde su-mr-03em"
+            className="su-text-30 su-inline-block su-text-palo-verde su-mr-03em"
           />
           Promo code copied!
         </span>
       }
     >
       <HeroIcon
         iconType="document-duplicate"
-        className="su-text-[3rem] su-inline-block su-text-black-80 su-mr-03em group-hocus:su-text-white"
+        className="su-text-30 su-inline-block su-text-black-80 su-mr-03em group-hocus:su-text-white"
       />
       Copy promo code
     </CopyButton>

src/components/cards/saaStoryCard.js

@@ -44,9 +44,9 @@ const SaaStoryCard = ({
   }
 
   let wrapperClasses =
-    'su-border su-border-solid su-bg-clip-padding su-shadow-sm focus-within:su-shadow-md hover:su-shadow-md su-backface-hidden';
+    'su-border su-bg-clip-padding su-shadow-sm focus-within:su-shadow-md hover:su-shadow-md su-backface-hidden';
   let contentClasses = 'su-flex-1 su-bg-white su-rs-pt-2 su-rs-px-2 su-rs-pb-3';
-  let borderColor = 'su-border-black-30-opacity-40';
+  let borderColor = 'su-border-black-30/40';
   let headlineColor = 'su-text-black hocus:su-text-black';
   let headlineIconColor = 'su-text-digital-red-xlight';
   let textColor = 'su-text-black';
@@ -64,8 +64,7 @@ const SaaStoryCard = ({
     if (isDark) {
       textColor = 'su-text-black-20';
       headlineColor = 'su-text-white hocus:su-text-white';
-      headlineIconColor =
-        'su-text-digital-red-light group-hover:su-text-white group-focus:su-text-white';
+      headlineIconColor = 'su-text-digital-red-light group-hocus:su-text-white';
     }
   }
 
@@ -113,7 +112,7 @@ const SaaStoryCard = ({
                 imageFocus={cardImageFocus || imageFocus}
                 smartFocus={focus}
                 size="vertical"
-                className="su-w-full su-h-full su-object-cover su-transition-transform su-transform-gpu group-hover:su-scale-[1.03] group-focus-within:su-scale-[1.03]"
+                className="su-w-full su-h-full su-object-cover su-transition-transform su-transform-gpu group-hocus-within:su-scale-[1.03]"
                 loading="lazy"
                 width="600"
                 height="400"

src/components/composite/Alert/Alert.styles.js

@@ -14,8 +14,8 @@ export const dismissButton =
   'su-text-17 su-uppercase su-font-bold su-inline-block su-tracking-widest su-mr-0 su-ml-auto';
 export const dismissIcon = 'su-ml-02em';
 export const labelWrapper =
-  'su-order-1 su-mb-15 md:su-mb-0 su-flex su-flex-shrink-0 su-rs-mr-1 su-w-full md:su-w-max';
+  'su-order-1 su-mb-15 md:su-mb-0 su-flex su-shrink-0 su-rs-mr-1 su-w-full md:su-w-max';
 export const label = 'su-text-17 su-mb-0';
 export const iconWrapper = 'su-inline-block su-mr-5';
-export const contentWrapper = 'su-order-2 su-flex-1 su-flex-grow su-w-full';
+export const contentWrapper = 'su-order-2 su-flex-1 su-grow su-w-full';
 export const heading = 'su-rs-mb-neg1';

src/components/composite/HeroImage/HeroImage.styles.js

@@ -8,12 +8,11 @@ export const imgWrapper = ({ children }) =>
 export const img = 'su-w-full su-h-full su-object-cover';
 export const overlay = ({ overlay: overlayType }) =>
   dcnb(
-    'su-absolute su-block su-w-full su-h-full su-top-0 su-to-saa-black print:su-hidden',
+    'su-absolute su-block su-w-full su-h-full su-top-0 su-from-saa-black print:su-hidden',
     {
-      'su-bg-gradient-to-b su-from-black-true-opacity-20':
-        overlayType === 'dark',
-      'su-bg-gradient-to-b su-from-transparent': overlayType === 'normal',
-      'su-bg-gradient-to-t su-from-saa-black-opacity-30 lg:su-bg-gradient-to-l lg:su-from-saa-black-opacity-0 lg:su-to-saa-black':
+      'su-bg-gradient-to-t su-to-black-true/20': overlayType === 'dark',
+      'su-bg-gradient-to-t': overlayType === 'normal',
+      'su-bg-gradient-to-b su-to-saa-black/30 lg:su-bg-gradient-to-r lg:su-from-saa-black':
         overlayType === 'formDark',
     }
   );

src/components/composite/Pagination/Pagination.styles.js

@@ -4,7 +4,7 @@ export const root = '';
 export const listWrapper =
   'su-flex su-rs-mt-6 su-rs-mb-7 su-justify-center md:su-space-x-36';
 export const pagesList =
-  'su-list-none su-flex su-space-x-10 md:su-space-x-15 su-p-0 su-font-serif su-text-[26px] su-font-bold';
+  'su-list-none su-flex su-space-x-10 md:su-space-x-15 su-p-0 su-font-serif su-text-26 su-font-bold';
 export const pageItem = ({ page } = {}) =>
   dcnb('su-mb-0', { 'su-px-9 md:su-px-11 su-bb': page === '...' });
 export const pageLink = ({ active } = {}) =>

src/components/composite/TripFilterList/TripFilterList.styles.js

@@ -23,7 +23,7 @@ export const toggle = ({ panelOpened }) =>
 export const toggleHeading = 'su-type-0 su-mb-0';
 export const chevron = ({ panelOpened } = {}) =>
   dcnb(
-    'su-absolute su-right-0 su-w-[3.4rem] su-pt-6 su-pb-5 su-px-5 su-rounded-full su-border-2 su-border-palo-verde-dark group-hocus:su-bg-palo-verde-dark su-mr-20 sm:su-mr-30 md:su-mr-50 su-inline-block su-text-white su-transition',
+    'su-absolute su-right-0 su-w-34 su-pt-6 su-pb-5 su-px-5 su-rounded-full su-border-2 su-border-palo-verde-dark group-hocus:su-bg-palo-verde-dark su-mr-20 sm:su-mr-30 md:su-mr-50 su-inline-block su-text-white su-transition',
     {
       'su-transform-gpu su-rotate-180': panelOpened,
     }

src/components/composite/accordionItem.js

@@ -40,8 +40,8 @@ const AccordionItem = React.forwardRef(
               aria-expanded={expanded}
               onClick={toggle}
             >
-              <span className="su-h-0 group-hover:su-h-full group-focus:su-h-full su-block su-w-[6px] su-absolute su-top-0 su-left-0 su-bg-black" />
-              <span className="su-pr-20 su-w-full group-hover:su-underline group-focus:su-underline">
+              <span className="su-h-0 group-hocus:su-h-full su-block su-w-6 su-absolute su-top-0 su-left-0 su-bg-black" />
+              <span className="su-pr-20 su-w-full group-hocus:su-underline">
                 {title}
               </span>
               <span className="su-font-light su-text-[36px] su-text-digital-red su-block">