feat: add prop size to VisualPicker component (#1527)

* feat: add prop size to VisualPicker component fix: #1519 * fix: optimize code * fix: add examples * fix: modify style * fix: modify styles * fix: modify style according to the last comments
nexxtway · May 11, 2020 · 609d3f6 · 609d3f6
1 parent e90a7d7
commit 609d3f6
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 6 deletions.
diff --git a/src/components/VisualPicker/index.d.ts b/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>;

diff --git a/src/components/VisualPicker/index.js b/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,
 };

diff --git a/src/components/VisualPicker/readme.md b/src/components/VisualPicker/readme.md
@@ -243,3 +243,145 @@ class SimpleVisualPickerWithFooter extends React.Component {
     <SimpleVisualPickerWithFooter />
 </div>
 ```
+
+##### VisualPicker small
+
+```js
+import React from 'react';
+import { VisualPicker, VisualPickerOption } from 'react-rainbow-components';
+import styled from 'styled-components';
+
+const StyledHeader = styled.h1.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    font-size: 24px;
+    font-weight: 300;
+    color: ${props => props.text.main};
+`;
+
+const StyledLabel = styled.h2.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    font-size: 12px;
+    font-weight: 300;
+    margin-top:6px
+    color: ${props => props.text.label};
+`;
+
+class SimpleVisualPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: null,
+        };
+        this.handleOnChange = this.handleOnChange.bind(this);
+    }
+
+    handleOnChange(value) {
+        return this.setState({ value });
+    }
+
+    render() {
+        return (
+            <VisualPicker
+                id="visual-picker-component-7"
+                label="Select Option"
+                value={this.state.value}
+                onChange={this.handleOnChange}
+                size="small"
+            >
+                <VisualPickerOption name="option-1">
+                    <DesignIcon />
+                    <StyledLabel>Design</StyledLabel>
+                </VisualPickerOption>
+                <VisualPickerOption name="option-2">
+                    <PhotographerIcon />
+                    <StyledLabel>Photographer</StyledLabel>
+                </VisualPickerOption>
+                <VisualPickerOption name="option-3">
+                    <CodeIcon />
+                    <StyledLabel>Programmer</StyledLabel>
+                </VisualPickerOption>
+            </VisualPicker>
+        );
+    }
+}
+
+<div className="rainbow-align-content_center rainbow-m-around_xx-large rainbow-flex_column">
+    <StyledHeader className="rainbow-m-bottom_medium">
+        What are you doing?
+    </StyledHeader>
+    <SimpleVisualPicker />
+</div>
+```
+
+##### VisualPicker large
+
+```js
+import React from 'react';
+import { VisualPicker, VisualPickerOption } from 'react-rainbow-components';
+import styled from 'styled-components';
+
+const StyledHeader = styled.h1.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    font-size: 24px;
+    font-weight: 300;
+    color: ${props => props.text.main};
+`;
+
+const StyledLabel = styled.h2.attrs(props => {
+    return props.theme.rainbow.palette;
+})`
+    font-size: 15px;
+    font-weight: 300;
+    margin-top:6px
+    color: ${props => props.text.label};
+`;
+
+class SimpleVisualPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: null,
+        };
+        this.handleOnChange = this.handleOnChange.bind(this);
+    }
+
+    handleOnChange(value) {
+        return this.setState({ value });
+    }
+
+    render() {
+        return (
+            <VisualPicker
+                id="visual-picker-component-9"
+                label="Select Option"
+                value={this.state.value}
+                onChange={this.handleOnChange}
+                size="large"
+            >
+                <VisualPickerOption name="option-1">
+                    <DesignIcon />
+                    <StyledLabel>Design</StyledLabel>
+                </VisualPickerOption>
+                <VisualPickerOption name="option-2">
+                    <PhotographerIcon />
+                    <StyledLabel>Photographer</StyledLabel>
+                </VisualPickerOption>
+                <VisualPickerOption name="option-3">
+                    <CodeIcon />
+                    <StyledLabel>Programmer</StyledLabel>
+                </VisualPickerOption>
+            </VisualPicker>
+        );
+    }
+}
+
+<div className="rainbow-align-content_center rainbow-m-around_xx-large rainbow-flex_column">
+    <StyledHeader className="rainbow-m-bottom_medium">
+        What are you doing?
+    </StyledHeader>
+    <SimpleVisualPicker />
+</div>
+```
diff --git a/src/components/VisualPickerOption/index.js b/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 />

diff --git a/src/components/VisualPickerOption/styled/content.js b/src/components/VisualPickerOption/styled/content.js
@@ -1,9 +1,10 @@
 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;
-    width: 100%;
+    height: ${props => sizeMap[props.size] || sizeMap.medium};
+    width: ${props => sizeMap[props.size] || sizeMap.medium};
     border-radius: 22px;
     box-shadow: ${props => props.shadows.shadow_4};
     border: solid 2px ${props => props.palette.border.divider};

diff --git a/src/components/VisualPickerOption/styled/label.js b/src/components/VisualPickerOption/styled/label.js
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 const StyledLabel = styled.label`
     display: flex;
     flex-direction: column;
-    width: 142px;
     box-sizing: border-box;
+    align-items: center;
 `;
 
 export default StyledLabel;
diff --git a/src/components/types.d.ts b/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';