[F] Callout layouts when no image

lsst-epo · Mar 26, 2024 · fe8ccd7 · fe8ccd7
1 parent 73f1f57
commit fe8ccd7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: