ADAPT-5902 | @rebeccahongsf | theme mega menu #695

rebeccahongsf · 2023-08-28T20:07:24Z

READY FOR REVIEW

Summary

theme mega menu
https://www.figma.com/file/nPKfSbRk5lXIzpDYGpS93G/Mega-Menu?type=design&node-id=12%3A476&mode=design&t=Ll9CTbMFY7op74rY-1

Review By (Date)

Retroreview :)

Review Tasks

Setup tasks and/or behavior to test

Navigate to https://deploy-preview-695--stanford-alumni.netlify.app/
Verify that the mega menu appears as outlined in figma
Review code

Associated Issues and/or People

rebeccahongsf · 2023-08-29T03:49:39Z

src/components/navigation/MegaMenu/megaMenuLinkItem.js

-    <li>
-      <SbLink link={link}>{linkText}</SbLink>
+    <li className="su-rs-mb-0">
+      <SbLink


Question for Tuesday @yvonnetangsu 😃 — Does Storyblok link field auto-magically define the external links differently from the internal links? I know we have a conditional to check within the SbLink component but I was wondering if any additional code work is needed to make it work 🤔

@rebeccahongsf I don't believe you need to do anything to the link prop, but I'm looking at the current navItem component, and there is a hasExternalLinkIcon prop that you can set (whether to display an external link icon) 😄
https://github.com/SU-SWS/saa_alumni/blob/dev/src/components/navigation/navItem.js

It's more for whether you want all external links to display an icon - I don't think you need to do the external link check yourself.

yvonnetangsu · 2023-08-29T19:28:57Z

@rebeccahongsf One thing I noticed is that you might be able to reuse more of the responsive styles for the top level parent buttons for smaller breakpoints. You're probably still working on it though? 😄

PR preview:

On live site:

rebeccahongsf · 2023-08-29T22:32:06Z

@rebeccahongsf One thing I noticed is that you might be able to reuse more of the responsive styles for the top level parent buttons for smaller breakpoints. You're probably still working on it though? 😄

PR preview:

On live site:

Ooo! This is a great call out, @yvonnetangsu! 😅 I totally overlooked the parent text second line field

yvonnetangsu · 2023-08-29T22:51:34Z

Ooo! This is a great call out, @yvonnetangsu! 😅 I totally overlooked the parent text second line field

I figured you were probably still working on it too - there is no rush! 😄

…ile menu

yvonnetangsu · 2023-08-30T17:15:27Z

@rebeccahongsf Very nice work - this is 95% there 😄 ! Here comes just a few comments then should be GTG

On LG and +, when a mega menu panel is open, please add functionality to close with the escape key
Please ask designer for a hocus state for this close button 😄

For Travel Study, there seems to be a visual regression which cause the normal state of the close button to become black, and the hocus state is taking on the one for homesite as well

This is a designer thing - I would push back hard on this layout especially for the XL breakpoint. It really seems like esp for the panels with the card, it could use the full width of the container here

Also, another thing to check with designer - since the masthead of the SAA homesite doesn't quite follow the normal center container (ie, the screen margins are a bit different to accommodate the logo treatment, I'd ask the designer whether to align the content container to this modified container, eg, on the left edge, have the first column in the panel left aligned with the left side of the logo.
I would suggest finetuning the width/flex treatment of the individual column a bit (maybe best to use a CSS grid here), eg, currently if I have a long item in a column it would cause the other column to shrink

There are different ways to update this, using a CSS grid might be the most straightforward, but you can also add su-shrink-0 to each column and give them each a max width etc. Up to you and the designer 😄

yvonnetangsu

Just added some comments for final finetuning - looking really great! Nice job 👏🏼 😄

rebeccahongsf · 2023-09-01T16:48:17Z

@yvonnetangsu I updated this PR with some of your requested changes.

I'm going to follow up with a designer and implement the following changes in my next PR. Please let me know if any additional adjustments are needed. Thank you thank you! 😃

Please ask designer for a hocus state for this close button 😄

For Travel Study, there seems to be a visual regression which cause the normal state of the close button to become black, and the hocus state is taking on the one for homesite as well

