✨ Add Link component

Author: exah

.internal/theme.js

@@ -1,3 +1,11 @@
+import { css } from '@emotion/core'
+
+const Link = css`
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
 const theme = {
   media: {
     sm: '(max-width: 600px)',
@@ -13,7 +21,8 @@ const theme = {
   palette: {
     default: {
       bg: '#fff',
-      fg: '#000'
+      fg: '#000',
+      link: 'royalblue'
     },
     gray: {
       bg: '#eee',
@@ -40,10 +49,12 @@ const theme = {
       lineHeight: 1.2
     },
     heading: {
-      fontSize: '1.5rem',
+      fontFamily: 'athelas, georgia, times, serif',
+      fontSize: '2.5rem',
       fontWeight: 'bold'
     }
-  }
+  },
+  Link
 }
 
 const themeWithRems = {

docs/image.mdx

@@ -49,7 +49,7 @@ import { Image } from 'pss-components'
 <Playground>
   <picture>
     <source 
-      srcset="http://placekitten.com/1024/768" 
+      srcSet="http://placekitten.com/1024/768" 
       media="(min-width: 1024px)" 
     />
     <Image 

docs/link.mdx

@@ -0,0 +1,35 @@
+---
+name: Link
+route: /link
+menu: Primitives
+---
+
+import { Playground } from 'docz'
+import { ThemeProvider } from 'emotion-theming'
+import { PropsTable } from '../.internal/props-table'
+import { theme } from '../.internal/theme'
+import { Link, Box } from '../src'
+
+# Link
+
+## Description
+
+Based on [Text](/text). Renders `<a>` element.
+
+
+## Usage
+
+```js
+import { Link } from 'pss-components'
+```
+
+<Playground>
+  <Link href='http://example.com' target='_blank'>
+    Link
+  </Link>
+</Playground>
+
+
+## Props
+
+<PropsTable of={Link} />

docs/text.mdx

@@ -14,62 +14,64 @@ import { Text, Box } from '../src'
 
 ## Description
 
-Text component, that renders as `<div>` with [typography prop styles](https://github.com/exah/pss/blob/master/docs/api.md#typography) and [base prop styles](https://github.com/exah/pss/blob/master/docs/api.md#base). Component inside can be changed with `as` prop.
+Based on [Box](/box) with [text system](https://github.com/exah/pss/blob/master/docs/api.md#text). Element inside can be changed with `use` prop, default to `<div>`,
 
 ## Usage
 
-### Basic
-
 ```js
 import { Text } from 'pss-components'
 ```
 
-```js
-<Text use='p' textAlign='center'>
-  Text
-</Text>
-```
+<Playground>
+  <Text use='p'>Text</Text>
+</Playground>
+
+
+## Examples
+
+### Change style with [text](https://github.com/exah/pss/blob/master/docs/api.md#text) props
+
+<Playground>
+  <Text 
+    use='p' 
+    textAlign='center' 
+    fontFamily='default' 
+    fontSize={24}
+    lineHeight={2}
+    fontWeight={300}
+    letterSpacing='0.2px'
+    color='tomato'
+  >
+    Text
+  </Text>
+</Playground>
+
 
-### Add Text Styles to theme
+### Set variant
 
-See [textStyle](https://github.com/exah/pss/blob/master/docs/api.md#textstyle) docs.
+See [textStyle docs](https://github.com/exah/pss/blob/master/docs/api.md#textstyle).
 
 ```js
 const theme = {
-  fontFamily: {
-    default: 'Helvetica, system-ui, sans-serif',
-    serif: 'Times New Roman, serif'
-  },
   textStyle: {
-    root: {
-      fontFamily: 'Helvetica, system-ui, sans-serif',
-      fontSize: 16,
-      lineHeight: 1.2
-    },
     default: {
-      fontSize: '1rem'
+      fontFamily: 'system-ui, sans-serif',
+      fontSize: '1rem',
+      fontWeight: 'normal'
     },
     heading: {
-      fontSize: '1.5rem',
+      fontFamily: 'athelas, georgia, times, serif',
+      fontSize: '2rem',
       fontWeight: 'bold'
     }
   }
 }
 ```
 
-## Examples
-
-<Playground>
-  <Text use='p' textAlign='center'>
-    Text
-  </Text>
-</Playground>
-
-
 <Playground>
   <ThemeProvider theme={theme}>
-    <Text use='h1' variant='heading' fontFamily='serif' textAlign='center'>
-      Text
+    <Text use='h1' variant='heading'>
+      Heading
     </Text>
   </ThemeProvider>
 </Playground>

src/index.js

@@ -5,6 +5,7 @@ export { FlexGrid } from './flex-grid'
 export { Grid } from './grid'
 export { Image } from './image'
 export { Layout } from './layout'
+export { Link } from './link'
 export { List } from './list'
 
 export {

src/link.js

@@ -0,0 +1,19 @@
+import use from 'reuse'
+import styled from '@emotion/styled'
+import { themePath } from 'pss'
+import { Text } from './text'
+
+const LinkBase = styled(use('a'))(
+  { color: 'inherit', textDecoration: 'none' },
+  themePath('Link')
+)
+
+const Link = use(Text, LinkBase)
+
+Link.displayName = 'Link'
+Link.propTypes = { ...Text.propTypes }
+Link.defaultProps = { ...Text.defaultProps, color: 'link' }
+
+export {
+  Link
+}

src/text.js

@@ -15,17 +15,14 @@ const TextBase = base({
 })
 
 const Text = styled(use(TextBase, Box))(
-  {
-    color: 'inherit',
-    font: 'inherit',
-    textDecoration: 'none'
-  },
+  { font: 'inherit' },
   themePath('Text'),
   styles
 )
 
 Text.displayName = 'Text'
 Text.propTypes = { ...styles.propTypes, ...Box.propTypes }
+Text.defaultProps = {}
 
 export {
   Text

test/__snapshots__/index.js.snap

@@ -1632,10 +1632,7 @@ exports[`Text empty 1`] = `
   margin: 0;
   padding: 0;
   min-width: 0;
-  color: inherit;
   font: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
 }
 
 <div
@@ -1650,10 +1647,7 @@ exports[`Text with text 1`] = `
   margin: 0;
   padding: 0;
   min-width: 0;
-  color: inherit;
   font: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
 }
 
 <div
@@ -1670,10 +1664,7 @@ exports[`Text with theme 1`] = `
   margin: 0;
   padding: 0;
   min-width: 0;
-  color: inherit;
   font: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
   font-family: Helvetica,system-ui,sans-serif;
   font-size: 1rem;
   line-height: 1.2;