Repository: marigold-ui/marigold
Pull request #1992 (2022-04-13 14:09:41)

refa: Link styles

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

Latest commit: 6d764b57efed48f57088f55243d9493fcd8a21f4

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/link-restyles-structur?filename=.changeset/sharp-pears-end.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%20Link%20styles%0A)



Patch:
diff --git a/.changeset/light-lobsters-tan.md b/.changeset/light-lobsters-tan.md
new file mode 100644
index 000000000..0bb38a8ba
--- /dev/null
+++ b/.changeset/light-lobsters-tan.md
@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+"@marigold/theme-unicorn": patch
+---
+
+refa: Link styles
diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
index 11fbe0d4d..5d2e76e9e 100755
--- a/packages/components/src/Link/Link.tsx
+++ b/packages/components/src/Link/Link.tsx
@@ -1,29 +1,31 @@
 import React, { useRef } from 'react';
 import { useLink } from '@react-aria/link';
-import { conditional } from '@marigold/system';
+import { ThemeExtension, useComponentStyles } from '@marigold/system';
 import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
 import { Box, BoxOwnProps } from '../Box';
 
 // Theme Extension
 // ---------------
-export interface LinkThemeExtension<Value> {
-  link?: Value;
-}
+export interface LinkThemeExtension extends ThemeExtension<'Link'> {}
 
 // Props
 // ---------------
 export interface LinkOwnProps extends BoxOwnProps {
   disabled?: boolean;
+  variant?: string;
+  size?: string;
 }
+
 export interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {}
 
 // Component
 // ---------------
 export const Link = (({
   as = 'a',
-  variant = '',
-  children,
+  variant,
+   size,
+   children,
   disabled,
   ...props
 }: LinkProps) => {
@@ -38,15 +40,10 @@ export const Link = (({
     ref
   );
 
+  const styles = useComponentStyles('Link', { variant, size });
+
   return (
-    <Box
-      as={as}
-      variant={conditional(`link.${variant}`, { disabled })}
-      css={{ cursor: disabled ? 'default' : 'pointer' }}
-      ref={ref}
-      {...props}
-      {...linkProps}
-    >
+    <Box as={as} css={styles} ref={ref} {...props} {...linkProps}>
       {children}
     </Box>
   );
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index f7bc537d0..37afa481a 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -11,6 +11,7 @@ import type { HelpTextThemeExtension } from './Field/HelpText';
 import type { ImageThemeExtension } from './Image';
 import type { InputThemeExtension } from './Input';
 import type { LabelThemeExtension } from './Field/Label';
+import type { LinkThemeExtension } from './Link';
 import type { TextAreaThemeExtension } from './TextArea';
 
 // Old Styling Solution
@@ -19,7 +20,6 @@ import { type CardThemeExtension } from './Card';
 import { type CheckboxThemeExtension } from './Checkbox';
 import { type DividerThemeExtension } from './Divider';
 import { type LabelThemeExtension as LegacyLabelThemeExtension } from './Label';
-import { type LinkThemeExtension } from './Link';
 import { type MenuThemeExtension } from './Menu';
 import { type MenuItemThemeExtension } from './MenuItem';
 import { type MessageThemeExtension } from './Message';
@@ -38,6 +38,7 @@ interface ComponentStyles
     LabelThemeExtension,
     InputThemeExtension,
     LabelThemeExtension,
+    LinkThemeExtension,
     TextAreaThemeExtension {}
 
 export interface Theme
@@ -48,7 +49,6 @@ export interface Theme
     CheckboxThemeExtension<CSSObject>,
     DividerThemeExtension<CSSObject>,
     LegacyLabelThemeExtension<CSSObject>,
-    LinkThemeExtension<CSSObject>,
     MenuThemeExtension<CSSObject>,
     MenuItemThemeExtension<CSSObject>,
     MessageThemeExtension<CSSObject>,
diff --git a/themes/theme-b2b/src/component.ts b/themes/theme-b2b/src/component.ts
index 4c30a3fbd..9cb1f7fc1 100644
--- a/themes/theme-b2b/src/component.ts
+++ b/themes/theme-b2b/src/component.ts
@@ -425,18 +425,6 @@ export const component = {
       color: 'gray50',
     },
   },
-  link: {
-    __default: {
-      color: 'blue60',
-      ':hover': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-b2b/src/components/Link.style.ts b/themes/theme-b2b/src/components/Link.style.ts
new file mode 100644
index 000000000..4f9b0f474
--- /dev/null
+++ b/themes/theme-b2b/src/components/Link.style.ts
@@ -0,0 +1,19 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: 'blue60',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-b2b/src/components/index.ts b/themes/theme-b2b/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-b2b/src/components/index.ts
+++ b/themes/theme-b2b/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';
diff --git a/themes/theme-core/src/component.ts b/themes/theme-core/src/component.ts
index e9cad87c3..606d1a2ff 100644
--- a/themes/theme-core/src/component.ts
+++ b/themes/theme-core/src/component.ts
@@ -430,18 +430,6 @@ export const component = {
       color: colors.gray50,
     },
   },
-  link: {
-    __default: {
-      color: '#900',
-      ':hover, :visited': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-core/src/components/Link.style.ts b/themes/theme-core/src/components/Link.style.ts
new file mode 100644
index 000000000..a793d7812
--- /dev/null
+++ b/themes/theme-core/src/components/Link.style.ts
@@ -0,0 +1,20 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: '#900',
+    '&:hover, &:visited': {
+      textDecoration: 'none',
+      cursor: 'pointer',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-core/src/components/index.ts b/themes/theme-core/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-core/src/components/index.ts
+++ b/themes/theme-core/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';
diff --git a/themes/theme-unicorn/src/component.ts b/themes/theme-unicorn/src/component.ts
index 263ab6730..0ba5466e4 100644
--- a/themes/theme-unicorn/src/component.ts
+++ b/themes/theme-unicorn/src/component.ts
@@ -419,18 +419,6 @@ export const component = {
       color: 'gray50',
     },
   },
-  link: {
-    __default: {
-      color: 'primary',
-      ':hover': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-unicorn/src/components/Link.style.ts b/themes/theme-unicorn/src/components/Link.style.ts
new file mode 100644
index 000000000..4f24fe7c7
--- /dev/null
+++ b/themes/theme-unicorn/src/components/Link.style.ts
@@ -0,0 +1,19 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: 'primary',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-unicorn/src/components/index.ts b/themes/theme-unicorn/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-unicorn/src/components/index.ts
+++ b/themes/theme-unicorn/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';


Test patch:
diff --git a/packages/components/src/Link/Link.test.tsx b/packages/components/src/Link/Link.test.tsx
index 8421b8871..d8e2289df 100644
--- a/packages/components/src/Link/Link.test.tsx
+++ b/packages/components/src/Link/Link.test.tsx
@@ -8,22 +8,27 @@ const theme = {
     link: 'Inter',
     body: 'Oswald',
   },
-  link: {
-    __default: {
-      fontFamily: 'link',
-      color: 'blue',
-    },
-    second: {
-      fontFamily: 'body',
-      color: 'green',
-    },
-    ':disabled': {
-      color: 'grey',
+
+  components: {
+    Link: {
+      base: {
+        fontFamily: 'link',
+        color: 'blue',
+        '&:disabled': {
+          color: 'grey',
+        },
+      },
+      variant: {
+        second: {
+          fontFamily: 'body',
+          color: 'green',
+        },
+      },
     },
   },
 };
 
-test('uses `text.link` as default variant', () => {
+test('uses base variant', () => {
   render(
     <ThemeProvider theme={theme}>
       <Link href="#!">Link</Link>