fix(link): apply underlined styles (#911)

Author: montezume

.size-snapshot.json

@@ -1,15 +1,15 @@
 {
   "dist/ui-kit.esm.js": {
-    "bundled": 874809,
-    "minified": 600844,
-    "gzipped": 122315,
+    "bundled": 882007,
+    "minified": 604581,
+    "gzipped": 123515,
     "treeshaked": {
       "rollup": {
-        "code": 428635,
+        "code": 431686,
         "import_statements": 893
       },
       "webpack": {
-        "code": 455406
+        "code": 458492
       }
     }
   }

src/components/links/link/README.md

@@ -26,10 +26,11 @@ Links are used either to link to other ui routes, or to link to external pages.
 
 #### Properties
 
-| Props        | Type                                                              | Required | Values | Default | Description                                                                 |
-| ------------ | ----------------------------------------------------------------- | :------: | ------ | ------- | --------------------------------------------------------------------------- |
-| `to`         | `string` or `{ pathname: String, search: String, query: Object }` |    ✅    | -      | -       | The URL that the Link should point to                                       |
-| `isExternal` | `boolean`                                                         |    -     | -      | false   | If true, a regular <a> is rendered instead of the default React Router Link |
+| Props          | Type                                                              | Required | Values | Default | Description                                                                 |
+| -------------- | ----------------------------------------------------------------- | :------: | ------ | ------- | --------------------------------------------------------------------------- |
+| `to`           | `string` or `{ pathname: String, search: String, query: Object }` |    ✅    | -      | -       | The URL that the Link should point to                                       |
+| `isExternal`   | `boolean`                                                         |    -     | -      | false   | If true, a regular <a> is rendered instead of the default React Router Link |
+| `hasUnderline` | `boolean`                                                         |    -     | -      | true    | Either sets text-decoration to none or to underline                         |
 
 The component further forwards all remaining props to the underlying component. The external link includes `target="_blank"` and `rel="noopener noreferrer"` by default.
 

src/components/links/link/link.js

@@ -11,10 +11,12 @@ const getLinkStyles = (props, theme) => {
     ...vars,
     ...theme,
   };
+
   return css`
     font-family: ${overwrittenVars.fontFamilyDefault};
     color: ${overwrittenVars.colorPrimary};
     font-size: ${overwrittenVars.fontSizeDefault};
+    text-decoration: ${props.hasUnderline ? 'underline' : 'none'};
 
     &:hover,
     &:focus,
@@ -53,6 +55,7 @@ const Link = props => {
 Link.displayName = 'Link';
 
 Link.propTypes = {
+  hasUnderline: PropTypes.bool.isRequired,
   isExternal: PropTypes.bool.isRequired,
   to: requiredIf(
     PropTypes.oneOfType([
@@ -69,6 +72,7 @@ Link.propTypes = {
 };
 
 Link.defaultProps = {
+  hasUnderline: true,
   isExternal: false,
 };
 

src/components/links/link/link.story.js

@@ -19,6 +19,7 @@ storiesOf('Components|Links', module)
       <Section>
         <Link
           to={text('to', '/foo/bar')}
+          hasUnderline={boolean('hasUnderline', true)}
           isExternal={boolean('isExternal', false)}
         >
           {text('label', 'Accessibility text')}

src/components/links/link/link.visualroute.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import { Link } from 'ui-kit';
+import { ThemeProvider } from 'emotion-theming';
 import { Suite, Spec } from '../../../../test/percy';
 
 export const routePath = '/link';
 
+const purpleTheme = {
+  colorPrimary: 'purple',
+  colorPrimary25: 'deeppurple',
+};
+
 export const component = () => (
   <Suite>
     <Spec label="regular">
@@ -14,5 +20,15 @@ export const component = () => (
         A label text
       </Link>
     </Spec>
+    <Spec label="without underline">
+      <Link to="/" hasUnderline={false}>
+        A label text
+      </Link>
+    </Spec>
+    <ThemeProvider theme={purpleTheme}>
+      <Spec label="with custom theme">
+        <Link to="/">A label text</Link>
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );