@autoguru/overdrive 4.5.0 → 4.5.1

package/dist/components/DatePicker/DatePicker.css.d.ts

@@ -1,3 +1,4 @@
 export declare const input: string;
-export declare const disabled: string;
+export declare const disabled: Record<"default" | "root", string>;
+export declare const spinner: string;
 //# sourceMappingURL=DatePicker.css.d.ts.map

package/dist/components/DatePicker/DatePicker.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AACH,eAAO,MAAM,QAAQ,QAGnB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 export const input = style({
     top: 0,
     right: 0,
@@ -21,7 +21,16 @@ export const input = style({
         },
     },
 });
-export const disabled = style({
-    cursor: 'not-allowed',
-    opacity: '0.3',
+export const disabled = styleVariants({
+    default: {
+        cursor: 'not-allowed',
+    },
+    root: {
+        opacity: '0.3',
+    },
+});
+export const spinner = style({
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
 });

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,11 +1,12 @@
 import { IconType } from '@autoguru/icons';
 import { ComponentProps, FunctionComponent } from 'react';
 import { Icon } from '../Icon';
-export interface Props extends Pick<HTMLInputElement, 'min' | 'max' | 'value'>, Pick<ComponentProps<typeof Icon>, 'size'> {
+export interface Props extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'value'>>, Pick<ComponentProps<typeof Icon>, 'size'> {
     className?: string;
     disabled?: boolean;
-    onChange(date: string): any;
     icon?: IconType;
+    isLoading?: boolean;
+    onChange(date: string): any;
 }
 export declare const DatePicker: FunctionComponent<Props>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAe,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAK/B,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,EACtD,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;IAEvB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAoC/C,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAe,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,EAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2D/C,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -2,17 +2,25 @@ import { CalendarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import { Box } from '../Box';
+import { Box, useBoxStyles } from '../Box';
 import { Icon } from '../Icon';
 import * as iconStyles from '../Icon/Icon.css';
+import { ProgressSpinner } from '../ProgressSpinner';
 import * as styles from './DatePicker.css';
-export const DatePicker = ({ className = '', icon = CalendarIcon, size = 'medium', disabled = false, onChange, ...inputProps }) => {
+export const DatePicker = ({ className = '', icon = CalendarIcon, size = 'medium', disabled = false, isLoading = false, onChange, ...inputProps }) => {
     const onChangeEvent = (event) => {
         if (typeof onChange === 'function') {
             onChange(event.currentTarget.value);
         }
     };
-    return (React.createElement(Box, { position: "relative", overflow: "hidden", className: clsx(resolveResponsiveStyle(size, iconStyles.size), className, { [styles.disabled]: disabled }) },
-        React.createElement(Box, { position: "absolute", height: "full", width: "full", is: "input", disabled: disabled, onChange: onChangeEvent, className: clsx(styles.input, { [styles.disabled]: disabled }), type: "date", ...inputProps }),
-        React.createElement(Icon, { icon: icon, size: size })));
+    return (React.createElement(Box, { position: "relative", overflow: "hidden", className: clsx(resolveResponsiveStyle(size, iconStyles.size), className, {
+            [styles.disabled.default]: disabled,
+            [styles.disabled.root]: disabled,
+        }) },
+        React.createElement(Box, { position: "absolute", height: "full", width: "full", is: "input", disabled: disabled, onChange: onChangeEvent, className: clsx({
+                [styles.disabled.default]: disabled,
+            }, styles.input), type: "date", ...inputProps }),
+        isLoading ? (React.createElement(ProgressSpinner, { className: clsx(styles.spinner, useBoxStyles({
+                position: 'absolute',
+            })), size: size })) : (React.createElement(Icon, { icon: icon, size: size }))));
 };

package/dist/components/DatePicker/stories.js

@@ -46,6 +46,30 @@ export default {
 
 const Template = args => _jsx(DatePicker, _objectSpread({}, args));
 
-const standardProps = {};
+const standardProps = {
+  isLoading: false,
+  disabled: false
+};
 export const standard = Template.bind(standardProps);
-standard.args = standardProps;
+standard.args = standardProps;
+const smallProps = {
+  size: 'small',
+  isLoading: false,
+  disabled: false
+};
+export const small = Template.bind(smallProps);
+small.args = smallProps;
+const mediumProps = {
+  size: 'medium',
+  isLoading: false,
+  disabled: false
+};
+export const medium = Template.bind(mediumProps);
+medium.args = mediumProps;
+const largeProps = {
+  size: 'large',
+  isLoading: false,
+  disabled: false
+};
+export const large = Template.bind(largeProps);
+large.args = largeProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.5.0",
+	"version": "4.5.1",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",