# All files / src/Link Link.styles.ts

100% Statements 11/11
100% Branches 14/14
100% Functions 1/1
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    559x
    9x
    9x
    9x

    46x
    46x

    1x

    1x

    44x

    9x

     import styled, { css } from 'styled-components'
    import { getBorderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { focusable } from '../_styles/mixins'
    import { LinkProps } from './Link.types'

    function getLinkColors({ variant = 'default' }) {
      switch (variant) {
        case 'gray':
          return css`
            color: ${colors.gray30};

            &:hover {
              color: ${colors.orange50};
            }
          `
        case 'white':
          return css`
            color: ${colors.white};

            &:hover {
              color: ${colors.white};
            }
          `
        case 'default':
        default:
          return css`
            color: ${colors.blue45};

            &:hover {
              color: ${colors.blue30};
            }
          `
      }
    }

    export const StyledLink = styled.a<LinkProps>`
      text-decoration: underline;

      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }

      ${focusable}

      // the focusable mixin applies the class and pseudo selector
      &.focus,
      &:focus {
        ${getBorderRadius('md')};
      }

      ${getLinkColors}
    `