@spothero/ui 13.5.0-beta.2 → 13.5.1

package/CHANGELOG.md

@@ -1,19 +1,19 @@
-# 13.5.0-beta.2 - 12/15/2021
-
-## Miscellaneous Updates
-* [[322a2c4](https://github.com/spothero/fe-ui/commit/322a2c4)] - `chore:` Added radius value for location biased suggestions (Nathan)
-
-# 13.5.0-beta.1 - 12/15/2021
-
+# 13.5.1 - 12/17/2021
 ## Miscellaneous Updates
-* [[17778b1](https://github.com/spothero/fe-ui/commit/17778b1)] - `chore:` Removed old Loader export from index (Nathan)
-* [[a2c3625](https://github.com/spothero/fe-ui/commit/a2c3625)] - `chore:` Fixed another backlog export (Nathan)
-* [[c522c3a](https://github.com/spothero/fe-ui/commit/c522c3a)] - `chore:` Added v1 Loader export (Nathan)
+* [[95aca21](https://github.com/spothero/fe-ui/commit/95aca21)] - Fixed backlog loader export ([#257](https://github.com/spothero/fe-ui/pull/257)) (Nathan Caraker)
+	* `fix:` Fixed backlog loader export
+	* `chore:` Added a missed backlog export
+	* `chore:` Last fix for backlog export
 
-# 13.5.0-beta.0 - 12/15/2021
+# 13.5.0 - 12/17/2021
 
 ## New Features
-* [[04b9f3c](https://github.com/spothero/fe-ui/commit/04b9f3c)] - Accept bias location (Gru Singh)
+* [[0a4397e](https://github.com/spothero/fe-ui/commit/0a4397e)] - FED-320 Primary Button Design System Updates ([#258](https://github.com/spothero/fe-ui/pull/258)) (Mick Johnson)
+	* `squash:` Initial styling changes
+	* `squash:` Story styling changes
+	* `squash:` Fix button stories to change when dark does + styling notes
+	* `squash:` More design tweaks after fedback + make it possible to link to chakra docs from story
+	* `squash:` Make chakra link inline block, last button style changes, make textbutton lineHeight of 1 for now until we work on it and decide what it should be
 
 # 13.4.0 - 12/14/2021
 

package/CHANGELOG.tmp

@@ -1,5 +1,7 @@
-# 13.5.0-beta.2 - 12/15/2021
-
+# 13.5.1 - 12/17/2021
 ## Miscellaneous Updates
-* [[322a2c4](https://github.com/spothero/fe-ui/commit/322a2c4)] - `chore:` Added radius value for location biased suggestions (Nathan)
+* [[95aca21](https://github.com/spothero/fe-ui/commit/95aca21)] - Fixed backlog loader export ([#257](https://github.com/spothero/fe-ui/pull/257)) (Nathan Caraker)
+	* `fix:` Fixed backlog loader export
+	* `chore:` Added a missed backlog export
+	* `chore:` Last fix for backlog export
 

package/backlog/GooglePlacesSearchInput/GooglePlacesSearchInput.js

@@ -148,11 +148,10 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           country = _this$props.country,
           types = _this$props.types,
-          bounds = _this$props.bounds,
-          location = _this$props.location;
+          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
@@ -162,15 +161,10 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
         }
       }), types && {
         types: types
-      }), location && {
-        location: location,
-        radius: 8000
       }), {}, {
         sessionToken: autocompleteSessionToken
       });
 
-      console.log('GPSI', options);
-
       _this._autocompleteService.getPlacePredictions(options, function (suggestions) {
         if (suggestions) {
           (0, _map.default)(suggestions).call(suggestions, function (suggestion) {

package/package.json

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

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -27,13 +27,6 @@ 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,
-        /** Location for prediction biasing.
-         * @see https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.location
-         */
-        location: PropTypes.shape({
-            lat: PropTypes.number,
-            lng: PropTypes.number,
-        }),
     };
     static defaultProps = {
         placeholder: 'Search Address or Venue',
@@ -121,7 +114,7 @@ export default class GooglePlacesSearchInput extends Component {
     };
 
     _searchSuggestions = value => {
-        const {country, types, bounds, location} = this.props;
+        const {country, types, bounds} = this.props;
         const {autocompleteSessionToken} = this.state;
 
         const options = {
@@ -133,12 +126,9 @@ export default class GooglePlacesSearchInput extends Component {
                 },
             }),
             ...(types && {types}),
-            ...(location && {location, radius: 8000}),
             sessionToken: autocompleteSessionToken,
         };
 
-        console.log('GPSI', options);
-
         this._autocompleteService.getPlacePredictions(options, suggestions => {
             if (suggestions) {
                 suggestions.map(suggestion => {

package/styles/v2/components/Button/Button.jsx

@@ -14,7 +14,7 @@ const anchorProps = (isExternal = false) => ({
 
 const Button = forwardRef(({asAnchor, isExternal, ...props}, ref) => (
     <ChakraButton
-        iconSpacing={3}
+        iconSpacing={2}
         {...props}
         {...((asAnchor || props.as === 'a') && anchorProps(isExternal))}
         ref={ref}

package/styles/v2/components/Button/Button.styles.js

@@ -3,20 +3,21 @@ import chakraDefaultTheme from '@chakra-ui/theme';
 
 const baseStyle = {
     px: 8,
-    py: 2,
+    py: 3,
     fontSize: 'base',
-    lineHeight: 'base',
+    lineHeight: 0.875,
     fontWeight: 'semibold',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderRadius: '50rem',
+    borderRadius: '1.25rem',
+    textTransform: 'capitalize',
     transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
     _disabled: {
         cursor: 'not-allowed',
         opacity: 1,
         bg: 'gray.medium',
         borderColor: 'gray.medium',
-        color: 'white',
+        color: 'gray.dark',
     },
     '& svg': {
         display: 'block',
@@ -27,7 +28,7 @@ const disabledButtonHoverStyle = {
     _disabled: {
         bg: 'gray.medium',
         borderColor: 'gray.medium',
-        color: 'white',
+        color: 'gray.dark',
     },
 };
 
@@ -53,6 +54,9 @@ export const variants = {
             color: 'black',
             ...disabledButtonHoverStyle,
         },
+        _focus: {
+            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
+        },
     },
     secondary: {
         bg: 'white',
@@ -74,6 +78,9 @@ export const variants = {
             color: 'black',
             ...disabledButtonHoverStyle,
         },
+        _focus: {
+            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
+        },
     },
     textButton: {
         bg: 'none',
@@ -84,6 +91,7 @@ export const variants = {
         m: 'unset',
         minW: 'unset',
         p: 'unset',
+        lineHeight: 1,
         _disabled: {
             bg: 'none',
             color: 'gray.dark',

package/styles/v2/components/Button/stories/button.js

@@ -1,11 +1,58 @@
 import React from 'react';
+import capitalize from 'lodash/capitalize';
+import {Box, Text} from '@chakra-ui/react';
+import IconCheck from '@spothero/icons/check';
 
 import Component from '../Button';
 import ButtonProps from 'v2/components/Button/button-props';
 
-const ButtonTemplate = props => (
-    <Component {...props}>{props.variant}</Component>
-);
+const ButtonTemplate = (props, {hasDarkBackground}) => {
+    const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;
+
+    return (
+        <Box>
+            <Box mb={4}>
+                <Text
+                    mb="2"
+                    color={
+                        hasDarkBackground
+                            ? 'text.primary.dark'
+                            : 'text.primary.light'
+                    }
+                >
+                    {capitalize(props.variant)}:
+                </Text>
+                <Box>
+                    <Component {...props} variant={variant} mr={4} mb={4}>
+                        {props.variant} Variant
+                    </Component>
+
+                    <Component
+                        leftIcon={<IconCheck width="1rem" />}
+                        {...props}
+                        variant={variant}
+                        mr={4}
+                        mb={4}
+                    >
+                        {props.variant} With Icon
+                    </Component>
+
+                    <Component
+                        {...props}
+                        variant={variant}
+                        as="a"
+                        href="http://spothero.com"
+                        isExternal={false}
+                        mr={4}
+                        mb={4}
+                    >
+                        As Anchor
+                    </Component>
+                </Box>
+            </Box>
+        </Box>
+    );
+};
 
 ButtonTemplate.propTypes = ButtonProps;
 

package/styles/v2/components/Button/stories/index.stories.js

@@ -1,19 +1,9 @@
-import React from 'react';
-
 import ButtonTemplate from './button';
 import OverviewTemplate from './overview';
-import IconCheck from '@spothero/icons/check';
 
 import Button from '../Button';
-import {variants} from '../Button.styles';
 import disableArgs from 'storybook/utils/disable-args';
-import {
-    createSelectControl,
-    createRangeControl,
-} from 'storybook/utils/create-control';
-
-const variantControl = createSelectControl('variant', Object.keys(variants));
-const spacingControl = createRangeControl({name: 'iconSpacing', max: 5});
+import {createSelectControl} from 'storybook/utils/create-control';
 
 export default {
     title: 'v2/Button',
@@ -21,6 +11,7 @@ export default {
     parameters: {
         importBy: 'Button',
         removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/form/button',
     },
     argTypes: {
         ...disableArgs('children'),
@@ -30,95 +21,47 @@ export default {
 
 export const Overview = OverviewTemplate.bind({});
 
-export const Variant = ButtonTemplate.bind({});
-Variant.argTypes = variantControl;
-Variant.args = {
-    children: 'Primary',
-    variant: 'primary',
-};
-
-export const Disabled = ButtonTemplate.bind({});
-Disabled.argTypes = {
-    ...variantControl,
-    ...disableArgs('isDisabled'),
-};
-Disabled.args = {
-    isDisabled: true,
-    variant: 'primary',
-    children: 'primary',
-};
-
-export const Loading = ButtonTemplate.bind({});
-Loading.argTypes = {
-    ...variantControl,
-    ...disableArgs('isLoading'),
+export const Primary = ButtonTemplate.bind({});
+Primary.argTypes = {
+    ...createSelectControl('type', ['button', 'reset', 'submit']),
+    ...disableArgs('variant'),
+    onClick: {action: 'clicked'},
 };
-Loading.args = {
-    isLoading: true,
+Primary.args = {
+    children: 'Primary',
     variant: 'primary',
-    children: 'primary',
+    isDisabled: false,
+    isLoading: false,
     loadingText: 'Loading',
+    isFullWidth: false,
 };
 
-export const LeftIcon = ButtonTemplate.bind({});
-LeftIcon.argTypes = {
-    ...variantControl,
-    ...spacingControl,
-    ...disableArgs('leftIcon'),
-};
-LeftIcon.args = {
-    leftIcon: <IconCheck width="0.875rem" height="0.875rem" />,
-    variant: 'primary',
-    children: 'primary',
-    iconSpacing: 3,
-};
-
-export const RightIcon = ButtonTemplate.bind({});
-RightIcon.argTypes = {
-    ...variantControl,
-    ...spacingControl,
-    ...disableArgs('rightIcon'),
-};
-RightIcon.args = {
-    rightIcon: <IconCheck width="0.875rem" />,
-    variant: 'primary',
-    children: 'primary',
-    iconSpacing: 3,
-};
-
-export const FullWidth = ButtonTemplate.bind({});
-FullWidth.argTypes = {
-    ...variantControl,
-    ...disableArgs('isFullWidth'),
-};
-FullWidth.args = {
-    variant: 'primary',
-    children: 'primary',
-    isFullWidth: true,
-};
-
-export const AsAnchor = ButtonTemplate.bind({});
-AsAnchor.argTypes = {
-    ...variantControl,
-    ...disableArgs(['asAnchor', 'as']),
-};
-AsAnchor.args = {
-    variant: 'primary',
-    children: 'primary',
-    as: 'a',
-    href: 'http://spothero.com',
-    isExternal: false,
+export const Secondary = ButtonTemplate.bind({});
+Secondary.argTypes = {
+    ...createSelectControl('type', ['button', 'reset', 'submit']),
+    ...disableArgs('variant'),
+    onClick: {action: 'clicked'},
+};
+Secondary.args = {
+    children: 'Secondary',
+    variant: 'secondary',
+    isDisabled: false,
+    isLoading: false,
+    loadingText: 'Loading',
+    isFullWidth: false,
 };
 
-export const Type = ButtonTemplate.bind({});
-
-Type.argTypes = {
+export const Tertiary = ButtonTemplate.bind({});
+Tertiary.argTypes = {
     ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...variantControl,
-    ...disableArgs(['children']),
-};
-Type.args = {
-    type: 'button',
-    variant: 'primary',
-    children: 'primary',
+    ...disableArgs('variant'),
+    onClick: {action: 'clicked'},
+};
+Tertiary.args = {
+    children: 'textButton',
+    variant: 'textButton',
+    isDisabled: false,
+    isLoading: false,
+    loadingText: 'Loading',
+    isFullWidth: false,
 };

package/styles/v2/components/Button/stories/overview.js

@@ -32,11 +32,6 @@ const variationsArray = ({baseVariantName, hasDarkBackground}) => {
             children: `leftIcon`,
             leftIcon: <IconCheck width="1rem" />,
         },
-        {
-            variant,
-            children: `rightIcon`,
-            rightIcon: <IconCheck width="1rem" />,
-        },
         {
             variant,
             children: `${variant} asAnchor`,