feat: update backpagehero component with additional "actions" to the …

…CTA button (#207)

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;
   }
 `;

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>
       )}

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;
+  }
+`;

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

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,13 +16,15 @@ export interface CallToAction {
 
 export interface CallToActionButtonProps {
   ButtonElType?: ElementType;
+  buttonProps?: Partial<ButtonProps>;
   callToAction: CallToAction;
   className?: string;
   disabled?: boolean;
 }
 
 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>