feat #114 - Revamp link styles

src/__snapshots__/storybook.test.ts.snap

@@ -371,9 +371,7 @@ exports[`Storyshots Link Click 1`] = `
     }
     target="_self"
   >
-    <u>
-      Click
-    </u>
+    Click
   </a>
 </div>
 `;
@@ -393,9 +391,7 @@ exports[`Storyshots Link Href 1`] = `
     }
     target="_self"
   >
-    <u>
-      Href
-    </u>
+    Href
   </a>
 </div>
 `;

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'

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<LinkProps, 'children'> {
-	underline: boolean
-}
-
-const useStyles = createUseStyles({
-	'@global': {
-		'a.ant-typography, .ant-typography a': {
-			color: linkColor
-		}
-	}
-})
-
 export const Link: FC<LinkProps> = ({
+	classes = [],
 	children,
 	dataTag,
 	href,
@@ -60,15 +66,16 @@ export const Link: FC<LinkProps> = ({
 }: LinkProps) => {
 	useStyles()
 
-	const antDProps: AntDProps = {
-		href,
-		onClick,
-		target,
-		underline: true
-	}
+	const linkClasses = cn(classes)
 
 	return (
-		<AntDLink {...antDProps} {...getDataTestAttributeProp('link', dataTag)}>
+		<AntDLink
+			className={linkClasses}
+			href={href}
+			onClick={onClick}
+			target={target}
+			{...getDataTestAttributeProp('link', dataTag)}
+		>
 			{children}
 		</AntDLink>
 	)

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
+		}
+	}
+}

src/components/Toggle/index.tsx

@@ -51,6 +51,7 @@ export const Toggle: FC<ToggleProps> = ({
 	size = 'default'
 }: ToggleProps) => {
 	useStyles()
+
 	const toggleClasses = cn(classes)
 
 	const antDProps = {

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 = {