feat: update updates page layout for new mocks (#2495)

@types/theme.d.ts

@@ -1,4 +1,18 @@
 import type {} from "@mui/material/Tabs";
+import type {} from "@mui/material/styles";
+
+/**
+ * Typography definitions.
+ */
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    "text-heading-xsmall": TypographyStyleOptions;
+  }
+
+  interface TypographyVariantsOptions {
+    "text-heading-xsmall"?: TypographyStyleOptions;
+  }
+}
 
 /**
  * Tabs prop options.

components/Layout/components/Content/content.styles.ts

@@ -11,6 +11,7 @@ import {
 import { ThemeProps } from "@databiosphere/findable-ui/lib/theme/theme";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { textHeadingXSmall } from "../../../../styles/mixins/fonts";
 
 interface Props {
   headerHeight: number;
@@ -129,7 +130,7 @@ export const Content = styled.div<Props>`
   }
 
   h3 {
-    ${textHeadingSmall};
+    ${textHeadingXSmall};
     margin: 32px 0 16px;
   }
 

docs/common/frontmatter.ts

@@ -3,5 +3,6 @@ export type Frontmatter = DefaultFrontmatter;
 export interface DefaultFrontmatter {
   description: string;
   hidden?: boolean;
+  outlineMaxDepth?: number;
   title: string;
 }

docs/common/utils.ts

@@ -10,14 +10,21 @@ import {
   SlugByFilePaths,
 } from "../../site-config/data-portal/dev/navigation/entities";
 import { navigation as navigationConfig } from "../../site-config/data-portal/dev/navigation/navigation";
+import { Frontmatter } from "./frontmatter";
 
 /**
  * Filters out headings (H1, and H3-H6) from the outline.
+ * Fontmatter outline max depth may be used to determine the depth of the outline; where the default is H1 - H3.
  * @param outline - Outline item.
+ * @param frontmatter - Frontmatter.
  * @returns true if the heading depth is 2 or 3.
  */
