feat: add prop size to VisualPicker component

src/components/VisualPicker/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ComponentType } from 'react';
-import { BaseProps } from '../types';
+import { BaseProps, VisualPickerSize } from '../types';
 
 type Value = string[] | string;
 
@@ -13,6 +13,7 @@ export interface VisualPickerProps extends BaseProps {
     error?: ReactNode;
     children?: ReactNode;
     multiple?: boolean;
+    size?: VisualPickerSize;
 }
 
 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

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
+const sizeMap = { large: '210px', medium: '142px', small: '100px' };
 const StyledContent = attachThemeAttrs(styled.span)`
-    height: 142px;
+    height: ${props => sizeMap[props.size] || '142px'};
     width: 100%;
     border-radius: 22px;
     box-shadow: ${props => props.shadows.shadow_4};

src/components/types.d.ts

@@ -18,6 +18,7 @@ export type ButtonIconVariant =
     | 'border-filled'
     | 'border-inverse'
     | 'inverse';
+export type VisualPickerSize = 'small' | 'medium' | 'large';
 
 export type IconPosition = 'left' | 'right';