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

yvonnetangsu · 2023-09-13T17:38:35Z

READY FOR REVIEW

Summary

Visual regression fixes, some caused by Decanter update in this PR
DS-456: upgrade node version and npm packages #759
Update fonts to use Source Sans 3 and Source Serif 4

Review By (Date)

When does this need to be reviewed by?

Review Tasks

Setup tasks and/or behavior to test

Go to the preview, both homesite and T/S. Check everything on desktop and mobile
Please pay attention to all the things in the masthead in particular (search, menu, user menu). For both SAA and T/S sites.
See all the things I called out below
Look at code
@rebeccahongsf Please help me review all things that you've added - eg, membership, TS forms and anything that I missed. Thanks! 😄

Associated Issues and/or People

DS-42

… packages; update decanter

… update autoprefixer and postcss; remove application-name and outdated items in HTML head

…variants in tailwindconfig

…ustom variants)

* dev: 4.0.9 ADAPT-5582 | My Giving Link For Alumni (#677)

.browserslistrc

.nvmrc

sherakama · 2023-10-24T16:56:51Z

@yvonnetangsu should this be delegated to @rebeccahongsf?

yvonnetangsu · 2023-10-24T17:09:04Z

@yvonnetangsu should this be delegated to @rebeccahongsf?

There are a few things that are a bit obscured and requires some testing on my end. I'll try to get this done soon. I'll likely ask @rebeccahongsf to look at the membership and form stuff to make sure there's no visual regression though - thanks in advance! 😄

@shc314

* dev: (28 commits) NoJira | @shc314 | Adds two Hero components in red and blue color gradients (#757) 4.3.4 Replace storyblok-rich-text-react-renderer with storyblok-rich-text-react-renderer-ts (#780) 4.3.3 Revert "DS-162: Remove Blanket 404 Redirect. (#768)" 4.3.2 ADVPS-12724: Restore Register Redirect (#770) 4.3.1 DS-162: Remove Blanket 404 Redirect. (#768) DS-456: upgrade node version and npm packages (#759) 4.3.0 DS-160 | @rebeccahongsf | build gsb membership card (#752) DS-312 | @rebeccahongsf | update to cypress 13 and add tests (#728) 4.2.4 DS-13 | @rebeccahongsf | remove mega tag containing application name (#751) 4.2.3 DS-413: Associates Designees redirect (#741) 4.2.2 DS-392 | @rebeccahongsf | limit text input to 10 char (#733) 4.2.1 ... # Conflicts: # .nvmrc # package-lock.json # package.json # src/components/cards/gsbCard.js # src/components/partials/htmlHead.js # src/styles/forms.css

…s with opacity

…merge conflicts

…ositioning

.browserslistrc

yvonnetangsu · 2024-01-05T20:03:00Z

package.json

+    "@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",


Reinstall these as dev dependencies instead of dependencies

yvonnetangsu · 2024-01-05T20:03:40Z

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',


There is no longer a need to use su-border-solid in newer versions of TW. It's solid by default so only the su-border class is needed.

yvonnetangsu · 2024-01-05T20:04:33Z

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

        !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-flex-shrink-0, su-flex-grow-0, su-flex-shrink, su-flex-grow have been updated in TW to remove the flex

yvonnetangsu · 2024-01-05T20:06:11Z

src/components/identity/GlobalFooter/GlobalFooter.jsx

@@ -99,7 +99,7 @@ export const GlobalFooter = () => (
            </li>
            <li className={styles.secondaryMenuListItem}>
              <a
-                href="https://bulletin.stanford.edu/pages/c7vDgeOuJIfpZe8GKmW3"


Updated the non-discrimination link the global footer to use vanity url

yvonnetangsu · 2024-01-05T20:07:34Z

src/components/identity/GlobalHeader/GlobalHeader.jsx

+          <FlexBox
+            className={styles.bodyMobile}
+            alignItems="center"
+            justifyContent="between"
+          >


This fixes this issue in the TS masthead

yvonnetangsu · 2024-01-05T20:09:05Z

src/components/identity/StanfordLogo/StanfordLogo.jsx

      <a
        className={dcnb('su-logo', styles.logoColor({ color }), className)}
        href="https://www.stanford.edu"
+        aria-hidden
+        tabIndex={-1}
      >


This behavior was recommended for SODA for drupal core, so we do the same thing here. We have the logo and Stanford Home that links to the same page in the global footer and are next to each other, this prevents keyboard user from tabbing to the same link one after another (skip tabbing to logo link for keyboard users)

yvonnetangsu · 2024-01-05T20:09:48Z

src/components/identity/masthead.js

+          <FlexBox
+            className="su-cc"
+            alignItems="center"
+            justifyContent="between"
+          >
            <FlexBox alignItems="center" className="su-rs-py-1">
-              <Logo className="su-w-[15rem]" />
+              <Logo className="su-w-150" />


Fixes this masthead mobile for Homesite as well

yvonnetangsu · 2024-01-05T20:12:51Z

src/components/layout/Modal/Modal.styles.js

+    'su-group su-bg-transparent su-font-semibold hocus:su-underline su-text-m1 su-flex su-items-end su-absolute su-top-22 su-z-10',
    {
-      'hover:su-bg-digital-red-xlight hocus:su-rounded-full':
+      'su-text-white hocus:su-text-white hocus:su-bg-digital-red-xlight hocus:su-rounded-full':


Fixes issue with disappearing mega menu close Xbutton on live (icon color is set to white unless it's focused, eg, when you first open the modal)

Also fixed this issue with missing padding on the 2nd level. This is due to the Decanter change when we have nested .cc classes, the padding in the inner one goes to 0. This is a special case because even though the nested cc classes is used in a modal.

yvonnetangsu · 2024-01-05T20:14:56Z

src/components/layout/Modal/Modal.styles.js

+      'su-text-white hocus:su-text-digital-red-xlight':
+        type !== 'mega-menu' && type !== 'timeout',
+      'su-right-0': type === 'trip-filter',
+      'su-right-20': type !== 'trip-filter',


Trip filter padding fix

yvonnetangsu · 2024-01-05T20:17:02Z

src/components/page-types/TripPage/TripPageSectionNav.styles.js

 export const menuMobile = ({ navOpened }) =>
  dcnb(
-    'su-flex su-flex-col su-absolute su-z-20 su-bg-saa-black su-shadow-xl su-bg-white su-w-full',


Remove the su-bg-white class here which causes this issue. Even though this class has always been here, before the Decanter upgrade, we don't see it because the su-bg-saa-black class was rendered after the su-bg-white in the compiled CSS file.

yvonnetangsu · 2024-01-05T20:17:36Z

src/components/page-types/associatesDirectoryPage/Directory/Associate.jsx

@@ -17,11 +17,11 @@ const Associate = ({ isEnabled = true, person }) => {

  return (
    <li className="su-flex even:su-bg-black-10">
-      <div className="su-flex-1 su-w-[50%] su-py-10 su-pl-30">
+      <div className="su-flex-1 su-w-1/2 su-py-10 su-pl-30">


Going with TW defaults by using the 1/2 instead of [50%]

yvonnetangsu · 2024-01-05T20:23:46Z

src/components/simple/FilterCheckbox/FilterCheckbox.styles.js

@@ -4,18 +4,18 @@ export const root = ({ checked }) =>
  dcnb(
    'su-group su-pt-3 su-py-4 su-pl-20 sm:su-pl-30 md:su-pl-50 lg:su-p-3 hover:su-bg-palo-verde-dark focus-within:su-bg-palo-verde-dark lg:su-bg-saa-black-dark su-mt-6 lg:focus-within:su-bg-gradient-to-bl lg:hover:su-bg-gradient-to-bl lg:focus-within:su-from-saa-electric-blue lg:hover:su-from-saa-electric-blue lg:focus-within:su-to-palo-verde-dark lg:hover:su-to-palo-verde-dark su-cursor-pointer',
    {
-      'lg:su-bg-gradient-to-bl lg:su-from-saa-electric-blue su-to-palo-verde-dark':
+      'lg:su-bg-gradient-to-bl lg:su-from-saa-electric-blue lg:su-to-palo-verde-dark':


the lg: prefix is here which fixes this issue

before:

after

yvonnetangsu · 2024-01-05T20:30:40Z

READY FOR REVIEW

Summary

Visual regression fixes, some caused by Decanter update in this PR
DS-456: upgrade node version and npm packages #759

Update fonts to use Source Sans 3 and Source Serif 4

Review By (Date)

When does this need to be reviewed by?

Review Tasks

Setup tasks and/or behavior to test

Go to the preview, both homesite and T/S. Check everything on desktop and mobile

Please pay attention to all the things in the masthead in particular (search, menu, user menu). For both SAA and T/S sites.

See all the things I called out below

Look at code

@rebeccahongsf Please help me review all things that you've added - eg, membership, TS forms and anything that I missed. Thanks! 😄 If they're not on netlify preview, please pull down locally

Associated Issues and/or People

DS-42

sherakama

Code changes look good.
I did a quick bit of 'linky clicky' and things still look good to me.

sherakama · 2024-01-05T21:14:49Z

Thanks for all the inline comments as well.

I've updated the tests to run again. Looks like they just failed. Let me look at why.

sherakama · 2024-01-05T21:29:03Z

@yvonnetangsu on our next 1:1, lets chat about how #759 introduced the visual regression issues and what we should do differently next time. I'd like this to be at a point where we don't have to go through you to review everything but I also don't want to have to set up extensive visual regression checks.

Lets talk.

yvonnetangsu · 2024-01-05T22:53:24Z

@yvonnetangsu on our next 1:1, lets chat about how #759 introduced the visual regression issues and what we should do differently next time. I'd like this to be at a point where we don't have to go through you to review everything but I also don't want to have to set up extensive visual regression checks.

Lets talk.

Thank you for the review @sherakama! Yeah I agree, if we could get an automated test for visual regression in like diffy that'd be awesome. Let's chat! 😄

Should I merge this or wait till Rebecca has a chance to review the forms and membership stuff?

sherakama · 2024-01-05T23:02:19Z

@yvonnetangsu on our next 1:1, lets chat about how #759 introduced the visual regression issues and what we should do differently next time. I'd like this to be at a point where we don't have to go through you to review everything but I also don't want to have to set up extensive visual regression checks.
Lets talk.

Thank you for the review @sherakama! Yeah I agree, if we could get an automated test for visual regression in like diffy that'd be awesome. Let's chat! 😄

Should I merge this or wait till Rebecca has a chance to review the forms and membership stuff?

Give Rebecca a chance to chime in first as she sees stuff that I won't.

rebeccahongsf

I checked the T/S and Membership and submitted some forms 😄 Everything looks as expected! We should be good to go! 🚀 Thank you @yvonnetangsu

yvonnetangsu · 2024-01-05T23:19:40Z

Thank you @rebeccahongsf and @sherakama ! I'm going to merge to dev, then create a release. Deploying on Friday? Oh yeah.... 🤣

sherakama · 2024-01-05T23:23:24Z

Deploying on Friday? Oh yeah.... 🤣

Our systems are stable. Go for it!

yvonnetangsu added 10 commits September 7, 2023 17:32

use node v18; update browserslistrc to match MyAccount etc; reinstall…

803aacc

… packages; update decanter

Replace su-flex-grow with su-grow, su-flex-shrink-0 with su-shrink-0

50a2d06

Update google font import; unintall tailwindcss-interaction-variants;…

e74a185

… update autoprefixer and postcss; remove application-name and outdated items in HTML head

Fix one T/S visual bug that's been bothering me

dacbfe9

Global Footer update; T/S mobile menu background color fixup; remove …

62bbab0

…variants in tailwindconfig

Replace group-hover group-focus with group-hocus (plus other of our c…

3f007af

…ustom variants)

User menu link bump up to 19px (a11y)

575f852

continue

18434df

Merge branch 'dev' into feature/DS-42_update-decanter-fonts

aaae45e

* dev: 4.0.9 ADAPT-5582 | My Giving Link For Alumni (#677)

linter

073d7db

yvonnetangsu changed the title ~~WIP - DS-42 | Decanter and fonts update; small visual bug fixes~~ WIP - DS-42 | Decanter and fonts update; small visual bug fixes; use node 18 Sep 13, 2023

yvonnetangsu marked this pull request as draft September 13, 2023 17:59

sherakama reviewed Sep 13, 2023

View reviewed changes

.browserslistrc Show resolved Hide resolved

sherakama reviewed Sep 13, 2023

View reviewed changes

.nvmrc Outdated Show resolved Hide resolved

yvonnetangsu added 2 commits January 4, 2024 13:47

Remove TW plugins

e6fc60f

yvonnetangsu changed the title ~~WIP - DS-42 | Decanter and fonts update; small visual bug fixes; use node 18~~ WIP - DS-42 | Decanter and fonts update; small visual bug fixes Jan 4, 2024

yvonnetangsu added 10 commits January 4, 2024 14:27

Fix hero gradients

048f9a3

Use TW default notation for opacity and remove old custom color theme…

0e8430d

…s with opacity

Remove all border-solid and border-1 classes

0d6c727

Remove gsbCard component which probably sneaked in when dealing with …

34fb313

…merge conflicts

Getting rid of square brackets when not needed; use rem instead of px

7cb4e88

Fix masthead and global header (TS version of masthead) mobile icon p…

94cd9b2

…ositioning

avatars fixup

f4442fa

decanter and Tw plugin can be dev dependencies

ee10a55

Fix mega menu 2nd level menu padding

0a4fc47

Modal close button fixups

0228f8b

sherakama reviewed Jan 5, 2024

View reviewed changes

.browserslistrc Show resolved Hide resolved

yvonnetangsu commented Jan 5, 2024

View reviewed changes

yvonnetangsu marked this pull request as ready for review January 5, 2024 20:24

yvonnetangsu requested review from sherakama and rebeccahongsf January 5, 2024 20:28

sherakama approved these changes Jan 5, 2024

View reviewed changes

Update .browserslistrc

6f97cbf

rebeccahongsf approved these changes Jan 5, 2024

View reviewed changes

yvonnetangsu merged commit e18be5d into dev Jan 5, 2024
6 checks passed

yvonnetangsu deleted the feature/DS-42_update-decanter-fonts branch January 5, 2024 23:20

yvonnetangsu changed the title ~~DS-42 | Decanter and fonts update; small visual regression and bug fixes~~ DS-42 DS-496 | Decanter and fonts update; small visual regression and bug fixes Jan 5, 2024

yvonnetangsu mentioned this pull request Jan 5, 2024

Release/v4.3.5 #786

Merged

sherakama mentioned this pull request Jan 25, 2024

Adds gradients for breakpoints larger than xs #795

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yvonnetangsu commented Sep 13, 2023 •

edited

Loading

sherakama commented Oct 24, 2023

yvonnetangsu commented Oct 24, 2023

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu Jan 5, 2024

yvonnetangsu commented Jan 5, 2024

READY FOR REVIEW

Summary

Review By (Date)

Review Tasks

Setup tasks and/or behavior to test

Associated Issues and/or People

sherakama left a comment

sherakama commented Jan 5, 2024

sherakama commented Jan 5, 2024

yvonnetangsu commented Jan 5, 2024

sherakama commented Jan 5, 2024

rebeccahongsf left a comment •

edited

Loading

yvonnetangsu commented Jan 5, 2024

sherakama commented Jan 5, 2024

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

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

Conversation

yvonnetangsu commented Sep 13, 2023 • edited Loading

READY FOR REVIEW

Summary

Review By (Date)

Review Tasks

Setup tasks and/or behavior to test

Associated Issues and/or People

sherakama commented Oct 24, 2023

yvonnetangsu commented Oct 24, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yvonnetangsu commented Jan 5, 2024

READY FOR REVIEW

Summary

Review By (Date)

Review Tasks

Setup tasks and/or behavior to test

Associated Issues and/or People

sherakama left a comment

Choose a reason for hiding this comment

sherakama commented Jan 5, 2024

sherakama commented Jan 5, 2024

yvonnetangsu commented Jan 5, 2024

sherakama commented Jan 5, 2024

rebeccahongsf left a comment • edited Loading

Choose a reason for hiding this comment

yvonnetangsu commented Jan 5, 2024

sherakama commented Jan 5, 2024

yvonnetangsu commented Sep 13, 2023 •

edited

Loading

rebeccahongsf left a comment •

edited

Loading