Also, another thing to check with designer - since the masthead of the SAA homesite doesn't quite follow the normal center container (ie, the screen margins are a bit different to accommodate the logo treatment, I'd ask the designer whether to align the content container to this modified container, eg, on the left edge, have the first column in the panel left aligned with the left side of the logo.

yvonnetangsu · 2023-09-01T17:30:46Z

@rebeccahongsf Thank you for the changes - I'll look after getting into SRWC 👍🏼 😄

yvonnetangsu · 2023-09-01T20:20:33Z

Looks great - @rebeccahongsf !!

Adding that comment for grid gap as you requested - here's a screenshot - need gaps on both of the grids 👍🏼 😄

yvonnetangsu · 2023-09-01T20:25:46Z

A few more that I just noticed - related to the modal visual regression 😂 Definitely related to the earlier comments, so you might fix these when you fix those ones.

Looks like the mobile user menu has some visual regression with the links/buttons
Looks like the search modal Close X button is black so blending in (mobile and desktop)

yvonnetangsu · 2023-09-01T20:26:27Z

I'm not able to log in as zguan on the preview, if you could - please do a check for the user menu for me too 😄

rebeccahongsf · 2023-09-05T19:12:57Z

I'm not able to log in as zguan on the preview, if you could - please do a check for the user menu for me too 😄

Looks like I was missing the MEGAPROFILE_URL in vault! Mind retrying here?
https://megamenu--stanford-alumni.netlify.app/

I'll definitely take a look over the user menu as well 😃

yvonnetangsu · 2023-09-05T19:28:52Z

I'm not able to log in as zguan on the preview, if you could - please do a check for the user menu for me too 😄

Looks like I was missing the MEGAPROFILE_URL in vault! Mind retrying here? https://megamenu--stanford-alumni.netlify.app/

I'll definitely take a look over the user menu as well 😃

Thank you @rebeccahongsf ! Yes, I can log in now 👏🏼

Yup, looks like some visual regression in the user menu on the homesite after logging in as well

On the T/S side, it looks good except for the close modal button 😄 (for user menu, search - as mentioned before, and for the Destination page filter modal on mobile)

rebeccahongsf · 2023-09-05T21:03:13Z

Thank you thank you @yvonnetangsu for looking it over again! Looks like my changes to the Modal.styles.ts is causing those issues so I'll fix that up in my mobile pr 🫡

yvonnetangsu · 2023-09-05T21:04:18Z

Thank you @rebeccahongsf !! 😄 👍🏼

@rebeccahongsf

