anchor button

This commit is contained in:
Sérgio Ramos 2017-01-09 12:01:26 +00:00
parent b66d32f33d
commit 73240d9165
2 changed files with 51 additions and 3 deletions

View File

@ -1,6 +1,7 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const match = require('../../shared/match'); const match = require('../../shared/match');
const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
@ -13,7 +14,8 @@ const {
} = fns; } = fns;
const { const {
default: styled default: styled,
css
} = Styled; } = Styled;
const background = match({ const background = match({
@ -56,17 +58,33 @@ const borderRadius = match({
}, remcalc(boxes.borderRadius)); }, remcalc(boxes.borderRadius));
// based on bootstrap 4 // based on bootstrap 4
module.exports = styled.button` const style = css`
box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 0; margin: 0;
padding: ${remcalc('14 16')}; padding: ${remcalc('14 16')};
position: relative;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
font-style: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -109,3 +127,27 @@ module.exports = styled.button`
pointer-events: none; pointer-events: none;
} }
`; `;
const StyledButton = styled.button`
${style}
`;
const StyledAnchor = styled.a`
display: inline-block !important;
${style}
`;
const Button = (props) => {
return props.href ? (
<StyledAnchor {...props} />
) : (
<StyledButton {...props} />
);
};
Button.propTypes = {
href: React.PropTypes.string
};
module.exports = Button;

View File

@ -131,6 +131,12 @@ storiesOf('Button', module)
<Button disabled> <Button disabled>
Inspire the liars Inspire the liars
</Button> </Button>
)).add('Anchor', () => (
<div>
<Button href='#'>
Inspire the anchor
</Button>
</div>
)); ));
storiesOf('Checkbox', module) storiesOf('Checkbox', module)