feat: update backpagehero component to optionally render icon and by …

…line (#258)

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

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
+      )}
+    </>
+  );
+};

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
+      )}
+    </>
   );
 };