Merge branch 'DR-3361/collection-page-layout' into DR-3363/search-res…

…ult-card
NYPL · Jan 29, 2025 · c4bb26e · c4bb26e
2 parents a770219 + 194b8b4
commit c4bb26e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 15 deletions.
diff --git a/app/src/components/pages/collectionPage/collectionPage.tsx b/app/src/components/pages/collectionPage/collectionPage.tsx
@@ -28,6 +28,7 @@ const textLink = (href, text) => {
         textDecorationLine: "underline",
         lineHeight: "150%",
         textUnderlinePosition: "from-font",
+        textDecorationThickness: "1px",
       }}
       href={href}
     >
@@ -61,16 +62,19 @@ const CollectionPage = ({ slug, data }) => {
           >
             {slug}
           </Heading>
-          <Filters headingText="Refine your results" />
+          <Filters headingText="Search this collection" />
         </Box>
       </Box>
       <Box
         maxWidth="1280px"
         mx="auto"
-        sx={{ paddingLeft: { base: 0, xl: "s" } }}
+        sx={{
+          paddingLeft: { base: "m", xl: "s" },
+          paddingRight: { base: "m", xl: "s" },
+        }}
       >
         <HorizontalRule />
-        <Flex alignContent="center" gap="xs">
+        <Flex alignContent="center" alignItems="center" gap="xs">
           <Text size="subtitle2" sx={{ margin: 0, fontWeight: 400 }}>
             Filters applied:
           </Text>
@@ -121,7 +125,12 @@ const CollectionPage = ({ slug, data }) => {
             See more collection data
           </Link>
         </Flex>
-        <Flex gap="xxl" sx={{ flexDir: { base: "column", md: "row" } }}>
+        <Flex
+          gap="xxl"
+          sx={{
+            flexDir: { base: "column", md: "row" },
+          }}
+        >
           <Box
             sx={{
               background: "ui.bg.default",

diff --git a/app/src/components/pages/searchPage/searchPage.tsx b/app/src/components/pages/searchPage/searchPage.tsx
@@ -51,7 +51,10 @@ const SearchPage = ({ data }) => {
       <Box
         maxWidth="1280px"
         mx="auto"
-        sx={{ paddingLeft: { base: 0, xl: "s" } }}
+        sx={{
+          paddingLeft: { base: "m", xl: "s" },
+          paddingRight: { base: "m", xl: "s" },
+        }}
       >
         <HorizontalRule />
         <Flex alignContent="center" gap="xs">

diff --git a/app/src/components/search/filters.tsx b/app/src/components/search/filters.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 import {
   Button,
-  Checkbox,
-  CheckboxGroup,
+  Text,
+  Flex,
   Grid,
   Heading,
   Icon,
   MultiSelect,
+  Radio,
+  RadioGroup,
+  TextInput,
   Tooltip,
 } from "@nypl/design-system-react-components";
 
@@ -19,7 +22,6 @@ const exampleFacetCategories = [
   "Publishers",
   "Division",
   "Type",
-  "Date Range",
 ];
 
 const exampleMultiSelect = (name: string) => {
@@ -71,19 +73,46 @@ const Filters = ({ headingText }) => {
       </Grid>
       {isExpanded && (
         <>
-          <Heading size="heading4">Show only:</Heading>
-          <CheckboxGroup
+          <Heading size="heading6">Date range:</Heading>
+          <Flex gap="s" alignItems="center" marginBottom="m">
+            <TextInput
+              width="100px"
+              id="dateStart"
+              labelText="Start year"
+              placeholder="Start year"
+              showLabel={false}
+            />
+            <Text sx={{ marginBottom: "0" }}> to </Text>
+            <TextInput
+              width="100px"
+              id="dateStart"
+              labelText="End year"
+              showLabel={false}
+              placeholder="End year"
+            />
+            <Button id="date-filter-btn">Apply dates</Button>
+          </Flex>
+          <Heading size="heading6">Show only:</Heading>
+          <RadioGroup
             name="show-only-filters"
             id="show-only-filters"
             labelText="Show Only"
             showLabel={false}
             layout="row"
             marginBottom="m"
           >
-            <Checkbox id="pd-checkbox" labelText="Public domain" />
-            <Checkbox id="online-checkbox" labelText="Available online" />
-            <Checkbox
-              id="onsite-checkbox"
+            <Radio
+              id="pd-checkbox"
+              labelText="Public domain"
+              value="pd-radio"
+            />
+            <Radio
+              id="online-radio"
+              labelText="Available online"
+              value="online-radio"
+            />
+            <Radio
+              id="onsite-radio"
               labelText={
                 <Tooltip content="Somethin about on-site materials...missing copy">
                   <span>
@@ -96,8 +125,9 @@ const Filters = ({ headingText }) => {
                   </span>
                 </Tooltip>
               }
+              value="onsite-radio"
             />
-          </CheckboxGroup>
+          </RadioGroup>
         </>
       )}
       <Button