fix(Section): fix section separator (#1039)

mittwald · Dec 4, 2024 · a94eca5 · a94eca5
1 parent 44d36f9
commit a94eca5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>
+    </>
+  ),
+};