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

.nvmrc

@@ -1 +1 @@
-16
+18

package.json

@@ -15,14 +15,12 @@
     "@fortawesome/react-fontawesome": "^0.1.15",
     "@heroicons/react": "^1.0.4",
     "@netlify/plugin-gatsby": "^3.0.0",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.3.4",
     "adapt-auth-sdk": "^1.0.10",
     "algoliasearch": "^4.9.3",
     "body-parser": "^1.19.1",
     "cnbuilder": "^3.1.0",
     "cookie-parser": "^1.4.6",
-    "decanter": "^7.0.0-rc.2",
     "gatsby": "^4.14.0",
     "gatsby-link": "^4.14.0",
     "gatsby-plugin-fontawesome-css": "^1.2.0",
@@ -65,7 +63,6 @@
     "storyblok-react": "^0.1.2",
     "storyblok-rich-text-react-renderer": "^2.6.1",
     "tabbable": "^5.2.0",
-    "tailwindcss-interaction-variants": "^5.0.0",
     "url-parse": "^1.5.10",
     "use-query-params": "^1.2.2",
     "xml2js": "^0.4.23"
@@ -109,10 +106,11 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.15",
     "axios-mock-adapter": "^1.21.2",
     "cross-env": "^7.0.2",
     "cypress": "^10.3.0",
+    "decanter": "^7.1.1",
     "dotenv": "^16.0.0",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -128,7 +126,7 @@
     "local-ssl-proxy": "^1.3.0",
     "netlify-cli": "^12.1.1",
     "node-vault": "^0.9.22",
-    "postcss": "^8.3.5",
+    "postcss": "^8.4.29",
     "prettier": "^2.3.0",
     "start-server-and-test": "^2.0.0",
     "storyblok": "^3.10.0",

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

@@ -14,12 +14,12 @@ export const root = ({ orientation, isDark }) =>
   );
 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/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/gsbCard.js

