@autoguru/overdrive 4.16.0 → 4.17.0

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

@@ -1,4 +1,5 @@
 export declare const input: string;
+export declare const contents: Record<"default" | "withLabel", 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,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AAGH,eAAO,MAAM,QAAQ,yCAWnB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}

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

@@ -3,13 +3,14 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DatePicker/DatePicker.css.ts", "@autoguru/overdrive");
 import { style, styleVariants } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 export const input = style({
   top: 0,
   right: 0,
+  bottom: 0,
+  left: 0,
   opacity: 0,
   cursor: 'pointer',
-  display: 'grid',
-  gridTemplateColumns: 'auto 50px',
   selectors: {
     '&::-webkit-calendar-picker-indicator': {
       background: 'transparent',
@@ -25,6 +26,18 @@ export const input = style({
     }
   }
 }, "input");
+export const contents = styleVariants({
+  default: {
+    display: 'grid',
+    gridTemplateColumns: 'auto',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gridGap: vars.space['1']
+  },
+  withLabel: {
+    gridTemplateColumns: 'auto auto'
+  }
+}, "contents");
 export const disabled = styleVariants({
   default: {
     cursor: 'not-allowed'

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

@@ -2,10 +2,12 @@ import { IconType } from '@autoguru/icons';
 import { ComponentProps, FunctionComponent } from 'react';
 import { Icon } from '../Icon';
 export interface Props extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'value'>>, Pick<ComponentProps<typeof Icon>, 'size'> {
+    size: 'small' | 'medium' | 'large';
     className?: string;
     disabled?: boolean;
     icon?: IconType;
     isLoading?: boolean;
+    valueLabel?: string;
     onChange(date: string): any;
 }
 export declare const DatePicker: FunctionComponent<Props>;

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;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,CA4D/C,CAAC;AAEF,eAAe,UAAU,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;AAGvE,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,IAAI,EAAE,OAAO,GAAC,QAAQ,GAAC,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAOD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAsE/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -2,20 +2,24 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "icon", "size", "disabled", "isLoading", "onChange"];
+const _excluded = ["className", "icon", "size", "disabled", "isLoading", "valueLabel", "onChange"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { CalendarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
 import { Box, useBoxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
-import * as iconStyles from "../Icon/Icon.css.js";
 import { ProgressSpinner } from "../ProgressSpinner/index.js";
+import { Text } from "../Text/index.js";
 import * as styles from "./DatePicker.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const textSizeMap = {
+  small: '2',
+  medium: '3',
+  large: '5'
+};
 export const DatePicker = _ref => {
   let {
       className = '',
@@ -23,6 +27,7 @@ export const DatePicker = _ref => {
       size = 'medium',
       disabled = false,
       isLoading = false,
+      valueLabel,
       onChange
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -34,7 +39,7 @@ export const DatePicker = _ref => {
   return _jsxs(Box, {
     position: "relative",
     overflow: "hidden",
-    className: clsx(resolveResponsiveStyle(size, iconStyles.size), className, {
+    className: clsx(className, {
       [styles.disabled.default]: disabled,
       [styles.disabled.root]: disabled
     }),
@@ -49,14 +54,22 @@ export const DatePicker = _ref => {
         [styles.disabled.default]: disabled
       }, styles.input),
       type: "date"
-    }, inputProps)), isLoading ? _jsx(ProgressSpinner, {
-      className: clsx(styles.spinner, useBoxStyles({
-        position: 'absolute'
-      })),
-      size: size
-    }) : _jsx(Icon, {
-      icon: icon,
-      size: size
+    }, inputProps)), _jsxs(Box, {
+      className: clsx(styles.contents.default, {
+        [styles.contents.withLabel]: Boolean(valueLabel)
+      }),
+      children: [isLoading ? _jsx(ProgressSpinner, {
+        className: clsx(styles.spinner, useBoxStyles({
+          position: 'absolute'
+        })),
+        size: size
+      }) : _jsx(Icon, {
+        icon: icon,
+        size: size
+      }), valueLabel && _jsx(Text, {
+        size: textSizeMap[size],
+        children: valueLabel
+      })]
     })]
   });
 };

package/dist/components/DatePicker/stories.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, MagnifyIcon, PlusIcon, StarIcon } from '@autoguru/icons';
 import * as React from 'react';
+import { Box } from "../Box/index.js";
 import { DatePicker } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconOptions = {
@@ -40,7 +41,10 @@ export default {
     }
   }
 };
-const Template = args => _jsx(DatePicker, _objectSpread({}, args));
+const Template = args => _jsx(Box, {
+  display: "flex",
+  children: _jsx(DatePicker, _objectSpread({}, args))
+});
 const standardProps = {
   isLoading: false,
   disabled: false
@@ -54,6 +58,11 @@ const smallProps = {
 };
 export const small = Template.bind(smallProps);
 small.args = smallProps;
+const smallWithLabelProps = _objectSpread(_objectSpread({}, smallProps), {}, {
+  valueLabel: 'Today'
+});
+export const smallWithLabel = Template.bind(smallWithLabelProps);
+smallWithLabel.args = smallWithLabelProps;
 const mediumProps = {
   size: 'medium',
   isLoading: false,
@@ -61,10 +70,20 @@ const mediumProps = {
 };
 export const medium = Template.bind(mediumProps);
 medium.args = mediumProps;
+const mediumWithLabelProps = _objectSpread(_objectSpread({}, mediumProps), {}, {
+  valueLabel: 'Today'
+});
+export const mediumWithLabel = Template.bind(mediumWithLabelProps);
+mediumWithLabel.args = mediumWithLabelProps;
 const largeProps = {
   size: 'large',
   isLoading: false,
   disabled: false
 };
 export const large = Template.bind(largeProps);
-large.args = largeProps;
+large.args = largeProps;
+const largeWithLabelProps = _objectSpread(_objectSpread({}, largeProps), {}, {
+  valueLabel: 'Today'
+});
+export const largeWithLabel = Template.bind(largeWithLabelProps);
+largeWithLabel.args = largeWithLabelProps;

package/package.json

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