feat: add checkbox group component prop size

nexxtway · Sep 27, 2022 · d87e038 · d87e038
1 parent f5e8fac
commit d87e038
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/components/CheckboxGroup/checkboxList.js b/src/components/CheckboxGroup/checkboxList.js
@@ -7,7 +7,7 @@ import StyledItemDescription from '../RadioGroup/styled/itemDescription';
 import RenderIf from '../RenderIf';
 
 export default function CheckboxList(props) {
-    const { values, options, onChange, describedBy, name, error } = props;
+    const { values, options, onChange, describedBy, name, error, size } = props;
     return options.map((option, index) => {
         const key = `checkbox-${index}`;
         const { description, ...rest } = option;
@@ -22,6 +22,7 @@ export default function CheckboxList(props) {
                     ariaDescribedBy={describedBy}
                     name={name}
                     error={error}
+                    size={size}
                 />
                 <RenderIf isTrue={description}>
                     <StyledItemDescription>{description}</StyledItemDescription>
@@ -37,11 +38,13 @@ CheckboxList.propTypes = {
     values: PropTypes.array,
     onChange: PropTypes.func,
     describedBy: PropTypes.string,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 CheckboxList.defaultProps = {
     values: [],
     onChange: () => {},
     describedBy: undefined,
     name: undefined,
+    size: 'medium',
 };
diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts
@@ -20,6 +20,7 @@ export interface CheckboxGroupProps extends BaseProps {
     onChange?: (values: string[]) => void;
     id?: string;
     orientation?: 'vertical' | 'horizontal';
+    size?: 'small' | 'medium' | 'large';
 }
 
 declare const CheckboxGroup: ComponentType<CheckboxGroupProps>;

diff --git a/src/components/CheckboxGroup/index.js b/src/components/CheckboxGroup/index.js
@@ -61,6 +61,7 @@ class CheckboxGroup extends Component {
             style,
             className,
             orientation,
+            size,
         } = this.props;
         return (
             <StyledFieldset id={id} className={className} style={style}>
@@ -81,6 +82,7 @@ class CheckboxGroup extends Component {
                         name={this.groupNameId}
                         describedBy={this.getErrorMessageId()}
                         error={error}
+                        size={size}
                     />
                 </StyledContentContainer>
                 <RenderIf isTrue={error}>
@@ -127,6 +129,8 @@ CheckboxGroup.propTypes = {
     id: PropTypes.string,
     /** The orientation of the element. */
     orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+    /** The size of the input. Valid values are small, and large. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 CheckboxGroup.defaultProps = {
@@ -143,6 +147,7 @@ CheckboxGroup.defaultProps = {
     style: undefined,
     id: undefined,
     orientation: 'vertical',
+    size: 'medium',
 };
 
 export default withReduxForm(CheckboxGroup);