@@ -41,26 +41,26 @@ const GsbCard = ({ 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="su-relative su-overflow-hidden su-rounded-[3rem] sm:su-w-[520px] su-mb-50 sm:su-mb-90 lg:su-mb-0 su-bg-[#C3363A]">
+            <div className="su-relative su-overflow-hidden su-rounded-[3rem] sm:su-w-[52rem] su-mb-50 sm:su-mb-90 lg:su-mb-0 su-bg-[#C3363A]">
               {noCard ? (
                 <img src={exampleImage} alt="Example GSB Digital Member Card" />
               ) : (
                 <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-justify-between">
-                      <div className="su-top-0 su-left-0 su-flex su-items-center su-w-[85%] su-h-[50%]">
+                    <div className="su-relative su-flex su-flex-col su-h-full su-text-[3.8rem] su-z-10 su-justify-between">
+                      <div className="su-top-0 su-left-0 su-flex su-items-center su-w-[85%] su-h-1/2">
                         <img
                           src={logo}
                           alt=""
                           className="su-max-w-full su-max-h-full"
                         />
                       </div>
-                      <div className="su-flex su-flex-col su-pb-[2.3rem] md:su-pb-[4rem] su-text-14 sm:su-text-22 su-px-[1.2rem] md:su-px-[2.5rem]">
+                      <div className="su-flex su-flex-col su-pb-23 md:su-pb-40 su-text-14 sm:su-text-22 su-px-12 md:su-px-25">
                         <span className="su-text-22 sm:su-type-2 su-font-semibold">
                           {auth.userProfile?.name?.fullNameParsed?.firstName}{' '}
                           {auth.userProfile?.name?.fullNameParsed?.lastName}

src/components/cards/iconCard.js

@@ -18,22 +18,20 @@ const IconCard = ({
   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 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);

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}
@@ -94,7 +94,7 @@ const MembershipCard = ({ blok: { publicCtaGroup, ctaGroup }, blok }) => {
 
                       <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/saaStoryCard.js

@@ -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/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">

src/components/composite/hero.js

@@ -104,15 +104,15 @@ const Hero = ({
               </div>
             )}
             {!isHideScroll && (
-              <div className="su-text-center su-text-white su-flex-grow-0 su-rs-mt-5 su-font-serif su-font-regular su-text-19 md:su-text-22">
+              <div className="su-text-center su-text-white su-grow-0 su-rs-mt-5 su-font-serif su-font-regular su-text-19 md:su-text-22">
                 <p className="su-mb-02em">Scroll to explore</p>
                 <a
                   href="#page-title"
                   className="su-block su-mx-auto su-w-fit su-group"
                 >
                   <SrOnlyText>Jump to main content</SrOnlyText>
                   <ArrowDownIcon
-                    className="su-transition-colors su-text-digital-red-xlight su-w-40 su-h-40 su-p-6 su-border-2 su-border-cardinal-red su-rounded-full group-hover:su-text-white group-focus:su-text-white group-hover:su-bg-cardinal-red-dark group-focus:su-bg-cardinal-red-dark"
+                    className="su-transition-colors su-text-digital-red-xlight su-w-40 su-h-40 su-p-6 su-border-2 su-border-cardinal-red su-rounded-full group-hocus:su-text-white group-hocus:su-bg-cardinal-red-dark"
                     aria-hidden="true"
                   />
                 </a>

src/components/composite/itineraryItem.js

@@ -79,7 +79,7 @@ const ItineraryItem = ({ blok }) => {
                     alignItems="start"
                     className="su-mb-04em last:su-mb-0"
                   >
-                    <div className="print:su-hidden su-w-fit su-flex-shrink-0 su-mt-[-0.1em] su-mr-06em">
+                    <div className="print:su-hidden su-w-fit su-shrink-0 su-mt-[-0.1em] su-mr-06em">
                       <FaIcon
                         proFaIcon="bed"
                         className="!su-w-[1.15em]"
@@ -102,7 +102,7 @@ const ItineraryItem = ({ blok }) => {
                     alignItems="start"
                     className="su-mb-04em last:su-mb-0"
                   >
-                    <div className="print:su-hidden su-w-fit su-flex-shrink-0 su-mt-[-0.1em] su-mr-06em">
+                    <div className="print:su-hidden su-w-fit su-shrink-0 su-mt-[-0.1em] su-mr-06em">
                       <FaIcon
                         proFaIcon="utensils"
                         className="!su-w-[1.15em]"

src/components/composite/poster.js

@@ -60,8 +60,8 @@ const Poster = ({
   if (layout === 'left') {
     wrapperClasses = 'su-flex su-flex-col su-justify-center md:su-flex-row';
     imageWrapper =
-      'su-flex-shrink-0 su-rs-mb-2 su-mx-auto md:su-rs-mr-4 md:su-mb-0 md:su-ml-0';
-    contentWrapper = 'su-items-start md:su-flex-grow';
+      'su-shrink-0 su-rs-mb-2 su-mx-auto md:su-rs-mr-4 md:su-mb-0 md:su-ml-0';
+    contentWrapper = 'su-items-start md:su-grow';
   } else {
     wrapperClasses = 'su-flex su-flex-col su-items-center';
     contentWrapper = 'su-items-center su-text-center';

src/components/content-types/event/event.js

@@ -102,8 +102,7 @@ const Event = ({
     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';
     }
   }
 
@@ -116,7 +115,7 @@ const Event = ({
   }
 
   const iconClasses =
-    'su-inline-block su-flex-shrink-0 su-mt-2 md:su-mt-3 su-mr-06em su-w-[1em]';
+    'su-inline-block su-shrink-0 su-mt-2 md:su-mt-3 su-mr-06em su-w-[1em]';
   let locationIcon = (
     <LocationMarkerIcon className={iconClasses} aria-hidden="true" />
   );
@@ -151,7 +150,7 @@ const Event = ({
                   smartFocus={focus}
                   imageFocus={imageFocus}
                   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/content-types/story/storyPageView.js

@@ -97,7 +97,7 @@ const StoryPageView = (props) => {
         <Container
           as="main"
           id="main-content"
-          className="story-page su-relative su-flex-grow su-w-full su-basefont-23"
+          className="story-page su-relative su-grow su-w-full su-basefont-23"
           width="full"
         >
           <article>

src/components/cta/SAACtaLink.styles.js

@@ -3,17 +3,15 @@ import { dcnb } from 'cnbuilder';
 export const root = 'su-block print:su-hidden';
 export const link =
   'su-flex su-w-fit su-group su-transition-colors su-no-underline su-underline-offset-[3px] hocus:su-underline';
-export const leadingIconWrapper = 'su-w-fit su-max-w-3rem su-flex-shrink-0';
+export const leadingIconWrapper = 'su-w-fit su-max-w-3rem su-shrink-0';
 export const leadingIcon = 'su-mr-06em su-backface-hidden su-text-black-80';
 export const trailingIcon = ({ textColor }) =>
   dcnb('su-inline-block', {
-    'su-text-digital-red-light group-hover:su-text-cardinal-red group-focus:su-text-cardinal-red':
+    'su-text-digital-red-light group-hocus:su-text-cardinal-red':
       textColor === 'bright-red-hover-cardinal-red',
-    'su-text-white group-hover:su-text-white group-focus:su-text-white':
-      textColor === 'all-white',
-    'su-text-black group-hover:su-text-black group-focus:su-text-black':
-      textColor === 'all-black',
-    'su-text-digital-red-xlight group-hover:su-text-black-20 group-focus:su-text-black-20':
+    'su-text-white group-hocus:su-text-white': textColor === 'all-white',
+    'su-text-black group-hocus:su-text-black': textColor === 'all-black',
+    'su-text-digital-red-xlight group-hocus:su-text-black-20':
       textColor === 'bright-red-hover-white' ||
       textColor === 'white' ||
       textColor === 'black',