feat: add prop size to VisualPicker component

src/components/VisualPicker/index.d.ts

@@ -13,6 +13,7 @@ export interface VisualPickerProps extends BaseProps {
     error?: ReactNode;
     children?: ReactNode;
     multiple?: boolean;
+    size?: string;
 }
 
 declare const VisualPicker: React.ComponentType<VisualPickerProps>;

src/components/VisualPicker/index.js

@@ -56,13 +56,15 @@ class VisualPicker extends Component {
             value,
             multiple,
             className,
+            size,
         } = this.props;
         const context = {
             ariaDescribedby: this.getErrorMessageId(),
             groupName: this.groupNameId,
             privateOnChange: this.handleChange,
             value,
             multiple,
+            size,
         };
 
         return (
@@ -103,6 +105,9 @@ VisualPicker.propTypes = {
     className: PropTypes.string,
     /** It is an object with custom style applied to the root element. */
     style: PropTypes.object,
+    /** The size of the VisualPicker. Valid values are small, medium, and large.
+     * This value defaults to medium. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
     /**
      * This prop that should not be visible in the documentation.
      * @ignore
@@ -122,6 +127,7 @@ VisualPicker.defaultProps = {
     error: null,
     className: undefined,
     style: undefined,
+    size: 'medium',
     children: [],
     multiple: false,
 };

src/components/VisualPickerOption/index.js

@@ -42,7 +42,7 @@ class PickerOption extends Component {
     }
 
     render() {
-        const { disabled, children, footer, style, className } = this.props;
+        const { disabled, children, footer, style, className, size } = this.props;
         const { groupName, ariaDescribedby } = this.props;
 
         return (
@@ -63,7 +63,7 @@ class PickerOption extends Component {
                 />
 
                 <StyledLabel data-id="visual-picker_option-label" htmlFor={this.inputId}>
-                    <StyledContent data-id="visual-picker_option">
+                    <StyledContent data-id="visual-picker_option" size={size}>
                         <RenderIf isTrue={this.isChecked()}>
                             <StyledCheckedTriangle />
                             <StyledCheckmarkIcon />

src/components/VisualPickerOption/styled/content.js

@@ -13,6 +13,21 @@ const StyledContent = attachThemeAttrs(styled.span)`
     justify-content: center;
     align-items: center;
     position: relative;
+    ${props =>
+        props.size === 'large' &&
+        `
+            height: 210px;
+        `};
+    ${props =>
+        props.size === 'medium' &&
+        `
+            height: 142px;
+        `};
+    ${props =>
+        props.size === 'small' &&
+        `
+            height: 100px;
+        `};
 `;
 
 export default StyledContent;