joyent-portal/packages/ui-toolkit/src/form/checkbox.js
Sérgio Ramos 882cb68ec2 feat(ui-toolkit): a more reusable ui-toolkit
- remove dependencies on redux-form, react-router-dom, and react-redux.
 - work with every font, and don't bundle fonts
 - don't bundle editor
2017-12-15 15:23:38 +00:00

61 lines
1.0 KiB
JavaScript

import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import BaseInput from './base/input';
import BaseToggle from './base/toggle';
import Baseline from '../baseline';
const Li = styled.li`
list-style-type: none;
display: flex;
align-items: center;
label {
font-weight: 400;
}
`;
const Ul = styled.ul`
margin: 0;
padding: 0;
`;
const CheckboxItem = BaseInput(({ children }) => <Li>{children}</Li>);
const CheckboxStyled = Baseline(
BaseInput(
BaseToggle({
container: CheckboxItem,
type: 'checkbox'
})
)
);
/**
* @example ./usage-checkbox.md
*/
const Checkbox = ({ children, ...rest }) => (
<CheckboxStyled {...rest}>{children}</CheckboxStyled>
);
export const CheckboxList = Baseline(Ul);
export default Checkbox;
Checkbox.propTypes = {
/**
* Is the checkbox checked ?
*/
checked: PropTypes.bool,
/**
* Is the checkbox disabled ?
*/
disabled: PropTypes.bool
};
Checkbox.defaultProps = {
checked: false,
disabled: false
};