feat: Implement page footer with USWDS components #1285

snmln · 2024-12-03T20:32:24Z

Related Ticket: #1135

Description of Changes

TO DO:

Notes & Questions About Changes

{Add additonal notes and outstanding questions here related to changes in this pull request}

Validation / Testing

{Update with info on what can be manually validated in the Deploy Preview link for example "Validate style updates to selection modal do NOT affect cards"}

netlify · 2024-12-03T20:32:40Z

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	`09babe8`
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/6786cbb15461600008333280
😎 Deploy Preview	https://deploy-preview-1285--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

renamed old footer to PageFooterLegacy

I suppose the content will be included in the new footer component

@snmln

Contributes to the feature branch #1285 Hej @snmln ! Thanks for setting up the feature branch and foundations for the new footer component! I renamed the old footer to PageFooterLegacy, that way we can use the regular import path for our new footer component. Also added a .env var that allows us to switch between old and new footer implementations easily. Campground Rule[^1]: While working on the feature flag, I addressed an unrelated lint warning within the files I made changes to. [^1]: Always leave the campground cleaner than you found it.

.env

…footer

**Related Ticket:** _{link related ticket here}_ ### Description of Changes Creating slim footer. - Establishing initial Front-end - Creating footer object model in veda.config.js - Setting up initial default.config.js - Wiring up Config data flow - Turning USWDS breakpoints on TO DO's for this PR: - Implement dynamic creation of links in footer component

snmln · 2024-12-11T20:55:37Z

@faustoperez Can you take a look at the preview view here: https://deploy-preview-1285--veda-ui.netlify.app/

We have the front-end in place and are currently working through functionality. So this should be in a good spot for a design review.

snmln · 2024-12-20T21:17:04Z

@AliceR I have corrected the issues on the nextjs instance. Heads up on one of the bullet points:

Footer does not stick to the bottom of the page

This is an issue with the content section not respecting the flex-grow: 1 attribute. I tested it out appearance wise and we have everything dialed in. I will leave this as a call out for another ticket though since it is outside of the footer work we have completed.

app/scripts/components/common/layout-root/index.tsx

app/scripts/components/common/page-footer/index.tsx

app/scripts/components/common/page-footer/styles.scss

docs/content/CONFIGURATION.md

app/scripts/components/common/page-header/default-config.ts

app/scripts/components/common/page-footer/index.tsx

app/scripts/components/common/layout-root/index.tsx

app/scripts/components/common/nasa-logo-color.js

app/scripts/components/common/page-footer/footer.test.tsx

sandrahoang686 · 2025-01-09T15:31:34Z

app/scripts/components/common/page-footer/footer.test.tsx

+import PageFooter from './index';
+
+const mockMainNavItems: NavItem[] = navItems.mainNavItems;
+const mockSubNavItems: NavItem[] = navItems.subNavItems;


These mocks are mocking what looks to be used for the Header which includes dropdowns which footer doesn't worry about, we should probably explicity define the config for footer separately. And then test the dynamicness?

sandrahoang686 · 2025-01-09T15:43:20Z

app/scripts/components/common/page-footer/index.tsx

+interface PageFooterProps {
+  //use of NavItem is causing issues with TS and throwing erros in the .
+  mainNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  subNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];


I dont think Footer will need DropDowns. Unsure if we have any designs where it includes dropdowns but I've never seen and I dont see the option in storybook here so we should probably remove this DropdownNavLink type and then I made a note above about explicitly defining a config just for footer.

@AliceR and I determined that it makes sense to reuse the main and sub navigation for the footer navigation and strip out the dropdown options functionality within the footer. So we need to maintain the dropdown types to appropriately digest the existing navigation for now.

I think it makes more sense to be explicit hence why we have these config driven nav/menus and why we created it like so but thats fine. I'll add a note for this to be re-looked at in #1323 .

app/scripts/components/common/page-footer/index.tsx

app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx

app/scripts/components/common/page-header/default-config.ts

…Components-Footer

Co-authored-by: Gjore Milevski <dzole0311@gmail.com>

sandrahoang686