-export function filterOutline(outline: OutlineItem): boolean {
-  return outline.depth > 1 && outline.depth < 4;
+export function filterOutline(
+  outline: OutlineItem,
+  frontmatter: Frontmatter
+): boolean {
+  const { outlineMaxDepth = 4 } = frontmatter;
+  return outline.depth > 1 && outline.depth < outlineMaxDepth;
 }
 
 /**

site-config/data-portal/dev/themeOptions.ts

@@ -1,14 +1,5 @@
-import { tabletUp } from "@databiosphere/findable-ui/lib/theme/common/breakpoints";
-import {
-  TEXT_BODY_LARGE_500,
-  TEXT_HEADING,
-  TEXT_HEADING_LARGE,
-  TEXT_HEADING_SMALL,
-  TEXT_HEADING_XLARGE,
-} from "@databiosphere/findable-ui/lib/theme/common/typography";
 import { ThemeOptions } from "@mui/material";
-
-const FONT_FAMILY_DIN = "'din-2014', sans-serif";
+import { TYPOGRAPHY } from "../../../theme/typography/constants";
 
 export const themeOptions: ThemeOptions = {
   palette: {
@@ -17,52 +8,5 @@ export const themeOptions: ThemeOptions = {
       main: "#1C7CC7",
     },
   },
-  typography: {
-    [TEXT_BODY_LARGE_500]: {
-      fontFamily: FONT_FAMILY_DIN,
-      fontSize: 18,
-      fontWeight: 400,
-    },
-    [TEXT_HEADING]: {
-      fontFamily: FONT_FAMILY_DIN,
-      fontSize: 22,
-      fontWeight: 400,
-      letterSpacing: "normal",
-      [tabletUp]: {
-        fontSize: 26,
-        letterSpacing: "normal",
-      },
-    },
-    [TEXT_HEADING_LARGE]: {
-      fontFamily: FONT_FAMILY_DIN,
-      fontSize: 26,
-      fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere.
-      letterSpacing: "normal",
-      lineHeight: "34px",
-      [tabletUp]: {
-        fontSize: 32,
-        letterSpacing: "normal",
-      },
-    },
-    [TEXT_HEADING_SMALL]: {
-      fontFamily: FONT_FAMILY_DIN,
-      fontSize: 20,
-      fontWeight: 400,
-      letterSpacing: "normal",
-      [tabletUp]: {
-        fontSize: 22,
-        letterSpacing: "normal",
-      },
-    },
-    [TEXT_HEADING_XLARGE]: {
-      fontFamily: FONT_FAMILY_DIN,
-      fontSize: 32,
-      fontWeight: 400,
-      letterSpacing: "normal",
-      [tabletUp]: {
-        fontSize: 42,
-        letterSpacing: "-0.4px",
-      },
-    },
-  },
+  typography: TYPOGRAPHY,
 };

styles/mixins/fonts.ts

@@ -0,0 +1,20 @@
+import { css, SerializedStyles } from "@emotion/react";
+import { TYPOGRAPHY_VARIANT } from "../../theme/typography/types";
+
+/**
+ * Returns typography style for the specified typography variant.
+ * @param TYPOGRAPHY_VARIANT - Typography variant name.
+ * @returns typography styles for the variant.
+ */
+function typographyToCSS(TYPOGRAPHY_VARIANT: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO revisit any.
+  return (props: any): SerializedStyles => {
+    return css`
+      ${props.theme.typography[TYPOGRAPHY_VARIANT]}
+    `;
+  };
+}
+
+export const textHeadingXSmall = typographyToCSS(
+  TYPOGRAPHY_VARIANT.TEXT_HEADING_XSMALL
+);

theme/typography/constants.ts

@@ -0,0 +1,73 @@
+import { tabletUp } from "@databiosphere/findable-ui/lib/theme/common/breakpoints";
+import { CSSProperties } from "@mui/material/styles/createTypography";
+import { TYPOGRAPHY_VARIANT } from "./types";
+
+const FONT_FAMILY_DIN = "'din-2014', sans-serif";
+
+const textBodyLarge500: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 18,
+  fontWeight: 400,
+};
+
+const textHeading: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 22,
+  fontWeight: 400,
+  letterSpacing: "normal",
+  [tabletUp]: {
+    fontSize: 24,
+    letterSpacing: "normal",
+  },
+};
+
+const textHeadingLarge: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 26,
+  fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere.
+  letterSpacing: "normal",
+  lineHeight: "34px",
+  [tabletUp]: {
+    fontSize: 32,
+    letterSpacing: "normal",
+  },
+};
+
+const textHeadingSmall: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 20,
+  fontWeight: 400,
+  letterSpacing: "normal",
+  [tabletUp]: {
+    fontSize: 22,
+    letterSpacing: "normal",
+  },
+};
+
+const textHeadingXLarge: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 32,
+  fontWeight: 400,
+  letterSpacing: "normal",
+  [tabletUp]: {
+    fontSize: 42,
+    letterSpacing: "-0.4px",
+  },
+};
+
+const textHeadingXSmall: CSSProperties = {
+  fontFamily: FONT_FAMILY_DIN,
+  fontSize: 18,
+  fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere.
+  letterSpacing: "normal",
+  lineHeight: "26px",
+};
+
+export const TYPOGRAPHY: Record<TYPOGRAPHY_VARIANT, CSSProperties> = {
+  [TYPOGRAPHY_VARIANT.TEXT_BODY_LARGE_500]: textBodyLarge500,
+  [TYPOGRAPHY_VARIANT.TEXT_HEADING]: textHeading,
+  [TYPOGRAPHY_VARIANT.TEXT_HEADING_LARGE]: textHeadingLarge,
+  [TYPOGRAPHY_VARIANT.TEXT_HEADING_SMALL]: textHeadingSmall,
+  [TYPOGRAPHY_VARIANT.TEXT_HEADING_XSMALL]: textHeadingXSmall,
+  [TYPOGRAPHY_VARIANT.TEXT_HEADING_XLARGE]: textHeadingXLarge,
+};

theme/typography/types.ts

@@ -0,0 +1,8 @@
+export enum TYPOGRAPHY_VARIANT {
+  TEXT_BODY_LARGE_500 = "text-body-large-500",
+  TEXT_HEADING = "text-heading",
+  TEXT_HEADING_LARGE = "text-heading-large",
+  TEXT_HEADING_SMALL = "text-heading-small",
+  TEXT_HEADING_XLARGE = "text-heading-xlarge",
+  TEXT_HEADING_XSMALL = "text-heading-xsmall",
+}

utils/docPages.ts

@@ -56,7 +56,7 @@ export async function getDocsStaticProps(
       layoutStyle: navigationConfig?.layoutStyle ?? null,
       mdxSource,
       navigation: navigationConfig?.navigation ?? null,
-      outline: outline.filter(filterOutline),
+      outline: outline.filter((o) => filterOutline(o, frontmatter)),
       pageTitle: frontmatter.title ?? null,
       themeOptions,
     },