feat(link): introduce inline variant (#3859)

Fixes #3228.

Author: asudoh

packages/components/src/components/link/_link.scss

@@ -52,12 +52,12 @@
     }
 
     &:visited {
-      color: $link-01;
+      color: $visited-link;
     }
-  }
 
-  .#{$prefix}--link--visited {
-    color: $visited-link;
+    &:visited:hover {
+      color: $hover-primary-text;
+    }
   }
 
   .#{$prefix}--link--disabled {
@@ -68,6 +68,26 @@
     font-weight: 400;
     cursor: not-allowed;
   }
+
+  .#{$prefix}--link.#{$prefix}--link--inline {
+    text-decoration: underline;
+
+    &:hover {
+      color: $hover-primary-text;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:visited {
+      text-decoration: none;
+    }
+  }
+
+  .#{$prefix}--link--disabled.#{$prefix}--link--inline {
+    text-decoration: underline;
+  }
 }
 
 @include exports('link') {

packages/components/src/components/link/link.config.js

@@ -13,4 +13,23 @@ module.exports = {
   context: {
     prefix,
   },
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      name: 'inline',
+      label: 'Inline',
+      notes: `
+        Inline by default has underline.
+        Its intended use is in paragraphs and sentences,
+        where underline makes it more accessible,
+        so that color blue is not the only visual differentiator.
+      `,
+      context: {
+        inline: true,
+      },
+    },
+  ],
 };

packages/components/src/components/link/link.hbs

@@ -5,9 +5,9 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<a href="#" class="{{@root.prefix}}--link">Link</a>
-<a class="{{@root.prefix}}--link" aria-disabled="true">Placeholder link</a>
-<p class="{{@root.prefix}}--link--disabled">Disabled Link</p>
+<a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
+<a class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}" aria-disabled="true">Placeholder link</a>
+<p class="{{@root.prefix}}--link--disabled{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Disabled Link</p>
 <div style="width:200px">
-  <a href="#" class="{{@root.prefix}}--link">Text wrap example for hover, focus, and active state testing.</a>
+  <a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Text wrap example for hover, focus, and active state testing.</a>
 </div>

packages/components/src/globals/scss/_theme-tokens.scss

@@ -47,7 +47,8 @@ $inverse-focus-ui: $ibm-color__white-0 !default;
 /// @type Color
 /// @access public
 /// @group link
-$link-visited: $ibm-color__purple-60 !default;
+/// @deprecated
+$link-visited: $visited-link !default;
 
 /// @type Color
 /// @access public

packages/react/src/components/Link/Link-story.js

@@ -16,6 +16,7 @@ import Link from '../Link';
 const props = () => ({
   className: 'some-class',
   href: text('The link href (href)', '#'),
+  inline: boolean('Use the in-line variant (inline)', false),
   onClick: (handler => evt => {
     evt.preventDefault(); // Prevent link from being followed for demo purpose
     handler(evt);

packages/react/src/components/Link/Link-test.js

@@ -20,6 +20,7 @@ describe('Link', () => {
       </Link>
     );
     it('should use the appropriate link class', () => {
+      expect(link.name()).toEqual('a');
       expect(link.hasClass(`${prefix}--link`)).toEqual(true);
     });
     it('should inherit the href property', () => {
@@ -31,5 +32,14 @@ describe('Link', () => {
     it('should all for custom classes to be applied', () => {
       expect(link.hasClass('some-class')).toEqual(true);
     });
+    it('should support disabled link', () => {
+      link.setProps({ disabled: true });
+      expect(link.name()).toEqual('p');
+      expect(link.hasClass(`${prefix}--link--disabled`)).toEqual(true);
+    });
+    it('should support inline link', () => {
+      link.setProps({ inline: true });
+      expect(link.hasClass(`${prefix}--link--inline`)).toEqual(true);
+    });
   });
 });

packages/react/src/components/Link/Link.js

@@ -12,12 +12,16 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const Link = ({ children, className, href, ...other }) => {
-  const classNames = classnames(`${prefix}--link`, className);
+const Link = ({ children, className, href, disabled, inline, ...other }) => {
+  const classNames = classnames(`${prefix}--link`, className, {
+    [`${prefix}--link--disabled`]: disabled,
+    [`${prefix}--link--inline`]: inline,
+  });
+  const Tag = disabled ? 'p' : 'a';
   return (
-    <a href={other.disabled ? null : href} className={classNames} {...other}>
+    <Tag href={disabled ? null : href} className={classNames} {...other}>
       {children}
-    </a>
+    </Tag>
   );
 };
 
@@ -36,6 +40,16 @@ Link.propTypes = {
    * Provide the `href` attribute for the <a> node
    */
   href: PropTypes.string,
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: PropTypes.bool,
 };
 
 export default Link;