feat(Link): Add prop to disable text decoration on hover (#731)

package.json

@@ -8,6 +8,7 @@
     "main": "dist/oneui.min.js",
     "types": "dist/dts/src/index.d.ts",
     "scripts": {
+        "start": "npm run storybook",
         "storybook": "start-storybook -s ./stories/static -p 9001 -c .storybook",
         "storybook:build": "build-storybook -s ./stories/static -c .storybook -o .out",
         "storybook:deploy": "storybook-to-ghpages --script=storybook:build --out=.out",

src/components/Link/Link.scss

@@ -8,6 +8,10 @@
         text-decoration: var(--link-decoration-hover);
     }
 
+    &--dontDecorateOnHover:hover {
+        text-decoration: var(--link-decoration-normal);
+    }
+
     &--context_muted {
         color: var(--color-muted);
 

src/components/Link/Link.tsx

@@ -9,12 +9,14 @@ interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     context?: 'brand' | 'muted';
     /** Ref to access the anchor */
     ref?: React.RefObject<HTMLAnchorElement>;
+    /** Do not underline text on hover */
+    dontDecorateOnHover?: boolean;
 }
 
 const { block } = bem('Link', styles);
 
 export const Link: React.FC<Props> = React.forwardRef((props, ref) => {
-    const { children, context, ...rest } = props;
+    const { children, context, dontDecorateOnHover, ...rest } = props;
     return (
         <a ref={ref} {...rest} {...block(props)}>
             {children}
@@ -26,4 +28,5 @@ Link.displayName = 'Link';
 
 Link.defaultProps = {
     context: 'brand',
+    dontDecorateOnHover: false,
 };

stories/Link.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, select, withKnobs } from '@storybook/addon-knobs';
+import { text, select, boolean, withKnobs } from '@storybook/addon-knobs';
 import { Link } from '@textkernel/oneui';
 
 storiesOf('Atoms|Link', module)
@@ -10,6 +10,7 @@ storiesOf('Atoms|Link', module)
             target="_blank"
             href="https://textkernel.com"
             context={select('Context', ['muted', 'brand'], 'brand')}
+            dontDecorateOnHover={boolean("Don't decorate on hover", false)}
         >
             {text('Link text', 'Click me')}
         </Link>