From e856157c7675434d6ab6488ef86a96e7ceeefb1d Mon Sep 17 00:00:00 2001 From: snmln Date: Thu, 5 Dec 2024 10:47:25 -0500 Subject: [PATCH 1/9] usa foot implementation --- .../components/common/page-footer/index.tsx | 1 + .../components/common/page-footer/styles.scss | 1 + app/scripts/styles/styles.scss | 21 +++++++++---------- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index 6d3bc5fea..90f4ba1a7 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/app/scripts/components/common/page-footer/index.tsx @@ -11,6 +11,7 @@ export default function PageFooter(hideFooter) { return ( <> {/* //commenting out hidefooter functionality for inflight work{!hideFooter && ( */} + {NasaLogoColor} Date: Mon, 9 Dec 2024 12:35:32 -0500 Subject: [PATCH 2/9] adding uswds style infrastructure --- .../components/common/page-footer/index.tsx | 85 ++++++++++++++----- .../components/common/page-footer/styles.scss | 50 ++++++++++- app/scripts/styles/_uswds-theme.scss | 35 ++++---- app/scripts/styles/_veda-ui-theme-vars.scss | 40 +++++++++ 4 files changed, 169 insertions(+), 41 deletions(-) create mode 100644 app/scripts/styles/_veda-ui-theme-vars.scss diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index 90f4ba1a7..c182a966b 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/app/scripts/components/common/page-footer/index.tsx @@ -1,48 +1,87 @@ -import React from 'react'; -import NasaLogoColor from '../../nasa-logo-color'; +import React, { ComponentType } from 'react'; +import NasaLogoColor from '../../nasa-logo-color.js'; +import { Icon } from '@trussworks/react-uswds'; import { USWDSFooter, USWDSLink, USWDSFooterNav, - USWDSLogo + USWDSLogo, + USWDSAddress } from '$components/common/uswds'; -export default function PageFooter(hideFooter) { +import './styles.scss'; + +export default function PageFooter() { + const returnToTop = () => { + return ( +
+ + Return to top + +
+ ); + }; return ( <> - {/* //commenting out hidefooter functionality for inflight work{!hideFooter && ( */} - {NasaLogoColor} -
+ } secondary={ - } - heading={

Name of Agency

} - /> + } /> - {/* )} */} ); -} +} \ No newline at end of file diff --git a/app/scripts/components/common/page-footer/styles.scss b/app/scripts/components/common/page-footer/styles.scss index 61089920d..19cac1c6c 100644 --- a/app/scripts/components/common/page-footer/styles.scss +++ b/app/scripts/components/common/page-footer/styles.scss @@ -1,8 +1,54 @@ @use '$styles/veda-ui-theme-vars.scss' as themeVars; .usa-footer__secondary-section { - color: themeVars.$veda-uswds-color-base-dark; + background-color: themeVars.$veda-uswds-color-base-darkest; } .usa-footer__primary-section { - color: themeVars.$veda-uswds-color-base-lightest; + background-color: themeVars.$veda-uswds-color-base-lightest; +} + +#logo-container { + display: flex; + font-family: themeVars.$veda-uswds-basefont-sans; + gap: themeVars.$veda-uswds-spacing-105; + + #logo-container-link { + display: flex; + align-items: center; + gap: themeVars.$veda-uswds-spacing-105; + font-weight: themeVars.$veda-uswds-fontweight-bold; + font-size: themeVars.$veda-uswds-fontsize-lg; + } + + #nasa-logo-pos { + opacity: 1; + transform: translate(0, -100%); + /* TODO: Fix the svg to not require any styles! + * - set opacity to 1 in svg and fix translation + */ + } + + // @media (width <= themeVars.$veda-uswds-spacing-desktop) { + // #nasa-logo-pos { + // display: none; + // } + // } + + svg { + height: 2.75rem; + width: auto; + } +} +.footer-text { + color: white; + align-self: center; + font-size: themeVars.$veda-uswds-fontsize-sm; + font-weight: themeVars.$veda-uswds-fontweight-regular; +} + +#return-to-top-container { +} +#footer_primary_container { + padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5; + background-color: themeVars.$veda-uswds-color-base-lightest; } \ No newline at end of file diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index 39e5f6eb6..7057bfd06 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -1,19 +1,22 @@ +// @QUESTION: Move to under uswds dir? @use 'uswds-core' as * with ( - $utilities-use-important: true, - $theme-show-notifications: false, - // To add more custom fonts, see 'Adding fonts to USWDS': - // https://designsystem.digital.gov/design-tokens/typesetting/font-family/ - $theme-typeface-tokens: ( - baseFontFamily: ( - "display-name": var(--base-font-family), - "cap-height": 364px, - ), + $utilities-use-important: true, + $theme-show-notifications: false, + $theme-font-weight-semibold: '600', + // To add more custom fonts, see 'Adding fonts to USWDS': + // https://designsystem.digital.gov/design-tokens/typesetting/font-family/ + $theme-typeface-tokens: + ( + baseFontFamily: ( + 'display-name': var(--base-font-family), + 'cap-height': 364px + ) ), - $theme-type-scale-md: 8, - $theme-utility-breakpoints: ( - "mobile-lg": false, - "desktop": false - ), - $theme-font-type-sans: baseFontFamily, - $theme-font-type-serif: baseFontFamily, + $theme-type-scale-md: 8, + $theme-utility-breakpoints: ( + 'mobile-lg': false, + 'desktop': false + ), + $theme-font-type-serif: baseFontFamily, + $theme-font-type-sans: baseFontFamily ); \ No newline at end of file diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss new file mode 100644 index 000000000..3a5f4f4b8 --- /dev/null +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -0,0 +1,40 @@ +@forward 'uswds-theme'; +@use 'uswds-core/src/styles/functions/utilities' as utils; +@use 'uswds-core/src/styles/functions/units' as spacing; + +/*********** VEDAUI THEME PALETTE ***********/ +// These map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0 +// and uswds found at https://designsystem.digital.gov/design-tokens/ + +// TYPOGRAPHY +$veda-uswds-basefont-sans: utils.family('sans'); + +// // FONT-SIZE +$veda-uswds-fontsize-3xs: utils.size('body', '3xs'); +$veda-uswds-fontsize-lg: utils.size('body', 'lg'); +$veda-uswds-fontsize-sm: utils.size('body', 'sm'); + +// FONT-WEIGHT +$veda-uswds-fontweight-light: utils.font-weight('light'); +$veda-uswds-fontweight-regular: utils.font-weight('normal'); +$veda-uswds-fontweight-bold: utils.font-weight('bold'); +$veda-uswds-fontweight-semibold: utils.font-weight('semibold'); + +// COLORS +$veda-uswds-color-primary-darker: utils.color('primary-darker'); +$veda-uswds-color-secondary: utils.color('secondary'); +$veda-uswds-color-base-dark: utils.color('base-dark'); +$veda-uswds-color-primary-light: utils.color('primary-light'); +$veda-uswds-color-base-darkest: utils.color('base-darkest'); +$veda-uswds-color-base-light: utils.color('base-light'); +$veda-uswds-color-base-lightest: utils.color('base-lightest'); +$veda-uswds-color-base-ink: utils.color('ink'); + +// SPACING +$veda-uswds-spacing-5: spacing.units(0.5); +$veda-uswds-spacing-105: spacing.units(1.5); +$veda-uswds-spacing-desktop: spacing.units('desktop'); + +//PADDING +$veda-uswds-padding-4: spacing.units(4); +$veda-uswds-padding-5: spacing.units(5); \ No newline at end of file From 18f0173ea701e2729256519612eacc975da44847 Mon Sep 17 00:00:00 2001 From: snmln Date: Mon, 9 Dec 2024 15:15:31 -0500 Subject: [PATCH 3/9] implementing styling and creating interface --- .../components/common/layout-root/index.tsx | 2 +- .../components/common/page-footer/index.tsx | 75 ++++++++++++------- .../components/common/page-footer/styles.scss | 27 +++++-- app/scripts/styles/_uswds-theme.scss | 4 +- app/scripts/styles/_veda-ui-theme-vars.scss | 1 + app/scripts/styles/styles.scss | 5 ++ 6 files changed, 74 insertions(+), 40 deletions(-) diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index ec9e01a62..6e0f9fc36 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -105,7 +105,7 @@ function LayoutRoot(props: { children?: ReactNode }) { )} {isUSWDSEnabled ? ( - + ) : ( )} diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index c182a966b..e9da4c114 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/app/scripts/components/common/page-footer/index.tsx @@ -1,7 +1,6 @@ import React, { ComponentType } from 'react'; -import NasaLogoColor from '../../nasa-logo-color.js'; import { Icon } from '@trussworks/react-uswds'; - +import NasaLogoColor from '../../nasa-logo-color.js'; import { USWDSFooter, USWDSLink, @@ -11,58 +10,73 @@ import { } from '$components/common/uswds'; import './styles.scss'; -export default function PageFooter() { +interface PageFooterProps { + mainNavItems: NavItem[]; + subNavItems: NavItem[]; + logoSvg?: SVGElement | JSX.Element; + linkProperties: LinkProperties; + title: string; + version?: string; + hidefooter?: boolean; +} + +export default function PageFooter({ hidefooter }: PageFooterProps) { const returnToTop = () => { return ( -
+ ); }; + return ( <> -
+
- Primary Link + PrimaryLink )} /> -
- - News and Events - , - - About - , - - Contact Us - - ]} - /> -
+
+
+ + News and Events + , + + About + , + + Contact Us + + ]} + />
} secondary={ -
+