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

INSTUI-4506

Author: HerrTopi

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

@@ -22,6 +22,37 @@ 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 <code>standalone</code> <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 <code>standalone-small</code> <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 +107,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

@@ -252,9 +252,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 = {

packages/ui-text/src/Text/index.tsx

@@ -53,32 +53,12 @@ class Text extends Component<TextProps> {
     children: null
   } as const
 
-  checkProps() {
-    const { variant, size, lineHeight, weight, fontStyle } = this.props
-    if (variant) {
-      if (size) {
-        console.warn("[Text]: Don't use 'size' with 'variant' ")
-      }
-      if (lineHeight) {
-        console.warn("[Text]: Don't use 'lineHeight' with 'variant' ")
-      }
-      if (weight) {
-        console.warn("[Text]: Don't use 'weight' with 'variant' ")
-      }
-      if (fontStyle) {
-        console.warn("[Text]: Don't use 'fontStyle' with 'variant' ")
-      }
-    }
-  }
-
   componentDidMount() {
     this.props.makeStyles?.()
-    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.()
-    this.checkProps()
   }
 
   render() {