feat(ui-link): add variants to <Link>

INSTUI-4506

Author: HerrTopi

packages/ui-link/src/Link/README.md

@@ -22,6 +22,41 @@ type: example
 </View>
 ```
 
+### Variant
+
+In order to make it easy to get the most commonly used links, we have the variant prop. It will set all the necessary styles (fontSize, lineHeight, and textDecoration).
+
+```js
+---
+type: example
+---
+<div>
+<div>
+In a line of text you should use the <Link variant="inline" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline</Link> link variant.
+</div>
+
+<br></br>
+<div>
+<Text variant="contentSmall">In a line of text, where the text is smaller, use the
+  <Link variant="inline-small"  renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline-small</Link> link variant
+</Text>
+</div>
+
+<br></br>
+<div>
+If the link is standalone (not in a text), use the `standalone`
+
+<Link display="block" variant="standalone" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone</Link>
+</div>
+
+<br></br>
+<div>
+If the link is standalone (not in a text), but smaller, use the `standalone-small`
+<Link display="block" variant="standalone-small"  renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone-small</Link>
+</div>
+</div>
+```
+
 ### Adding margin
 
 Use the `margin` prop to add space to the left or right of the Link. Because
@@ -76,6 +111,8 @@ Use the `renderIcon` property to put an [icon](#icons) inside a Link. To positio
 icon _after_ the link text, change the `iconPlacement` property to `end`. You can also
 render a Link with just an icon. Don't forget to add text for screen readers, though.
 
+NOTE: if you want the icon to have the same `font-size` as the link, do not specify its `size`!
+
 ```js
 ---
 type: example

packages/ui-link/src/Link/index.tsx

@@ -79,12 +79,23 @@ class Link extends Component<LinkProps, LinkState> {
   }
   ref: Element | null = null
 
+  checkProps = () => {
+    const { variant, isWithinText } = this.props
+    if (variant && isWithinText) {
+      console.warn(
+        '<Link> when `variant` is used, `isWithinText` is ignored. Please remove it!'
+      )
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.(this.makeStyleProps())
+    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.(this.makeStyleProps())
+    this.checkProps()
   }
 
   makeStyleProps = (): LinkStyleProps => {
@@ -252,9 +263,9 @@ class Link extends Component<LinkProps, LinkState> {
         tabIndex={tabIndex}
         css={this.props.styles?.link}
       >
-        {renderIcon && iconPlacement === 'start' && this.renderIcon()}
+        {renderIcon && iconPlacement === 'start' ? this.renderIcon() : null}
         {children}
-        {renderIcon && iconPlacement === 'end' && this.renderIcon()}
+        {renderIcon && iconPlacement === 'end' ? this.renderIcon() : null}
       </View>
     )
   }

packages/ui-link/src/Link/props.ts

@@ -129,6 +129,11 @@ type LinkOwnProps = {
    * Fires when the Link is hovered
    */
   onMouseEnter?: (event: React.MouseEvent<ViewOwnProps>) => void
+
+  /**
+   * Sets pre-defined values for the component to achieve specific roles for the component
+   */
+  variant?: 'inline' | 'inline-small' | 'standalone' | 'standalone-small'
 }
 
 export type LinkStyleProps = {
@@ -174,7 +179,13 @@ const propTypes: PropValidators<PropKeys> = {
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onFocus: PropTypes.func,
-  onMouseEnter: PropTypes.func
+  onMouseEnter: PropTypes.func,
+  variant: PropTypes.oneOf([
+    'inline',
+    'inline-small',
+    'standalone',
+    'standalone-small'
+  ])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -194,7 +205,8 @@ const allowedProps: AllowedPropKeys = [
   'onBlur',
   'onClick',
   'onFocus',
-  'onMouseEnter'
+  'onMouseEnter',
+  'variant'
 ]
 
 export type { LinkProps, LinkState, LinkStyle }

packages/ui-link/src/Link/styles.ts

@@ -40,10 +40,33 @@ const generateStyle = (
   props: LinkProps,
   state: LinkStyleProps
 ): LinkStyle => {
-  const { isWithinText, renderIcon, iconPlacement, color } = props
+  const { isWithinText, renderIcon, iconPlacement, color, variant } = props
   const { containsTruncateText, hasVisibleChildren } = state
   const inverseStyle = color === 'link-inverse'
 
+  const variantStyles = {
+    inline: {
+      fontSize: '1rem',
+      lineHeight: '1.5rem',
+      textDecoration: 'underline'
+    },
+    'inline-small': {
+      fontSize: '0.875rem',
+      lineHeight: '1.3125rem',
+      textDecoration: 'underline'
+    },
+    standalone: {
+      fontSize: '1rem',
+      lineHeight: '1.5rem',
+      textDecoration: 'none'
+    },
+    'standalone-small': {
+      fontSize: '0.875rem',
+      lineHeight: '1.3125rem',
+      textDecoration: 'none'
+    }
+  }
+
   const baseStyles = {
     boxSizing: 'border-box',
     fontFamily: componentTheme.fontFamily,
@@ -96,7 +119,8 @@ const generateStyle = (
       textDecoration: isWithinText
         ? componentTheme.hoverTextDecorationWithinText
         : componentTheme.hoverTextDecorationOutsideText
-    }
+    },
+    ...(variant ? variantStyles[variant] : {})
   }
 
   const buttonStyle = {
@@ -108,7 +132,8 @@ const generateStyle = (
     fontSize: '1em',
     margin: 0,
     padding: 0,
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    ...(variant ? variantStyles[variant] : {})
   }
 
   const inverseStyles = {