feat(link): add support for icon with standalone links (#8361)

* feat(link): add support for icon with standalone links

* fix(link): correct alignment when disabled

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <josh@josh.black>

Author: 4 people

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

@@ -25,6 +25,7 @@
     @include reset;
     @include type-style('body-short-01');
 
+    display: inline-flex;
     color: $link-primary;
     text-decoration: none;
     outline: none;
@@ -60,7 +61,6 @@
     @include reset;
     @include type-style('body-short-01');
 
-    display: inline;
     color: $text-disabled;
     font-weight: 400;
     text-decoration: none;
@@ -95,6 +95,12 @@
   .#{$prefix}--link--lg {
     @include type-style('body-short-02');
   }
+
+  .#{$prefix}--link__icon {
+    display: inline-flex;
+    align-self: center;
+    margin-left: $spacing-03;
+  }
 }
 
 @include exports('link') {

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3227,6 +3227,19 @@ Map {
       "inline": Object {
         "type": "bool",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "size": Object {
         "args": Array [
           Array [

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

@@ -10,6 +10,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
+import { Download16 } from '@carbon/icons-react';
 import Link from '../Link';
 import mdx from './Link.mdx';
 
@@ -52,4 +53,10 @@ _Default.story = {
   name: 'Link',
 };
 
+export const PairedWithIcon = () => (
+  <Link href="http://www.carbondesignsystem.com" renderIcon={Download16}>
+    Download
+  </Link>
+);
+
 export const Playground = () => <Link {...props()}>Link</Link>;

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

@@ -19,6 +19,7 @@ const Link = ({
   disabled,
   inline,
   visited,
+  renderIcon: Icon,
   size,
   ...other
 }) => {
@@ -38,6 +39,11 @@ const Link = ({
       rel={rel}
       {...other}>
       {children}
+      {!inline && Icon && (
+        <div className={`${prefix}--link__icon`}>
+          <Icon />
+        </div>
+      )}
     </Tag>
   );
 };
@@ -68,6 +74,12 @@ Link.propTypes = {
    */
   inline: PropTypes.bool,
 
+  /**
+   * Optional prop to render an icon next to the link.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */