@autoguru/overdrive 4.1.11 → 4.1.14

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @autoguru/overdrive
 
+## 4.1.14
+
+### Patch Changes
+
+-   14ee239: Tooltip: Gets test size option
+
+## 4.1.13
+
+### Patch Changes
+
+-   7dbf75b: Tooltip: Gets auto closing timeout option
+
+## 4.1.12
+
+### Patch Changes
+
+-   834f5bd: Button: Keep its layout unchanged in loading mode
+
 ## 4.1.11
 
 ### Patch Changes

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

@@ -1,5 +1,6 @@
 export declare const root: string;
 export declare const body: string;
+export declare const hiddenContent: string;
 export declare const loading: string;
 export declare const enabled: string;
 export declare const disabled: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAIH,eAAO,MAAM,IAAI;;;CA2BhB,CAAC;AACF,eAAO,MAAM,OAAO;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAwCzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAqCzB,CAAC"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AACH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAIH,eAAO,MAAM,IAAI;;;CA2BhB,CAAC;AACF,eAAO,MAAM,OAAO;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAwCzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAqCzB,CAAC"}

package/dist/components/Button/Button.css.js

@@ -13,6 +13,9 @@ export const body = style({
     gridAutoFlow: 'column dense',
     gridGap: vars.space['1'],
 });
+export const hiddenContent = style({
+    visibility: 'hidden',
+});
 export const loading = style({
     cursor: 'not-allowed',
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAmHlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAkJlB,CAAC"}

package/dist/components/Button/Button.js

@@ -51,9 +51,13 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
         }, className),
         ref,
     };
-    const child = isLoading ? (React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })) : (React.createElement(Box, { alignItems: "center", justifyContent: "center", height: "full", className: styles.body }, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
+    const buttonContents = useMemo(() => (React.createElement(React.Fragment, null, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
             ? 'small'
-            : 'medium', ...maybeIconProps })) : (children)));
+            : 'medium', ...maybeIconProps })) : (children))), [maybeIconProps, isSingleIconChild, children, size]);
+    const child = isLoading ? (React.createElement(Box, { display: "flex", justifyContent: "center", position: "relative", alignItems: "center", width: "full", height: "full" },
+        React.createElement(Box, { position: "absolute", alignItems: "center", justifyContent: "center", display: "flex", width: "full", height: "full" },
+            React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })),
+        React.createElement(Box, { width: "full", height: "full", className: [styles.body, styles.hiddenContent] }, buttonContents))) : (React.createElement(Box, { height: "full", alignItems: "center", justifyContent: "center", className: styles.body }, buttonContents));
     return isValidElement(Component)
         ?
             cloneElement(Component, { ref, ...props }, child)

package/dist/components/Button/stories.js

@@ -62,7 +62,7 @@ const TemplateMulti = args => _jsxs(_Fragment, {
       children: _jsx(Button, _objectSpread(_objectSpread({
         isLoading: true
       }, args), {}, {
-        children: "Login"
+        children: "A very very very long button Label"
       }))
     }), _jsx(Column, {
       children: _jsx(Button, _objectSpread(_objectSpread({

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,13 @@
 import { FunctionComponent, ReactElement } from 'react';
 import { EAlignment } from '../Positioner/alignment';
+declare type ToolTipSize = 'medium' | 'large';
 export interface Props {
+    size?: ToolTipSize;
     label: string;
     alignment?: EAlignment;
     children: ReactElement;
+    closeAfter?: number;
 }
 export declare const Tooltip: FunctionComponent<Props>;
+export {};
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,YAAY,EAIZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAoD5C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAIN,iBAAiB,EACjB,YAAY,EAKZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,aAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,MAAM,WAAW,KAAK;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAiE5C,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import { Children, cloneElement, useCallback, useRef, useState, } from 'react';
+import { Children, cloneElement, useCallback, useEffect, useRef, useState, } from 'react';
 import { Box } from '../Box';
 import { Positioner } from '../Positioner';
 import { EAlignment } from '../Positioner/alignment';
 import { Text } from '../Text';
 import * as styles from './Tooltip.css';
-export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
+const sizeMap = {
+    medium: '2',
+    large: '3',
+};
+export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, size = 'medium', closeAfter = null, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const childRef = useRef(null);
     const triggerRef = useRef(null);
@@ -21,6 +25,12 @@ export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
             setIsOpen(false);
         }, 1e3 / 2);
     }, [setIsOpen]);
+    useEffect(() => {
+        let timeout;
+        if (isOpen && typeof closeAfter === 'number')
+            timeout = setTimeout(() => setIsOpen(false), closeAfter);
+        return () => (timeout ? clearTimeout(timeout) : void 0);
+    }, [closeAfter, isOpen]);
     return (React.createElement(React.Fragment, null,
         cloneElement(Children.only(children), {
             ref: triggerRef,
@@ -28,6 +38,6 @@ export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
             onMouseLeave: leaveHandler,
         }),
         React.createElement(Positioner, { triggerRef: triggerRef, alignment: alignment, isOpen: isOpen },
-            React.createElement(Box, { ref: childRef, className: styles.root, width: "full", pointerEvents: "none", userSelect: "none", overflow: "hidden", borderRadius: "1", boxShadow: "4", backgroundColour: "gray900", padding: "4" },
-                React.createElement(Text, { colour: "white" }, label)))));
+            React.createElement(Box, { ref: childRef, className: styles.root, width: "full", pointerEvents: "none", userSelect: "none", overflow: "hidden", borderRadius: "1", boxShadow: "4", backgroundColour: "gray900", paddingY: "2", paddingX: "3" },
+                React.createElement(Text, { size: sizeMap[size], colour: "white" }, label)))));
 };

package/dist/components/Tooltip/stories.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { EAlignment } from "../Positioner/alignment.js";
 import { Tooltip } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const sizeScale = ['medium', 'large'];
 export default {
   title: 'Components/Tooltip',
   decorators: [Story => _jsx("div", {
@@ -31,6 +32,22 @@ export default {
       control: {
         type: 'select'
       }
+    },
+    size: {
+      options: sizeScale,
+      defaultValue: void 0,
+      control: {
+        type: 'select'
+      }
+    },
+    label: {
+      defaultValue: ''
+    },
+    closeAfter: {
+      defaultValue: EAlignment.RIGHT,
+      control: {
+        type: 'number'
+      }
     }
   }
 };
@@ -45,13 +62,27 @@ const Template = args => _jsx(Tooltip, _objectSpread(_objectSpread({}, args), {}
 }));
 
 const standardProps = {
-  label: 'Im the tooltip body'
+  label: 'Im the tooltip body',
+  closeAfter: null
 };
 export const standard = Template.bind(standardProps);
 standard.args = standardProps;
+const withAtuCloseProps = {
+  label: 'I will automatically close after 5 seconds',
+  closeAfter: 5e3
+};
+export const withAutoClose = Template.bind(withAtuCloseProps);
+withAutoClose.args = withAtuCloseProps;
 const withLongTextProps = {
   label: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
   alignment: EAlignment.BOTTOM
 };
 export const withLongText = Template.bind(withLongTextProps);
-withLongText.args = withLongTextProps;
+withLongText.args = withLongTextProps;
+const withSmallTextSizePropsProps = {
+  label: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
+  alignment: EAlignment.BOTTOM,
+  size: 'large'
+};
+export const withLargeTextSize = Template.bind(withSmallTextSizePropsProps);
+withLargeTextSize.args = withSmallTextSizePropsProps;

package/package.json

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