Skip to content

Commit 74c364b

Browse files
ustczankaustczanka
authored
Merge pull request #52 from Wikia/checkbox-disabled
checkboxes may be disabled
2 parents 50c20d6 + e1089d7 commit 74c364b

File tree

7 files changed

+100
-12
lines changed

7 files changed

+100
-12
lines changed

‎docs/build/bundle.9d2af518.js renamed to ‎docs/build/bundle.58f16ffb.js

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.9d2af518.js"></script></body></html>
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.58f16ffb.js"></script></body></html>

‎source/components/Checkbox/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,17 @@ initialState = {
99
<Checkbox className="extra-class-name" checked={state.checkbox2} onChange={() => setState({checkbox2: !state.checkbox2})}>Extra className</Checkbox>
1010
</div>
1111
```
12+
13+
Disabled checkbox:
14+
```js
15+
initialState = {
16+
checkbox3: false,
17+
checkbox4: true,
18+
};
19+
20+
<div>
21+
<Checkbox disabled checked={state.checkbox3} onChange={() => setState({checkbox3: !state.checkbox3})}>Disabled unchecked checkbox</Checkbox>
22+
<Checkbox disabled checked={state.checkbox4} onChange={() => setState({checkbox4: !state.checkbox4})}>Disabled checked checkbox</Checkbox>
23+
</div>
24+
```
25+

‎source/components/Checkbox/__snapshots__/index.spec.js.snap

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports[`Checkbox renders correctly checked (and with label and class name) 1`]
77
<input
88
checked={true}
99
className="wds-checkbox__input"
10+
disabled={false}
1011
id="wds-checkbox-2"
1112
onChange={[Function]}
1213
type="checkbox"
@@ -23,13 +24,41 @@ exports[`Checkbox renders correctly checked (and with label and class name) 1`]
2324
</div>
2425
`;
2526

27+
exports[`Checkbox renders correctly when disabled 1`] = `
28+
<div
29+
className="wds-checkbox"
30+
>
31+
<input
32+
checked={false}
33+
className="wds-checkbox__input"
34+
disabled={true}
35+
id="wds-checkbox-3"
36+
onChange={[Function]}
37+
type="checkbox"
38+
/>
39+
<label
40+
className="wds-checkbox__label"
41+
htmlFor="wds-checkbox-3"
42+
>
43+
<div
44+
className="wds-icon wds-icon-small wds-checkbox__icon"
45+
/>
46+
<div
47+
className="wds-icon wds-icon-small wds-checkbox__lock-icon"
48+
/>
49+
disabled checkbox
50+
</label>
51+
</div>
52+
`;
53+
2654
exports[`Checkbox renders correctly with default values 1`] = `
2755
<div
2856
className="wds-checkbox"
2957
>
3058
<input
3159
checked={false}
3260
className="wds-checkbox__input"
61+
disabled={false}
3362
id="wds-checkbox-1"
3463
onChange={[Function]}
3564
type="checkbox"

‎source/components/Checkbox/index.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import uniqueId from 'lodash/uniqueId';
66

77
import IconCheckboxSmall from '../../icons/IconCheckboxSmall';
88
import IconCheckboxEmptySmall from '../../icons/IconCheckboxEmptySmall';
9+
import IconLockSmall from '../../icons/IconLockSmall';
910

1011
import './styles.scss';
1112

@@ -21,15 +22,24 @@ class Checkbox extends React.Component {
2122
children,
2223
className,
2324
checked,
25+
disabled,
2426
onChange,
2527
} = this.props;
2628

2729
return (
2830
<div className={classNames('wds-checkbox', className)}>
29-
<input className="wds-checkbox__input" type="checkbox" id={this.id} checked={checked} onChange={onChange} />
31+
<input
32+
className="wds-checkbox__input"
33+
type="checkbox"
34+
id={this.id}
35+
checked={checked}
36+
onChange={onChange}
37+
disabled={disabled}
38+
/>
3039
<label className="wds-checkbox__label" htmlFor={this.id}>
3140
{checked && <IconCheckboxSmall className="wds-icon wds-icon-small wds-checkbox__icon" />}
3241
{!checked && <IconCheckboxEmptySmall className="wds-icon wds-icon-small wds-checkbox__icon" />}
42+
{disabled && <IconLockSmall className="wds-icon wds-icon-small wds-checkbox__lock-icon" />}
3343
{children}
3444
</label>
3545
</div>
@@ -44,6 +54,8 @@ Checkbox.propTypes = {
4454
children: PropTypes.node,
4555
/** Additional class name */
4656
className: PropTypes.string,
57+
/** Is checkbox disabled */
58+
disabled: PropTypes.bool,
4759
/** Function triggered when checkbox changes its state */
4860
onChange: PropTypes.func.isRequired,
4961
};
@@ -52,6 +64,7 @@ Checkbox.defaultProps = {
5264
checked: false,
5365
children: null,
5466
className: undefined,
67+
disabled: false,
5568
};
5669

5770
export default Checkbox;

‎source/components/Checkbox/index.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,25 @@ test('Checkbox renders correctly checked (and with label and class name)', () =>
2121
expect(component.toJSON()).toMatchSnapshot();
2222
});
2323

24+
test('Checkbox renders correctly when disabled', () => {
25+
const component = renderer.create(
26+
<Checkbox disabled onChange={() => {}}>disabled checkbox</Checkbox>,
27+
);
28+
expect(component.toJSON()).toMatchSnapshot();
29+
});
30+
31+
32+
test('Checkbox is not clickable when disabled', () => {
33+
const mockonChange = sinon.spy();
34+
const wrapper = shallow(
35+
<Checkbox disabled onChange={mockonChange}>disabled</Checkbox>
36+
);
37+
38+
wrapper.find('input').simulate('click');
39+
40+
expect(mockonChange.notCalled).toBe(true);
41+
});
42+
2443
test('Checkbox triggers onChange event', () => {
2544
const mockonChange = sinon.spy();
2645
const wrapper = shallow(

‎source/components/Checkbox/styles.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "~design-system/dist/scss/wds-variables/index.scss";
2+
13
.wds-checkbox {
24
display: inline-flex;
35

@@ -13,4 +15,15 @@
1315
&__icon {
1416
margin-right: 13px;
1517
}
18+
19+
&__input[disabled] + .wds-checkbox__label {
20+
color: $wds-fandom-color-middle-gray;
21+
position: relative;
22+
23+
.wds-checkbox__lock-icon {
24+
left: 0;
25+
position: absolute;
26+
right: 0;
27+
}
28+
}
1629
}

0 commit comments

Comments
 (0)