refa: Link styles (#1992)

* refa: Link styles * fix * Create light-lobsters-tan.md * Update packages/components/src/Link/Link.tsx * Update packages/components/src/Link/Link.tsx * Update packages/components/src/Link/Link.tsx Co-authored-by: sarahgm <sarah.gosmann@reservix.de> Co-authored-by: Sebastian Sebald <sebastian.sebald@gmail.com> Co-authored-by: Sebastian Sebald <sebastian.sebald@reservix.de>
marigold-ui · Apr 14, 2022 · 59f3e6f · 59f3e6f
1 parent 37b3b0e
commit 59f3e6f
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 64 deletions.
diff --git a/.changeset/light-lobsters-tan.md 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.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>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';