[C] breadcrumbs and related content

components/dynamic/DataProductsList/index.js

@@ -0,0 +1,65 @@
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Grid } from "@rubin-epo/epo-react-lib";
+import DataList from "@/dynamic/DataList";
+import Tile from "@/atomic/Tile";
+import { makeTruncatedString } from "@/lib/utils";
+
+const DataProductsList = ({
+  component,
+  excludeId = null,
+  header,
+  limit = 15,
+  button,
+  isWide = false,
+  isRelatedList = false,
+}) => {
+  const { t } = useTranslation();
+  const cols = limit === 4 ? 4 : 3;
+
+  return (
+    <DataList
+      component={component}
+      excludeId={excludeId}
+      limit={limit}
+      section="dataProducts"
+      header={header}
+      width={isWide ? "regular" : "narrow"}
+      footerButton={button}
+      isRelatedList={isRelatedList}
+      loaderDescription={t("loading")}
+    >
+      {({ entries }) => (
+        <>
+          {entries?.length > 0 && (
+            <Grid columns={cols}>
+              {entries.map(({ id, description, image, title, uri }) => (
+                <Tile
+                  key={id}
+                  title={title}
+                  text={makeTruncatedString(description, 30)}
+                  image={image?.[0]}
+                  link={uri}
+                  type="pages"
+                  showSharePopup
+                />
+              ))}
+            </Grid>
+          )}
+        </>
+      )}
+    </DataList>
+  );
+};
+
+DataProductsList.propTypes = {
+  component: PropTypes.string,
+  excludeId: PropTypes.string,
+  limit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  header: PropTypes.string,
+  button: PropTypes.object,
+  isWide: PropTypes.bool,
+  isRelatedList: PropTypes.bool,
+};
+
+export default DataProductsList;

components/page/Aside/styles.js

