Fix - infobar additional div when there's no CTA (#935)

* fix - not render CTA parent div when there's no CTA * add stories
opengovsg · Dec 13, 2024 · f111a0e · f111a0e
1 parent 76e70f1
commit f111a0e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 35 deletions.
diff --git a/packages/components/src/templates/next/components/complex/Infobar/Infobar.stories.tsx b/packages/components/src/templates/next/components/complex/Infobar/Infobar.stories.tsx
@@ -81,3 +81,13 @@ export const LongText: Story = {
     secondaryButtonUrl: "https://google.com",
   },
 }
+
+export const NoCTA: Story = {
+  args: {
+    sectionIdx: 0,
+    title:
+      "Longer title here that spans multiple lines and is quite long and verbose and takes up a lot of space",
+    description:
+      "About a sentence worth of description here About a sentence worth of description here About a sentence worth of description here",
+  },
+}
diff --git a/packages/components/src/templates/next/components/complex/Infobar/Infobar.tsx b/packages/components/src/templates/next/components/complex/Infobar/Infobar.tsx
@@ -52,6 +52,8 @@ const Infobar = ({
   LinkComponent,
 }: InfobarProps) => {
   const simplifiedLayout = getTailwindVariantLayout(layout)
+  const hasPrimaryCTA = !!buttonLabel && !!buttonUrl
+  const hasSecondaryCTA = !!secondaryButtonLabel && !!secondaryButtonUrl
 
   return (
     <section>
@@ -83,42 +85,44 @@ const Infobar = ({
             )}
           </div>
 
-          <div
-            className={compoundStyles.buttonContainer({
-              layout: simplifiedLayout,
-            })}
-          >
-            {buttonLabel && buttonUrl && (
-              <LinkButton
-                href={getReferenceLinkHref(
-                  buttonUrl,
-                  site.siteMap,
-                  site.assetsBaseUrl,
-                )}
-                size={simplifiedLayout === "homepage" ? "lg" : "base"}
-                LinkComponent={LinkComponent}
-                isWithFocusVisibleHighlight
-              >
-                {buttonLabel}
-              </LinkButton>
-            )}
+          {(hasPrimaryCTA || hasSecondaryCTA) && (
+            <div
+              className={compoundStyles.buttonContainer({
+                layout: simplifiedLayout,
+              })}
+            >
+              {hasPrimaryCTA && (
+                <LinkButton
+                  href={getReferenceLinkHref(
+                    buttonUrl,
+                    site.siteMap,
+                    site.assetsBaseUrl,
+                  )}
+                  size={simplifiedLayout === "homepage" ? "lg" : "base"}
+                  LinkComponent={LinkComponent}
+                  isWithFocusVisibleHighlight
+                >
+                  {buttonLabel}
+                </LinkButton>
+              )}
 
-            {secondaryButtonLabel && secondaryButtonUrl && (
-              <LinkButton
-                href={getReferenceLinkHref(
-                  secondaryButtonUrl,
-                  site.siteMap,
-                  site.assetsBaseUrl,
-                )}
-                size={simplifiedLayout === "homepage" ? "lg" : "base"}
-                variant="outline"
-                LinkComponent={LinkComponent}
-                isWithFocusVisibleHighlight
-              >
-                {secondaryButtonLabel}
-              </LinkButton>
-            )}
-          </div>
+              {hasSecondaryCTA && (
+                <LinkButton
+                  href={getReferenceLinkHref(
+                    secondaryButtonUrl,
+                    site.siteMap,
+                    site.assetsBaseUrl,
+                  )}
+                  size={simplifiedLayout === "homepage" ? "lg" : "base"}
+                  variant="outline"
+                  LinkComponent={LinkComponent}
+                  isWithFocusVisibleHighlight
+                >
+                  {secondaryButtonLabel}
+                </LinkButton>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </section>