Skip to content

Commit

Permalink
Merge branch 'main' into feat-publish-veda-ui-to-npm
Browse files Browse the repository at this point in the history
  • Loading branch information
dzole0311 authored Jan 23, 2025
2 parents 9c243e9 + 23e6dcc commit 8cdb238
Show file tree
Hide file tree
Showing 52 changed files with 1,166 additions and 715 deletions.
4 changes: 3 additions & 1 deletion .env
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,6 @@ GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f
SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'

# Enables the refactor page header component that uses the USWDS design system
ENABLE_USWDS_PAGE_HEADER = 'TRUE'
ENABLE_USWDS_PAGE_HEADER = 'TRUE'
# Enables the refactor page footer component that uses the USWDS design system
ENABLE_USWDS_PAGE_FOOTER = 'TRUE'
2 changes: 0 additions & 2 deletions .husky/pre-commit

This file was deleted.

3 changes: 0 additions & 3 deletions .husky/pre-push

This file was deleted.

2 changes: 0 additions & 2 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
__mocks__
.github
.husky
.parcel-cache
content-tests
dist
Expand All @@ -22,5 +21,4 @@ test
.stylelintrc
gulpfile.js
jest.config.js
lint-staged.config.js
posthtml.config.js
2 changes: 1 addition & 1 deletion app/scripts/components/common/card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ function CardComponent(
cardType,
className,
linkLabel,
onCardClickCapture,
onClickCapture: onCardClickCapture,
children: CardContent
};

Expand Down
10 changes: 3 additions & 7 deletions app/scripts/components/common/cookie-consent/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
/** @jsxImportSource @emotion/react */

import React, { useState, useEffect } from 'react';
import { debounce } from 'lodash';
import { Icon } from '@trussworks/react-uswds';
import { css } from '@emotion/react';
import { setCookie, getCookie } from './utils';
import {
USWDSAlert,
USWDSButton,
USWDSButtonGroup
} from '$uswds';
import { USWDSAlert, USWDSButton, USWDSButtonGroup } from '$uswds';

import './index.scss';
interface cookieConsentTheme {
Expand Down Expand Up @@ -164,7 +162,6 @@ export const CookieConsent = ({
>
<Icon.Close
size={3}
// @ts-expect-error css is not assignable to type 'IntrinsicAttributes & USWDSIconProps & SVGProps<SVGSVGElement>'.
css={css`
${transitionSettings}
${themeValueCheck(theme?.iconColor?.default) &&
Expand All @@ -178,7 +175,6 @@ export const CookieConsent = ({

{copy && (
<div
// @ts-expect-error css does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
css={css`
${themeValueCheck(theme?.card?.textColor) &&
`color: ` + theme?.card?.textColor};
Expand Down
20 changes: 19 additions & 1 deletion app/scripts/components/common/layout-root/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ import { useDeepCompareEffect } from 'use-deep-compare';
import styled from 'styled-components';
import { Outlet } from 'react-router';
import { reveal } from '@devseed-ui/animation';
import { NavLink } from 'react-router-dom';

import {
getBannerFromVedaConfig,
getCookieConsentFromVedaConfig,
getSiteAlertFromVedaConfig
} from 'veda';
import MetaTags from '../meta-tags';
import PageFooter from '../page-footer';
import PageFooterLegacy from '../page-footer-legacy';
import NasaLogoColor from '../nasa-logo-color';

const Banner = React.lazy(() => import('../banner'));
const SiteAlert = React.lazy(() => import('../site-alert'));
const CookieConsent = React.lazy(() => import('../cookie-consent'));
Expand All @@ -31,9 +36,11 @@ import {
mainNavItems,
subNavItems
} from '$components/common/page-header/default-config';
import { checkEnvFlag } from '$utils/utils';

const appTitle = process.env.APP_TITLE;
const appDescription = process.env.APP_DESCRIPTION;
const isUswdsFooterEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);

export const PAGE_BODY_ID = 'pagebody';

Expand Down Expand Up @@ -64,6 +71,7 @@ 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
}, []);

const { title, thumbnail, description, hideFooter } =
Expand Down Expand Up @@ -105,7 +113,17 @@ function LayoutRoot(props: { children?: ReactNode }) {
/>
)}
</PageBody>
<PageFooter isHidden={hideFooter} />
{isUswdsFooterEnabled ? (
<PageFooter
mainNavItems={mainNavItems}
subNavItems={subNavItems}
hideFooter={hideFooter}
linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
logoSvg={<NasaLogoColor />}
/>
) : (
<PageFooterLegacy hideFooter={hideFooter} />
)}
</Page>
);
}
Expand Down
452 changes: 245 additions & 207 deletions app/scripts/components/common/nasa-logo-color.js

Large diffs are not rendered by default.

9 changes: 2 additions & 7 deletions app/scripts/components/common/nav-wrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import styled, { css } from 'styled-components';
import { themeVal } from '@devseed-ui/theme-provider';
import { NavLink } from 'react-router-dom';
import { default as PageHeaderLegacy } from './page-header-legacy';
import PageHeaderLegacy from './page-header-legacy';
import PageHeader from './page-header';
import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
import NasaLogoColor from './nasa-logo-color';
Expand Down Expand Up @@ -38,12 +38,7 @@ function NavWrapper(props) {
const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps();

return isUSWDSEnabled ? (
<PageHeader
{...props}
logoSvg={<NasaLogoColor />}
linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
title={appTitle}
/>
<PageHeader {...props} logoSvg={<NasaLogoColor />} title={appTitle} />
) : (
<NavWrapperContainer
id={HEADER_WRAPPER_ID}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const InfoList = styled.dl`
}
`;

function PageFooter(props) {
function PageFooterLegacy(props) {
const nowDate = new Date();

return (
Expand Down Expand Up @@ -174,8 +174,8 @@ function PageFooter(props) {
);
}

export default PageFooter;
export default PageFooterLegacy;

PageFooter.propTypes = {
PageFooterLegacy.propTypes = {
isHidden: T.bool
};
16 changes: 16 additions & 0 deletions app/scripts/components/common/page-footer/default-config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { getFooterSettingsFromVedaConfig } from 'veda';
const defaultFooterSettings = {
secondarySection: {
division: 'NASA EarthData 2024',
version: 'BETA VERSION',
title: 'NASA Official',
name: 'Manil Maskey',
to: '[email protected]',
type: 'email'
},
returnToTop: true
};
const footerSettings =
getFooterSettingsFromVedaConfig() ?? defaultFooterSettings;

export { footerSettings };
97 changes: 97 additions & 0 deletions app/scripts/components/common/page-footer/footer.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React, { ComponentType } from 'react';
import { render, screen } from '@testing-library/react';
import { navItems } from '../../../../../mock/veda.config.js';
import NasaLogoColor from '../nasa-logo-color';
import { NavItem } from '../page-header/types.js';

import PageFooter from './index';

const mockMainNavItems: NavItem[] = navItems.mainNavItems;
const mockSubNavItems: NavItem[] = navItems.subNavItems;
// const mockFooterSettings = footerSettings;
const hideFooter = false;
const mockLinkProperties = {
pathAttributeKeyName: 'to',
LinkElement: 'a' as unknown as ComponentType
};
jest.mock('./default-config', () => ({
footerSettings: {
secondarySection: {
division: 'NASA EarthData 2024',
version: 'BETA VERSION',
title: 'NASA Official',
name: 'test',
to: '[email protected]',
type: 'email'
},
returnToTop: true
}
}));

describe('PageFooter', () => {
afterEach(() => {
jest.clearAllMocks();
});
test('renders the PageFooter', () => {
render(
<PageFooter
mainNavItems={mockMainNavItems}
subNavItems={mockSubNavItems}
hideFooter={hideFooter}
logoSvg={<NasaLogoColor />}
linkProperties={mockLinkProperties}
/>
);
const footerElement = document.querySelector('footer');

expect(footerElement).toBeInTheDocument();
expect(footerElement).not.toHaveClass('display-none');
});

test('renders correct buttons and links', () => {
render(
<PageFooter
mainNavItems={mockMainNavItems}
subNavItems={mockSubNavItems}
hideFooter={hideFooter}
logoSvg={<NasaLogoColor />}
linkProperties={mockLinkProperties}
/>
);
expect(screen.getByText('Data Catalog')).toBeInTheDocument();
expect(screen.getByText('Exploration')).toBeInTheDocument();
expect(screen.getByText('Stories')).toBeInTheDocument();

expect(screen.getByText('About')).toBeInTheDocument();
expect(screen.getByText('Return to top')).toBeInTheDocument();
});
});

describe('PageFooter dynamic settings', () => {
test('Hide footer should function correctly', () => {
jest.mock('./default-config', () => ({
footerSettings: {
secondarySection: {
division: 'NASA EarthData 2024',
version: 'BETA VERSION',
title: 'NASA Official',
name: 'test',
to: '[email protected]',
type: 'email'
},
returnToTop: true
}
}));
render(
<PageFooter
linkProperties={mockLinkProperties}
mainNavItems={mockMainNavItems}
subNavItems={mockSubNavItems}
hideFooter={true}
logoSvg={<NasaLogoColor />}
/>
);
const footerElement = document.querySelector('footer');
expect(footerElement).toHaveClass('display-none');
});
});
Loading

0 comments on commit 8cdb238

Please sign in to comment.