In the spirit of not wanting to drag this out any longer, this looks good to me. Related to dropdowns i've just updated this #1323 to address it since its not a blocker. There are issues with lint and test in the built which will need to be fixed before merging otherwise 👍🏼 and great work!

sandrahoang686 · 2025-01-14T16:26:25Z

app/scripts/components/common/layout-root/index.tsx

+          settings={footerSettings}
+          mainNavItems={mainNavItems}
+          subNavItems={subNavItems}
+          hideFooter={hideFooter}


curious, whats the point of having the hideFooter prop?

Its a carry over functionality from the old footer. No real documentation to back up its use. But I would infer that certain instances may not want to show this veda footer for some reason.

I think this is for the case that the instance wants to have their own footer. ex. ghg has their own footer https://github.com/US-GHG-Center/veda-config-ghg/blob/bf3e66b7299d474dae01576e850bccaaaca5856c/overrides/components/page-footer/component.tsx#L136

sandrahoang686 · 2025-01-14T16:42:08Z

app/scripts/components/common/page-footer/index.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import { DropdownNavLink, FooterSettings, NavLinkItem } from 'veda';


Sorry.. just catching this now but we need to be decoupling from any parcel/virtual modules/(parcel-resolver-veda) dependency for the new architecture.

Its fine for legacy (because it still depends on parcel) to reference these types from here but for new components for refactor - we should be referencing from this file. Feel free to move those types to a more common directory to be shared between Footer and Header. (Header for example)

FYI to help out, there has been an ongoing effort since the very beginning of when this refactor work started and is still going on (see current PR) to remove these veda virtrual modules/parcel dependencies for new architecture.

Sounds good, I updated this import to go from the common common/types.d.ts level since these types are leveraged in multiple areas.

hanbyul-here · 2025-01-14T20:45:43Z

app/scripts/components/common/layout-root/index.tsx

