Merge pull request #238 from nginformatica/helper-fixes

0.24.5 - Added helper button on the CheckBox component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.vercel.app",

src/core/Checkbox.tsx

@@ -4,9 +4,9 @@ import {
     Switch as MuiSwitch,
     Typography
 } from '@material-ui/core'
-import React, { ChangeEvent, ReactNode, FC } from 'react'
+import React, { ChangeEvent, ReactNode } from 'react'
 import { IDefault } from './Advertise'
-
+import { HelperBox, TextFieldWrapper as CheckFieldsWrapper } from './TextField'
 interface IProps extends IDefault {
     name: string
     label?: ReactNode
@@ -16,11 +16,33 @@ interface IProps extends IDefault {
     checked?: boolean
     dense?: boolean
     type?: 'switch' | 'checkbox'
+    helperIcon?: React.ReactNode
+    onHelperClick?: () => void
     onChange?: (event: ChangeEvent<HTMLElement>) => void
 }
 
-const Checkbox: FC<IProps> = props => {
-    const { type = 'checkbox', margin, padding, style } = props
+const Checkbox = (props: IProps) => {
+    const {
+        type = 'checkbox',
+        margin,
+        padding,
+        style,
+        helperIcon,
+        onHelperClick
+    } = props
+
+    const renderHelper = (
+        <>
+            {
+                onHelperClick && (
+                    <HelperBox
+                        helperIcon={ helperIcon }
+                        onHelperClick={ onHelperClick }
+                    />
+                )
+            }
+        </>
+    )
 
     const renderCheckbox = () =>
         <MuiCheckbox
@@ -58,16 +80,23 @@ const Checkbox: FC<IProps> = props => {
             )
             : props.label
 
-    return props.label
-        ? (
-            <MuiFormControlLabel
-                style={ { padding, margin, ...style } }
-                className={ props.className }
-                label={ renderLabel() }
-                control={ renderControl() }
-            />
-        )
-        : renderControl()
+    return (
+        <CheckFieldsWrapper>
+            {
+                props.label
+                    ? (
+                        <MuiFormControlLabel
+                            style={ { padding, margin, ...style } }
+                            className={ props.className }
+                            label={ renderLabel() }
+                            control={ renderControl() }
+                        />
+                    )
+                    : renderControl()
+            }
+            { renderHelper }
+        </CheckFieldsWrapper>
+    )
 }
 
 export default Checkbox

src/core/ExpansionPanel.tsx

@@ -3,11 +3,11 @@ import MuiExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'
 import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
 import React, { ReactNode, FC, MouseEvent } from 'react'
-import IconButton from './IconButton'
 import { IProps as IPaper } from './Paper'
-import { TextFieldWrapper as ExpansionPanelHeaderWrapper } from './TextField'
-import { Help as ContactSupportIcon } from '@material-ui/icons'
-import styled from 'styled-components'
+import {
+    HelperBox,
+    TextFieldWrapper as ExpansionPanelHeaderWrapper
+} from './TextField'
 
 interface IProps extends IPaper {
     actions?: ReactNode
@@ -21,15 +21,11 @@ interface IProps extends IPaper {
     detailsStyle?: object
     actionsStyle?: object
     helperIcon?: React.ReactNode
+    helperButtonPosition?: 'left' | 'right'
     onHelperClick?: () => void
     onChange?: (event?, expanded?) => void
 }
 
-const Helper = styled.div`
-    width: 32px;
-    height: 38px;
-`
-
 const ExpansionPanel: FC<IProps> = ({
     actions,
     details,
@@ -43,6 +39,7 @@ const ExpansionPanel: FC<IProps> = ({
     actionsStyle,
     onHelperClick,
     helperIcon,
+    helperButtonPosition = 'right',
     ...otherProps
 }) => {
 
@@ -53,6 +50,19 @@ const ExpansionPanel: FC<IProps> = ({
         }
     }
 
+    const renderHelper = (
+        <>
+            {
+                onHelperClick && (
+                    <HelperBox
+                        helperIcon
+                        onHelperClick={ handleClick }
+                    />
+                )
+            }
+        </>
+    )
+
     return (
         <MuiExpansionPanel
             { ...otherProps }
@@ -63,24 +73,9 @@ const ExpansionPanel: FC<IProps> = ({
                         expandIcon={ expandIcon }
                         style={ summaryStyle }>
                         <ExpansionPanelHeaderWrapper>
-                            {
-                                onHelperClick && (
-                                    <Helper>
-                                        <IconButton
-                                            padding='6px 2px'
-                                            onClick={ handleClick }>
-                                            {
-                                                helperIcon || (
-                                                    <ContactSupportIcon
-                                                        color='primary'
-                                                    />
-                                                )
-                                            }
-                                        </IconButton>
-                                    </Helper>
-                                )
-                            }
+                            { helperButtonPosition === 'left' && renderHelper }
                             { summary }
+                            { helperButtonPosition === 'right' && renderHelper }
                         </ExpansionPanelHeaderWrapper>
                     </MuiExpansionPanelSummary>
                 )

src/core/TextField.tsx

@@ -1,6 +1,13 @@
 import { TextField as MuiTextField } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import React, { ChangeEvent, KeyboardEvent, FC, FocusEvent } from 'react'
+import React,{
+    ChangeEvent,
+    KeyboardEvent,
+    FC,
+    FocusEvent,
+    ReactNode,
+    MouseEvent
+} from 'react'
 import { IDefault } from './Advertise'
 import { Help as ContactSupportIcon } from '@material-ui/icons'
 import IconButton from './IconButton'
@@ -30,15 +37,21 @@ export interface IProps extends IDefault {
     SelectProps?: object
     rows?: string | number
     rowsMax?: string | number
-    helperText?: React.ReactNode
-    helperIcon?: React.ReactNode
+    helperText?: ReactNode
+    helperIcon?: ReactNode
     onHelperClick?: () => void
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void
     onKeyUp?: (event: KeyboardEvent) => void
     onKeyDown?: (event: KeyboardEvent) => void
 }
 
+type TProps = IProps
+
+interface IHelperProps extends Pick<TProps, 'helperIcon'> {
+    onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void
+}
+
 export const useStyles = makeStyles({
     input: {
         fontSize: '14px',
@@ -62,8 +75,6 @@ export const useStyles = makeStyles({
     }
 })
 
-type TProps = IProps
-
 const Helper = styled.div`
     width: 42px;
     height: 38px;
@@ -73,6 +84,7 @@ export const TextFieldWrapper = styled.div`
     display: flex;
     flex-direction: rows;
     width: 100%;
+    align-items: center;
     button {
         display: none;  
     }
@@ -81,6 +93,16 @@ export const TextFieldWrapper = styled.div`
     }
 `
 
+export const HelperBox = (props: IHelperProps) => (
+    <Helper>
+        <IconButton
+            padding='6px 2px'
+            onClick={ props.onHelperClick }>
+            { props.helperIcon || <ContactSupportIcon color='primary' /> }
+        </IconButton>
+    </Helper>
+)
+
 const TextField: FC<TProps> = ({
     margin,
     padding,
@@ -140,13 +162,10 @@ const TextField: FC<TProps> = ({
             />
             {
                 onHelperClick && (
-                    <Helper>
-                        <IconButton
-                            padding='6px 2px'
-                            onClick={ handleClick }>
-                            { helperIcon || <ContactSupportIcon color='primary' /> }
-                        </IconButton>
-                    </Helper >
+                    <HelperBox
+                        helperIcon
+                        onHelperClick={ handleClick }
+                    />
                 )
             }
         </TextFieldWrapper>

src/docz/Checkbox.mdx

@@ -20,6 +20,15 @@ import { Playground, Props } from 'docz'
     />
 </Playground>
 
+## Normal with helper
+<Playground>
+    <Checkbox
+        onHelperClick={ () => alert('Do you need help?') }
+        label='I agree with the terms'
+        name='terms'
+        onChange={ () => alert('You clicked on the checkbox!') }
+    />
+</Playground>
 
 ## Primary
 <Playground>
@@ -48,3 +57,14 @@ import { Playground, Props } from 'docz'
         onChange={ () => alert('You clicked on the switcher!') }
     />
 </Playground>
+
+## Switch with helper
+<Playground>
+    <Checkbox
+        onHelperClick={ () => alert('Do you need help?') }
+        name='bluetooth'
+        type='switch'
+        label='Bluetooth'
+        onChange={ () => alert('You clicked on the switcher!') }
+    />
+</Playground>

src/docz/ExpansionPanel.mdx

@@ -29,7 +29,7 @@ import { Playground, Props } from 'docz'
                 </Typography>
             </div>
         }
-        onHelperClick={ () => window.alert('HELP!')} 
+        onHelperClick={ () => window.alert('HELP!') }
         expandIcon={ <ExpandMore /> }
         actions={
             <Button color='primary'>