@autoguru/overdrive 4.25.0 → 4.25.2

package/dist/components/DropDown/DropDown.d.ts

@@ -4,16 +4,17 @@ import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../Button';
 import { Flyout } from '../Flyout';
 import { EPositionerAlignment } from '../Positioner';
-type ButtonProps = Omit<ComponentProps<typeof Button>, 'is' | 'children'>;
+type ButtonProps = Omit<ComponentProps<typeof Button>, 'is' | 'children' | 'onClick'>;
 type FlyoutProps = Pick<ComponentProps<typeof Flyout>, 'alignment'>;
 export interface Props extends ButtonProps, FlyoutProps {
-    options: ReactNode[];
+    children: ReactNode;
     label: string;
     icon?: IconType;
+    onClick?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const DropDown: ({ options, label, icon, alignment, onClick: incomingOnClick, ...buttonProps }: {
+export declare const DropDown: ({ children: options, label, icon, alignment, onClick: incomingOnClick, ...buttonProps }: {
     [x: string]: any;
-    options: any;
+    children: any;
     label: any;
     icon?: React.ReactElement<React.SVGAttributes<SVGElement>, "svg"> | undefined;
     alignment?: EPositionerAlignment | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAC1E,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ;;;;;;;iBAmCpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;AACtF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ;;;;;;;iBAqCpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/DropDown/DropDown.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["options", "label", "icon", "alignment", "onClick"];
+const _excluded = ["children", "label", "icon", "alignment", "onClick"];
 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 { ChevronDownIcon } from '@autoguru/icons';
@@ -19,7 +19,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export const DropDown = _ref => {
   let {
-      options,
+      children: options,
       label,
       icon = ChevronDownIcon,
       alignment = EPositionerAlignment.BOTTOM_LEFT,
@@ -48,7 +48,7 @@ export const DropDown = _ref => {
       alignment: alignment,
       children: _jsx(DropDownOptionsList, {
         ref: menuRef,
-        options: options
+        children: options
       })
     })]
   });

package/dist/components/DropDown/DropDownOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownOption.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,UAAU,KACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,KAAK,CA+BnD,CAAC"}
+{"version":3,"file":"DropDownOption.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,UAAU,KACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,KAAK,CAmCnD,CAAC"}

package/dist/components/DropDown/DropDownOption.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "icon", "className", "iconColour"];
+const _excluded = ["label", "icon", "className", "display", "iconColour", "is"];
 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 * as React from 'react';
@@ -18,7 +18,9 @@ export const DropDownOption = _ref => {
       label,
       icon,
       className,
-      iconColour = 'dark'
+      display = 'flex',
+      iconColour = 'dark',
+      is = 'button'
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   const colourStyles = useTextStyles({
@@ -27,8 +29,10 @@ export const DropDownOption = _ref => {
   return _jsx(Box, _objectSpread(_objectSpread({
     className: [styles.root, className]
   }, boxProps), {}, {
+    display: display,
     paddingX: "3",
     paddingY: "2",
+    is: is,
     children: _jsxs(Inline, {
       noWrap: true,
       space: "2",

package/dist/components/DropDown/DropDownOptionsList.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 interface Props {
-    options: ReactNode[];
+    children: ReactNode;
 }
 export declare const DropDownOptionsList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/DropDown/DropDownOptionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownOptionsList.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOptionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOxD,UAAU,KAAK;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,8EAY/B,CAAC"}
+{"version":3,"file":"DropDownOptionsList.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOptionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9C,UAAU,KAAK;IACd,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,8EAU/B,CAAC"}

package/dist/components/DropDown/DropDownOptionsList.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import * as React from 'react';
-import { forwardRef, Fragment } from 'react';
+import { forwardRef } from 'react';
 import { Box } from "../Box/index.js";
 import { Stack } from "../Stack/index.js";
 import * as styles from "./DropDownOptionsList.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DropDownOptionsList = forwardRef((_ref, ref) => {
   let {
-    options
+    children
   } = _ref;
   return _jsx(Box, {
     ref: ref,
@@ -20,9 +20,7 @@ export const DropDownOptionsList = forwardRef((_ref, ref) => {
         dividers: true,
         width: "full",
         space: "none",
-        children: options.map((option, index) => _jsx(Fragment, {
-          children: option
-        }, index))
+        children: children
       })
     })
   });

package/dist/components/DropDown/stories.js

@@ -3,12 +3,15 @@
 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 { DownloadIcon, TrashCanOutlineIcon } from '@autoguru/icons';
+import { DownloadIcon, SettingsIcon, TrashCanOutlineIcon } from '@autoguru/icons';
 import { action } from '@storybook/addon-actions';
 import * as React from 'react';
+import { Fragment } from 'react';
 import { Box } from "../Box/index.js";
 import { DropDown, DropDownOption } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const onClick = action('onClick');
 export default {
   title: 'Components/DropDown',
@@ -59,21 +62,45 @@ const option2 = _jsx(DropDownOption, {
 });
 const standardProps = {
   label: 'Attachment',
-  options: [option1, option2],
+  children: _jsxs(_Fragment, {
+    children: [option1, option2]
+  }),
   onClick
 };
-export const standard = Template.bind(standardProps);
-standard.args = standardProps;
-const primaryProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+export const primary = Template.bind(standardProps);
+primary.args = standardProps;
+const secondaryProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  variant: 'secondary'
+});
+export const secondary = Template.bind(secondaryProps);
+secondary.args = secondaryProps;
+const minimalPrimaryProps = _objectSpread(_objectSpread({}, standardProps), {}, {
   variant: 'primary',
-  options: [option1, option2]
+  minimal: true
+});
+export const minimalPrimary = Template.bind(minimalPrimaryProps);
+minimalPrimary.args = minimalPrimaryProps;
+const roundedSecondaryProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  variant: 'secondary',
+  rounded: true
+});
+export const roundedSecondary = Template.bind(roundedSecondaryProps);
+roundedSecondary.args = roundedSecondaryProps;
+const withCustomIconProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  variant: 'secondary',
+  minimal: true,
+  icon: SettingsIcon
 });
-export const primary = Template.bind(primaryProps);
-primary.args = primaryProps;
+export const withCustomIcon = Template.bind(withCustomIconProps);
+withCustomIcon.args = withCustomIconProps;
 const withManyOptionsProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  options: Array.from({
-    length: 99
-  }).map((_, index) => index % 2 == 0 ? option1 : option2)
+  children: _jsx(_Fragment, {
+    children: Array.from({
+      length: 99
+    }).map((_, index) => _jsx(Fragment, {
+      children: index % 2 == 0 ? option1 : option2
+    }, index))
+  })
 });
 export const withManyOptions = Template.bind(withManyOptionsProps);
 withManyOptions.args = withManyOptionsProps;

package/package.json

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