From fe8ccd710352c6e8d40e2a6f5a70a303fca99e1d Mon Sep 17 00:00:00 2001
From: Blake Mason <bmason@lsst.org>
Date: Tue, 26 Mar 2024 15:07:13 -0700
Subject: [PATCH] [F] Callout layouts when no image

---
 .../Callout/CalloutEntry/index.js             |  8 +++--
 .../Callout/CalloutEntry/styles.js            | 34 +++++++++++++------
 .../content-blocks/Callout/CalloutMain.js     |  1 +
 .../content-blocks/Callout/CalloutTwoTone.js  |  7 +++-
 components/content-blocks/Callout/Wrapper.js  | 10 +++++-
 components/content-blocks/Callout/styles.js   | 10 ++++++
 6 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/components/content-blocks/Callout/CalloutEntry/index.js b/components/content-blocks/Callout/CalloutEntry/index.js
index caf6ace0..2bca3309 100644
--- a/components/content-blocks/Callout/CalloutEntry/index.js
+++ b/components/content-blocks/Callout/CalloutEntry/index.js
@@ -68,7 +68,7 @@ export default function CalloutEntry({ callout }) {
 
   return (
     <Styled.Section $bgColor={backgroundColor} $width="full" $overlay={false}>
-      <Styled.Inner href={url} aria-labelledby={titleId}>
+      <Styled.Inner $isImage={!!calloutImage}>
         {calloutImage && (
           <Styled.ImageWrapper>
             <Image role="presentation" ratio="4:3" image={calloutImage} />
@@ -88,7 +88,11 @@ export default function CalloutEntry({ callout }) {
           />
         )}
         <Styled.Footer>
-          <Styled.FooterButton className={`c-buttonish c-buttonish--inert`}>
+          <Styled.FooterButton
+            href={url}
+            aria-labelledby={titleId}
+            className={`c-buttonish c-buttonish--inert`}
+          >
             {t("read-more")}
           </Styled.FooterButton>
         </Styled.Footer>
diff --git a/components/content-blocks/Callout/CalloutEntry/styles.js b/components/content-blocks/Callout/CalloutEntry/styles.js
index af75e401..3d283ee6 100644
--- a/components/content-blocks/Callout/CalloutEntry/styles.js
+++ b/components/content-blocks/Callout/CalloutEntry/styles.js
@@ -29,9 +29,8 @@ export const Section = styled(CalloutSection)`
   position: relative;
 `;
 
-export const Inner = styled(MixedLink)`
+export const Inner = styled.div`
   ${containerRegular()}
-  position: ${(p) => p.$position};
   display: grid;
   grid-template-areas:
     "image title"
@@ -50,6 +49,20 @@ export const Inner = styled(MixedLink)`
   text-decoration: none;
   transition: color 0.2s, background-color 0.2s;
 
+  ${({ $isImage }) =>
+    !$isImage &&
+    `
+    grid-template-areas:
+      "image image"
+      "title title"
+      "subtitle subtitle"
+      "text text"
+      "footer footer";
+    gap: 0;
+    justify-content: center;
+    text-align: center;
+  `}
+
   ${respond(
     `
     grid-template-areas:
@@ -174,18 +187,19 @@ export const Footer = styled.div`
   grid-area: footer;
   grid-template-columns: max-content 1fr;
   place-items: end;
-  margin-top: 15px;
+  margin: 15px 0 0;
+
+  ${({ $isImage }) =>
+    !$isImage &&
+    `
+    margin: 15px auto 0;
+    grid-template-columns: 1fr;
+  `}
 
   ${respond(`grid-template-columns: 1fr;`)}
 `;
 
-export const FooterButton = styled.div`
-  ${Inner}:hover &,
-  ${Inner}:focus-visible & {
-    outline: 3px solid var(--button-border-color);
-    outline-offset: 1px;
-  }
-
+export const FooterButton = styled(MixedLink)`
   ${respond(
     `
     display: block;
diff --git a/components/content-blocks/Callout/CalloutMain.js b/components/content-blocks/Callout/CalloutMain.js
index 2c395d24..2e42dabd 100644
--- a/components/content-blocks/Callout/CalloutMain.js
+++ b/components/content-blocks/Callout/CalloutMain.js
@@ -25,6 +25,7 @@ export default function CalloutMain({ callout }) {
     <Wrapper
       {...wrapperProps}
       height={dynamicComponent === "alertStream" ? "slim" : ""}
+      isImage={!!calloutImage}
     >
       <Header>
         <h2>{header}</h2>
diff --git a/components/content-blocks/Callout/CalloutTwoTone.js b/components/content-blocks/Callout/CalloutTwoTone.js
index 3080caa9..f161dd8a 100644
--- a/components/content-blocks/Callout/CalloutTwoTone.js
+++ b/components/content-blocks/Callout/CalloutTwoTone.js
@@ -30,7 +30,12 @@ export default function CalloutTwoTone({ callout }) {
 
   return (
     <>
-      <Wrapper backgroundColor={backgroundColor} order="image" stack="top">
+      <Wrapper
+        backgroundColor={backgroundColor}
+        order="image"
+        stack="top"
+        isImage={!!image?.[0]}
+      >
         <Header>
           <h2>{header}</h2>
           {text && (
diff --git a/components/content-blocks/Callout/Wrapper.js b/components/content-blocks/Callout/Wrapper.js
index 2c7c0fe1..d27ffead 100644
--- a/components/content-blocks/Callout/Wrapper.js
+++ b/components/content-blocks/Callout/Wrapper.js
@@ -10,10 +10,17 @@ export default function CalloutWrapper({
   ratio = "50",
   stack,
   width = "full",
+  isImage,
 }) {
   return (
     <Section $bgColor={backgroundColor} $width={width} $overlay={overlay}>
-      <Inner $order={order} $ratio={ratio} $height={height} $stack={stack}>
+      <Inner
+        $isImage={isImage}
+        $order={order}
+        $ratio={ratio}
+        $height={height}
+        $stack={stack}
+      >
         {children}
       </Inner>
     </Section>
@@ -31,4 +38,5 @@ CalloutWrapper.propTypes = {
   ratio: PropTypes.string,
   stack: PropTypes.string,
   width: PropTypes.string,
+  isImage: PropTypes.bool,
 };
diff --git a/components/content-blocks/Callout/styles.js b/components/content-blocks/Callout/styles.js
index 8d4e76de..3d4098f0 100644
--- a/components/content-blocks/Callout/styles.js
+++ b/components/content-blocks/Callout/styles.js
@@ -39,6 +39,16 @@ export const Inner = styled.div`
   padding-top: ${fluidScale("50px", "30px")};
   padding-bottom: ${fluidScale("50px", "40px")};
 
+  ${(p) =>
+    !p.$isImage &&
+    `
+    grid-template:
+      "text" auto / 100%;
+    gap: ${gap};
+    justify-content: center;
+    text-align: center;
+  `}
+
   ${respond(
     `
     grid-template: