All files / elements/typography/Link styled.js

100% Statements 6/6
100% Branches 0/0
100% Functions 1/1
100% Lines 5/5

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78                                          21x         9x                                   9x                                         9x               9x        
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { fontWeight, space } from 'styled-system';
import { getGlobalOverrides } from 'src/global-styles';
import {
  colorCore,
  defaultStylesBase,
  ellipsisCore,
  fontFamilyCore,
  fontSizeCore,
  fontStyleCore,
  letterSpacingCore,
  lineHeightCore,
  resolveColor,
  textAlignCore,
  textDecorationCore,
  typography,
} from 'src/utils/styledHelpers';
import { LinkComponent } from './component';
 
 
const hoverStyle = props => `
  color: ${resolveColor(props.hoverColor, getGlobalOverrides(props))};
  cursor: pointer;
`;
 
const Link = styled(LinkComponent)`
  ${colorCore}
  ${ellipsisCore}
  ${fontFamilyCore}
  ${fontSizeCore}
  ${fontWeight}
  ${letterSpacingCore}
  ${lineHeightCore}
  ${fontStyleCore}
  ${textAlignCore}
  ${textDecorationCore}
  ${space}
  &:hover,
  &:active {
    ${hoverStyle}
  }
`;
 
Link.propTypes = {
  ...typography.propTypes,
  /** Define properties for an email.  Fill in props and the control will generate the proper string. */
  emailHref: PropTypes.shape({
    /** Sets the BCC line. Can be comma-seperatred list. */
    bcc: PropTypes.string,
    /** Sets the Body. */
    body: PropTypes.string,
    /** Sets the CC line. Can be comma-seperatred list. */
    cc: PropTypes.string,
    /** Sets the Subject Line. */
    subject: PropTypes.string,
    /** Sets who to send it to. Can be comma-seperatred list. */
    to: PropTypes.string,
  }),
  /** Define a custom color for a link element.  This is intended for single use primarily, brandLinkHover should be defined in the theme. */
  hoverColor: PropTypes.string,
  /** The base component will utilize react-router's Link component.  You will still need to wrap this in a Router component. */
  to: PropTypes.string,
};
 
Link.defaultProps = {
  ...defaultStylesBase,
  color: 'brandLink',
  emailHref: {},
  hoverColor: 'brandLinkHover',
  textDecoration: 'none',
};
 
Link.Router = Link;
 
/** @component */
export { Link };