@@ -12,10 +12,11 @@ export const Aside = styled.aside`
   flex-shrink: 0;
   flex-wrap: wrap;
   gap: var(--size-gap-aside);
-  margin-block-start: min(4.25vw, 64px);
+  padding: 0;
+  margin: 0;
 
   & a {
-    font-size: 65%;
+    font-size: 14px;
     color: var(--color-background-accent-aside);
     text-decoration: none;
 
@@ -39,6 +40,7 @@ export const Aside = styled.aside`
   @media screen and (min-width: ${token("BREAK_DESKTOP_SMALL")}) {
     flex-direction: column;
     gap: 0;
+    padding: var(--PADDING_LARGE) 0 var(--PADDING_LARGE) 10px;
 
     > * + * {
       margin-block-start: 1em;

components/page/PageContent/index.js

@@ -22,7 +22,7 @@ function PageContent({
             {innerHero}
           </Styled.Hero>
         )}
-        <Styled.FullLayout $hasSidebar={hasSidebar}>
+        <Styled.FullLayout data-sidebar={hasSidebar}>
           <div>{children}</div>
           {sidebar}
         </Styled.FullLayout>
@@ -38,7 +38,7 @@ function PageContent({
           {innerHero}
         </Styled.Hero>
       )}
-      <Styled.OverlapLayout $hasSidebar={hasSidebar}>
+      <Styled.OverlapLayout data-sidebar={hasSidebar}>
         <Styled.Main>{children}</Styled.Main>
         {sidebar}
       </Styled.OverlapLayout>

components/page/PageContent/styles.js

@@ -8,8 +8,9 @@ import {
   tokens,
   PADDING_LARGE,
 } from "@/styles/globalStyles";
+import { token } from "@rubin-epo/epo-react-lib";
 
-const WIDE_BREAKPOINT = "1125px";
+const WIDE_BREAKPOINT = token("BREAK_DESKTOP_SMALL");
 const NARROW_BREAKPOINT = "800px";
 const MOBILE_BREAKPOINT = "475px";
 const HERO_OVERLAP = "clamp(-150px, -10vw, -80px)";
@@ -28,32 +29,46 @@ export const Hero = styled(HeroComponent)`
 `;
 
 export const FullLayout = styled.article`
-  ${({ $hasSidebar }) =>
-    $hasSidebar
-      ? `
-      display: flex;
-      ${containerRegular()}`
-      : ``}
-
-  ${respond(`display: block;`, WIDE_BREAKPOINT)}
+  &[data-sidebar="false"] {
+    display: block;
+  }
+
+  &[data-sidebar="true"] {
+    display: flex;
+    flex-direction: column;
+    ${containerRegular()}
+  }
+
+  @media screen and (min-width: ${WIDE_BREAKPOINT}) {
+    &[data-sidebar="true"] {
+      flex-direction: row;
+    }
+  }
 `;
 
 export const OverlapLayout = styled.article`
   --hero-overlap: ${HERO_OVERLAP};
 
-  display: flex;
-  ${({ $hasSidebar }) =>
-    $hasSidebar
-      ? containerRegular()
-      : `
+  &[data-sidebar="false"] {
+    display: block;
     ${containerNarrow()}
     max-width: calc(var(--max-width) + 2 * ${MAIN_INLINE_PADDING});
-  `}
+  }
 
-  ${respond(`display: block;`, WIDE_BREAKPOINT)}
+  &[data-sidebar="true"] {
+    display: flex;
+    flex-direction: column;
+    ${containerRegular()}
+  }
 
   ${respond(`padding-inline: 0;`, NARROW_BREAKPOINT)}
 
+  @media screen and (min-width: ${WIDE_BREAKPOINT}) {
+    &[data-sidebar="true"] {
+      flex-direction: row;
+    }
+  }
+
   &:last-child {
     padding-block-end: ${PADDING_LARGE};
   }

components/templates/DataProductPage/index.js

@@ -1,36 +1,63 @@
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 import { Container } from "@rubin-epo/epo-react-lib";
+import { useCustomBreadcrumbs } from "@/lib/utils";
 import Body from "@/global/Body";
 import PageContent from "@/page/PageContent";
 import MediaAside from "@/components/page/Aside/patterns/Media";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
+import DataProductsList from "@/components/dynamic/DataProductsList";
+import Breadcrumbs from "@/page/Breadcrumbs";
 
 const DataProductPage = ({
   data: {
     id,
+    uri,
     title,
     description,
-    typeHandle,
-    siteHandle,
     featuredImage = [],
     sidebarAssets = [],
     contentBlocks = [],
   },
 }) => {
+  const { t } = useTranslation();
+
   const bodyProps = {
     description,
     featuredImage,
     title,
   };
+  const pageLink = {
+    id,
+    uri,
+    title,
+  };
+  const breadcrumbs = useCustomBreadcrumbs("For Scientists");
+  const backPage = breadcrumbs[breadcrumbs.length - 1];
+
   return (
     <Body {...bodyProps}>
+      <Breadcrumbs breadcrumbs={[...breadcrumbs, pageLink]} />
       <PageContent
         sidebar={
           <MediaAside
             manualAssets={sidebarAssets}
             contentBlockAssets={contentBlocks}
           />
         }
+        footer={
+          <DataProductsList
+            excludeId={id}
+            header={t(`related-content`)}
+            limit={3}
+            button={{
+              text: t(`back`),
+              uri: backPage?.uri,
+            }}
+            isWide
+            isRelatedList
+          />
+        }
       >
         <Container bgColor="white" className="c-page-header" width="narrow">
           <h1>{title}</h1>

components/templates/NewsPage/styles.js

@@ -8,7 +8,7 @@ import {
   tokens,
 } from "@/styles/globalStyles";
 import { aHidden } from "@/styles/mixins/appearance";
-import { IconComposer, Image } from "@rubin-epo/epo-react-lib";
+import { IconComposer, Image, token } from "@rubin-epo/epo-react-lib";
 
 export const Hero = styled.div`
   ${containerFullBleed("CONTAINER_FULL")}
@@ -69,12 +69,9 @@ export const Article = styled.article`
 export const NewsDetail = styled.div`
   ${containerFullBleed("CONTAINER_REGULAR")}
   display: grid;
-  ${(props) =>
-    props.$showAside
-      ? "grid-template-columns: minmax(75%, 1fr) minmax(25%, 250px)"
-      : "grid-template-columns: 1fr"};
+  grid-template-columns: 1fr;
+
   ${respond(`${containerWide()}`, "1360px")}
-  ${respond(`grid-template-columns: 1fr;`)}
   ${(props) =>
     props.$showAside &&
     `${Article} > section > div {
@@ -96,6 +93,13 @@ export const NewsDetail = styled.div`
       }
     }
   `}
+
+  @media screen and (min-width: ${token("BREAK_DESKTOP_SMALL")}) {
+    ${(props) =>
+      props.$showAside
+        ? "grid-template-columns: minmax(75%, 1fr) minmax(25%, 250px)"
+        : "grid-template-columns: 1fr"};
+  }
 `;
 
 export const Pretitle = styled.div`

components/templates/StaffPage/index.js

@@ -11,7 +11,6 @@ import Breadcrumbs from "@/page/Breadcrumbs";
 import PageContent from "@/page/PageContent";
 import * as Styled from "./styles";
 import Aside from "@/components/page/Aside";
-import AsideSection from "@/components/page/Aside/Section";
 
 function getParentUri(uri) {
   const pathFragments = uri.split("/");
@@ -77,11 +76,11 @@ export default function StaffPage({
             {...{ tags }}
           >
             {tradingCard?.[0] && (
-              <AsideSection title={t("staff.trading-card")}>
+              <Styled.TradingCardSection title={t("staff.trading-card")}>
                 <Styled.TradingCardLink href={tradingCard[0].url3x} download>
                   <Image image={tradingCard[0]} />
                 </Styled.TradingCardLink>
-              </AsideSection>
+              </Styled.TradingCardSection>
             )}
           </Aside>
         }

components/templates/StaffPage/styles.js

@@ -1,9 +1,15 @@
 import styled from "styled-components";
 import { fluidScale, respond, containerRegular } from "@/styles/globalStyles";
+import AsideSection from "@/components/page/Aside/Section";
+import { token } from "@rubin-epo/epo-react-lib";
 
-const WIDE_BREAKPOINT = "1125px";
+const WIDE_BREAKPOINT = token("BREAK_DESKTOP_SMALL");
 const MOBILE_BREAKPOINT = "475px";
 
+export const TradingCardSection = styled(AsideSection)`
+  max-width: var(--size-width-aside);
+`;
+
 export const QuotePositioner = styled.div`
   position: absolute;
   inset-block-start: calc(50% - var(--hero-overlap) * -0.5);

lib/api/entries.js

@@ -12,6 +12,7 @@ import { glossaryTermFragment } from "@/lib/api/fragments/glossary-term";
 import { studentPageFragment } from "./fragments/student-page";
 import { educatorPageFragment } from "./fragments/educator-page";
 import { investigationLandingPageFragment } from "./fragments/investigation-landing-page";
+import { dataProductFragment } from "@/lib/api/fragments/data-product";
 
 function dataListQueryify(fragment) {
   return gql`
@@ -28,15 +29,15 @@ function dataListQueryify(fragment) {
       $date: [QueryArgument]
     ) {
       entries (
-        id: ["not", $excludeId], 
-        section: $section, 
-        site: $site, 
-        relatedTo: $relatedTo, 
-        limit: $limit, 
-        offset: $offset, 
-        orderBy: $orderBy, 
-        inReverse: $inReverse, 
-        search: $search, 
+        id: ["not", $excludeId],
+        section: $section,
+        site: $site,
+        relatedTo: $relatedTo,
+        limit: $limit,
+        offset: $offset,
+        orderBy: $orderBy,
+        inReverse: $inReverse,
+        search: $search,
         date: $date) {
         ${fragment}
       }
@@ -227,6 +228,14 @@ export function useDataList({
           ${dataListQueryify(`...slideshowFragment`)}
         `;
         break;
+      case "dataProducts":
+        theSection = section;
+        theOrderBy = "dateCreated desc";
+        query = gql`
+          ${dataProductFragment}
+          ${dataListQueryify(`...dataProductFragment`)}
+        `;
+        break;
       default: // find a way to pass just news and pages
         theSection = null;
         theOrderBy = "dateUpdated desc";

lib/api/fragments/data-product.js

@@ -9,7 +9,7 @@ export const dataProductFragment = `
     ...on dataProducts_dataProduct_Entry {
       dateCreated
       description
-      featuredImage {
+      image: featuredImage {
         ...on contentImages_Asset {
           ${getImageFields("crop", 900, 550)}
         }

lib/localeStrings/en.json

@@ -29,6 +29,7 @@
     "toggle-nav": "Toggle navigation menu",
     "toggle-search": "Toggle search",
     "homepage": "Homepage",
+    "back": "Back",
     "contact-form": {
       "contact-us": "Contact us",
       "success": "Thank you. We’ve received your message.",