Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ADAPT-1185: Sidebar nav treatment for mobile/tablet #109

Merged
merged 38 commits into from
Nov 24, 2020

Conversation

yvonnetangsu
Copy link
Member

@yvonnetangsu yvonnetangsu commented Nov 19, 2020

READY FOR REVIEW

Summary

  • For mobile/tablet, pages with sidebars menus - the menu would get rendered in the header of the page above the page title instead.
  • This menu in the header is collapsed on page load, and can be expanded/collapsed on click, using the enter key or space bar.
  • The expanded menu can be collapsed using the escape key or clicking outside the expanded menu or tabbing away from the last link in the expanded menu.
  • All appropriate aria labels added (aria-expanded on the menu button, and aria-hidden on the menu contents)

Review By (Date)

  • When does this need to be reviewed by?

Criticality

  • How critical is this PR on a 1-10 scale? Also see Severity Assessment.
  • E.g., it affects one site, or every site and product?

Review Tasks

Setup tasks and/or behavior to test

  1. Go to https://deploy-preview-109--adapt-giving.netlify.app/make-a-gift-of-securities/make-a-gift-by-ach-electronic-fund-transfer/
  2. For desktop view, verify that the content nav (How to make a gift + related links) is in the left sidebar.
  3. Shrink the browser down to tablet size (MD breakpoint), check that the menu is collapsed in the page title.
    Screen Shot 2020-11-21 at 9 36 32 AM
  4. Shrink the browser down to Mobile (XS-SM breakpoint), check that the menu is collapsed in the page title.
    Screen Shot 2020-11-21 at 9 34 37 AM
  5. Check that you can expand the menu by clicking on the "Section Menu" button. Or that when your keyboard focus is on the button, you can expand the menu using the space bar or enter key.
  6. Expand the menu on mobile and tablet and see that it looks like this
    Screen Shot 2020-11-21 at 9 34 46 AM
  7. Check that you can close the menu using the escape key, or by clicking outside of the expanded menu, or by tabbing away from the last link in the expanded menu.
  8. This is a page with a different header style (with image in header). Check that for Mobile/tablet, the header looks like this with the section menu.
    Screen Shot 2020-11-21 at 10 22 39 AM
    Screen Shot 2020-11-21 at 10 20 30 AM
  9. Check that the section menu functions the same way for this header style.
  10. Go to this page https://deploy-preview-109--adapt-giving.netlify.app/test-items/yvonne/yvonne-testing-poster/
  11. Check that for this minimal header variant (no image, no intro) with a different header background color, the header looks like this for mobile/tablet.
    Screen Shot 2020-11-21 at 10 27 23 AM
    Screen Shot 2020-11-21 at 10 27 41 AM
  12. Check that the menu still works.

Front End Validation

  • Is the markup using the appropriate semantic tags and passes HTML validation?
  • Cross-browser testing has been performed?
  • Automated accessibility scans performed?
  • Manual accessibility tests performed?
  • Design is approved by @ user?

Backend / Functional Validation

Code

  • Are the naming conventions following our standards?
  • Does the code have sufficient inline comments?
  • Is there anything in this code that would be hidden or hard to discover through the UI?
  • Are there any code smells?
  • Are tests provided? eg (unit, behat, or codeception)

Code security

General

  • Is there anything included in this PR that is not related to the problem it is trying to solve?
  • Is the approach to the problem appropriate?

Affected Projects or Products

  • Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

  • JIRA ticket(s)
  • Other PRs
  • Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
  • Anyone who should be notified? (@mention them here)

Resources

* ADAPT-000-window-resize-hook:
  try a slightly different hook
  Experiment with window resize react hook and putting sidebar menu in header for mobile

# Conflicts:
#	src/components/partials/bodyLeftSidebar.js
#	src/components/partials/headerWithImage.js
* main:
  ADAPT-751 Local header mobile/tablet/finetune (#107)
* main:
  ADAPT-893: Change embed widget to create a partial dom so it can render and call scripts etc. (#108)
… last child item on mobile instead of sidebar itself
Copy link
Member

@sherakama sherakama left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feedback left. Mostly just questions about the removal/usage of IDs and moving some hard coded numbers into a shared file.

yvonnetangsu and others added 6 commits November 23, 2020 16:09
…_site into ADAPT-1185-content-nav

* 'ADAPT-1185-content-nav' of github.com:SU-SWS/ood_giving_site:
  Update src/hooks/useWindowSize.js
* main:
  ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)
src/utilities/config.js Outdated Show resolved Hide resolved
@yvonnetangsu
Copy link
Member Author

@sherakama Changed breakpoint 2xs to 0 and xs is now 320 (for iphone SE). Ready for another look.

Copy link
Member

@sherakama sherakama left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GTG. Thank you for the revisions.

@sherakama
Copy link
Member

@katrialesser Please review this PR as there are a number of changes in here that you should be aware of.

@sherakama sherakama changed the title ADAPT-1185 Sidebar nav treatment for mobile/tablet ADAPT-1185: Sidebar nav treatment for mobile/tablet Nov 24, 2020
@sherakama sherakama merged commit 8afa40c into main Nov 24, 2020
@sherakama sherakama deleted the ADAPT-1185-content-nav branch November 24, 2020 19:19
yvonnetangsu added a commit that referenced this pull request Nov 24, 2020
* main:
  ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)
  ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

# Conflicts:
#	src/hooks/useWindowSize.js
#	src/scss/components/navigation/_mega-menu.scss
#	src/utilities/config.js
wappsify pushed a commit that referenced this pull request Jan 8, 2021
wappsify pushed a commit that referenced this pull request Jan 18, 2021
* ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)