* update README * ADAPT-5924 | @rebeccahongsf | update to megamenu vault vars * ADAPT-5901 | @rebeccahongsf | build out mega menu components (#694) * ADAPT-5901 | @rebeccahongsf | build out mega menu components * remove dupe * ADAPT-5902 | @rebeccahongsf | theme mega menu (#695) * ADAPT-5902 | @rebeccahongsf | theme mega menu * adjust dropdown menu flex and grid container * tweak fonts * tweak font and spacing * style mega menu card image * tweak grid to match mocks * fixup toplink styles * fix double menu appearance * adjust responsive display of dropdown links * add some mobile styles * fixup * fixup * fixup * update active state logic * remove homesite * adjust background color, text color, and tweak chevron buttons of mobile menu * fixup menu dropdown transition * fixup keyboard esc * add mobile background color for dropdowns * fixup grid * DS-173 | @rebeccahongsf | theme mobile mega menu (#696) * revert modal styles for testing * remove unused color * add modal styles for mobile menu * fixup mobile font size and chevron hocus * add grid gap * add mobile menu group border and spacing * adjust mobile border and chevron * create seperate mega menu card stylesheet * fixup mobile positioning for child menu * reduce padding on lg and add word break * fixup grid * fixup active state * add grid gaps * remove secondary header link * DS-173 | @rebeccahongsf | adjust mega menu card width * DS-173 | @rebeccahongsf | fixup line height of menu link items and add white bg for mobile menu modal * DS-96 | @rebeccahongsf | replace div with span for accessibility * DS-173 | @rebeccahongsf | fixup card white space * DS-96 | @rebeccahongsf | update aria-label for mega menu * revert netlify config and readme

rebeccahongsf added 6 commits August 28, 2023 13:05

ADAPT-5902 | @rebeccahongsf | theme mega menu

9e463d0

adjust dropdown menu flex and grid container

fa30a5e

tweak fonts

ef3612c

tweak font and spacing

24acbbe

style mega menu card image

14c3596

tweak grid to match mocks

6eb4305

rebeccahongsf marked this pull request as ready for review August 29, 2023 03:48

rebeccahongsf commented Aug 29, 2023

View reviewed changes

fixup toplink styles

d5d8cc1

fix double menu appearance

d40faca

rebeccahongsf added 6 commits August 29, 2023 16:07

adjust responsive display of dropdown links

703f550

add some mobile styles

4818128

fixup

579c30a

fixup

c2ef3f6

fixup

a375dcd

update active state logic

d6fb789

rebeccahongsf requested a review from yvonnetangsu August 30, 2023 00:05

rebeccahongsf added 3 commits August 29, 2023 20:48

remove homesite

bc778b3

adjust background color, text color, and tweak chevron buttons of mob…

62ffee0

…ile menu

fixup menu dropdown transition

45f13ca

yvonnetangsu requested changes Aug 30, 2023

View reviewed changes

rebeccahongsf added 3 commits August 30, 2023 15:50

fixup keyboard esc

9ce2219

add mobile background color for dropdowns

1290fa8

fixup grid

330b312

rebeccahongsf requested a review from yvonnetangsu September 1, 2023 16:48

rebeccahongsf merged commit f028d5d into megamenu Sep 1, 2023
6 checks passed

rebeccahongsf deleted the feature/ADAPT-5902--themeMegamenu branch September 1, 2023 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ADAPT-5902 | @rebeccahongsf | theme mega menu #695

ADAPT-5902 | @rebeccahongsf | theme mega menu #695

rebeccahongsf commented Aug 28, 2023 •

edited

Loading

rebeccahongsf Aug 29, 2023

yvonnetangsu Aug 29, 2023

yvonnetangsu Aug 29, 2023

yvonnetangsu commented Aug 29, 2023

rebeccahongsf commented Aug 29, 2023

yvonnetangsu commented Aug 29, 2023

yvonnetangsu commented Aug 30, 2023 •

edited by rebeccahongsf

Loading

yvonnetangsu left a comment

rebeccahongsf commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023 •

edited

Loading

rebeccahongsf commented Sep 5, 2023

yvonnetangsu commented Sep 5, 2023

rebeccahongsf commented Sep 5, 2023

yvonnetangsu commented Sep 5, 2023

ADAPT-5902 | @rebeccahongsf | theme mega menu #695

ADAPT-5902 | @rebeccahongsf | theme mega menu #695

Conversation

rebeccahongsf commented Aug 28, 2023 • edited Loading

READY FOR REVIEW

Summary

Review By (Date)

Review Tasks

Setup tasks and/or behavior to test

Associated Issues and/or People

rebeccahongsf Aug 29, 2023

Choose a reason for hiding this comment

yvonnetangsu Aug 29, 2023

Choose a reason for hiding this comment

yvonnetangsu Aug 29, 2023

Choose a reason for hiding this comment

yvonnetangsu commented Aug 29, 2023

rebeccahongsf commented Aug 29, 2023

yvonnetangsu commented Aug 29, 2023

yvonnetangsu commented Aug 30, 2023 • edited by rebeccahongsf Loading

yvonnetangsu left a comment

Choose a reason for hiding this comment

rebeccahongsf commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023

yvonnetangsu commented Sep 1, 2023 • edited Loading

rebeccahongsf commented Sep 5, 2023

yvonnetangsu commented Sep 5, 2023

rebeccahongsf commented Sep 5, 2023

yvonnetangsu commented Sep 5, 2023

rebeccahongsf commented Aug 28, 2023 •

edited

Loading

yvonnetangsu commented Aug 30, 2023 •

edited by rebeccahongsf

Loading

yvonnetangsu commented Sep 1, 2023 •

edited

Loading