From f66018cb8054fe3691b1a2974c09c4e3f2958c20 Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Fri, 27 Sep 2024 12:56:49 +1000
Subject: [PATCH] feat: update backpagehero component with additional "actions"
 to the CTA button (#207)

---
 .../components/BackPageHero/backPageHero.styles.ts |  6 +++---
 .../components/BackPageHero/backPageHero.tsx       |  6 +++++-
 .../components/Actions/actions.styles.ts           | 14 ++++++++++++++
 .../BackPageHero/components/Actions/actions.tsx    | 13 +++++++++++++
 .../CallToActionButton/callToActionButton.tsx      |  5 +++++
 5 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts
 create mode 100644 src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx

diff --git a/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts b/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts
index abf5a32d..e1d35a9f 100644
--- a/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts
+++ b/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 
 export const BackPageHeroHeadline = styled.div`
@@ -10,7 +10,7 @@ export const BackPageHeroHeadline = styled.div`
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -29,7 +29,7 @@ export const CallToActionButton = styled(CTAButton)`
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     justify-self: flex-end;
   }
 `;
diff --git a/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx b/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
index 3f3364bf..34574fc2 100644
--- a/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
+++ b/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx
@@ -17,6 +17,7 @@ import { SubTitle } from "./components/SubTitle/subTitle";
  */
 
 export interface BackPageHeroProps {
+  actions?: ReactNode;
   breadcrumbs?: Breadcrumb[];
   callToAction?: CallToAction;
   children?: ReactNode;
@@ -25,13 +26,15 @@ export interface BackPageHeroProps {
 }
 
 export const BackPageHero = ({
+  actions,
   breadcrumbs,
   callToAction,
   children,
   subTitle,
   title,
 }: BackPageHeroProps): JSX.Element => {
-  const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+  const HeroHeadline =
+    actions || callToAction ? BackPageHeroHeadline : Fragment;
   return (
     <>
       {(breadcrumbs || title) && (
@@ -41,6 +44,7 @@ export const BackPageHero = ({
             {title && <Title title={title} />}
             <SubTitle subTitle={subTitle} />
           </HeroHeader>
+          {actions}
           {callToAction && <CallToActionButton callToAction={callToAction} />}
         </HeroHeadline>
       )}
diff --git a/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts b/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts
new file mode 100644
index 00000000..d50410d8
--- /dev/null
+++ b/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts
@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+
+export const BackPageHeroActions = styled.div`
+  align-items: center;
+  align-self: center;
+  display: flex;
+  gap: 16px;
+  justify-self: flex-start;
+
+  ${mediaTabletUp} {
+    justify-self: flex-end;
+  }
+`;
diff --git a/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx b/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx
new file mode 100644
index 00000000..6e2b85be
--- /dev/null
+++ b/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { BackPageHeroActions } from "./actions.styles";
+
+export interface ActionsProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Actions = ({ children, className }: ActionsProps): JSX.Element => {
+  return (
+    <BackPageHeroActions className={className}>{children}</BackPageHeroActions>
+  );
+};
diff --git a/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx b/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx
index 7160ff97..c1711783 100644
--- a/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx
+++ b/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx
@@ -1,3 +1,4 @@
+import { ButtonProps } from "@mui/material";
 import NLink from "next/link";
 import React, { ElementType } from "react";
 import {
@@ -15,6 +16,7 @@ export interface CallToAction {
 
 export interface CallToActionButtonProps {
   ButtonElType?: ElementType;
+  buttonProps?: Partial<ButtonProps>;
   callToAction: CallToAction;
   className?: string;
   disabled?: boolean;
@@ -22,6 +24,7 @@ export interface CallToActionButtonProps {
 
 export const CallToActionButton = ({
   ButtonElType: Button = ButtonPrimary,
+  buttonProps,
   callToAction,
   className,
   disabled = false,
@@ -36,6 +39,7 @@ export const CallToActionButton = ({
         href="passHref"
         rel={REL_ATTRIBUTE.NO_OPENER}
         target={target || ANCHOR_TARGET.SELF}
+        {...buttonProps}
       >
         {label}
       </Button>
@@ -47,6 +51,7 @@ export const CallToActionButton = ({
       href={url}
       rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
       target={target || ANCHOR_TARGET.BLANK}
+      {...buttonProps}
     >
       {label}
     </Button>