@@ -64,7 +71,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
  useEffect(() => {
    // When there is no cookie consent form set up
    !cookieConsentContent && setGoogleTagManager();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array ensures this effect runs only once, and not during SSR


Isn't layout-root only used for the legacy way?

hanbyul-here · 2025-01-14T20:51:19Z

app/scripts/components/common/page-footer/return-to-top-button/index.tsx

+      id='return-to-top-container'
+      className='margin-left-auto margin-right-auto'
+    >
+      <USWDSButton


This button doesn't move the focus of keyboard back to the top.

hanbyul-here · 2025-01-14T20:52:54Z

app/scripts/styles/_uswds-theme.scss

-    'mobile-lg': false,
-    'desktop': false
+
+    'mobile-lg': true,


Did we figure out if this change is needed?

hanbyul-here · 2025-01-14T20:57:38Z

app/scripts/components/common/page-footer/page-footer.scss

+  gap: themeVars.$veda-uswds-spacing-105;
+}
+
+#return-to-top-container {


I am seeing some styles using IDs, Was the specificity of ID needed for the style?
(Also, can some of these styles can be replaced with utility classes?)

snmln added 2 commits December 3, 2024 14:12

initial commit

a014680

adding outstanding footer imports

4e4fef7

snmln linked an issue Dec 3, 2024 that may be closed by this pull request

[Refactor] Layout Components - Footer #1135

Open

4 tasks

snmln and others added 4 commits December 4, 2024 17:57

pushing up initial slim work

7f300ea

Move uswds footer behind feature flag

545697e

renamed old footer to PageFooterLegacy

Disable eslint to not warn, explanation in comment

6f58910

Move Connections component behind the same FF

f838337

I suppose the content will be included in the new footer component

AliceR mentioned this pull request Dec 5, 2024

Hide new USWDS footer behind feature flag #1287

Merged

snmln and others added 2 commits December 5, 2024 10:46

usa foot implementation

e856157

AliceR changed the title ~~1135 refactor layout components footer~~ feat: Implement page footer with USWDS components Dec 9, 2024

Merge branch 'main' into 1135-Refactor-Layout-Components-Footer

a82d132

AliceR reviewed Dec 9, 2024

View reviewed changes

.env Show resolved Hide resolved

snmln and others added 11 commits December 9, 2024 12:35

adding uswds style infrastructure

65dacea

Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-slim-…

1aafd0c

…footer

implementing styling and creating interface

18f0173

wiring up config

60398ed

correcting styles

a5b4502

Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-slim-…

c47e331

…footer

correct ts and lint errors

e629882

correctin merge conflict issues.

a7a91ec

updating styles

d0a4cd4

dialing in css

59dd97e

AliceR added the design system change https://github.com/NASA-IMPACT/veda-ui/blob/main/docs/adr/003-design-system-change.md label Dec 11, 2024

AliceR added 3 commits December 11, 2024 12:13

Fix hideFooter prop name

e2afeed

Add back comments to .env

9f4a2fd

Remove duplicated styles

fe545d4

snmln added 2 commits December 23, 2024 15:00

updating documentation

0c78b01

updating documentation

c4f1b24

snmln marked this pull request as ready for review December 23, 2024 20:20

updating tests

b5fad30

snmln requested review from dzole0311, hanbyul-here and vgeorge January 6, 2025 15:53

dzole0311 requested changes Jan 9, 2025

View reviewed changes

dzole0311 reviewed Jan 9, 2025

View reviewed changes

app/scripts/components/common/page-footer/index.tsx Outdated Show resolved Hide resolved

sandrahoang686 reviewed Jan 9, 2025

View reviewed changes

snmln and others added 11 commits January 9, 2025 13:37

Merge remote-tracking branch 'origin/main' into 1135-Refactor-Layout-…

2267afc

…Components-Footer

Update app/scripts/components/common/layout-root/index.tsx

c0d279a

Co-authored-by: Gjore Milevski <dzole0311@gmail.com>

implementing isUswdsFooterEnabled rename

8cfe1ce

moving return to top button outside of footer

6846e20

fixing footer uswds import

522dab0

eslint removal

e8a7b14

updating styles

bda0bde

removing link in logo

73eff21

implementing link properties

9bbd492

updating test names

9877502

returntotop button

dc2d615

sandrahoang686 approved these changes Jan 14, 2025

View reviewed changes

sandrahoang686 requested changes Jan 14, 2025

View reviewed changes

snmln added 2 commits January 14, 2025 14:58

updating default settings and tests

8b758bf

updating types import

09babe8

hanbyul-here reviewed Jan 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement page footer with USWDS components #1285

feat: Implement page footer with USWDS components #1285

snmln commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

snmln commented Dec 11, 2024

snmln commented Dec 20, 2024 •

edited

Loading

sandrahoang686 Jan 9, 2025 •

edited

Loading

sandrahoang686 Jan 9, 2025 •

edited

Loading

snmln Jan 14, 2025

sandrahoang686 Jan 14, 2025 •

edited

Loading

sandrahoang686 left a comment •

edited

Loading

sandrahoang686 Jan 14, 2025

snmln Jan 14, 2025

hanbyul-here Jan 14, 2025

sandrahoang686 Jan 14, 2025 •

edited

Loading

sandrahoang686 Jan 14, 2025

snmln Jan 14, 2025

hanbyul-here Jan 14, 2025

hanbyul-here Jan 14, 2025

hanbyul-here Jan 14, 2025

hanbyul-here Jan 14, 2025

feat: Implement page footer with USWDS components #1285

Are you sure you want to change the base?

feat: Implement page footer with USWDS components #1285

Conversation

snmln commented Dec 3, 2024 • edited Loading

Description of Changes

Notes & Questions About Changes

Validation / Testing

netlify bot commented Dec 3, 2024 • edited Loading

✅ Deploy Preview for veda-ui ready!

snmln commented Dec 11, 2024

snmln commented Dec 20, 2024 • edited Loading

sandrahoang686 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

sandrahoang686 Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sandrahoang686 Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

sandrahoang686 left a comment • edited Loading

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

sandrahoang686 Jan 14, 2025 • edited Loading

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

snmln commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

snmln commented Dec 20, 2024 •

edited

Loading

sandrahoang686 Jan 9, 2025 •

edited

Loading

sandrahoang686 Jan 9, 2025 •

edited

Loading

sandrahoang686 Jan 14, 2025 •

edited

Loading

sandrahoang686 left a comment •

edited

Loading

sandrahoang686 Jan 14, 2025 •

edited

Loading