chore[DST-487]: align core styles to marigold (#4039)

* chore[DST-487]: align core styles to marigold * fix lint * Create slow-cougars-grow.md --------- Co-authored-by: Sebastian Sebald <sebastian.sebald@reservix.de>
marigold-ui · Jul 29, 2024 · 9598df4 · 9598df4
1 parent f359645
commit 9598df4
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 5 deletions.
diff --git a/.changeset/slow-cougars-grow.md b/.changeset/slow-cougars-grow.md
@@ -0,0 +1,7 @@
+---
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+---
+
+chore[DST-487]: align core styles to marigold
diff --git a/packages/components/src/Accordion/Accordion.stories.tsx b/packages/components/src/Accordion/Accordion.stories.tsx
@@ -3,11 +3,14 @@ import React from 'react';
 
 import { Accessible, Parking, SettingDots } from '@marigold/icons';
 
+import { Badge } from '../Badge';
 import { Columns } from '../Columns';
 import { FieldGroup } from '../FieldBase';
 import { Headline } from '../Headline';
 import { Inline } from '../Inline';
 import { NumberField } from '../NumberField';
+import { Split } from '../Split';
+import { Stack } from '../Stack';
 import { Text } from '../Text';
 import { TextField } from '../TextField';
 import { Accordion } from './Accordion';
@@ -190,3 +193,33 @@ export const MultiSelect: Story = {
     </Accordion>
   ),
 };
+
+export const CoreExample: Story = {
+  render: args => (
+    <div className="w-1/2">
+      <Accordion {...args}>
+        <Accordion.Item
+          key={1}
+          title={
+            <Inline space={2} alignX="left" alignY="center">
+              <Parking className="fill-text-info" />
+              <Text weight="bold">Parking tickets:</Text>
+              <Split />
+              <div className="block group-aria-expanded:hidden">
+                <Badge variant="info">34/100</Badge>
+              </div>
+            </Inline>
+          }
+        >
+          <Stack space={4}>
+            <TextField label="Parking amout" />
+            <Inline space={4} alignY="center" alignX="right">
+              <Text weight="bold">Parking tickets:</Text>
+              <Badge variant="info">34 / 100</Badge>
+            </Inline>
+          </Stack>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  ),
+};
diff --git a/packages/components/src/Tabs/Tabs.stories.tsx b/packages/components/src/Tabs/Tabs.stories.tsx
@@ -5,6 +5,13 @@ import { Tabs, TabsProps } from './Tabs';
 const meta = {
   title: 'Components/Tabs',
   argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'sunken'],
+      description: 'Variant of the tabs (core only)',
+    },
     disabled: {
       control: { type: 'boolean' },
       description: 'Disable all the tabs',

diff --git a/themes/theme-b2b/src/components/Accordion.styles.ts b/themes/theme-b2b/src/components/Accordion.styles.ts
@@ -1,8 +1,9 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Accordion: ThemeComponent<'Accordion'> = {
-  button: cva(
-    'bg-bg-surface flex w-full items-center justify-between border-none px-2 py-1 leading-normal'
-  ),
+  button: cva([
+    'group',
+    'bg-bg-surface flex w-full items-center justify-between border-none px-2 py-1 leading-normal',
+  ]),
   item: cva('p-2'),
 };
diff --git a/themes/theme-core/src/components/Accordion.styles.ts b/themes/theme-core/src/components/Accordion.styles.ts
@@ -2,6 +2,7 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Accordion: ThemeComponent<'Accordion'> = {
   button: cva([
+    'group',
     'bg-bg-surface w-full justify-between border-none px-2 py-1',
     'font-bold leading-[1.125]',
   ]),

diff --git a/themes/theme-core/src/components/Tabs.styles.ts b/themes/theme-core/src/components/Tabs.styles.ts
@@ -2,8 +2,20 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Tabs: ThemeComponent<'Tabs'> = {
   container: cva(''),
-  tabpanel: cva(''),
-  tabsList: cva('mb-[10px]'),
+  tabpanel: cva('', {
+    variants: {
+      variant: {
+        sunken: 'bg-black/10 p-2 px-4',
+      },
+    },
+  }),
+  tabsList: cva('mb-[10px]', {
+    variants: {
+      variant: {
+        sunken: 'm-0 gap-0 space-x-0 leading-none',
+      },
+    },
+  }),
   tab: cva(
     [
       'min-h-[40px]',
@@ -13,6 +25,12 @@ export const Tabs: ThemeComponent<'Tabs'> = {
     ],
     {
       variants: {
+        variant: {
+          sunken: [
+            'm-0 cursor-pointer rounded-t-md p-2 px-4 font-bold outline-none',
+            'rac-hover:border-none rac-selected:border-none rac-selected:bg-black/10 hover:bg-black/5',
+          ],
+        },
         size: {
           small: 'px-1 pb-1',
           medium: 'px-2 pb-2 text-lg',