From e01e3723f7c3d41a1c35d7a90ed47619baeff4e0 Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Fri, 23 Jun 2023 15:33:53 +1000
Subject: [PATCH] feat: update backpagehero component to optionally render icon
 and by line (#258)

---
 .../components/BackPageHero/backPageHero.tsx  | 10 ++++---
 .../components/SubTitle/subTitle.tsx          | 24 +++++++++++++++++
 .../src/components/common/Title/title.tsx     | 27 ++++++++++++++-----
 3 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx

diff --git a/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx b/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
index 174670f1..d4f45fca 100644
--- a/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
+++ b/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, ReactNode } from "react";
 import {
   Breadcrumb,
   Breadcrumbs,
@@ -9,12 +9,13 @@ import {
   Status,
   StatusBadge,
 } from "../../../../../common/StatusBadge/statusBadge";
-import { HeroTitle, Title } from "../../../../../common/Title/title";
+import { Title } from "../../../../../common/Title/title";
 import {
   BackPageHeroHeadline,
   CallToActionButton,
   HeroHeader,
 } from "./backPageHero.styles";
+import { SubTitle } from "./components/SubTitle/subTitle";
 
 /**
  * Back page hero component comprising breadcrumbs, title, status and tabs.
@@ -24,13 +25,15 @@ export interface BackPageHeroProps {
   breadcrumbs?: Breadcrumb[];
   callToAction?: CallToAction;
   status?: Status;
-  title?: HeroTitle;
+  subTitle?: ReactNode;
+  title?: ReactNode;
 }
 
 export const BackPageHero = ({
   breadcrumbs,
   callToAction,
   status,
+  subTitle,
   title,
 }: BackPageHeroProps): JSX.Element => {
   const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
@@ -41,6 +44,7 @@ export const BackPageHero = ({
           <HeroHeader gap={1}>
             {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
             {title && <Title title={title} />}
+            <SubTitle subTitle={subTitle} />
           </HeroHeader>
           {callToAction && (
             <CallToActionButton
diff --git a/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx b/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx
new file mode 100644
index 00000000..2d970faa
--- /dev/null
+++ b/packages/data-explorer-ui/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx
@@ -0,0 +1,24 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../../../theme/common/typography";
+
+export interface SubTitleProps {
+  subTitle?: ReactNode;
+}
+
+export const SubTitle = ({
+  subTitle,
+  ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */
+}: SubTitleProps): JSX.Element => {
+  return (
+    <>
+      {typeof subTitle === "string" ? (
+        <Typography color="ink.light" variant={TEXT_BODY_SMALL_400} {...props}>
+          {subTitle}
+        </Typography>
+      ) : (
+        subTitle
+      )}
+    </>
+  );
+};
diff --git a/packages/data-explorer-ui/src/components/common/Title/title.tsx b/packages/data-explorer-ui/src/components/common/Title/title.tsx
index f298856d..5d64ebc6 100644
--- a/packages/data-explorer-ui/src/components/common/Title/title.tsx
+++ b/packages/data-explorer-ui/src/components/common/Title/title.tsx
@@ -1,16 +1,31 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import React, { ReactNode } from "react";
+import { TEXT_HEADING_LARGE } from "../../../theme/common/typography";
 
-export type HeroTitle = string;
+export type HeroTitle = ReactNode;
 
 export interface TitleProps {
   title: HeroTitle;
 }
 
-export const Title = ({ title }: TitleProps): JSX.Element => {
+export const Title = ({
+  title,
+  ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */
+}: TitleProps): JSX.Element => {
   return (
-    <Typography color="ink.main" component="h1" variant="text-heading-large">
-      {title}
-    </Typography>
+    <>
+      {typeof title === "string" ? (
+        <Typography
+          color="ink.main"
+          component="h1"
+          variant={TEXT_HEADING_LARGE}
+          {...props}
+        >
+          {title}
+        </Typography>
+      ) : (
+        title
+      )}
+    </>
   );
 };