feat(link): add a link component

atoms/Card/Card.module.css

@@ -33,7 +33,7 @@
 }
 
 .color-base {
-  border: var(--border-width-thin) solid var(--color-gray-300);
+  border: var(--border-width-thin) solid var(--color-gray-400);
   background: var(--color-primary-inverted);
 }
 

atoms/Link/Link.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Link.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import Paragraph from '../Paragraph'
+
+export const Link = ({ children, color, getStyles }) => {
+  return (
+    <a className={getStyles('link', ['color'])}>
+      <Paragraph color={color} weight="medium">
+        {children}
+      </Paragraph>
+    </a>
+  )
+}
+
+Link.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
+}
+
+Link.defaultProps = {
+  getStyles: () => {},
+  color: 'primary',
+}
+
+export default withStyles(styles)(Link)

atoms/Link/Link.module.css

@@ -0,0 +1,13 @@
+.link {
+  display: flex;
+  border-bottom: 1px solid currentColor;
+  cursor: pointer;
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}

atoms/Link/Link.stories.js

@@ -0,0 +1,25 @@
+import { Link, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Link, styles)
+const ListTemplate = getListTemplate(Link, styles)
+
+export default {
+  title: 'Atoms/Link',
+  component: Link,
+  args: {
+    children: 'Mouths Muil',
+  },
+  argTypes: {
+    colors: getOptionsArgTypes(options.colors),
+  },
+}
+
+export const Default = Template.bind({})
+export const Colors = ListTemplate.bind({})
+Colors.args = { items: options.colors.map((color) => ({ color })) }

atoms/Link/constants.js

@@ -0,0 +1 @@
+export const options = { colors: ['primary', 'tertiary'] }

atoms/Link/index.js

@@ -0,0 +1,3 @@
+export { default, Link } from './Link'
+export { options } from './constants'
+export { default as styles } from './Link.module.css'

atoms/Paragraph/Paragraph.module.css

@@ -14,6 +14,14 @@
   color: var(--color-font-muted);
 }
 
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}
+
 .size-sm {
   font-size: var(--font-size-xs);
 }

atoms/Paragraph/constants.js

@@ -1,5 +1,5 @@
 export const options = {
-  colors: ['base', 'muted', 'inverted'],
+  colors: ['base', 'muted', 'inverted', 'primary', 'tertiary'],
   sizes: ['sm', 'md', 'lg'],
   weights: ['normal', 'medium'],
 }

index.js

@@ -5,16 +5,17 @@ export { default as CenteredContent } from './layout/CenteredContent'
 export { default as FullHeightContent } from './layout/FullHeightContent'
 
 // Atoms
-export { default as Heading } from './atoms/Heading'
-export { default as Paragraph } from './atoms/Paragraph'
-export { default as Icon } from './atoms/Icon'
-export { default as Picture } from './atoms/Picture'
 export { default as Avatar } from './atoms/Avatar'
 export { default as Button } from './atoms/Button'
-export { default as Input } from './atoms/Input'
 export { default as Card } from './atoms/Card'
 export { default as Check } from './atoms/Check'
 export { default as Divider } from './atoms/Divider'
+export { default as Heading } from './atoms/Heading'
+export { default as Icon } from './atoms/Icon'
+export { default as Input } from './atoms/Input'
+export { default as Link } from './atoms/Link'
+export { default as Paragraph } from './atoms/Paragraph'
+export { default as Picture } from './atoms/Picture'
 
 // Molecules
 export { default as ButtonIcon } from './molecules/ButtonIcon'

package.json

@@ -90,6 +90,8 @@
     "watch": "1.0.2"
   },
   "peerDependencies": {
-    "react": "16.13.1"
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "classnames": "2.3.1"
   }
 }