feat: add "bread crumbs" to tos and guides (#3740) (#3750)

Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Nov 6, 2023 · 3c3a1a0 · 3c3a1a0
1 parent 520d147
commit 3c3a1a0
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 8 deletions.
diff --git a/explorer/app/components/common/Content/components/Breadcrumbs/breadcrumbs.styles.ts b/explorer/app/components/common/Content/components/Breadcrumbs/breadcrumbs.styles.ts
@@ -0,0 +1,6 @@
+import { Breadcrumbs as DXBreadcrumbs } from "@clevercanary/data-explorer-ui/lib/components/common/Breadcrumbs/breadcrumbs";
+import styled from "@emotion/styled";
+
+export const Breadcrumbs = styled(DXBreadcrumbs)`
+  margin-bottom: 8px;
+`;
diff --git a/explorer/app/components/common/Figure/figure.styles.ts b/explorer/app/components/common/Figure/figure.styles.ts
@@ -2,10 +2,11 @@ import { textBody400 } from "@clevercanary/data-explorer-ui/lib/styles/common/mi
 import styled from "@emotion/styled";
 
 export const Figure = styled.figure`
-  margin: 16px 0;
+  margin: 32px 0;
 
   img {
     margin: 0 auto;
+    max-width: 100%;
   }
 
   figcaption {

diff --git a/explorer/app/content/anvil-cmg/guides.mdx b/explorer/app/content/anvil-cmg/guides.mdx
@@ -1,3 +1,14 @@
+---
+layoutStyle: "DEFAULT"
+---
+
+<Breadcrumbs
+  breadcrumbs={[
+    { path: "/", text: "AnVIL Data Explorer" },
+    { path: "", text: "Guides" },
+  ]}
+/>
+
 # Introducing The AnVIL Data Explorer (Alpha Release)
 
 We are excited to introduce users of the [AnVIL Portal](https://anvilproject.org/) to the [AnVIL Data Explorer](https://prod.anvil.gi.ucsc.edu/explore/datasets) — the AnVIL Data Explorer’s faceted search feature that allows you to create cohorts across datasets based on your sample-level needs.
@@ -139,13 +150,13 @@ Once you’ve completed this step, your workspace will spin up and you can go to
 
 The data you now see in your workspace is incomplete - to retrieve the complete data, you’ll need to run a Jupyter Notebook created for this purpose called \*get_non_findability_subset_data_v7.ipynb\*. We’ve published this notebook in a [public workspace](https://app.terra.bio/#workspaces/anvil-datastorage/AnVIL_Explorer_FSS_Tool) for your convenience. To complete the import process, all you need to do is copy the notebook from the public workspace into the workspace to which you’ve imported your data, and run the notebook from within that workspace.
 
-###### Copy the Notebook
+##### Copy the Notebook
 
 Go to the public workspace containing the AnVIL FSS tool notebook, navigate to the Analyses section, and use the three-dot menu to the right of the notebook name to find the option to copy the notebook to another workspace:
 
 <Figure alt="Copy the Notebook" src="/guides/copy-notebook.png" />
 
-###### Run the Notebook
+##### Run the Notebook
 
 Once the notebook is in the same workspace as the data, set up a Clou open the notebook in edit mode (the default environment is sufficient), and select “Run All” from the Cell menu:
 

diff --git a/explorer/app/content/anvil-cmg/terms-of-service.mdx b/explorer/app/content/anvil-cmg/terms-of-service.mdx
@@ -1,3 +1,14 @@
+---
+layoutStyle: "DEFAULT"
+---
+
+<Breadcrumbs
+  breadcrumbs={[
+    { path: "/", text: "AnVIL Data Explorer" },
+    { path: "", text: "Terms of Service" },
+  ]}
+/>
+
 # Terms of Service
 
 _Welcome to the University of California, Santa Cruz (UCSC) Data Explorer_

diff --git a/explorer/app/content/common/constants.ts b/explorer/app/content/common/constants.ts
@@ -1,7 +1,8 @@
+import { Breadcrumbs } from "../../components/common/Content/components/Breadcrumbs/breadcrumbs.styles";
 import { Figure } from "../../components/common/Figure/figure";
 
 export const CONTENT_FOLDER_NAME = "content";
 
-export const MDX_COMPONENTS = { Figure };
+export const MDX_COMPONENTS = { Breadcrumbs, Figure };
 
 export const MDX_SCOPE = {};
diff --git a/explorer/app/content/hca-dcp/guides.mdx b/explorer/app/content/hca-dcp/guides.mdx
@@ -1,3 +1,14 @@
+---
+layoutStyle: "DEFAULT"
+---
+
+<Breadcrumbs
+  breadcrumbs={[
+    { path: "/", text: "HCA Data Explorer" },
+    { path: "", text: "Guides" },
+  ]}
+/>
+
 # Guides
 
 TODO.
diff --git a/explorer/app/content/hca-dcp/terms-of-service.mdx b/explorer/app/content/hca-dcp/terms-of-service.mdx
@@ -1,3 +1,14 @@
+---
+layoutStyle: "DEFAULT"
+---
+
+<Breadcrumbs
+  breadcrumbs={[
+    { path: "/", text: "HCA Data Explorer" },
+    { path: "", text: "Terms of Service" },
+  ]}
+/>
+
 # Terms of Service
 
 TODO.
diff --git a/explorer/site-config/anvil-cmg/dev/content/contentThemeOptions.ts b/explorer/site-config/anvil-cmg/dev/content/contentThemeOptions.ts
@@ -1,14 +1,53 @@
-import { TEXT_HEADING_LARGE } from "@clevercanary/data-explorer-ui/lib/theme/common/typography";
+import {
+  TEXT_BODY_LARGE_400_2_LINES,
+  TEXT_BODY_LARGE_500,
+  TEXT_HEADING,
+  TEXT_HEADING_LARGE,
+  TEXT_HEADING_SMALL,
+} from "@clevercanary/data-explorer-ui/lib/theme/common/typography";
 import { Theme, ThemeOptions } from "@mui/material";
 
 export const contentThemeOptions = (theme: Theme): ThemeOptions => {
   return {
     components: {
       MuiCssBaseline: {
         styleOverrides: {
+          a: {
+            color: "inherit",
+            textDecoration: "underline",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+              textDecoration: "none",
+            },
+          },
           h1: {
             ...theme.typography[TEXT_HEADING_LARGE],
-            margin: "0 0 8px",
+            margin: "0 0 16px",
+          },
+          h2: {
+            ...theme.typography[TEXT_HEADING],
+            margin: "32px 0 16px",
+          },
+          h3: {
+            ...theme.typography[TEXT_HEADING_SMALL],
+            margin: "40px 0 16px",
+          },
+          h4: {
+            ...theme.typography[TEXT_BODY_LARGE_500],
+            margin: "16px 0",
+          },
+          p: {
+            ...theme.typography[TEXT_BODY_LARGE_400_2_LINES],
+            margin: "0 0 16px",
+          },
+          ul: {
+            ...theme.typography[TEXT_BODY_LARGE_400_2_LINES],
+            margin: "16px 0",
+            padding: "0 0 0 24px",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            li: {
+              margin: "8px 0",
+            },
           },
         },
       },

diff --git a/explorer/site-config/hca-dcp/dev/content/contentThemeOptions.ts b/explorer/site-config/hca-dcp/dev/content/contentThemeOptions.ts
@@ -1,14 +1,53 @@
-import { TEXT_HEADING_LARGE } from "@clevercanary/data-explorer-ui/lib/theme/common/typography";
+import {
+  TEXT_BODY_LARGE_400_2_LINES,
+  TEXT_BODY_LARGE_500,
+  TEXT_HEADING,
+  TEXT_HEADING_LARGE,
+  TEXT_HEADING_SMALL,
+} from "@clevercanary/data-explorer-ui/lib/theme/common/typography";
 import { Theme, ThemeOptions } from "@mui/material";
 
 export const contentThemeOptions = (theme: Theme): ThemeOptions => {
   return {
     components: {
       MuiCssBaseline: {
         styleOverrides: {
+          a: {
+            color: "inherit",
+            textDecoration: "underline",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+              textDecoration: "none",
+            },
+          },
           h1: {
             ...theme.typography[TEXT_HEADING_LARGE],
-            margin: "0 0 8px",
+            margin: "0 0 16px",
+          },
+          h2: {
+            ...theme.typography[TEXT_HEADING],
+            margin: "32px 0 16px",
+          },
+          h3: {
+            ...theme.typography[TEXT_HEADING_SMALL],
+            margin: "40px 0 16px",
+          },
+          h4: {
+            ...theme.typography[TEXT_BODY_LARGE_500],
+            margin: "16px 0",
+          },
+          p: {
+            ...theme.typography[TEXT_BODY_LARGE_400_2_LINES],
+            margin: "0 0 16px",
+          },
+          ul: {
+            ...theme.typography[TEXT_BODY_LARGE_400_2_LINES],
+            margin: "16px 0",
+            padding: "0 0 0 24px",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            li: {
+              margin: "8px 0",
+            },
           },
         },
       },