From d87e0384ff8b88a5a5ebdc6f18f722ede0761a4e Mon Sep 17 00:00:00 2001
From: Yuri Victor Munayev <yvmunayev@gmail.com>
Date: Tue, 27 Sep 2022 14:38:02 -0400
Subject: [PATCH] feat: add checkbox group component prop size

---
 src/components/CheckboxGroup/checkboxList.js | 5 ++++-
 src/components/CheckboxGroup/index.d.ts      | 1 +
 src/components/CheckboxGroup/index.js        | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/CheckboxGroup/checkboxList.js b/src/components/CheckboxGroup/checkboxList.js
index ae219b03e..a39ebedcf 100644
--- 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,6 +38,7 @@ CheckboxList.propTypes = {
     values: PropTypes.array,
     onChange: PropTypes.func,
     describedBy: PropTypes.string,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 CheckboxList.defaultProps = {
@@ -44,4 +46,5 @@ CheckboxList.defaultProps = {
     onChange: () => {},
     describedBy: undefined,
     name: undefined,
+    size: 'medium',
 };
diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts
index f2b14f57c..7943c971f 100644
--- 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
index a52ba7258..21606902e 100644
--- 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);