joyent-portal/packages/ui-toolkit/src/anchor/index.js

63 lines
1.2 KiB
JavaScript
Raw Normal View History

import React from 'react';
import styled, { css } from 'styled-components';
import { A } from 'normalized-styled-components';
2017-09-26 19:07:45 +03:00
import is, { isOr } from 'styled-is';
import PropTypes from 'prop-types';
import { Link as BaseLink } from 'react-router-dom';
import Baseline from '../baseline';
const style = css`
color: ${props => props.theme.primary};
2017-09-26 19:07:45 +03:00
&:hover {
text-decoration: none;
2017-09-26 19:07:45 +03:00
}
${isOr('secondary', 'reversed')`
color: ${props => props.theme.white};
`};
${is('disabled')`
color: ${props => props.theme.grey};
2017-09-26 19:07:45 +03:00
pointer-events: none;
&:hover {
text-decoration: underline;
}
`};
`;
2017-10-11 19:59:59 +03:00
const StyledAnchor = A.extend`
${style};
`;
2017-10-11 19:59:59 +03:00
const StyledLink = styled(BaseLink)`
${style};
`;
/**
* @example ./usage.md
*/
const Anchor = ({ children, ...rest }) => {
const { to = '' } = rest;
const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
2017-08-28 22:21:08 +03:00
return <View {...rest}>{children}</View>;
};
Anchor.propTypes = {
/**
* The `<a>` text
*/
children: PropTypes.node,
secondary: PropTypes.bool
};
Anchor.defaultProps = {
secondary: false
};
export default Baseline(Anchor);