@autoguru/overdrive 4.4.4 → 4.5.1

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

@@ -0,0 +1,4 @@
+export declare const input: 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

@@ -0,0 +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"}

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

@@ -0,0 +1,36 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+export const input = style({
+    top: 0,
+    right: 0,
+    opacity: 0,
+    cursor: 'pointer',
+    display: 'grid',
+    gridTemplateColumns: 'auto 50px',
+    selectors: {
+        '&::-webkit-calendar-picker-indicator': {
+            background: 'transparent',
+            bottom: 0,
+            color: 'transparent',
+            cursor: 'pointer',
+            height: 'auto',
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: 'auto',
+        },
+    },
+});
+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

@@ -0,0 +1,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'> {
+    className?: string;
+    disabled?: boolean;
+    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

@@ -0,0 +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,CA2D/C,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,26 @@
+import { CalendarIcon } from '@autoguru/icons';
+import clsx from 'clsx';
+import * as React from 'react';
+import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
+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, 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.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/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/DatePicker/index.js

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

package/dist/components/DatePicker/stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, MagnifyIcon, PlusIcon, StarIcon } from '@autoguru/icons';
+import * as React from 'react';
+import { DatePicker } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const iconOptions = {
+  MagnifyIcon,
+  CarIcon,
+  CarMultipleIcon,
+  CalendarIcon,
+  AccountEditIcon,
+  AlertCircleIcon,
+  CurrencyUsdIcon,
+  PlusIcon,
+  StarIcon,
+  CheckIcon
+};
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  decorators: [],
+  argTypes: {
+    icon: {
+      defaultValue: void 0,
+      description: 'Input field Icon',
+      options: iconOptions,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+
+const Template = args => _jsx(DatePicker, _objectSpread({}, args));
+
+const standardProps = {
+  isLoading: false,
+  disabled: false
+};
+export const standard = Template.bind(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/dist/components/Tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EA0Ff,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,WAAW,EAGX,YAAY,EACZ,SAAS,EAET,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,8EAqFf,CAAC"}

package/dist/components/Tabs/Tab.js

@@ -21,7 +21,6 @@ export const Tab = forwardRef(({ children, id: incomingId = null, indication = n
     const controlsId = typeof incomingId === 'string'
         ? incomingId
         : `${tabsContext.id}-${tabListContext}-tab`;
-    invariant(typeof children === 'string' || typeof children === 'number', 'Tab children have to be text.');
     const props = {
         className: clsx(useBoxStyles({
             is: typeof Component === 'string' ? Component : 'button',

package/dist/components/Tabs/stories.js

@@ -6,12 +6,18 @@ 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 { AlertIcon, OttoIcon } from '@autoguru/icons';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { Box } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { EAlignment } from "../Positioner/alignment.js";
 import { Stack } from "../Stack/index.js";
 import { StarRating } from "../StarRating/index.js";
+import { Tooltip } from "../Tooltip/index.js";
 import { Tab, TabList, TabPane, TabPanes, Tabs } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -112,6 +118,50 @@ const withIndicationProps = {
 };
 export const withIndication = Template.bind(withIndicationProps);
 withIndication.args = withIndicationProps;
+const withComplexTabProps = {
+  active: 0,
+  onChange: action('onChange'),
+  children: _jsxs(_Fragment, {
+    children: [_jsxs(TabList, {
+      children: [_jsx(Tab, {
+        indication: 2,
+        children: _jsxs(Inline, {
+          alignY: "center",
+          children: ["Tab 1", _jsx(Tooltip, {
+            alignment: EAlignment.BOTTOM,
+            label: "This tab is a winner",
+            children: _jsx(Box, {
+              children: _jsx(Icon, {
+                icon: OttoIcon
+              })
+            })
+          })]
+        })
+      }), _jsx(Tab, {
+        children: _jsxs(Inline, {
+          alignY: "center",
+          children: ["Tab 2", _jsx(Tooltip, {
+            alignment: EAlignment.BOTTOM,
+            label: "This tab is less awesome",
+            children: _jsx(Box, {
+              children: _jsx(Icon, {
+                icon: AlertIcon
+              })
+            })
+          })]
+        })
+      })]
+    }), _jsxs(TabPanes, {
+      children: [_jsx(TabPane, {
+        children: "Content A"
+      }), _jsx(TabPane, {
+        children: "Content B"
+      })]
+    })]
+  })
+};
+export const withComplexTab = Template.bind(withComplexTabProps);
+withComplexTab.args = withComplexTabProps;
 const tabsWithoutPanesProps = {
   active: 0,
   onChange: action('onChange'),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.4.4",
+	"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",