From 59f3e6f31c00c422bc95b25fb0faf1b77bc9a273 Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Thu, 14 Apr 2022 09:01:17 +0200 Subject: [PATCH] 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 Co-authored-by: Sebastian Sebald Co-authored-by: Sebastian Sebald --- .changeset/light-lobsters-tan.md | 8 +++++ packages/components/src/Link/Link.test.tsx | 29 +++++++++++-------- packages/components/src/Link/Link.tsx | 25 +++++++--------- packages/components/src/theme.ts | 4 +-- themes/theme-b2b/src/component.ts | 12 -------- themes/theme-b2b/src/components/Link.style.ts | 19 ++++++++++++ themes/theme-b2b/src/components/index.ts | 1 + themes/theme-core/src/component.ts | 12 -------- .../theme-core/src/components/Link.style.ts | 20 +++++++++++++ themes/theme-core/src/components/index.ts | 1 + themes/theme-unicorn/src/component.ts | 12 -------- .../src/components/Link.style.ts | 19 ++++++++++++ themes/theme-unicorn/src/components/index.ts | 1 + 13 files changed, 99 insertions(+), 64 deletions(-) create mode 100644 .changeset/light-lobsters-tan.md create mode 100644 themes/theme-b2b/src/components/Link.style.ts create mode 100644 themes/theme-core/src/components/Link.style.ts create mode 100644 themes/theme-unicorn/src/components/Link.style.ts diff --git a/.changeset/light-lobsters-tan.md b/.changeset/light-lobsters-tan.md new file mode 100644 index 0000000000..0bb38a8ba7 --- /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.test.tsx b/packages/components/src/Link/Link.test.tsx index 8421b8871a..d8e2289df4 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( Link diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx index 11fbe0d4db..5d2e76e9e3 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 { - 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 {} // 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 ( - + {children} ); diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts index f7bc537d01..37afa481ad 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, DividerThemeExtension, LegacyLabelThemeExtension, - LinkThemeExtension, MenuThemeExtension, MenuItemThemeExtension, MessageThemeExtension, diff --git a/themes/theme-b2b/src/component.ts b/themes/theme-b2b/src/component.ts index 4c30a3fbdd..9cb1f7fc1e 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 0000000000..4f9b0f474b --- /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 5399d2f4cc..6410b06904 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 e9cad87c38..606d1a2ff4 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 0000000000..a793d78129 --- /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 5399d2f4cc..6410b06904 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 263ab6730e..0ba5466e45 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 0000000000..4f24fe7c72 --- /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 5399d2f4cc..6410b06904 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';