@spothero/ui 13.9.0-beta.0 → 13.9.0

package/CHANGELOG.md

@@ -1,7 +1,7 @@
-# 13.9.0-beta.0 - 02/15/2022
+# 13.9.0 - 02/17/2022
 
 ## New Features
-* [[4193a26](https://github.com/spothero/fe-ui/commit/4193a26)] - Updated Autocomplete to accept biasing options (Nathan)
+* [[5229309](https://github.com/spothero/fe-ui/commit/5229309)] - Adds Popover component ([#270](https://github.com/spothero/fe-ui/pull/270)) (Tyler Williams)
 
 # 13.8.0 - 01/26/2022
 

package/CHANGELOG.tmp

@@ -1,5 +1,5 @@
-# 13.9.0-beta.0 - 02/15/2022
+# 13.9.0 - 02/17/2022
 
 ## New Features
-* [[4193a26](https://github.com/spothero/fe-ui/commit/4193a26)] - Updated Autocomplete to accept biasing options (Nathan)
+* [[5229309](https://github.com/spothero/fe-ui/commit/5229309)] - Adds Popover component ([#270](https://github.com/spothero/fe-ui/pull/270)) (Tyler Williams)
 

package/backlog/GooglePlacesSearchInput/GooglePlacesSearchInput.js

@@ -148,13 +148,10 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           country = _this$props.country,
           types = _this$props.types,
-          bounds = _this$props.bounds,
-          _this$props$biasOptio = _this$props.biasOptions,
-          location = _this$props$biasOptio.location,
-          radius = _this$props$biasOptio.radius;
+          bounds = _this$props.bounds;
       var autocompleteSessionToken = _this.state.autocompleteSessionToken;
 
-      var options = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      var options = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         input: value
       }, bounds && {
         bounds: bounds
@@ -164,9 +161,6 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
         }
       }), types && {
         types: types
-      }), location && {
-        location: location,
-        radius: radius
       }), {}, {
         sessionToken: autocompleteSessionToken
       });
@@ -255,8 +249,5 @@ exports.default = GooglePlacesSearchInput;
 (0, _defineProperty2.default)(GooglePlacesSearchInput, "defaultProps", {
   placeholder: 'Search Address or Venue',
   country: 'us',
-  icon: /*#__PURE__*/_react.default.createElement(_search.default, null),
-  biasOptions: {
-    radius: 8000
-  }
+  icon: /*#__PURE__*/_react.default.createElement(_search.default, null)
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "13.9.0-beta.0",
+  "version": "13.9.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index-bundled-cjs/index.js",
   "module": "v2/index.js",

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -27,26 +27,11 @@ export default class GooglePlacesSearchInput extends Component {
         googleMaps: PropTypes.object,
         /** A custom element (typically a PoweredByGoogle component) to display at the bottom of the suggestion list. */
         poweredByGoogleFooter: PropTypes.element.isRequired,
-        /** An object containing the bias options */
-        biasOptions: PropTypes.shape({
-            /** The location (lat and long), to bias the search results around.
-             * * @see https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.location
-            */
-            location: PropTypes.shape({
-                latitude: PropTypes.number,
-                Longitude: PropTypes.number,
-            }),
-            /** The radius, in meters, to bias the search results within */
-            radius: PropTypes.number,
-        })
     };
     static defaultProps = {
         placeholder: 'Search Address or Venue',
         country: 'us',
         icon: <IconSearch />,
-        biasOptions: {
-            radius: 8000,
-        }
     };
 
     constructor(props) {
@@ -129,7 +114,7 @@ export default class GooglePlacesSearchInput extends Component {
     };
 
     _searchSuggestions = value => {
-        const {country, types, bounds, biasOptions: {location, radius}} = this.props;
+        const {country, types, bounds} = this.props;
         const {autocompleteSessionToken} = this.state;
 
         const options = {
@@ -141,7 +126,6 @@ export default class GooglePlacesSearchInput extends Component {
                 },
             }),
             ...(types && {types}),
-            ...(location && {location, radius}),
             sessionToken: autocompleteSessionToken,
         };
 

package/styles/v2/components/ImageCarousel/ImageCarousel.jsx

@@ -48,7 +48,13 @@ const ImageCarousel = ({images, width, height, ...props}) => {
     }
 
     return (
-        <Box as="section" position="relative" overflow="hidden" width={imgWidth} {...props}>
+        <Box
+            as="section"
+            position="relative"
+            overflow="hidden"
+            width={imgWidth}
+            {...props}
+        >
             <Box ref={viewportRef}>
                 <Box display="flex" role="group">
                     {images.map((image, index) => {
@@ -103,7 +109,7 @@ const ImageCarousel = ({images, width, height, ...props}) => {
                     bgColor="black"
                     opacity="0.6"
                 >
-                    <IconChevronLeft/>
+                    <IconChevronLeft />
                 </Box>
             </Button>
             <Button
@@ -132,7 +138,7 @@ const ImageCarousel = ({images, width, height, ...props}) => {
                     bgColor="black"
                     opacity="0.6"
                 >
-                    <IconChevronRight/>
+                    <IconChevronRight />
                 </Box>
             </Button>
             <Box

package/styles/v2/components/Popover/Popover.jsx

@@ -0,0 +1,28 @@
+import React, {forwardRef, cloneElement, Children} from 'react';
+import {Popover as ChakraPopover} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+const Popover = forwardRef((props, ref) => {
+    const {children, ...rest} = props;
+
+    return (
+        <ChakraPopover {...rest} ref={ref}>
+            {Children.toArray(children).map((child, index) =>
+                cloneElement(child, {
+                    ref,
+                    variant: props.variant,
+                    key: `Popover-child-${index}`,
+                })
+            )}
+        </ChakraPopover>
+    );
+});
+
+Popover.propTypes = {
+    /** React children */
+    children: PropTypes.node,
+    /** Styles the Popover */
+    variant: PropTypes.oneOf(['light', 'dark']),
+};
+
+export default Popover;

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import disableArgs from 'storybook/utils/disable-args';
+import {createSelectControl} from 'storybook/utils/create-control';
+
+import {Popover, PopoverContent, PopoverTrigger} from './index';
+
+import {Flex} from '@chakra-ui/react';
+import Button from 'v2/components/Button/Button';
+
+export default {
+    title: 'v2/Popover',
+    component: Popover,
+    subcomponents: {
+        PopoverContent,
+        PopoverTrigger,
+    },
+    parameters: {
+        importBy: 'Popover',
+        removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/overlay/popover',
+    },
+    argTypes: {
+        ...disableArgs('children'),
+    },
+};
+
+const OverviewTemplate = props => (
+    <Popover defaultIsOpen {...props}>
+        <Flex justifyContent="center" alignItems="center">
+            <PopoverTrigger>
+                <Button>Trigger</Button>
+            </PopoverTrigger>
+        </Flex>
+
+        <PopoverContent header="Confirmation!">
+            Are you sure you want to have that milkshake?
+        </PopoverContent>
+    </Popover>
+);
+
+OverviewTemplate.propTypes = {
+    variant: PropTypes.oneOf(['light', 'dark']),
+};
+
+export const Variant = OverviewTemplate.bind({});
+Variant.argTypes = {
+    ...createSelectControl('variant', ['light', 'dark']),
+};
+Variant.args = {
+    variant: 'light',
+};
+
+export const Placement = OverviewTemplate.bind({});
+Placement.argTypes = {
+    ...createSelectControl('placement', [
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'auto',
+        'auto-start',
+        'auto-end',
+        'top-start',
+        'top-end',
+        'bottom-start',
+        'bottom-end',
+        'right-start',
+        'right-end',
+        'left-start',
+        'left-end',
+    ]),
+
+    ...disableArgs('variant'),
+};
+Placement.args = {
+    placement: 'bottom',
+};
+const NoHeaderTemplate = props => (
+    <Popover defaultIsOpen {...props}>
+        <PopoverTrigger>
+            <Button>Trigger</Button>
+        </PopoverTrigger>
+
+        <PopoverContent>
+            Are you sure you want to have that milkshake?
+        </PopoverContent>
+    </Popover>
+);
+
+export const NoHeader = NoHeaderTemplate.bind({});
+
+NoHeader.argTypes = {
+    ...disableArgs(['variant', 'placement']),
+};
+
+const NoCloseButtonTemplate = props => (
+    <Popover defaultIsOpen {...props}>
+        <PopoverTrigger>
+            <Button>Trigger</Button>
+        </PopoverTrigger>
+
+        <PopoverContent hideCloseButton header="Confirmation!">
+            Are you sure you want to have that milkshake?
+        </PopoverContent>
+    </Popover>
+);
+
+export const NoCloseButton = NoCloseButtonTemplate.bind({});
+NoCloseButton.argTypes = {
+    ...disableArgs(['variant', 'placement']),
+};

package/styles/v2/components/Popover/PopoverArrow.jsx

@@ -0,0 +1,10 @@
+import React, {forwardRef} from 'react';
+import {PopoverArrow as ChakraPopoverArrow} from '@chakra-ui/react';
+
+import styles from './styles/popover-arrow';
+
+const PopoverArrow = forwardRef((props, ref) => {
+    return <ChakraPopoverArrow ref={ref} {...props} {...styles(props)} />;
+});
+
+export default PopoverArrow;

package/styles/v2/components/Popover/PopoverCloseButton.jsx

@@ -0,0 +1,10 @@
+import React, {forwardRef} from 'react';
+import {PopoverCloseButton as ChakraPopoverCloseButton} from '@chakra-ui/react';
+
+import styles from './styles/popover-close-button';
+
+const PopoverCloseButton = forwardRef((props, ref) => {
+    return <ChakraPopoverCloseButton ref={ref} {...props} {...styles(props)} />;
+});
+
+export default PopoverCloseButton;

package/styles/v2/components/Popover/PopoverContent.jsx

@@ -0,0 +1,41 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {
+    PopoverBody,
+    PopoverHeader,
+    PopoverContent as ChakraPopoverContent,
+} from '@chakra-ui/react';
+
+import PopoverArrow from './PopoverArrow';
+import PopoverCloseButton from './PopoverCloseButton';
+
+const PopoverContent = forwardRef((props, ref) => {
+    const {header, variant, children, hideCloseButton, ...rest} = props;
+
+    return (
+        <ChakraPopoverContent {...rest} ref={ref}>
+            <PopoverArrow variant={variant} />
+            {hideCloseButton ? null : <PopoverCloseButton variant={variant} />}
+            {header ? <PopoverHeader>{header}</PopoverHeader> : null}
+            <PopoverBody>{children}</PopoverBody>
+        </ChakraPopoverContent>
+    );
+});
+
+PopoverContent.propTypes = {
+    /** React children */
+    children: PropTypes.node,
+    /** Whether or not to hide the close button */
+    hideCloseButton: PropTypes.bool,
+    /** Styles the Popover */
+    variant: PropTypes.oneOf(['light', 'dark']),
+    /** The string or node for the header (optional) */
+    header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+};
+
+PopoverContent.defaultProps = {
+    variant: 'light',
+    hideCloseButton: false,
+};
+
+export default PopoverContent;

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

@@ -0,0 +1,3 @@
+export {PopoverTrigger} from '@chakra-ui/react';
+export {default as Popover} from './Popover';
+export {default as PopoverContent} from './PopoverContent';

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

@@ -0,0 +1,21 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+import popper from './popper';
+import body from './popover-body';
+import header from './popover-header';
+import content from './popover-content';
+
+const parts = ['popper', 'content', 'header', 'body'];
+
+const baseStyle = props => ({
+    header,
+    content,
+    body: body(props),
+    popper: popper(props),
+});
+
+export default merge(chakraDefaultTheme.components.Popover, {
+    parts,
+    baseStyle,
+});

package/styles/v2/components/Popover/styles/popover-arrow.js

@@ -0,0 +1,5 @@
+const arrowStyles = ({variant}) => ({
+    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white',
+});
+
+export default arrowStyles;

package/styles/v2/components/Popover/styles/popover-body.js

@@ -0,0 +1,5 @@
+const body = props => ({
+    fontSize: 'sm',
+});
+
+export default body;

package/styles/v2/components/Popover/styles/popover-close-button.js

@@ -0,0 +1,17 @@
+const pseudoStyles = variant => ({
+    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
+});
+
+const closeButtonStyles = ({variant}) => ({
+    color: variant === 'dark' ? 'white' : 'black',
+    fontSize: '0.5rem',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    borderTopRightRadius: 4,
+    _hover: pseudoStyles(variant),
+    _focus: pseudoStyles(variant),
+});
+
+export default closeButtonStyles;

package/styles/v2/components/Popover/styles/popover-content.js

@@ -0,0 +1,5 @@
+export default {
+    padding: 4,
+    marginBottom: 0,
+    maxWidth: '20rem',
+};

package/styles/v2/components/Popover/styles/popover-header.js

@@ -0,0 +1,6 @@
+const headerStyles = {
+    marginBottom: 2,
+    fontWeight: 'semibold',
+};
+
+export default headerStyles;

package/styles/v2/components/Popover/styles/popper.js

@@ -0,0 +1,12 @@
+const popperStyles = ({variant}) => ({
+    borderRadius: 4,
+    boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
+    color: variant === 'dark' ? 'white' : 'black',
+    background: variant === 'dark' ? 'secondary.default' : 'white',
+    borderColor: 'gray.100',
+    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
+    borderWidth: '1px',
+    borderStyle: 'solid',
+});
+
+export default popperStyles;

package/styles/v2/components/index.js

@@ -23,6 +23,7 @@ export {default as Image} from './Image/Image';
 export const ImageCarousel = import('./ImageCarousel/ImageCarousel');
 export {default as Loader} from './Loader/Loader';
 export {default as Checkbox} from './Checkbox';
+export {Popover, PopoverTrigger, PopoverContent} from './Popover';
 
 // generic chakra reexports
 export {

package/styles/v2/components/styles.js

@@ -10,3 +10,4 @@ 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 Popover} from './Popover/styles';