Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 8x 89x 8x 89x 89x 89x 8x 8x 8x 8x |
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
fontWeight,
layout,
space,
} from 'styled-system';
import propTypes from '@styled-system/prop-types';
import {
colorCore,
ellipsisCore,
fontFamilyCore,
fontSizeCore,
fontStyleCore,
letterSpacingCore,
lineHeightCore,
scaleFont,
textAlignCore,
textDecorationCore,
typography,
} from 'src/utils/styledHelpers';
import { removeSomeProps } from 'src/utils/componentHelpers';
import { getGlobalStyles } from 'src/global-styles';
const { grid: { gutter } } = getGlobalStyles();
const opacity = props => `${props.disabled ? 'opacity: 0.6;' : ''}`;
const CheckboxLabelComponent = ({ children, ...props }) => {
const propsToTrim = [
...Object.keys(typography.propTypes),
...Object.keys(propTypes.flexbox),
...Object.keys(propTypes.layout),
...Object.keys(propTypes.space),
'controlGroupProps',
];
const labelProps = removeSomeProps(props, propsToTrim);
return (
// eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
<label {...labelProps}>
{ children }
</label>
);
};
CheckboxLabelComponent.propTypes = {
children: PropTypes.any,
};
CheckboxLabelComponent.defaultProps = {
children: null,
};
const CheckboxLabel = styled(CheckboxLabelComponent)`
${colorCore}
${ellipsisCore}
${fontFamilyCore}
${fontSizeCore}
${fontWeight}
${layout}
${letterSpacingCore}
${lineHeightCore}
${fontStyleCore}
${textAlignCore}
${textDecorationCore}
${opacity}
${space}
cursor: pointer;
`;
CheckboxLabel.defaultProps = {
display: 'inline-block',
mr: scaleFont(gutter, 1),
};
export { CheckboxLabel };
|