* Adjust font size and element heights for hero component for different breakpoints

* Break everything in hero and start from mobile

* sass-lint fixup

* Finetune mobile hero

* Tablet styles

* Restore desktop styles

* Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards

* Use Heading component for hero and poster; splash font size fix up for small option

* Add image focus option for hero image

* Add blue gradient for mobile/tablet on hero image

* Finetune for small font option

* ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

Co-authored-by: Sherakama <[email protected]>

* ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)

Co-authored-by: Shea McKinney <[email protected]>

* Update netlify.toml (#115)

* Add SR only instruction for Areas to Support page (#114)

* ADAPT-1183: Mega menu mobile (#112)

* Turn password back on (#116)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable.

* ADAPT-1233: Alphabetized list.

* ADAPT-1347: Refine mega menu (#119)

* Always use https (#120)

`//` is an anti-pattern when HTTPS is available on the end resource.

* Remove Password (#121)

* Password on the Giving Site (#122)

* ADAPT-1346 Add external link icon and styles for WYSIWYG (#123)

* Add style to external links in WYSIWYG

* Non-white basic card external link styles

* make icon for story image caption link a bit smaller

* Add external link style when link is in heading

* Works for action link style inside WISYWIG

* finetune

* ADAPT-1345: Accordion tweaks and fixes (#124)

* Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out
* Fix the overlapping accordion item title with the icon on the right
* Use Heading component for acc item
* Set item title back to bold instead of semibold

* ADAPT-1321: Preserve utm parameters throughout site. (#125)

* ADAPT-1321: Preserve utm parameters throughout site.

* Use External Classes Param.

* Update src/components/navigation/contentMenu/contentNavItem.js

Co-authored-by: Yvonne Tang <[email protected]>

* Check for vals,

* Update src/components/navigation/contentMenu/contentMenuParentItem.js

Co-authored-by: Yvonne Tang <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>

* Backing out of WYSIWYG external link icon changes per client's request (#129)

* Misc a11y fixes and improvements (#128)

* Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within

* Add SR only heading for icon card section

* Use reusable components

* use reusable components

* CTA card images should have empty alt text for screen readers since they are decorative

* Poster image also could use empty alt

* Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements

* Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure

* Update netlify.toml (#132)

* ADAPT-893: Pass Preview API Key into the edit via url. (#131)

* ADAPT-893: Pass access key into request URL to protect editor page and API key settings.
Co-authored-by: Sherakama <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>

* ADAPT-780: Added google tag manager. (#133)

* ADAPT-956: Print styles (#127)

* ADAPT-1340 More a11y fixes (#130)

* add sr only text for external link indicators

* Improvement to hamburger aria-label to match visible text

* Return focus to hamburger button after escape is pressed

* Only handle escape event if there is actually a hamburger button (mobile/tablet)

* Add check for if the hamburger menu is open before closing and setting focus with esp

* focus management for desktop mega nav

* Change mobile header nav external icon to white (a11y contrast)

* focus management of sidebar menu on mobile

* ADAPT-1368 Make table styles work with new a11y markup adjustments (#135)

* Clean up table code

* more table

* ADAPT-1358 Improve image components (#134)

* Improve image optimization - only scale image if original image size is larger than intended size

* Don't need no wrapper for hero component image

* FullWidthImage component with srcset

* fixup

* improve fullwidthimage

* make imgSizes a variable and not empty only if imgSrcset exist

* add a check for small image

* Use FullWidthImage for story hero image

* only using image width no need for dimensions as an object; doc

* fixup

* Do not write srcset and sizes if they don't exist

* Update src/components/page-types/story/oodStoryFullView.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* use cleaner expression

* Add original image in srcset if width is between 800 and <2000

* Doc

* use cleaner expression

* Some cleanup

Co-authored-by: Sherakama <[email protected]>

* Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138)

* Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139)

* Move "All" filter to the end - client request; reduce spacing below filter buttons (#140)

* ADAPT-000 touch ups (#136)

* Menu level 1 color fixup

* Tighten up spacing for content menu on mobile so the menu is not so long

* hover state for close content menu button when menu is expanded

* use ref instead of querySelector to select menu button

* Remove bit of code so we can preview in full window out of storyblok iframe

* Update src/components/navigation/contentMenu/oodContentMenu.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/navigation/megaMenu/oodMegaMenu.js

Co-authored-by: Sherakama <[email protected]>

* slight adjustment to the hover state of the closed section menu

Co-authored-by: Sherakama <[email protected]>

* ADAPT-000: NPM Updates. (#144)

* ADAPT-000: Use updated font import with display: swap for google fonts (#142)

* Remove password for scan (#146)

* Password it back up (#148)

* ADAPT-649: Added all redirects in netlify config file (#143)

* ADAPT-1441: Test redirect masks. (#145)

* ADAPT-000: Use different method to import Google fonts (#149)

* ADAPT-866: Sitemap.xml review.

* Update netlify.toml (#150)

* missing redirect (#151)

* ADAPT-000: Optimize jpg to 60% quality for performance (#147)

Co-authored-by: Shea McKinney <[email protected]>

* ADAPT-000: Missing redirect #2 (#152)

* ADAPT-000: Missing redirect #2

goto/chembiogift
to
https://giving.stanford.edu/goto/chembiogift to
https://pgnet.stanford.edu/get/page/makeagift?pgnTPC=399&stp=221&olc=18308&cturl=close

* Update netlify.toml

* Update netlify.toml

* ADAPT-000: Add another redirect (#154)

* Update netlify.toml (#155)

* Adapt 1449  reorganize url redirects (#153)

* ADAPT-1449: Added bulk of redirects to redirect file.

* ADAPT-1449: Removed unnecessary redirect.

* ADAPT-1449: Removed redirects from netlify.

* ADAPT-1449: Commented out to remove duplicate redirect.

* ADAPT-1449: Added cdn and new redirects.

* ADAPT-1449: Removed redirects from netlify.toml.

* ADAPT-1449: Corrected redirect.

* ADAPT-1449: Fixed redirect mistake.

* Update static/_redirects formatting

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
yvonnetangsu added a commit that referenced this pull request Jan 28, 2021
* Implement and design search overlay.

* Implement toggling of search overlay

* Add algolia search dependency

* Add Gatsby-Plugin-Algolia

* Rename query file, add more attributes to algolia index

* ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)

* Adjust font size and element heights for hero component for different breakpoints

* Break everything in hero and start from mobile

* sass-lint fixup

* Finetune mobile hero

* Tablet styles

* Restore desktop styles

* Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards

* Use Heading component for hero and poster; splash font size fix up for small option

* Add image focus option for hero image

* Add blue gradient for mobile/tablet on hero image

* Finetune for small font option

* ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

Co-authored-by: Sherakama <[email protected]>

* ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)

Co-authored-by: Shea McKinney <[email protected]>

* Update netlify.toml (#115)

* Add SR only instruction for Areas to Support page (#114)

* ADAPT-1183: Mega menu mobile (#112)

* Turn password back on (#116)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable.

* ADAPT-1233: Alphabetized list.

* ADAPT-1347: Refine mega menu (#119)

* Always use https (#120)

`//` is an anti-pattern when HTTPS is available on the end resource.

* Remove Password (#121)

* Password on the Giving Site (#122)

* ADAPT-1346 Add external link icon and styles for WYSIWYG (#123)

* Add style to external links in WYSIWYG

* Non-white basic card external link styles

* make icon for story image caption link a bit smaller

* Add external link style when link is in heading

* Works for action link style inside WISYWIG

* finetune

* ADAPT-1345: Accordion tweaks and fixes (#124)

* Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out
* Fix the overlapping accordion item title with the icon on the right
* Use Heading component for acc item
* Set item title back to bold instead of semibold

* ADAPT-1321: Preserve utm parameters throughout site. (#125)

* ADAPT-1321: Preserve utm parameters throughout site.

* Use External Classes Param.

* Update src/components/navigation/contentMenu/contentNavItem.js

Co-authored-by: Yvonne Tang <[email protected]>

* Check for vals,

* Update src/components/navigation/contentMenu/contentMenuParentItem.js

Co-authored-by: Yvonne Tang <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>

* Backing out of WYSIWYG external link icon changes per client's request (#129)

* Misc a11y fixes and improvements (#128)

* Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within

* Add SR only heading for icon card section

* Use reusable components

* use reusable components

* CTA card images should have empty alt text for screen readers since they are decorative

* Poster image also could use empty alt

* Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements

* Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure

* Update netlify.toml (#132)

* ADAPT-893: Pass Preview API Key into the edit via url. (#131)

* ADAPT-893: Pass access key into request URL to protect editor page and API key settings.
Co-authored-by: Sherakama <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>

* ADAPT-780: Added google tag manager. (#133)

* ADAPT-956: Print styles (#127)

* ADAPT-1340 More a11y fixes (#130)

* add sr only text for external link indicators

* Improvement to hamburger aria-label to match visible text

* Return focus to hamburger button after escape is pressed

* Only handle escape event if there is actually a hamburger button (mobile/tablet)

* Add check for if the hamburger menu is open before closing and setting focus with esp

* focus management for desktop mega nav

* Change mobile header nav external icon to white (a11y contrast)

* focus management of sidebar menu on mobile

* ADAPT-1368 Make table styles work with new a11y markup adjustments (#135)

* Clean up table code

* more table

* ADAPT-1358 Improve image components (#134)

* Improve image optimization - only scale image if original image size is larger than intended size

* Don't need no wrapper for hero component image

* FullWidthImage component with srcset

* fixup

* improve fullwidthimage

* make imgSizes a variable and not empty only if imgSrcset exist

* add a check for small image

* Use FullWidthImage for story hero image

* only using image width no need for dimensions as an object; doc

* fixup

* Do not write srcset and sizes if they don't exist

* Update src/components/page-types/story/oodStoryFullView.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* use cleaner expression

* Add original image in srcset if width is between 800 and <2000

* Doc

* use cleaner expression

* Some cleanup

Co-authored-by: Sherakama <[email protected]>

* Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138)

* Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139)

* Move "All" filter to the end - client request; reduce spacing below filter buttons (#140)

* ADAPT-000 touch ups (#136)

* Menu level 1 color fixup

* Tighten up spacing for content menu on mobile so the menu is not so long

* hover state for close content menu button when menu is expanded

* use ref instead of querySelector to select menu button

* Remove bit of code so we can preview in full window out of storyblok iframe

* Update src/components/navigation/contentMenu/oodContentMenu.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/navigation/megaMenu/oodMegaMenu.js

Co-authored-by: Sherakama <[email protected]>

* slight adjustment to the hover state of the closed section menu

Co-authored-by: Sherakama <[email protected]>

* ADAPT-000: NPM Updates. (#144)

* ADAPT-000: Use updated font import with display: swap for google fonts (#142)

* Remove password for scan (#146)

* Password it back up (#148)

* Add search button in mega menu

* Move search overlay component into provider so it works on all pages

* Add search button to mobile mega menu

* Automatically focus input when opening the search overlay

* Adjust capitalization, minor linting issues

* Implement first version of SearchResults component

* Implement redirecting from overlay to search results page

* Fix environment variables not being used

* Implement initial hits, pagination and stats for search results page

* Try to index seo description in algolia

* Style search result list

* Start working on search box styles

* Add styles for search box (input and button)

* Remove unnecessary whitespace

* Adjust first page to always be visible in pagination

* Update (debounced) URL query params based on search state

* Multiple smaller adjustments, style no results message, hide pagination when no results

* Add spacing and mobile styles to pagination

* Add empty search warning, scroll up on page change

* Show loading message when currently loading search results

* Correctly use plural form in search stats

* Add placeholder to search input

* Adjust many search styles including overhauling search overlay

* Allow closing search overlay with escape, fix autofocus not working

* Index (most) page text content as well (as individual algolia records)

* Concatenate text content to reduce number of algolia records

* Skip algolia re-indexing when not in netlify build environment

* Implement SearchOverlay data coming from CMS

* Merge conflict resolution (#159)

* ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)

* Adjust font size and element heights for hero component for different breakpoints

* Break everything in hero and start from mobile

* sass-lint fixup

* Finetune mobile hero

* Tablet styles

* Restore desktop styles

* Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards

* Use Heading component for hero and poster; splash font size fix up for small option

* Add image focus option for hero image

* Add blue gradient for mobile/tablet on hero image

* Finetune for small font option

* ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

Co-authored-by: Sherakama <[email protected]>

* ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)

Co-authored-by: Shea McKinney <[email protected]>

* Update netlify.toml (#115)

* Add SR only instruction for Areas to Support page (#114)

* ADAPT-1183: Mega menu mobile (#112)

* Turn password back on (#116)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable.

* ADAPT-1233: Alphabetized list.

* ADAPT-1347: Refine mega menu (#119)

* Always use https (#120)

`//` is an anti-pattern when HTTPS is available on the end resource.

* Remove Password (#121)

* Password on the Giving Site (#122)

* ADAPT-1346 Add external link icon and styles for WYSIWYG (#123)

* Add style to external links in WYSIWYG

* Non-white basic card external link styles

* make icon for story image caption link a bit smaller

* Add external link style when link is in heading

* Works for action link style inside WISYWIG

* finetune

* ADAPT-1345: Accordion tweaks and fixes (#124)

* Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out
* Fix the overlapping accordion item title with the icon on the right
* Use Heading component for acc item
* Set item title back to bold instead of semibold

* ADAPT-1321: Preserve utm parameters throughout site. (#125)

* ADAPT-1321: Preserve utm parameters throughout site.

* Use External Classes Param.

* Update src/components/navigation/contentMenu/contentNavItem.js

Co-authored-by: Yvonne Tang <[email protected]>

* Check for vals,

* Update src/components/navigation/contentMenu/contentMenuParentItem.js

Co-authored-by: Yvonne Tang <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>

* Backing out of WYSIWYG external link icon changes per client's request (#129)

* Misc a11y fixes and improvements (#128)

* Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within

* Add SR only heading for icon card section

* Use reusable components

* use reusable components

* CTA card images should have empty alt text for screen readers since they are decorative

* Poster image also could use empty alt

* Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements

* Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure

* Update netlify.toml (#132)

* ADAPT-893: Pass Preview API Key into the edit via url. (#131)

* ADAPT-893: Pass access key into request URL to protect editor page and API key settings.
Co-authored-by: Sherakama <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>

* ADAPT-780: Added google tag manager. (#133)

* ADAPT-956: Print styles (#127)

* ADAPT-1340 More a11y fixes (#130)

* add sr only text for external link indicators

* Improvement to hamburger aria-label to match visible text

* Return focus to hamburger button after escape is pressed

* Only handle escape event if there is actually a hamburger button (mobile/tablet)

* Add check for if the hamburger menu is open before closing and setting focus with esp

* focus management for desktop mega nav

* Change mobile header nav external icon to white (a11y contrast)

* focus management of sidebar menu on mobile

* ADAPT-1368 Make table styles work with new a11y markup adjustments (#135)

* Clean up table code

* more table

* ADAPT-1358 Improve image components (#134)

* Improve image optimization - only scale image if original image size is larger than intended size

* Don't need no wrapper for hero component image

* FullWidthImage component with srcset

* fixup

* improve fullwidthimage

* make imgSizes a variable and not empty only if imgSrcset exist

* add a check for small image

* Use FullWidthImage for story hero image

* only using image width no need for dimensions as an object; doc

* fixup

* Do not write srcset and sizes if they don't exist

* Update src/components/page-types/story/oodStoryFullView.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* use cleaner expression

* Add original image in srcset if width is between 800 and <2000

* Doc

* use cleaner expression

* Some cleanup

Co-authored-by: Sherakama <[email protected]>

* Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138)

* Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139)

* Move "All" filter to the end - client request; reduce spacing below filter buttons (#140)

* ADAPT-000 touch ups (#136)

* Menu level 1 color fixup

* Tighten up spacing for content menu on mobile so the menu is not so long

* hover state for close content menu button when menu is expanded

* use ref instead of querySelector to select menu button

* Remove bit of code so we can preview in full window out of storyblok iframe

* Update src/components/navigation/contentMenu/oodContentMenu.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/navigation/megaMenu/oodMegaMenu.js

Co-authored-by: Sherakama <[email protected]>

* slight adjustment to the hover state of the closed section menu

Co-authored-by: Sherakama <[email protected]>

* ADAPT-000: NPM Updates. (#144)

* ADAPT-000: Use updated font import with display: swap for google fonts (#142)

* Remove password for scan (#146)

* Password it back up (#148)

* ADAPT-649: Added all redirects in netlify config file (#143)

* ADAPT-1441: Test redirect masks. (#145)

* ADAPT-000: Use different method to import Google fonts (#149)

* ADAPT-866: Sitemap.xml review.

* Update netlify.toml (#150)

* missing redirect (#151)

* ADAPT-000: Optimize jpg to 60% quality for performance (#147)

Co-authored-by: Shea McKinney <[email protected]>

* ADAPT-000: Missing redirect #2 (#152)

* ADAPT-000: Missing redirect #2

goto/chembiogift
to
https://giving.stanford.edu/goto/chembiogift to
https://pgnet.stanford.edu/get/page/makeagift?pgnTPC=399&stp=221&olc=18308&cturl=close

* Update netlify.toml

* Update netlify.toml

* ADAPT-000: Add another redirect (#154)

* Update netlify.toml (#155)

* Adapt 1449  reorganize url redirects (#153)

* ADAPT-1449: Added bulk of redirects to redirect file.

* ADAPT-1449: Removed unnecessary redirect.

* ADAPT-1449: Removed redirects from netlify.

* ADAPT-1449: Commented out to remove duplicate redirect.

* ADAPT-1449: Added cdn and new redirects.

* ADAPT-1449: Removed redirects from netlify.toml.

* ADAPT-1449: Corrected redirect.

* ADAPT-1449: Fixed redirect mistake.

* Update static/_redirects formatting

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>

* fixup! package-lock.

* Remove duplicate plugin in gatsby-config

* Remove duplicate context provider in gatsby-srr

* Revert "Remove duplicate context provider in gatsby-srr"

This reverts commit 5005836.

* Remove yarn.lock file

* Use SbLink instead of directly using gatsby's Link component

* Change size variable to reside in own file to avoid duplicate variables

* Remove outdated TODO comment

* Add multiple inline comments explaining the algolia indexing query and transformer process

* Switch close button in search overlay to use a <button> tag

* Add info relating to Algolia in the README, update example .env file

* Update gatsby-config.js

* Move header search button to OodLocalHeader

Move related files into /components/search directory

* Use <form> tag and add type="submit" to search button

* Use h2 and p tags for search hits titles and texts

* Use correct scss variable as background-color

* Add cursor: pointer to search submit button

* Index more contentKeys, also index headline texts

* Fix enter key not working in search overlay input

* Add "Clear" text to clear input button

* Disable body scrolling while search overlay is open

* Update aria properties for pagination, use semantic tags

* Add screenreader-only label to search submit button

* Replace usage of IDs with classes, use config.basePath for navigation

* Implement first version of search term suggestions

* Fix showing stale suggestions

* Change redirects to test Shea's assets CDN (#160)

* Change redirects to test Shea's assets CDN

* Change asset URL in transformImage

* Replace the link masks to the new CDN url in SbLink

* Change the link masks in richTextField utility; add semicolon at the end for prettierrc

* Update static/_redirects

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Sherakama <[email protected]>

* Move search-overlay global component into own folder, adjust location accordingly

* Implement useFocusTrap custom hook, use in search overlay

* Add searchableAttributes in algolia configuration

* Use suggestion search in search overlay as well

* Search overlay use HTML headings, styles, a11y tweaks

* Header search button styles, component name change and a11y tweaks

* Use our CenterContainer and FlexCell components

* Add hover/focus state for buttons; a11y tweaks for buttons

* Delete unused Decanter component CSS imports

* Always add vertical scroll bar so there is no content "jump" when search overlay is open

* Change overflow = hidden for the html element when search overlay is open so it doesn't scroll (due to the last commit we're adding y scroll bar to html always to avoid the jump)

* Make scrollbar appear in overlay without creating double scroll bar; remove content reflow (due to scroll bar appearing and reappearing taking up space on the side)

* Gatsby can't access window object when building so use offsetWidth instead of wndow.innerWidth to calculate scrollbar width

* cc fix; body width set to 100% because of the fixed properly doesn't have 100% width automatic - making sure it's 100% when search overlay is open

* Fix search icon size on mobile; remove border radius on iOS; use decanter 6.2.2 so we get latest colors

* trying to fix ios search icon which becomes smaller

* search svg tweak

* search icon still weird for ios

* Forget about svg search icon this is not working out

* Fix all search icons

* search overlay styles

* On mobile, set display none to error message so it doesn't create a big space beneath the search input in the overlay

* Prevent 1st level mega nav item from wrapping to 2nd line on low end of XL

* Fix descenders getting chopped off issue in search input

* Tweak spacing

* Use Heading component and spacing tweaks

* fix Heading component level props

* Spacing tweaks search results

* Hide pagination when search result = 0; add utility classes for empty search title

* Empty search input in overlay whenever it is closed

* spacing tweaks

* more padding tweaks

* misc styles and responsive

* Pagination tweaks

* clear search term icon change

* Pagination fixup

* More pagination tweak

* pagination

* pagination tweak

* should be last pagination tweak

* Purposely trigger a fail build

* try again to trigger fail build

* Reversing the fail test

* Update src/components/search/autocomplete.js

Co-authored-by: Sherakama <[email protected]>

* Update src/utilities/algoliaQueries.js

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Johannes Aßmann <[email protected]>
Co-authored-by: Artur Gilbert <[email protected]>
Co-authored-by: Yannik Wissner <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
yvonnetangsu added a commit that referenced this pull request Jan 29, 2021
* Misc updates and prep for portaltech.

* Misc updates and prep for portaltech.

* fixup! from upstream.

* Feature/search overlay (#156)

* Implement and design search overlay.

* Implement toggling of search overlay

* Add algolia search dependency

* Add Gatsby-Plugin-Algolia

* Rename query file, add more attributes to algolia index

* ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)

* Adjust font size and element heights for hero component for different breakpoints

* Break everything in hero and start from mobile

* sass-lint fixup

* Finetune mobile hero

* Tablet styles

* Restore desktop styles

* Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards

* Use Heading component for hero and poster; splash font size fix up for small option

* Add image focus option for hero image

* Add blue gradient for mobile/tablet on hero image

* Finetune for small font option

* ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

Co-authored-by: Sherakama <[email protected]>

* ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)

Co-authored-by: Shea McKinney <[email protected]>

* Update netlify.toml (#115)

* Add SR only instruction for Areas to Support page (#114)

* ADAPT-1183: Mega menu mobile (#112)

* Turn password back on (#116)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable.

* ADAPT-1233: Alphabetized list.

* ADAPT-1347: Refine mega menu (#119)

* Always use https (#120)

`//` is an anti-pattern when HTTPS is available on the end resource.

* Remove Password (#121)

* Password on the Giving Site (#122)

* ADAPT-1346 Add external link icon and styles for WYSIWYG (#123)

* Add style to external links in WYSIWYG

* Non-white basic card external link styles

* make icon for story image caption link a bit smaller

* Add external link style when link is in heading

* Works for action link style inside WISYWIG

* finetune

* ADAPT-1345: Accordion tweaks and fixes (#124)

* Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out
* Fix the overlapping accordion item title with the icon on the right
* Use Heading component for acc item
* Set item title back to bold instead of semibold

* ADAPT-1321: Preserve utm parameters throughout site. (#125)

* ADAPT-1321: Preserve utm parameters throughout site.

* Use External Classes Param.

* Update src/components/navigation/contentMenu/contentNavItem.js

Co-authored-by: Yvonne Tang <[email protected]>

* Check for vals,

* Update src/components/navigation/contentMenu/contentMenuParentItem.js

Co-authored-by: Yvonne Tang <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>

* Backing out of WYSIWYG external link icon changes per client's request (#129)

* Misc a11y fixes and improvements (#128)

* Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within

* Add SR only heading for icon card section

* Use reusable components

* use reusable components

* CTA card images should have empty alt text for screen readers since they are decorative

* Poster image also could use empty alt

* Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements

* Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure

* Update netlify.toml (#132)

* ADAPT-893: Pass Preview API Key into the edit via url. (#131)

* ADAPT-893: Pass access key into request URL to protect editor page and API key settings.
Co-authored-by: Sherakama <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>

* ADAPT-780: Added google tag manager. (#133)

* ADAPT-956: Print styles (#127)

* ADAPT-1340 More a11y fixes (#130)

* add sr only text for external link indicators

* Improvement to hamburger aria-label to match visible text

* Return focus to hamburger button after escape is pressed

* Only handle escape event if there is actually a hamburger button (mobile/tablet)

* Add check for if the hamburger menu is open before closing and setting focus with esp

* focus management for desktop mega nav

* Change mobile header nav external icon to white (a11y contrast)

* focus management of sidebar menu on mobile

* ADAPT-1368 Make table styles work with new a11y markup adjustments (#135)

* Clean up table code

* more table

* ADAPT-1358 Improve image components (#134)

* Improve image optimization - only scale image if original image size is larger than intended size

* Don't need no wrapper for hero component image

* FullWidthImage component with srcset

* fixup

* improve fullwidthimage

* make imgSizes a variable and not empty only if imgSrcset exist

* add a check for small image

* Use FullWidthImage for story hero image

* only using image width no need for dimensions as an object; doc

* fixup

* Do not write srcset and sizes if they don't exist

* Update src/components/page-types/story/oodStoryFullView.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* use cleaner expression

* Add original image in srcset if width is between 800 and <2000

* Doc

* use cleaner expression

* Some cleanup

Co-authored-by: Sherakama <[email protected]>

* Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138)

* Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139)

* Move "All" filter to the end - client request; reduce spacing below filter buttons (#140)

* ADAPT-000 touch ups (#136)

* Menu level 1 color fixup

* Tighten up spacing for content menu on mobile so the menu is not so long

* hover state for close content menu button when menu is expanded

* use ref instead of querySelector to select menu button

* Remove bit of code so we can preview in full window out of storyblok iframe

* Update src/components/navigation/contentMenu/oodContentMenu.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/navigation/megaMenu/oodMegaMenu.js

Co-authored-by: Sherakama <[email protected]>

* slight adjustment to the hover state of the closed section menu

Co-authored-by: Sherakama <[email protected]>

* ADAPT-000: NPM Updates. (#144)

* ADAPT-000: Use updated font import with display: swap for google fonts (#142)

* Remove password for scan (#146)

* Password it back up (#148)

* Add search button in mega menu

* Move search overlay component into provider so it works on all pages

* Add search button to mobile mega menu

* Automatically focus input when opening the search overlay

* Adjust capitalization, minor linting issues

* Implement first version of SearchResults component

* Implement redirecting from overlay to search results page

* Fix environment variables not being used

* Implement initial hits, pagination and stats for search results page

* Try to index seo description in algolia

* Style search result list

* Start working on search box styles

* Add styles for search box (input and button)

* Remove unnecessary whitespace

* Adjust first page to always be visible in pagination

* Update (debounced) URL query params based on search state

* Multiple smaller adjustments, style no results message, hide pagination when no results

* Add spacing and mobile styles to pagination

* Add empty search warning, scroll up on page change

* Show loading message when currently loading search results

* Correctly use plural form in search stats

* Add placeholder to search input

* Adjust many search styles including overhauling search overlay

* Allow closing search overlay with escape, fix autofocus not working

* Index (most) page text content as well (as individual algolia records)

* Concatenate text content to reduce number of algolia records

* Skip algolia re-indexing when not in netlify build environment

* Implement SearchOverlay data coming from CMS

* Merge conflict resolution (#159)

* ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110)

* Adjust font size and element heights for hero component for different breakpoints

* Break everything in hero and start from mobile

* sass-lint fixup

* Finetune mobile hero

* Tablet styles

* Restore desktop styles

* Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards

* Use Heading component for hero and poster; splash font size fix up for small option

* Add image focus option for hero image

* Add blue gradient for mobile/tablet on hero image

* Finetune for small font option

* ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109)

Co-authored-by: Sherakama <[email protected]>

* ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111)

Co-authored-by: Shea McKinney <[email protected]>

* Update netlify.toml (#115)

* Add SR only instruction for Areas to Support page (#114)

* ADAPT-1183: Mega menu mobile (#112)

* Turn password back on (#116)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118)

* ADAPT-1233: Added anchor links plugin to make anchor links reliable.

* ADAPT-1233: Alphabetized list.

* ADAPT-1347: Refine mega menu (#119)

* Always use https (#120)

`//` is an anti-pattern when HTTPS is available on the end resource.

* Remove Password (#121)

* Password on the Giving Site (#122)

* ADAPT-1346 Add external link icon and styles for WYSIWYG (#123)

* Add style to external links in WYSIWYG

* Non-white basic card external link styles

* make icon for story image caption link a bit smaller

* Add external link style when link is in heading

* Works for action link style inside WISYWIG

* finetune

* ADAPT-1345: Accordion tweaks and fixes (#124)

* Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out
* Fix the overlapping accordion item title with the icon on the right
* Use Heading component for acc item
* Set item title back to bold instead of semibold

* ADAPT-1321: Preserve utm parameters throughout site. (#125)

* ADAPT-1321: Preserve utm parameters throughout site.

* Use External Classes Param.

* Update src/components/navigation/contentMenu/contentNavItem.js

Co-authored-by: Yvonne Tang <[email protected]>

* Check for vals,

* Update src/components/navigation/contentMenu/contentMenuParentItem.js

Co-authored-by: Yvonne Tang <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>

* Backing out of WYSIWYG external link icon changes per client's request (#129)

* Misc a11y fixes and improvements (#128)

* Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within

* Add SR only heading for icon card section

* Use reusable components

* use reusable components

* CTA card images should have empty alt text for screen readers since they are decorative

* Poster image also could use empty alt

* Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements

* Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure

* Update netlify.toml (#132)

* ADAPT-893: Pass Preview API Key into the edit via url. (#131)

* ADAPT-893: Pass access key into request URL to protect editor page and API key settings.
Co-authored-by: Sherakama <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>

* ADAPT-780: Added google tag manager. (#133)

* ADAPT-956: Print styles (#127)

* ADAPT-1340 More a11y fixes (#130)

* add sr only text for external link indicators

* Improvement to hamburger aria-label to match visible text

* Return focus to hamburger button after escape is pressed

* Only handle escape event if there is actually a hamburger button (mobile/tablet)

* Add check for if the hamburger menu is open before closing and setting focus with esp

* focus management for desktop mega nav

* Change mobile header nav external icon to white (a11y contrast)

* focus management of sidebar menu on mobile

* ADAPT-1368 Make table styles work with new a11y markup adjustments (#135)

* Clean up table code

* more table

* ADAPT-1358 Improve image components (#134)

* Improve image optimization - only scale image if original image size is larger than intended size

* Don't need no wrapper for hero component image

* FullWidthImage component with srcset

* fixup

* improve fullwidthimage

* make imgSizes a variable and not empty only if imgSrcset exist

* add a check for small image

* Use FullWidthImage for story hero image

* only using image width no need for dimensions as an object; doc

* fixup

* Do not write srcset and sizes if they don't exist

* Update src/components/page-types/story/oodStoryFullView.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/media/fullWidthImage.js

Co-authored-by: Sherakama <[email protected]>

* use cleaner expression

* Add original image in srcset if width is between 800 and <2000

* Doc

* use cleaner expression

* Some cleanup

Co-authored-by: Sherakama <[email protected]>

* Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138)

* Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139)

* Move "All" filter to the end - client request; reduce spacing below filter buttons (#140)

* ADAPT-000 touch ups (#136)

* Menu level 1 color fixup

* Tighten up spacing for content menu on mobile so the menu is not so long

* hover state for close content menu button when menu is expanded

* use ref instead of querySelector to select menu button

* Remove bit of code so we can preview in full window out of storyblok iframe

* Update src/components/navigation/contentMenu/oodContentMenu.js

Co-authored-by: Sherakama <[email protected]>

* Update src/components/navigation/megaMenu/oodMegaMenu.js

Co-authored-by: Sherakama <[email protected]>

* slight adjustment to the hover state of the closed section menu

Co-authored-by: Sherakama <[email protected]>

* ADAPT-000: NPM Updates. (#144)

* ADAPT-000: Use updated font import with display: swap for google fonts (#142)

* Remove password for scan (#146)

* Password it back up (#148)

* ADAPT-649: Added all redirects in netlify config file (#143)

* ADAPT-1441: Test redirect masks. (#145)

* ADAPT-000: Use different method to import Google fonts (#149)

* ADAPT-866: Sitemap.xml review.

* Update netlify.toml (#150)

* missing redirect (#151)

* ADAPT-000: Optimize jpg to 60% quality for performance (#147)

Co-authored-by: Shea McKinney <[email protected]>

* ADAPT-000: Missing redirect #2 (#152)

* ADAPT-000: Missing redirect #2

goto/chembiogift
to
https://giving.stanford.edu/goto/chembiogift to
https://pgnet.stanford.edu/get/page/makeagift?pgnTPC=399&stp=221&olc=18308&cturl=close

* Update netlify.toml

* Update netlify.toml

* ADAPT-000: Add another redirect (#154)

* Update netlify.toml (#155)

* Adapt 1449  reorganize url redirects (#153)

* ADAPT-1449: Added bulk of redirects to redirect file.

* ADAPT-1449: Removed unnecessary redirect.

* ADAPT-1449: Removed redirects from netlify.

* ADAPT-1449: Commented out to remove duplicate redirect.

* ADAPT-1449: Added cdn and new redirects.

* ADAPT-1449: Removed redirects from netlify.toml.

* ADAPT-1449: Corrected redirect.

* ADAPT-1449: Fixed redirect mistake.

* Update static/_redirects formatting

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Yvonne Tang <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>

* fixup! package-lock.

* Remove duplicate plugin in gatsby-config

* Remove duplicate context provider in gatsby-srr

* Revert "Remove duplicate context provider in gatsby-srr"

This reverts commit 5005836.

* Remove yarn.lock file

* Use SbLink instead of directly using gatsby's Link component

* Change size variable to reside in own file to avoid duplicate variables

* Remove outdated TODO comment

* Add multiple inline comments explaining the algolia indexing query and transformer process

* Switch close button in search overlay to use a <button> tag

* Add info relating to Algolia in the README, update example .env file

* Update gatsby-config.js

* Move header search button to OodLocalHeader

Move related files into /components/search directory

* Use <form> tag and add type="submit" to search button

* Use h2 and p tags for search hits titles and texts

* Use correct scss variable as background-color

* Add cursor: pointer to search submit button

* Index more contentKeys, also index headline texts

* Fix enter key not working in search overlay input

* Add "Clear" text to clear input button

* Disable body scrolling while search overlay is open

* Update aria properties for pagination, use semantic tags

* Add screenreader-only label to search submit button

* Replace usage of IDs with classes, use config.basePath for navigation

* Implement first version of search term suggestions

* Fix showing stale suggestions

* Change redirects to test Shea's assets CDN (#160)

* Change redirects to test Shea's assets CDN

* Change asset URL in transformImage

* Replace the link masks to the new CDN url in SbLink

* Change the link masks in richTextField utility; add semicolon at the end for prettierrc

* Update static/_redirects

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Sherakama <[email protected]>

* Move search-overlay global component into own folder, adjust location accordingly

* Implement useFocusTrap custom hook, use in search overlay

* Add searchableAttributes in algolia configuration

* Use suggestion search in search overlay as well

* Search overlay use HTML headings, styles, a11y tweaks

* Header search button styles, component name change and a11y tweaks

* Use our CenterContainer and FlexCell components

* Add hover/focus state for buttons; a11y tweaks for buttons

* Delete unused Decanter component CSS imports

* Always add vertical scroll bar so there is no content "jump" when search overlay is open

* Change overflow = hidden for the html element when search overlay is open so it doesn't scroll (due to the last commit we're adding y scroll bar to html always to avoid the jump)

* Make scrollbar appear in overlay without creating double scroll bar; remove content reflow (due to scroll bar appearing and reappearing taking up space on the side)

* Gatsby can't access window object when building so use offsetWidth instead of wndow.innerWidth to calculate scrollbar width

* cc fix; body width set to 100% because of the fixed properly doesn't have 100% width automatic - making sure it's 100% when search overlay is open

* Fix search icon size on mobile; remove border radius on iOS; use decanter 6.2.2 so we get latest colors

* trying to fix ios search icon which becomes smaller

* search svg tweak

* search icon still weird for ios

* Forget about svg search icon this is not working out

* Fix all search icons

* search overlay styles

* On mobile, set display none to error message so it doesn't create a big space beneath the search input in the overlay

* Prevent 1st level mega nav item from wrapping to 2nd line on low end of XL

* Fix descenders getting chopped off issue in search input

* Tweak spacing

* Use Heading component and spacing tweaks

* fix Heading component level props

* Spacing tweaks search results

* Hide pagination when search result = 0; add utility classes for empty search title

* Empty search input in overlay whenever it is closed

* spacing tweaks

* more padding tweaks

* misc styles and responsive

* Pagination tweaks

* clear search term icon change

* Pagination fixup

* More pagination tweak

* pagination

* pagination tweak

* should be last pagination tweak

* Purposely trigger a fail build

* try again to trigger fail build

* Reversing the fail test

* Update src/components/search/autocomplete.js

Co-authored-by: Sherakama <[email protected]>

* Update src/utilities/algoliaQueries.js

Co-authored-by: Sherakama <[email protected]>

Co-authored-by: Johannes Aßmann <[email protected]>
Co-authored-by: Artur Gilbert <[email protected]>
Co-authored-by: Yannik Wissner <[email protected]>
Co-authored-by: Yvonne Tang <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>

Co-authored-by: Shea McKinney <[email protected]>
Co-authored-by: Johannes Aßmann <[email protected]>
Co-authored-by: Artur Gilbert <[email protected]>
Co-authored-by: Yannik Wissner <[email protected]>
Co-authored-by: Dena DeBry <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
Co-authored-by: Katria Lesser <[email protected]>
@yvonnetangsu
Copy link
Member Author

@jdwjdwjdw Tagging you in some old PRs with use of React hooks and other things of interest as we discussed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants