From a94eca566df23aa508691503614f8731de8adbdf Mon Sep 17 00:00:00 2001
From: Lisa Meyer <84317589+Lisa18289@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:23:04 +0100
Subject: [PATCH] fix(Section): fix section separator (#1039)

---
 .../components/Section/Section.module.scss    |  5 +++-
 .../src/components/Section/Section.tsx        |  2 +-
 .../Section/stories/Default.stories.tsx       | 28 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Section/Section.module.scss b/packages/components/src/components/Section/Section.module.scss
index 8e7806a9b..0bda2cd58 100644
--- a/packages/components/src/components/Section/Section.module.scss
+++ b/packages/components/src/components/Section/Section.module.scss
@@ -4,8 +4,11 @@
   row-gap: var(--section--content-to-content-spacing);
   container-type: inline-size;
 
-  + &:not(.hideSeparator) .section {
+  + .section {
     margin-block-start: var(--section--section-to-section-spacing);
+  }
+
+  &:not(.hideSeparator) + .section {
     border-block-start-width: var(--section--border-width);
     border-block-start-style: var(--section--border-style);
     border-block-start-color: var(--section--border-color);
diff --git a/packages/components/src/components/Section/Section.tsx b/packages/components/src/components/Section/Section.tsx
index 8df7d27f2..f28221186 100644
--- a/packages/components/src/components/Section/Section.tsx
+++ b/packages/components/src/components/Section/Section.tsx
@@ -38,7 +38,7 @@ export const Section = flowComponent("Section", (props) => {
   const rootClassName = clsx(
     styles.section,
     className,
-    styles.hideSeparator && hideSeparator,
+    hideSeparator && styles.hideSeparator,
   );
 
   const headingId = useId();
diff --git a/packages/components/src/components/Section/stories/Default.stories.tsx b/packages/components/src/components/Section/stories/Default.stories.tsx
index 2de8544b9..4d9e13aaf 100644
--- a/packages/components/src/components/Section/stories/Default.stories.tsx
+++ b/packages/components/src/components/Section/stories/Default.stories.tsx
@@ -167,3 +167,31 @@ export const WithSubHeadings: Story = {
     </>
   ),
 };
+
+export const HideSeperator: Story = {
+  render: (props) => (
+    <>
+      <Section {...props} hideSeparator>
+        <Heading>
+          <IconMember />
+          Personal Information
+        </Heading>
+        <TextField isRequired defaultValue="John">
+          <Label>First name</Label>
+        </TextField>
+        <TextField isRequired defaultValue="Doe">
+          <Label>Last name</Label>
+        </TextField>
+      </Section>
+      <Section {...props}>
+        <Heading>Newsletter</Heading>
+        <Text>
+          Upcoming releases, new features and tips about your hosting - we bring
+          you the most important information in your inbox. Subscribe to our
+          newsletter and stay up to date.
+        </Text>
+        <Link href="#">Subscribe</Link>
+      </Section>
+    </>
+  ),
+};