Skip to content

Commit

Permalink
Merge pull request #444 from NYPL/SFR-1721_remove_template_footer
Browse files Browse the repository at this point in the history
SFR-1721: Remove TemplateFooter and upgrade DS
  • Loading branch information
jackiequach authored Sep 21, 2023
2 parents 3890fc5 + 7e15dc3 commit 3060540
Show file tree
Hide file tree
Showing 16 changed files with 1,667 additions and 1,111 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@

- Fix: Small adjustments to Playwright tests
- Upgrade testing-library packages to v14 and jest to v29
- Remove TemplateFooter components
- Replace Template components with custom DrbTemplate component to reduce repeat components
- Upgrade to NYPL Design System 1.7.3

## [0.17.4]

Expand Down
1,546 changes: 1,033 additions & 513 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"dependencies": {
"@chakra-ui/react": "2.5.4",
"@newrelic/next": "^0.6.0",
"@nypl/design-system-react-components": "^1.5.4",
"@nypl/design-system-react-components": "^1.7.3",
"@nypl/web-reader": "^4.3.1",
"@types/node": "^16.11.6",
"css-loader": "^6.5.0",
Expand Down
39 changes: 13 additions & 26 deletions src/components/About/About.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,18 @@
import React from "react";
import {
Breadcrumbs,
Heading,
Template,
TemplateBreakout,
TemplateContent,
TemplateContentPrimary,
TemplateFooter,
} from "@nypl/design-system-react-components";
import { defaultBreadcrumbs } from "~/src/constants/labels";
import { Heading } from "@nypl/design-system-react-components";
import Link from "../Link/Link";
import DrbTemplate, {
DrbBreakout,
DrbContent,
DrbContentPrimary,
} from "../DrbTemplate/DrbTemplate";

const About: React.FC = () => {
return (
<Template>
<TemplateBreakout>
<Breadcrumbs
breadcrumbsType="research"
breadcrumbsData={[
...defaultBreadcrumbs,
{ url: "/about", text: "About" },
]}
/>
</TemplateBreakout>
<TemplateContent>
<TemplateContentPrimary>
<DrbTemplate>
<DrbBreakout breadcrumbsData={[{ url: "/about", text: "About" }]} />
<DrbContent>
<DrbContentPrimary>
<Heading level="one">
<span>
<span className="rn-section-title__emphasis">
Expand Down Expand Up @@ -119,10 +107,9 @@ const About: React.FC = () => {
think. If there are things you like or dislike, if there’s a feature
missing, if you find an error please tell us in the feedback!
</p>
</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter />
</Template>
</DrbContentPrimary>
</DrbContent>
</DrbTemplate>
);
};

Expand Down
5 changes: 1 addition & 4 deletions src/components/About/__snapshots__/About.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ exports[`renders about unchanged 1`] = `
</title>
<path
clip-rule="evenodd"
d="M10.526 12.871.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 0 1-2.948 0z"
d="M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z"
fill-rule="evenodd"
/>
</svg>
Expand Down Expand Up @@ -228,8 +228,5 @@ exports[`renders about unchanged 1`] = `
</p>
</div>
</main>
<footer
class="css-0"
/>
</div>
`;
47 changes: 19 additions & 28 deletions src/components/AdvancedSearch/AdvancedSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
} from "~/src/util/SearchQueryUtils";
import {
errorMessagesText,
defaultBreadcrumbs,
breadcrumbTitles,
inputTermRows,
} from "~/src/constants/labels";
Expand All @@ -20,7 +19,6 @@ import {
} from "~/src/types/SearchQuery";

import {
Breadcrumbs,
Button,
ButtonGroup,
Checkbox,
Expand All @@ -29,12 +27,6 @@ import {
FormRow,
Heading,
HelperErrorText,
Template,
TemplateBreakout,
TemplateContent,
TemplateContentPrimary,
TemplateContentTop,
TemplateFooter,
TextInput,
} from "@nypl/design-system-react-components";
import LanguageAccordion from "../LanguageAccordion/LanguageAccordion";
Expand All @@ -44,6 +36,12 @@ import { toLocationQuery, toApiQuery } from "~/src/util/apiConversion";
import filterFields from "~/src/constants/filters";
import { ApiLanguageResponse } from "~/src/types/LanguagesQuery";
import { trackCtaClick } from "~/src/lib/Analytics";
import DrbTemplate, {
DrbBreakout,
DrbContent,
DrbContentPrimary,
DrbContentTop,
} from "../DrbTemplate/DrbTemplate";

const AdvancedSearch: React.FC<{
languages: ApiLanguageResponse;
Expand Down Expand Up @@ -198,30 +196,24 @@ const AdvancedSearch: React.FC<{
setGovDocFilter({ field: filterFields.govDoc, value: "all" });
}
};

return (
<Template>
<TemplateBreakout>
<Breadcrumbs
breadcrumbsType="research"
breadcrumbsData={[
...defaultBreadcrumbs,
{ url: "/advanced-search", text: breadcrumbTitles.advancedSearch },
]}
/>
</TemplateBreakout>
<TemplateContent>
<TemplateContentTop>
<DrbTemplate>
<DrbBreakout
breadcrumbsData={[
{ url: "/advanced-search", text: breadcrumbTitles.advancedSearch },
]}
/>
<DrbContent>
<DrbContentTop>
<Heading level="one">Advanced Search</Heading>
{emptySearchError && (
<HelperErrorText text={errorMessagesText.emptySearch} isInvalid />
)}
{dateRangeError && (
<HelperErrorText text={errorMessagesText.invalidDate} isInvalid />
)}
</TemplateContentTop>

<TemplateContentPrimary>
</DrbContentTop>
<DrbContentPrimary>
<Form action="/search" method="get" id="search-form">
{/* Search Terms */}
{inputTermRows.map(
Expand Down Expand Up @@ -317,10 +309,9 @@ const AdvancedSearch: React.FC<{
</ButtonGroup>
</FormField>
</Form>
</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter />
</Template>
</DrbContentPrimary>
</DrbContent>
</DrbTemplate>
);
};

Expand Down
59 changes: 27 additions & 32 deletions src/components/Collection/Collection.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
import React, { useState } from "react";
import {
Box,
Breadcrumbs,
Flex,
Form,
Heading,
HorizontalRule,
Pagination,
SimpleGrid,
Template,
TemplateBreakout,
TemplateContent,
TemplateContentPrimary,
TemplateContentTop,
TemplateFooter,
} from "@nypl/design-system-react-components";
import { collectionSortMap } from "~/src/constants/sorts";
import {
toApiCollectionQuery,
toLocationQuery,
} from "~/src/util/apiConversion";
import { defaultBreadcrumbs } from "~/src/constants/labels";
import { truncateStringOnWhitespace } from "~/src/util/Util";
import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard";
import {
Expand All @@ -34,6 +26,13 @@ import { useRouter } from "next/router";
import Loading from "~/src/components/Loading/Loading";
import DrbHero from "../DrbHero/DrbHero";
import { CollectionItem } from "./CollectionItem";
import DrbTemplate, {
DrbBreakout,
DrbContent,
DrbContentPrimary,
DrbContentTop,
DrbHeader,
} from "../DrbTemplate/DrbTemplate";

const Collection: React.FC<{
collectionQuery: CollectionQuery;
Expand Down Expand Up @@ -127,34 +126,31 @@ const Collection: React.FC<{
setCollectionQuery(newCollectionQuery);
sendCollectionQuery(newCollectionQuery);
};

return (
<Template>
<TemplateBreakout>
<Breadcrumbs
breadcrumbsType="research"
breadcrumbsData={[
...defaultBreadcrumbs,
{
url: `/collection/${collectionId}`,
text: truncateStringOnWhitespace(title, MAX_TITLE_LENGTH),
},
]}
/>
<DrbHero />
</TemplateBreakout>

<TemplateContent>
<TemplateContentTop>
<DrbTemplate>
<DrbBreakout
breadcrumbsData={[
{
url: `/collection/${collectionId}`,
text: truncateStringOnWhitespace(title, MAX_TITLE_LENGTH),
},
]}
>
<DrbHeader>
<DrbHero />
</DrbHeader>
</DrbBreakout>
<DrbContent>
<DrbContentTop>
<Heading size="primary" marginBottom="xl">
{`Collection - ${title}`}
</Heading>
<Heading size="secondary" marginBottom="l">
About this collection
</Heading>
<Box>{description}</Box>
</TemplateContentTop>
<TemplateContentPrimary>
</DrbContentTop>
<DrbContentPrimary>
<HorizontalRule bg="section.research.primary" marginBottom="xl" />
<Heading size="secondary">In this collection</Heading>
<Flex justify="space-between" marginBottom="xl" align="center">
Expand Down Expand Up @@ -193,10 +189,9 @@ const Collection: React.FC<{
onPageChange={(e) => onPageChange(e)}
__css={{ paddingTop: "m" }}
/>
</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter />
</Template>
</DrbContentPrimary>
</DrbContent>
</DrbTemplate>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/DrbHero/DrbHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from "react";
export const DrbHero: React.FC = () => {
return (
<Hero
backgroundColor="section.research.primary"
backgroundColor="#00838A !important"
heroType="tertiary"
heading={
<Heading level="one" id="tertiary-hero">
Expand Down
88 changes: 88 additions & 0 deletions src/components/DrbTemplate/DrbTemplate.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import {
Breadcrumbs,
Template,
TemplateBreakout,
TemplateContent,
TemplateContentPrimary,
TemplateContentSidebar,
TemplateContentTop,
TemplateHeader,
} from "@nypl/design-system-react-components";
import { BreadcrumbsDataProps } from "@nypl/design-system-react-components/dist/src/components/Breadcrumbs/Breadcrumbs";
import React from "react";
import { defaultBreadcrumbs } from "~/src/constants/labels";

const DrbBreakout: React.FC<{
children?: React.ReactNode;
breadcrumbsData?: BreadcrumbsDataProps[];
}> = ({ children, breadcrumbsData }) => {
return (
<TemplateBreakout>
<DrbBreadcrumbs breadcrumbsData={breadcrumbsData} />
{children}
</TemplateBreakout>
);
};

const DrbBreadcrumbs: React.FC<{ breadcrumbsData: BreadcrumbsDataProps[] }> = (
props
) => {
const { breadcrumbsData } = props;

const breadcrumbsDataAll = breadcrumbsData
? [...defaultBreadcrumbs, ...breadcrumbsData]
: defaultBreadcrumbs;

return (
<Breadcrumbs
breadcrumbsType="research"
breadcrumbsData={breadcrumbsDataAll}
/>
);
};

const DrbHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return <TemplateHeader>{children}</TemplateHeader>;
};

const DrbContent: React.FC<{
children: React.ReactNode;
sidebar?: "left" | "right" | "none";
}> = ({ children, sidebar }) => {
return <TemplateContent sidebar={sidebar}>{children}</TemplateContent>;
};

const DrbContentTop: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return <TemplateContentTop>{children}</TemplateContentTop>;
};

const DrbContentSidebar: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return <TemplateContentSidebar>{children}</TemplateContentSidebar>;
};

const DrbContentPrimary: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return <TemplateContentPrimary>{children}</TemplateContentPrimary>;
};

export const DrbTemplate: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return <Template>{children}</Template>;
};

export {
DrbBreakout,
DrbHeader,
DrbContent,
DrbContentTop,
DrbContentSidebar,
DrbContentPrimary,
};

export default DrbTemplate;
Loading

1 comment on commit 3060540

@vercel
Copy link

@vercel vercel bot commented on 3060540 Sep 21, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.