@spothero/ui 15.0.0-beta.4 → 15.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.0.0-beta.4",
+  "version": "15.1.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",

package/styles/v2/components/FormControl/FormControl.jsx

@@ -8,8 +8,24 @@ import {
 } from '@chakra-ui/react';
 
 const FormControl = forwardRef(
-    ({children, label, inputId, helperText, errorMessage, ...props}, ref) => (
-        <ChakraFormControl {...props} ref={ref}>
+    (
+        {
+            children,
+            label,
+            inputId,
+            helperText,
+            errorMessage,
+            isFieldset,
+            ...props
+        },
+        ref
+    ) => (
+        <ChakraFormControl
+            {...props}
+            ref={ref}
+            as={isFieldset ? 'fieldset' : 'div'}
+            borderWidth="0"
+        >
             {label && (
                 <FormLabel
                     color="gray.600"
@@ -17,6 +33,7 @@ const FormControl = forwardRef(
                     mb={2}
                     fontSize="sm"
                     htmlFor={inputId}
+                    as={isFieldset ? 'legend' : 'label'}
                 >
                     {label}
                 </FormLabel>
@@ -40,6 +57,7 @@ FormControl.propTypes = {
     helperText: PropTypes.string,
     errorMessage: PropTypes.string,
     children: PropTypes.element,
+    isFieldset: PropTypes.bool,
 };
 
 export default FormControl;

package/styles/v2/components/Radio/Radio.jsx

@@ -0,0 +1,50 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {Box, Radio as ChakraRadio} from '@chakra-ui/react';
+
+const Radio = forwardRef(
+    (
+        {
+            defaultChecked,
+            isChecked,
+            isDisabled,
+            value,
+            helperText,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <ChakraRadio
+                ref={ref}
+                defaultChecked={defaultChecked}
+                isChecked={isChecked}
+                isDisabled={isDisabled}
+                isFocusable={!isDisabled}
+                value={value}
+                {...props}
+                alignItems="start"
+            >
+                {children}
+                {helperText && (
+                    <Box color="gray.600" fontSize="xs">
+                        {helperText}
+                    </Box>
+                )}
+            </ChakraRadio>
+        );
+    }
+);
+
+Radio.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+        .isRequired,
+    defaultChecked: PropTypes.bool,
+    isChecked: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+    helperText: PropTypes.string,
+};
+
+export default Radio;

package/styles/v2/components/Radio/Radio.stories.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+
+export default {
+    title: 'v2/Radio',
+    component: Radio,
+    parameters: {
+        importBy: 'Radio',
+        removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/components/radio',
+    },
+};
+
+export const Individual = props => {
+    return (
+        <Radio value="1" {...props}>
+            Option 1
+        </Radio>
+    );
+};
+
+Individual.argTypes = {
+    helperText: {
+        control: {type: 'text'},
+    },
+    isDisabled: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    isChecked: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    children: {
+        table: {
+            disable: true,
+        },
+    },
+    defaultChecked: {
+        table: {
+            disable: true,
+        },
+    },
+    value: {
+        table: {
+            disable: true,
+        },
+    },
+};
+
+Individual.args = {
+    helperText: 'Helper text',
+    isDisabled: false,
+    isChecked: false,
+};
+
+Individual.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+        .isRequired,
+    defaultChecked: PropTypes.bool,
+    isChecked: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    value: PropTypes.string.isRequired,
+    helperText: PropTypes.string,
+};
+
+export const Group = props => {
+    return (
+        <RadioGroup
+            name="example1"
+            defaultValue="3"
+            id="example1"
+            label="Which option?"
+            {...props}
+        >
+            <Radio value="1">Option 1</Radio>
+            <Radio value="2">Option 2</Radio>
+            <Radio value="3">Option 3</Radio>
+            <Radio value="4">Option 4</Radio>
+        </RadioGroup>
+    );
+};
+
+Group.title = 'v2/RadioGroup';
+Group.component = RadioGroup;
+Group.parameters = {
+    importBy: 'RadioGroup',
+};
+
+Group.argTypes = {
+    direction: {
+        options: ['column', 'row'],
+        control: {
+            type: 'radio',
+        },
+    },
+    isDisabled: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    children: {
+        table: {
+            disable: true,
+        },
+    },
+    defaultChecked: {
+        table: {
+            disable: true,
+        },
+    },
+    value: {
+        table: {
+            disable: true,
+        },
+    },
+    isChecked: {
+        table: {
+            disable: true,
+        },
+    },
+    helperText: {
+        table: {
+            disable: true,
+        },
+    },
+};
+
+Group.args = {
+    direction: 'column',
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    label: 'Label',
+    errorMessage: 'Error message',
+};
+
+Group.propTypes = {
+    children: PropTypes.node,
+    defaultValue: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    isInvalid: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    direction: PropTypes.oneOf(['row', 'column']),
+};

package/styles/v2/components/Radio/RadioGroup.jsx

@@ -0,0 +1,69 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {RadioGroup as ChakraRadioGroup, Stack} from '@chakra-ui/react';
+import FormControl from '../FormControl/FormControl';
+
+const RadioGroup = forwardRef(
+    (
+        {
+            label,
+            errorMessage,
+            defaultValue,
+            isDisabled,
+            isInvalid,
+            isRequired,
+            name,
+            onChange,
+            value,
+            children,
+            direction,
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <FormControl
+                isInvalid={isInvalid}
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                errorMessage={errorMessage}
+                label={label}
+                inputId={props.id}
+                isRadio
+            >
+                <ChakraRadioGroup
+                    ref={ref}
+                    defaultValue={defaultValue}
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                    {...props}
+                >
+                    <Stack
+                        direction={direction ? direction : 'column'}
+                        spacing={direction === 'row' ? 8 : 4}
+                    >
+                        {children}
+                    </Stack>
+                </ChakraRadioGroup>
+            </FormControl>
+        );
+    }
+);
+
+RadioGroup.propTypes = {
+    children: PropTypes.node,
+    defaultValue: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    isInvalid: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    direction: PropTypes.oneOf(['row', 'column']),
+};
+
+export default RadioGroup;

package/styles/v2/components/Radio/index.js

@@ -0,0 +1,2 @@
+export {default as Radio} from './Radio';
+export {default as RadioGroup} from './RadioGroup';

package/styles/v2/components/Radio/styles/index.js

@@ -0,0 +1,52 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+const parts = ['control', 'label'];
+
+const baseStyle = {
+    control: {
+        borderRadius: '50%',
+        borderWidth: '1px',
+        borderColor: 'gray.dark',
+        backgroundColor: 'white',
+        minWidth: 5,
+        minHeight: 5,
+        marginTop: 1,
+        _checked: {
+            borderWidth: 0,
+            color: 'white',
+            backgroundColor: 'primary.default',
+            _before: {
+                content: '""',
+                display: 'inline-block',
+                position: 'relative',
+                width: 2,
+                height: 2,
+                borderRadius: '50%',
+                background: 'currentcolor',
+            },
+        },
+        _focus: {
+            boxShadow: t => `0 0 1px 2px ${t.colors.primary['300']}`,
+        },
+        _disabled: {
+            borderColor: 'gray.200',
+            _checked: {
+                backgroundColor: 'gray.200',
+            },
+        },
+    },
+    label: {
+        fontSize: 'base',
+        color: 'black',
+        marginLeft: 3,
+        _disabled: {
+            color: 'gray.200',
+        },
+    },
+};
+
+export default merge(chakraDefaultTheme.components.Radio, {
+    parts,
+    baseStyle,
+});

package/styles/v2/components/index.js

@@ -25,6 +25,7 @@ export {default as Checkbox} from './Checkbox';
 export {default as Input} from './Input';
 export {Popover, PopoverTrigger, PopoverContent} from './Popover';
 export {Modal} from './Modal';
+export {Radio, RadioGroup} from './Radio';
 
 // generic chakra reexports
 export {

package/styles/v2/components/styles.js

@@ -13,3 +13,4 @@ export {default as Checkbox} from './Checkbox/styles';
 export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';
 export {default as Modal} from './Modal/styles';
+export {default as Radio} from './Radio/styles';