Add Lock Icon to Figure component for restricted works

README.md

@@ -121,3 +121,9 @@ https://pylxu5f2l2.execute-api.us-east-1.amazonaws.com/v2/collections/18ec4c6b-1
 
 https://pylxu5f2l2.execute-api.us-east-1.amazonaws.com/v2/file-sets/ce1f6d18-8563-4f70-aabc-d4ce1688d8dc
 ```
+
+## Design
+
+### Icons
+
+Manually sourced from [Iconicons](https://ionic.io/ionicons) and locally created in `components/Shared/SVG/Icons.tsx`, as opposed to including the entire NPM package direct.

components/Figure/Figure.styled.ts

@@ -1,4 +1,5 @@
 import { VariantProps, styled } from "@/stitches.config";
+import { IconLock } from "@/components/Shared/SVG/Icons";
 
 /* eslint sort-keys: 0 */
 
@@ -17,30 +18,53 @@ const SupplementalInfo = styled("span", {
 });
 
 const Title = styled("span", {
-  marginTop: "$3",
   fontSize: "$3",
   fontFamily: "$sansRegular",
   color: "$purple",
-  display: "block",
+  display: "flex",
+  alignItems: "flex-start",
+});
+
+const TitleWrapper = styled("div", {
+  display: "flex",
+  flexDirection: "column",
 });
 
+IconLock.toString = () => ".icon-lock";
+
 const FigureStyled = styled("figure", {
   display: "flex",
   flexDirection: "column",
   paddingBottom: "1rem",
+  position: "relative",
   margin: "0",
   color: "transparent",
   width: "100%",
 
   figcaption: {
+    marginTop: "$3",
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
   },
 
   [`&[data-orientation=horizontal]`]: {
     flexDirection: "row",
   },
 
+  [`& ${IconLock}`]: {
+    width: "28px",
+    flexShrink: 0,
+    fill: "white",
+    marginRight: "$gr1",
+    marginTop: "-28px",
+    padding: "6px",
+    backgroundColor: "$purple",
+    borderRadius: "50%",
+    zIndex: "1",
+  },
+
   variants: {
     isPromoted: {
       true: {
@@ -61,4 +85,4 @@ const FigureStyled = styled("figure", {
 
 export type FigureVariants = VariantProps<typeof FigureStyled>;
 
-export { FigureStyled, Image, Title, SupplementalInfo };
+export { FigureStyled, Image, Title, TitleWrapper, SupplementalInfo };

components/Figure/Figure.tsx

@@ -4,11 +4,14 @@ import {
   Image,
   SupplementalInfo,
   Title,
+  TitleWrapper,
 } from "@/components/Figure/Figure.styled";
+import { IconLock } from "@/components/Shared/SVG/Icons";
 import LoadingBox from "@/components/Shared/LoadingBox";
 import React from "react";
 
 interface Figure {
+  isRestricted?: boolean;
   title: string;
   src: string;
   supplementalInfo?: string;
@@ -23,7 +26,7 @@ const Figure: React.FC<FigureProps & FigureVariants> = (props) => {
   const [isLoaded, setIsLoaded] = React.useState<boolean>(false);
 
   const { data, orientation } = props;
-  const { title, supplementalInfo, src } = data;
+  const { isRestricted, title, supplementalInfo, src } = data;
 
   const handleOnLoad = () => {
     setIsLoaded(true);
@@ -40,17 +43,22 @@ const Figure: React.FC<FigureProps & FigureVariants> = (props) => {
   return (
     <FigureStyled data-orientation={orientation} {...props}>
       {!isLoaded && <LoadingBox />}
+
       <Image
         src={src}
         alt={title}
         onLoad={handleOnLoad}
         onError={handleOnError}
+        {...(isRestricted && { css: { opacity: "0.7" } })}
       />
       <figcaption>
-        <Title>{title}</Title>
-        {supplementalInfo && (
-          <SupplementalInfo>{supplementalInfo}</SupplementalInfo>
-        )}
+        <TitleWrapper>
+          <Title>{title}</Title>
+          {supplementalInfo && (
+            <SupplementalInfo>{supplementalInfo}</SupplementalInfo>
+          )}
+        </TitleWrapper>
+        {isRestricted && <IconLock aria-hidden="true" />}
       </figcaption>
     </FigureStyled>
   );

components/Grid/Grid.tsx

@@ -4,18 +4,41 @@ import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import Figure from "@/components/Figure/Figure";
 import Link from "next/link";
 import { SearchShape } from "@/types/api/response";
+import { UserContext } from "@/pages/_app";
+import { useContext } from "react";
 
 interface GridProps {
   data: SearchShape[];
   info: { total?: number };
 }
 const Grid: React.FC<GridProps> = ({ data = [] }) => {
+  const userContext = useContext(UserContext);
+
   if (!data) return <span>Loading...</span>;
 
+  const isRestricted = (item: SearchShape): boolean => {
+    const { visibility } = item;
+
+    // If Reading room, false
+
+    // User not logged in and visibility !== "Public"
+    if (!userContext?.user && visibility !== "Public") return true;
+
+    return false;
+  };
+
+  /* eslint sort-keys: 0 */
+  const breakpointColumnsObj = {
+    default: 5,
+    1200: 4,
+    992: 3,
+    700: 2,
+  };
+
   return (
     <Container containerType="wide">
       <GridStyled
-        breakpointCols={5}
+        breakpointCols={breakpointColumnsObj}
         className="dc-grid"
         columnClassName="dc-grid-column"
       >
@@ -25,6 +48,7 @@ const Grid: React.FC<GridProps> = ({ data = [] }) => {
               <a>
                 <Figure
                   data={{
+                    isRestricted: isRestricted(item),
                     src: `${DCAPI_ENDPOINT}/works/${item.id}/thumbnail`,
                     supplementalInfo: item.work_type,
                     title: item.title ? item.title : item.accession_number,

components/Shared/SVG/Icons.tsx

@@ -68,6 +68,17 @@ const IconFilter: React.FC = () => (
   </svg>
 );
 
+const IconLock: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon-lock"
+    viewBox="0 0 512 512"
+  >
+    <title>Lock Closed</title>
+    <path d="M368 192h-16v-80a96 96 0 10-192 0v80h-16a64.07 64.07 0 00-64 64v176a64.07 64.07 0 0064 64h224a64.07 64.07 0 0064-64V256a64.07 64.07 0 00-64-64zm-48 0H192v-80a64 64 0 11128 0z" />
+  </svg>
+);
+
 const IconSearch: React.FC = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <title>Search</title>
@@ -106,6 +117,7 @@ export {
   IconChevronDown,
   IconClear,
   IconFilter,
+  IconLock,
   IconSearch,
   IconSocialFacebook,
   IconSocialPinterest,

lib/queries/search.ts

@@ -32,6 +32,7 @@ const querySearchTemplate: ApiSearchRequest = {
     "iiif_manifest",
     "title",
     "thumbnail",
+    "visibility",
     "work_type",
   ],
   query: {

mocks/sample-search-shape.ts

@@ -8,6 +8,7 @@ export const sampleSearchShape: SearchShape[] = [
     thumbnail:
       "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/245eabab-7839-4e13-ab5a-e9d3243250fe/full/!300,300/0/default.jpg",
     title: "",
+    visibility: "Public",
     work_type: "Image",
   },
   {
@@ -17,6 +18,7 @@ export const sampleSearchShape: SearchShape[] = [
     thumbnail:
       "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/4c1c9ab6-72ed-42fa-b273-6acd0cf946dc/full/!300,300/0/default.jpg",
     title: "Cakrasamvara Mandala",
+    visibility: "Public",
     work_type: "Image",
   },
 ];

types/api/request.ts

@@ -51,5 +51,6 @@ export type SearchSource = [
   "iiif_manifest",
   "title",
   "thumbnail",
+  "visibility",
   "work_type"
 ];

types/api/response.ts

@@ -1,6 +1,6 @@
+import { VisibilityStatus, WorkShape } from "@/types/components/works";
 import { CollectionShape } from "@/types/components/collections";
 import { ModelName } from "@/types/api/generic";
-import { WorkShape } from "@/types/components/works";
 
 export interface ApiCollectionResponse {
   data: CollectionShape | null;
@@ -47,6 +47,7 @@ export interface ApiResponseDataShape {
   iiif_manifest?: string;
   thumbnail: string;
   title: string;
+  visibility: VisibilityStatus;
 }
 
 /**