@spothero/ui 15.6.0 → 15.7.0

package/package.json

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

package/styles/v2/components/Switch/Switch.jsx

@@ -0,0 +1,52 @@
+import React, {forwardRef} from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+
+import {Switch as ChakraSwitch} from '@chakra-ui/react';
+
+import FormControl from '../FormControl/FormControl';
+
+const Switch = forwardRef(
+    (
+        {
+            label,
+            helperText,
+            errorMessage,
+            isInvalid,
+            isDisabled,
+            isRequired,
+            ...props
+        },
+        ref
+    ) => {
+        const classes = cn({'FormElement-contains-error': isInvalid});
+
+        return (
+            <FormControl
+                isInvalid={isInvalid}
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                errorMessage={errorMessage}
+                helperText={helperText}
+                label={label}
+                inputId={props.id}
+            >
+                <ChakraSwitch ref={ref} className={classes} {...props} />
+            </FormControl>
+        );
+    }
+);
+
+Switch.propTypes = {
+    isChecked: PropTypes.bool,
+    defaultChecked: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+};
+
+export default Switch;

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Component from './Switch';
+
+export default {
+    title: 'v2/Switch',
+    component: Component,
+    parameters: {
+        removeBaseHtmlClass: true,
+    },
+};
+
+const SwitchTemplate = props => <Component {...props} />;
+
+SwitchTemplate.propTypes = {
+    isChecked: PropTypes.bool,
+    defaultChecked: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+};
+
+export const Switch = SwitchTemplate.bind({});
+
+Switch.argTypes = {
+    isChecked: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    defaultChecked: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    id: {
+        control: {
+            type: 'text',
+        },
+    },
+    label: {
+        control: {
+            type: 'text',
+        },
+    },
+    helperText: {
+        control: {
+            type: 'text',
+        },
+    },
+    errorMessage: {
+        control: {
+            type: 'text',
+        },
+    },
+    isInvalid: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    isDisabled: {
+        control: {
+            type: 'boolean',
+        },
+    },
+    isRequired: {
+        control: {
+            type: 'boolean',
+        },
+    },
+};
+
+Switch.args = {
+    isChecked: true,
+    defaultChecked: false,
+    id: 'Switch_Id',
+    label: 'Label',
+    helperText: 'Helper Text',
+    errorMessage: 'Error Message',
+    isInvalid: false,
+    isDisabled: false,
+    isRequired: false,
+};

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

@@ -0,0 +1 @@
+export {default} from './Switch';

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

@@ -0,0 +1,17 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+const overrides = {
+    defaultProps: {
+        colorScheme: 'primary',
+        size: 'lg',
+    },
+    baseStyle: props =>
+        merge(chakraDefaultTheme.components.Switch.baseStyle(props), {
+            track: {
+                bg: 'gray.medium',
+            },
+        }),
+};
+
+export default {...chakraDefaultTheme.components.Switch, ...overrides};

package/styles/v2/components/index.js

@@ -9,6 +9,7 @@ export * from './Button';
 export * from './Table';
 export {TabList, TabPanels, Tab, TabPanel, default as Tabs} from './Tabs';
 export {default as Select} from './Select';
+export {default as Switch} from './Switch';
 export {default as Link} from './Link/Link';
 export {default as Text} from './Text/Text';
 export {default as Grid, GridItem} from './Grid';

package/styles/v2/components/styles.js

@@ -10,6 +10,7 @@ export {default as Heading} from './Heading/Heading.styles';
 export {default as Tabs} from './Tabs/styles';
 export {default as Select} from './Select/styles';
 export {default as Checkbox} from './Checkbox/styles';
+export {default as Switch} from './Switch/styles';
 export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';
 export {default as Modal} from './Modal/styles';