Repository: marigold-ui/marigold
Pull request #1999 (2022-04-14 13:43:51)

refa: divider restructure

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 07c875e3a09f4ef89f36f986f3ace9841f99a3a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/divider-restructure?filename=.changeset/fuzzy-eels-allow.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A%22%40marigold%2Ftheme-b2b%22%3A%20patch%0A%22%40marigold%2Ftheme-core%22%3A%20patch%0A%22%40marigold%2Ftheme-unicorn%22%3A%20patch%0A---%0A%0Arefa%3A%20divider%20restructure%0A)



Patch:
diff --git a/.changeset/fuzzy-eels-allow.md b/.changeset/fuzzy-eels-allow.md
new file mode 100644
index 000000000..b097a14f0
--- /dev/null
+++ b/.changeset/fuzzy-eels-allow.md
@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+"@marigold/theme-unicorn": patch
+---
+
+refa: divider restructure
diff --git a/packages/components/src/Divider/Divider.stories.tsx b/packages/components/src/Divider/Divider.stories.tsx
index 6d978ed43..93fa7eb0d 100644
--- a/packages/components/src/Divider/Divider.stories.tsx
+++ b/packages/components/src/Divider/Divider.stories.tsx
@@ -10,11 +10,11 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['__default', 'bold'],
+      options: ['base', 'bold'],
       description: 'Thick or thin line',
       table: {
         defaultValue: {
-          summary: '__default',
+          summary: 'base',
         },
       },
     },
diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx
index d4b4aa599..bd4f1885b 100755
--- a/packages/components/src/Divider/Divider.tsx
+++ b/packages/components/src/Divider/Divider.tsx
@@ -2,14 +2,11 @@ import React from 'react';
 import { SeparatorProps, useSeparator } from '@react-aria/separator';
 
 import { Box } from '../Box';
+import { ThemeExtension, useComponentStyles } from '@marigold/system';
 
 // Theme Extension
 // ---------------
-export interface DividerThemeExtension<Value> {
-  divider?: {
-    [key: string]: Value;
-  };
-}
+export interface DividerThemeExtension extends ThemeExtension<'Divider'> {}
 
 // Props
 // ---------------
