From 478c0b2fc65bd2c05f8271619476ff81cb6fe757 Mon Sep 17 00:00:00 2001
From: Melissa Peters <37454264+melissap-nulogy@users.noreply.github.com>
Date: Fri, 20 Sep 2024 12:01:30 -0400
Subject: [PATCH] fix: Correct padding in sidebar header and footer (#1441)

---
 src/Layout/Sidebar.story.tsx |  9 ++++-
 src/Layout/Sidebar.tsx       | 64 ++++++++++++++++++------------------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/Layout/Sidebar.story.tsx b/src/Layout/Sidebar.story.tsx
index ac0552c6c..2ee43c789 100644
--- a/src/Layout/Sidebar.story.tsx
+++ b/src/Layout/Sidebar.story.tsx
@@ -448,7 +448,14 @@ export const WithHelpText = () => {
   );
 
   return (
-    <Sidebar hideCloseButton top={0} height="100%" isOpen title="With help text" helpText={helpText}>
+    <Sidebar
+      footer={<PrimaryButton>Apply</PrimaryButton>}
+      top={0}
+      height="100%"
+      isOpen
+      title="With help text"
+      helpText={helpText}
+    >
       <Textarea
         value={helpText}
         labelText="Help Text"
diff --git a/src/Layout/Sidebar.tsx b/src/Layout/Sidebar.tsx
index e0de15e69..035bf1bb3 100644
--- a/src/Layout/Sidebar.tsx
+++ b/src/Layout/Sidebar.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { IconicButton } from "../Button";
-import { Heading3, Text } from "../Type";
+import { Heading2, Text } from "../Type";
 import { AnimatedBoxProps, AnimatedBox } from "../Box/Box";
 import { NAVBAR_HEIGHT } from "../BrandedNavBar/NavBar";
 import { PreventBodyElementScrolling } from "../utils";
@@ -170,6 +170,7 @@ function Sidebar({
       )}
       <AnimatedBox
         role="dialog"
+        paddingX="x1"
         bg="white"
         display="flex"
         flexDirection="column"
@@ -188,6 +189,36 @@ function Sidebar({
         ref={sideBarRef as any}
         {...props}
       >
+        <Flex
+          flexDirection="column"
+          p="x2"
+          borderBottomWidth="1px"
+          borderBottomStyle="solid"
+          borderBottomColor="lightGrey"
+        >
+          <Flex flexDirection="column" gap="x1">
+            <Flex justifyContent="space-between" alignItems="flex-start">
+              {title && (
+                <Flex alignItems="center" height="100%">
+                  <Heading2 mb={0}>{title}</Heading2>
+                </Flex>
+              )}
+              {!hideCloseButton && (
+                <Box marginLeft="x2">
+                  <IconicButton
+                    type="button"
+                    ref={closeButton}
+                    icon="close"
+                    onClick={onClose}
+                    data-testid={closeButtonTestId}
+                    aria-label={closeButtonAriaLabel || t("close")}
+                  />
+                </Box>
+              )}
+            </Flex>
+            {renderHelpText ? renderHelpText() : helpText && <Text color="midGrey">{helpText}</Text>}
+          </Flex>
+        </Flex>
         <Flex
           p={p}
           maxHeight="100%"
@@ -196,37 +227,6 @@ function Sidebar({
           flexDirection="column"
           style={{ overflowBehaviour: "contain" } as any}
         >
-          <Flex flexDirection="column" pb="x3">
-            <Flex flexDirection="column" pb="x2">
-              <Flex justifyContent="space-between" alignItems="flex-start">
-                {title && (
-                  <Flex alignItems="center" height="100%">
-                    <Heading3 mb={0}>{title}</Heading3>
-                  </Flex>
-                )}
-                {!hideCloseButton && (
-                  <Box marginLeft="x2">
-                    <IconicButton
-                      type="button"
-                      ref={closeButton}
-                      icon="close"
-                      onClick={onClose}
-                      data-testid={closeButtonTestId}
-                      aria-label={closeButtonAriaLabel || t("close")}
-                    />
-                  </Box>
-                )}
-              </Flex>
-              {renderHelpText
-                ? renderHelpText()
-                : helpText && (
-                    <Text pt="x1" color="midGrey">
-                      {helpText}
-                    </Text>
-                  )}
-            </Flex>
-            <Divider m="0 -8px" width="calc(100% + 16px)" />
-          </Flex>
           <AnimatedBox
             variants={childVariants}
             animate={isOpen ? "open" : "closed"}