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.

Sign up for GitHub

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

Jump to bottom

feat: triad logo updates #630

Merged
merged 5 commits into from
Dec 20, 2024
Merged

feat: triad logo updates #630

merged 5 commits into from
Dec 20, 2024

Conversation

alexgoff
Copy link
Contributor

Updates to the header to use the new triad logos, with updated layouts to accommodate. Also includes:

  • Refactor of header component structure
  • Removal of user profile page (never been set up)
  • Replace navbar hider with react-headroom
  • Move auth modals out of header component
  • Get logos from Canto assets via Craft
  • Use art direction for desktop vs. mobile logo
  • Next.js image caching

To test:

  • Using the matching API branch, set either the desktop or desktop + mobile logos from Craft. The triad logos are not there yet, so the existing logos are fine to use.

Desktop (>1500px, may depend on pixel density i.e. my Macbook uses the mobile display)

  • on scroll down, header should slide away once window is past the bottom of the header
  • on scroll up, header should appear
  • top level
    • should show the larger logo set
    • should show the search bar
    • should show the language toggle
      • both components should have no change in function
  • lower level
    • should show navigation items on click
    • when navigation items are open, header should be pinned on scroll down
    • on click outside navigation items, list should close
    • on click another navigation item, previous list should close and new list should open
      Mobile
  • top level
    • should show a mobile-targeted logo if set
    • should show default logo if no mobile-targeted logo is set
  • lower level
    • should show language toggle
    • should show search bar
    • should show hamburger icon button
    • on hamburger click
      • header should stay pinned
      • menu should slide out
      • on click nav item
        • subnav should slide out
        • header should stay pinned
      • on click outside subnav
        • subnav should close
        • header should be unpinned

@alexgoff alexgoff added the preview Add this to a PR to deploy a preview version label Dec 10, 2024
@alexgoff alexgoff self-assigned this Dec 10, 2024
alexgoff
alexgoff commented Dec 10, 2024
View reviewed changes
components/molecules/SearchBar/index.tsx

export default function SearchBar() {
const SearchBar: FunctionComponent = () => {
const id = useId();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

since this component is rendered multiple times but display is controlled by media queries, use a randomly generated ID instead of static to avoid element ID collisions

components/molecules/SearchBar/styles.module.scss
@use "abstracts/mixins/base";
@use "abstracts/functions";

.searchBar {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

start pulling SASS out of build pipeline and into modules

components/organisms/Header/LanguageSelect/index.js
@@ -17,7 +18,8 @@ const filterSearchParams = (searchParams) => {
return `?${filteredParams.join("&")}`;
};

export default function LanguageSelect({ id }) {
export default function LanguageSelect({ className }) {
const id = useId();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

same ID change here

components/organisms/PageWrapper/index.tsx
@@ -38,6 +40,14 @@ const PageWrapper: FunctionComponent<
content={footerContent}
contactForm={contactForm}
/>
<Suspense>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

moved these modals out of the header and into the general page layout

lib/api/globals/index.ts

export async function getGlobalData(locale = fallbackLng) {
export async function getLogos() {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

extract these queries from the global fetch and context, these no longer need to be using client memory in the context since they are server rendered.

postcss.config.js Outdated
@@ -13,7 +13,7 @@ module.exports = {
[
"postcss-normalize",
{
forceImport: true,
allowDuplicates: false,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

enables CSS modules without adding our CSS normalization to each import

@alexgoff alexgoff force-pushed the develop branch 2 times, most recently from bb7916e to f2a3a9d Compare December 18, 2024 20:32
@alexgoff alexgoff merged commit 7b66824 into develop Dec 20, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ericdrosas87 ericdrosas87 ericdrosas87 approved these changes

Assignees

@alexgoff alexgoff

Labels
preview Add this to a PR to deploy a preview version
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@alexgoff @ericdrosas87