diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 7e535484..8b9b1ed6 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -371,9 +371,7 @@ exports[`Storyshots Link Click 1`] = `
}
target="_self"
>
-
- Click
-
+ Click
`;
@@ -393,9 +391,7 @@ exports[`Storyshots Link Href 1`] = `
}
target="_self"
>
-
- Href
-
+ Href
`;
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index 2e20a417..78bac17f 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -5,7 +5,8 @@ import { Meta, Story } from '@storybook/react/types-6-0'
export default {
argTypes: {
- children: { control: 'text' }
+ children: { control: 'text' },
+ classes: { control: 'array' }
},
component: Link,
title: 'Link'
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index b460843f..a9571006 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -1,16 +1,33 @@
import 'antd/lib/typography/style/index.css'
+import cn from 'classnames'
import { CommonComponentProps } from '../types'
import { createUseStyles } from 'react-jss'
+import { generateLinkStyles } from './utils'
import { getDataTestAttributeProp } from '../utils'
-import { linkColor } from '../assets/styles/styleguide'
+import { ThemeType } from '../assets/styles/themes'
import { Typography } from 'antd'
import React, { FC, ReactNode } from 'react'
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+ '@global': {
+ [`.${dark}`]: {
+ '& $a': generateLinkStyles(dark)
+ },
+ a: generateLinkStyles(light)
+ }
+})
+
const AntDLink = Typography.Link
export type LinkTargetType = '_self' | '_blank'
export interface SharedLinkProps extends CommonComponentProps {
+ /**
+ * Array of classes to pass to element
+ */
+ classes?: string[]
/**
* Link children to render including link text.
*/
@@ -39,19 +56,8 @@ interface LinkClick extends SharedLinkProps {
export type LinkProps = LinkHref | LinkClick
-interface AntDProps extends Omit {
- underline: boolean
-}
-
-const useStyles = createUseStyles({
- '@global': {
- 'a.ant-typography, .ant-typography a': {
- color: linkColor
- }
- }
-})
-
export const Link: FC = ({
+ classes = [],
children,
dataTag,
href,
@@ -60,15 +66,16 @@ export const Link: FC = ({
}: LinkProps) => {
useStyles()
- const antDProps: AntDProps = {
- href,
- onClick,
- target,
- underline: true
- }
+ const linkClasses = cn(classes)
return (
-
+
{children}
)
diff --git a/src/components/Link/utils.ts b/src/components/Link/utils.ts
new file mode 100644
index 00000000..214b6cd7
--- /dev/null
+++ b/src/components/Link/utils.ts
@@ -0,0 +1,20 @@
+import colors from 'components/assets/styles/colors'
+import { ThemeType } from '../assets/styles/themes'
+
+const { blues } = colors
+
+const { dark } = ThemeType
+
+export const generateLinkStyles = (themeType: ThemeType) => {
+ const linkColor =
+ themeType === dark ? blues['lighten-40'] : blues['lighten-30']
+
+ return {
+ '&.ant-typography': {
+ '&:hover': {
+ color: blues['lighten-50']
+ },
+ color: linkColor
+ }
+ }
+}
diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
index 19c72ea2..00909ba9 100644
--- a/src/components/Toggle/index.tsx
+++ b/src/components/Toggle/index.tsx
@@ -51,6 +51,7 @@ export const Toggle: FC = ({
size = 'default'
}: ToggleProps) => {
useStyles()
+
const toggleClasses = cn(classes)
const antDProps = {
diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts
index 488a57d2..27ac956c 100644
--- a/src/components/assets/styles/styleguide.ts
+++ b/src/components/assets/styles/styleguide.ts
@@ -16,7 +16,6 @@ export const fieldErrorStyles = {
}
}
export const fontSizeRegular = '14px'
-export const linkColor = '#1EA7FD'
export * from './themes'
/* eslint-disable sort-keys */
export const styleguide = {