fix: add missing content margin on accordion

abelflopes · Jan 26, 2024 · 8ee568c · 8ee568c
1 parent 804261e
commit 8ee568c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -29,7 +29,8 @@
   },
   "dependencies": {
     "@react-ck/collapse": "^1.1.7",
-    "@react-ck/list": "^1.2.1"
+    "@react-ck/list": "^1.2.1",
+    "@react-ck/theme": "^1.5.1"
   },
   "peerDependencies": {
     "react": "^18.2.0"

diff --git a/packages/components/accordion/src/index.tsx b/packages/components/accordion/src/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { List, type ListProps } from "@react-ck/list";
 import { Collapse } from "@react-ck/collapse";
+import styles from "./styles/index.module.scss";
 
 export interface AccordionItem {
   header: NonNullable<React.ReactNode>;
@@ -25,7 +26,7 @@ export const Accordion = ({
     {...otherProps}
     items={items.map(({ header, children }) => (
       <Collapse key={String(JSON.stringify(header))} header={header}>
-        {children}
+        <div className={styles.content}>{children}</div>
       </Collapse>
     ))}
   />

diff --git a/packages/components/accordion/src/styles/index.module.scss b/packages/components/accordion/src/styles/index.module.scss
@@ -0,0 +1,5 @@
+@import "@react-ck/theme";
+
+.content {
+  margin-top: get-spacing(1);
+}