Skip to content
This repository was archived by the owner on Sep 26, 2024. It is now read-only.

Commit 5046e7a

Browse files
committed
Merge branch 'master' of github.com:bufferapp/buffer-components into task/automated-a11y-tests
2 parents d17340d + 8e0cdea commit 5046e7a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+7212
-2079
lines changed

.storybook/webpack.config.js

Lines changed: 0 additions & 28 deletions
This file was deleted.

Button/index.jsx

Lines changed: 28 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,32 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import { classNames } from '../lib/utils';
4-
import styles from './style.css';
2+
import ButtonStateless from '../ButtonStateless';
3+
import PseudoClassComponent from '../PseudoClassComponent';
54

6-
const Button = ({
7-
borderless,
8-
children,
9-
disabled,
10-
fillContainer,
11-
large,
12-
onClick,
13-
secondary,
14-
small,
15-
tertiary,
16-
warning,
17-
noStyle,
18-
}) => {
19-
const classes = classNames(styles, {
20-
button: !noStyle,
21-
borderless,
22-
large,
23-
secondary,
24-
small,
25-
tertiary,
26-
warning,
27-
'fill-container': fillContainer,
28-
'no-style': noStyle,
29-
});
30-
return (
31-
<button
32-
className={classes}
33-
onClick={onClick}
34-
disabled={disabled}
35-
>
36-
{children}
37-
</button>
38-
);
39-
};
40-
41-
Button.propTypes = {
42-
children: PropTypes.node,
43-
borderless: PropTypes.bool,
44-
disabled: PropTypes.bool,
45-
fillContainer: PropTypes.bool,
46-
large: PropTypes.bool,
47-
noStyle: PropTypes.bool,
48-
onClick: PropTypes.func,
49-
secondary: PropTypes.bool,
50-
small: PropTypes.bool,
51-
tertiary: PropTypes.bool,
52-
warning: PropTypes.bool,
53-
};
5+
class Button extends PseudoClassComponent {
6+
render() {
7+
const { children, ...rest } = this.props;
8+
let hoveredChildren = children;
9+
// string as children isn't clonable
10+
if (React.isValidElement(children)) {
11+
hoveredChildren = React.cloneElement(
12+
children,
13+
{ hovered: this.state.hovered },
14+
);
15+
}
16+
return (
17+
<ButtonStateless
18+
{...rest}
19+
hovered={this.state.hovered}
20+
focused={this.state.focused}
21+
onMouseEnter={() => this.handleMouseEnter()}
22+
onMouseLeave={() => this.handleMouseLeave()}
23+
onFocus={() => this.handleFocus()}
24+
onBlur={() => this.handleBlur()}
25+
>
26+
{hoveredChildren}
27+
</ButtonStateless>
28+
);
29+
}
30+
}
5431

5532
export default Button;

Button/story.jsx

Lines changed: 10 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,23 @@
11
import React from 'react';
22
import {
3-
storiesOf,
43
action,
4+
storiesOf,
55
} from '@kadira/storybook';
66
import { checkA11y } from 'storybook-addon-a11y';
77
import Button from './index';
8-
import Text from '../Text';
8+
import CloseIcon from '../Icon/Icons/CloseIcon';
99

1010
storiesOf('Button')
1111
.addDecorator(checkA11y)
12-
.add('Default', () => (
13-
<Button>Button text</Button>
14-
))
15-
.add('borderless', () => (
16-
<Button borderless>Button text</Button>
17-
))
18-
.add('disabled', () => (
19-
<div>
20-
<p>Default</p>
21-
<Button disabled>Button text</Button><br /><br />
22-
<p>Borderless</p>
23-
<Button disabled borderless>Button text</Button><br /><br />
24-
<p>Large</p>
25-
<Button disabled large>Button text</Button><br /><br />
26-
<p>Secondary</p>
27-
<Button disabled secondary>Button text</Button><br /><br />
28-
<p>Small</p>
29-
<Button disabled small>Button text</Button><br /><br />
30-
<p>Tertiary</p>
31-
<Button disabled tertiary>Button text</Button><br /><br />
32-
<p>Warning</p>
33-
<Button disabled warning>Button text</Button>
34-
<p>Click Events Should Not Fire</p>
35-
<Button
36-
disabled
37-
onClick={action('button-click--should-not-happen')}
38-
>
39-
No Events :(
40-
</Button>
41-
</div>
42-
))
43-
.add('large', () => (
44-
<Button large>Button text</Button>
45-
))
46-
.add('secondary', () => (
47-
<Button secondary>Button text</Button>
48-
))
49-
.add('small', () => (
50-
<Button small>Button text</Button>
51-
))
52-
.add('tertiary', () => (
53-
<Button tertiary>Button text</Button>
54-
))
55-
.add('warning', () => (
56-
<Button warning>Button text</Button>
12+
.add('default', () => (
13+
<Button onClick={action('on-click')}>Click Me</Button>
5714
))
58-
.add('fillContainer', () => (
59-
<div style={{ boxSizing: 'border-box' }}>
60-
<Button fillContainer>Max WIDTH</Button>
61-
</div>
15+
.add('warning button', () => (
16+
<Button onClick={action('on-click')} warning>Warning</Button>
6217
))
63-
.add('onClick event', () => (
64-
<Button
65-
onClick={action('button-click')}
66-
>
67-
Click Me
68-
</Button>
18+
.add('with icon and text', () => (
19+
<Button onClick={action('on-click')} noStyle><CloseIcon />Close</Button>
6920
))
70-
.add('noStyle', () => (
71-
<Button
72-
onClick={action('button-click')}
73-
noStyle
74-
>
75-
<Text size={'small'}>Use this as an a11y friendly click target</Text>
76-
</Button>
21+
.add('with icon only', () => (
22+
<Button onClick={action('on-click')} noStyle><CloseIcon /></Button>
7723
));

Button/style.css

Lines changed: 0 additions & 188 deletions
This file was deleted.

0 commit comments

Comments
 (0)