compact table mobile variant

kadena-community · Dec 5, 2024 · a505ee0 · a505ee0
1 parent a15d707
commit a505ee0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx
@@ -13,9 +13,10 @@ export const CompactTableMobile: FC<IProps> = ({
   data,
   fields,
   isLoading = false,
+  variant,
 }) => {
   return data.map((item, idx) => (
-    <section key={idx} className={sectionClass}>
+    <section key={idx} className={sectionClass({ variant })}>
       {fields.map((field, idx) => (
         <div key={`${field.key.toString()}${idx}`} className={rowClass}>
           <span className={headerClass}>{field.label}</span>

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts
@@ -1,12 +1,31 @@
-import { atoms, style, tokens } from './../../../styles';
+import { atoms, recipe, style, tokens } from './../../../styles';
 
-export const sectionClass = style([
-  atoms({
-    padding: 'n6',
-    backgroundColor: 'base.default',
-    marginBlockEnd: 'md',
-  }),
-]);
+export const sectionClass = recipe({
+  base: [
+    atoms({
+      marginBlockEnd: 'n2',
+    }),
+  ],
+  variants: {
+    variant: {
+      default: [
+        atoms({
+          padding: 'n6',
+          backgroundColor: 'base.default',
+        }),
+      ],
+      open: [
+        atoms({
+          paddingBlock: 'n3',
+          paddingInline: 'n4',
+          border: 'hairline',
+          borderRadius: 'sm',
+          backgroundColor: 'layer.default',
+        }),
+      ],
+    },
+  },
+});
 
 export const headerClass = style([
   atoms({