@@ -19,15 +16,8 @@ export interface DividerProps extends SeparatorProps {
 
 // Component
 // ---------------
-export const Divider: React.FC<DividerProps> = ({ variant = '', ...props }) => {
+export const Divider = ({ variant, ...props }: DividerProps) => {
   const { separatorProps } = useSeparator(props);
-
-  return (
-    <Box
-      __baseCSS={{ width: '100%', height: '1px', m: 'none', bg: 'text' }}
-      variant={`divider.${variant}`}
-      {...props}
-      {...separatorProps}
-    />
-  );
+  const styles = useComponentStyles('Divider', { variant });
+  return <Box css={styles} {...props} {...separatorProps} />;
 };
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 77c498b04..610481d56 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -9,6 +9,7 @@ import type { RootThemeExtension } from './Provider';
 import type { BadgeThemeExtension } from './Badge';
 import type { CardThemeExtension } from './Card';
 import type { ContentThemeExtension } from './Content';
+import type { DividerThemeExtension } from './Divider';
 import type { HeadlineThemeExtension } from './Headline';
 import type { HelpTextThemeExtension } from './Field/HelpText';
 import type { ImageThemeExtension } from './Image';
@@ -20,7 +21,6 @@ import type { TextAreaThemeExtension } from './TextArea';
 // Old Styling Solution
 import { type ButtonThemeExtension } from './Button';
 import { type CheckboxThemeExtension } from './Checkbox';
-import { type DividerThemeExtension } from './Divider';
 import { type LabelThemeExtension as LegacyLabelThemeExtension } from './Label';
 import { type MenuThemeExtension } from './Menu';
 import { type MenuItemThemeExtension } from './MenuItem';
@@ -37,6 +37,7 @@ interface ComponentStyles
   extends BadgeThemeExtension,
     CardThemeExtension,
     ContentThemeExtension,
+    DividerThemeExtension,
     HeadlineThemeExtension,
     HelpTextThemeExtension,
     ImageThemeExtension,
@@ -51,7 +52,6 @@ export interface Theme
     RootThemeExtension<CSSObject>,
     ButtonThemeExtension<CSSObject>,
     CheckboxThemeExtension<CSSObject>,
-    DividerThemeExtension<CSSObject>,
     LegacyLabelThemeExtension<CSSObject>,
     MenuThemeExtension<CSSObject>,
     MenuItemThemeExtension<CSSObject>,
diff --git a/themes/theme-b2b/src/component.ts b/themes/theme-b2b/src/component.ts
index dd8b31659..b519eab83 100644
--- a/themes/theme-b2b/src/component.ts
+++ b/themes/theme-b2b/src/component.ts
@@ -386,20 +386,6 @@ export const component = {
       bg: '#00000080',
     },
   },
-  divider: {
-    __default: {
-      my: 'xsmall',
-    },
-    bold: {
-      my: 'xsmall',
-      height: '2px',
-    },
-    section: {
-      my: 'xxsmall',
-      bg: 'gray50',
-    },
-  },
-
   label: {
     above: {
       fontSize: 'xxsmall',
diff --git a/themes/theme-b2b/src/components/Divider.style.ts b/themes/theme-b2b/src/components/Divider.style.ts
new file mode 100644
index 000000000..c7843f359
--- /dev/null
+++ b/themes/theme-b2b/src/components/Divider.style.ts
@@ -0,0 +1,17 @@
+import type { Theme } from '@marigold/components';
+
+export const Divider: Theme['components']['Divider'] = {
+  base: {
+    width: '100%',
+    height: '1px',
+    bg: 'text',
+  },
+  variant: {
+    bold: {
+      height: '2px',
+    },
+    section: {
+      bg: 'gray50',
+    },
+  },
+};
diff --git a/themes/theme-b2b/src/components/index.ts b/themes/theme-b2b/src/components/index.ts
index 473dfb293..735970fd8 100644
--- a/themes/theme-b2b/src/components/index.ts
+++ b/themes/theme-b2b/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Badge.style';
 export * from './Card.style';
+export * from './Divider.style';
 export * from './Headline.style';
 export * from './HelpText.style';
 export * from './Image.style';
diff --git a/themes/theme-core/src/component.ts b/themes/theme-core/src/component.ts
index 606d1a2ff..c43a76266 100644
--- a/themes/theme-core/src/component.ts
+++ b/themes/theme-core/src/component.ts
@@ -403,15 +403,6 @@ export const component = {
       bg: '#00000080',
     },
   },
-  divider: {
-    __default: {
-      my: 'xsmall',
-    },
-    bold: {
-      my: 'xsmall',
-      height: '2px',
-    },
-  },
   label: {
     above: {
       fontSize: 'xxsmall',
diff --git a/themes/theme-core/src/components/Divider.style.ts b/themes/theme-core/src/components/Divider.style.ts
new file mode 100644
index 000000000..e12feb3a9
--- /dev/null
+++ b/themes/theme-core/src/components/Divider.style.ts
@@ -0,0 +1,14 @@
+import type { Theme } from '@marigold/components';
+
+export const Divider: Theme['components']['Divider'] = {
+  base: {
+    width: '100%',
+    height: '1px',
+    bg: 'text',
+  },
+  variant: {
+    bold: {
+      height: '2px',
+    },
+  },
+};
diff --git a/themes/theme-core/src/components/index.ts b/themes/theme-core/src/components/index.ts
index 74f1647b3..579ff6d7e 100644
--- a/themes/theme-core/src/components/index.ts
+++ b/themes/theme-core/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from './Badge.style';
+export * from './Divider.style';
 export * from './Headline.style';
 export * from './HelpText.style';
 export * from './Image.style';
diff --git a/themes/theme-unicorn/src/component.ts b/themes/theme-unicorn/src/component.ts
index ab33dfeea..616a66ce8 100644
--- a/themes/theme-unicorn/src/component.ts
+++ b/themes/theme-unicorn/src/component.ts
@@ -382,19 +382,6 @@ export const component = {
       bg: '#00000080',
     },
   },
-  divider: {
-    __default: {
-      my: 'xsmall',
-    },
-    bold: {
-      my: 'xsmall',
-      height: '2px',
-    },
-    section: {
-      my: 'xxsmall',
-      bg: 'gray50',
-    },
-  },
   label: {
     above: {
       fontSize: 'xsmall',
diff --git a/themes/theme-unicorn/src/components/Divider.style.ts b/themes/theme-unicorn/src/components/Divider.style.ts
new file mode 100644
index 000000000..3dce6f02a
--- /dev/null
+++ b/themes/theme-unicorn/src/components/Divider.style.ts
@@ -0,0 +1,17 @@
+import type { Theme } from '@marigold/components';
+
+export const Divider: Theme['components']['Divider'] = {
+  base: {
+    width: '100%',
+    height: '1px',
+    bg: 'purple40',
+  },
+  variant: {
+    bold: {
+      height: '2px',
+    },
+    section: {
+      bg: 'gray50',
+    },
+  },
+};
diff --git a/themes/theme-unicorn/src/components/index.ts b/themes/theme-unicorn/src/components/index.ts
index 473dfb293..735970fd8 100644
--- a/themes/theme-unicorn/src/components/index.ts
+++ b/themes/theme-unicorn/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Badge.style';
 export * from './Card.style';
+export * from './Divider.style';
 export * from './Headline.style';
 export * from './HelpText.style';
 export * from './Image.style';


Test patch:
diff --git a/packages/components/src/Divider/Divider.test.tsx b/packages/components/src/Divider/Divider.test.tsx
index 466610d15..515eff230 100644
--- a/packages/components/src/Divider/Divider.test.tsx
+++ b/packages/components/src/Divider/Divider.test.tsx
@@ -12,33 +12,21 @@ const theme = {
   colors: {
     text: 'hotpink',
   },
-  divider: {
-    __default: {
-      margin: 'small',
-    },
-    bold: {
-      margin: 'medium',
+  components: {
+    Divider: {
+      base: {
+        margin: 'small',
+      },
+      variant: {
+        bold: {
+          margin: 'medium',
+        },
+      },
     },
   },
 };
 
-test('has base styles', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Divider data-testid="divider" />
-    </ThemeProvider>
-  );
-  const divider = screen.getByTestId(/divider/);
-
-  // __baseCSS
-  expect(divider).toHaveStyle(`background: hotpink`);
-  expect(divider).toHaveStyle(`width: 100%`);
-  expect(divider).toHaveStyle(`height: 1px`);
-  // margin from default variant
-  expect(divider).toHaveStyle(`margin: 2px`);
-});
-
-test('supports default variant', () => {
+test('supports base styles', () => {
   render(
     <ThemeProvider theme={theme}>
       <Divider data-testid="divider" />
@@ -49,7 +37,7 @@ test('supports default variant', () => {
   expect(divider).toHaveStyle(`margin: 2px`);
 });
 
-test('accepts other variant than default', () => {
+test('accepts other variants', () => {
   render(
     <ThemeProvider theme={theme}>
       <Divider variant="bold" data-testid="divider" />