finetune section card

kadena-community · Nov 27, 2024 · aa7014c · aa7014c
1 parent 46c83df
commit aa7014c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx
@@ -2,18 +2,18 @@ import { MonoAdd } from '@kadena/kode-icons/system';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Button, Stack } from './../../components';
-import { ISectionCardProps, SectionCard } from './SectionCard';
-import { ISectionCardBody, SectionCardBody } from './SectionCardBody';
+import type { ISectionCardProps } from './SectionCard';
+import { SectionCard } from './SectionCard';
+import type { ISectionCardBodyProps } from './SectionCardBody';
+import { SectionCardBody } from './SectionCardBody';
 import { SectionCardContentBlock } from './SectionCardContentBlock';
-import {
-  SectionCardHeader,
-  type ISectionCardHeaderProps,
-} from './SectionCardHeader';
+import type { ISectionCardHeaderProps } from './SectionCardHeader';
+import { SectionCardHeader } from './SectionCardHeader';
 
 interface IProps
   extends ISectionCardHeaderProps,
     ISectionCardProps,
-    ISectionCardBody {}
+    ISectionCardBodyProps {}
 
 const meta: Meta<IProps> = {
   title: 'Patterns/SectionCard',
@@ -40,9 +40,9 @@ const meta: Meta<IProps> = {
       },
     },
     variant: {
+      options: ['horizontal', 'vertical'],
       control: {
         type: 'select',
-        options: ['horizontal', 'vertical'],
       },
     },
     children: {

diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCardContentBlock.tsx b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCardContentBlock.tsx
@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { Stack } from './../../components';
-import { ISectionCardProps } from './SectionCard';
+import type { ISectionCardProps } from './SectionCard';
 import { SectionCardBody } from './SectionCardBody';
 import { SectionCardHeader } from './SectionCardHeader';
 import { blockClass } from './style.css';

diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCardHeader.tsx b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCardHeader.tsx
@@ -1,9 +1,8 @@
 import type { FC, ReactElement } from 'react';
 import React from 'react';
 import { Heading, Stack, Text } from './../../components';
-import { ISectionCardProps } from './SectionCard';
-import { ISectionCardBody } from './SectionCardBody';
-import { headerClass, headerDescriptionClass } from './style.css';
+import type { ISectionCardProps } from './SectionCard';
+import { actionsClass, headerClass, headerDescriptionClass } from './style.css';
 
 export interface ISectionCardHeaderProps {
   title: string;
@@ -32,7 +31,14 @@ export const SectionCardHeader: FC<ISectionCardHeaderProps> = ({
           </Text>
         </Stack>
       )}
-      {actions && <Stack style={{ gridArea: 'actions' }}>{actions}</Stack>}
+      {actions && (
+        <Stack
+          className={actionsClass({ variant })}
+          style={{ gridArea: 'actions' }}
+        >
+          {actions}
+        </Stack>
+      )}
     </Stack>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts b/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts
@@ -34,7 +34,13 @@ export const headerClass = recipe({
           },
         }),
       ],
-      vertical: {},
+      vertical: {
+        ridTemplateColumns: `2fr 1fr`,
+        gridTemplateAreas: `
+                  "header actions"
+                  "description actions"
+              `,
+      },
     },
   },
 });
@@ -61,6 +67,29 @@ export const cardClass = style([
   }),
 ]);
 
+export const actionsClass = recipe({
+  base: {
+    alignItems: 'flex-start',
+  },
+  variants: {
+    variant: {
+      horizontal: [
+        responsiveStyle({
+          xs: {
+            justifyContent: 'flex-end',
+          },
+          md: {
+            justifyContent: 'flex-start',
+          },
+        }),
+      ],
+      vertical: {
+        justifyContent: 'flex-end',
+      },
+    },
+  },
+});
+
 export const blockClass = recipe({
   base: {
     display: 'grid!important',
@@ -86,7 +115,13 @@ export const blockClass = recipe({
         }),
       ],
 
-      vertical: {},
+      vertical: {
+        gridTemplateColumns: `1fr`,
+        gridTemplateAreas: `
+                  "header"
+                  "body"
+              `,
+      },
     },
   },
 });