@autoguru/overdrive 4.3.0 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @autoguru/overdrive
 
+## 4.3.3
+
+### Patch Changes
+
+-   33c6c71: Inputs: Get theme standard line height
+-   28252fb: NumberInput: Fixes paasive events being prevented
+
+## 4.3.2
+
+### Patch Changes
+
+-   5930dd5: NumberBubble: Suppoertsa larger numbers
+
+## 4.3.1
+
+### Patch Changes
+
+-   3b81bdc: Button: Fixes warning and information text colours
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/components/NumberBubble/NumberBubble.d.ts

@@ -3,6 +3,7 @@ import { Box } from '../Box';
 import { Text } from '../Text';
 export interface Props extends Omit<ComponentProps<typeof Box>, 'borderRadius' | 'position' | 'padding'> {
     value: number;
+    rawNumbers?: boolean;
     textColour?: ComponentProps<typeof Text>['colour'];
 }
 export declare const NumberBubble: FunctionComponent<Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAgB,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA4BjD,CAAC"}
+{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAE,GAAG,EAAgB,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAaD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAkCjD,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -1,12 +1,28 @@
 import clsx from 'clsx';
 import * as React from 'react';
+import { useMemo } from 'react';
+import { toPrettyBigNumber } from '../../utils/number';
 import { Box, useBoxStyles } from '../Box';
 import { Text } from '../Text';
 import * as styles from './NumberBubble.css';
-export const NumberBubble = ({ value, textColour = 'white', ...boxProps }) => {
-    const largeBubble = value > 9 || value < 0;
-    return (React.createElement(Box, { borderRadius: "full", backgroundColour: "gray900", display: "inlineBlock", position: "relative", padding: largeBubble ? '3' : '2', ...boxProps },
+const valuePaddingMap = {
+    SMALL: '2',
+    MEDIUM: '3',
+    LARGE: '4',
+    X_LARGE: '5',
+};
+export const NumberBubble = ({ value, textColour = 'white', rawNumbers = false, ...boxProps }) => {
+    const size = useMemo(() => {
+        if (value > 9 && value < 100)
+            return 'MEDIUM';
+        if (value > 99 && value < 9999)
+            return 'LARGE';
+        if (value >= 9999)
+            return 'LARGE';
+        return 'SMALL';
+    }, [value]);
+    return (React.createElement(Box, { borderRadius: "full", backgroundColour: "gray900", display: "inlineBlock", position: "relative", padding: valuePaddingMap[size], ...boxProps },
         React.createElement(Text, { size: "2", strong: true, className: clsx(styles.bubbleText, useBoxStyles({
                 position: 'absolute',
-            })), colour: textColour }, value)));
+            })), colour: textColour }, rawNumbers ? value : toPrettyBigNumber(value))));
 };

package/dist/components/NumberBubble/stories.js

@@ -7,15 +7,11 @@ 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 * as React from 'react';
-import { boxArgTypes } from "../Box/argTypes.js";
 import { NumberBubble } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: 'Foundation/Typography/NumberBubble',
-  component: NumberBubble,
-  argTypes: {
-    paddingX: boxArgTypes.paddingX
-  }
+  component: NumberBubble
 };
 
 const template = args => _jsx(NumberBubble, _objectSpread({}, args));
@@ -24,4 +20,9 @@ const standardProps = {
   value: 0
 };
 export const standard = template.bind(standardProps);
-standard.args = standardProps;
+standard.args = standardProps;
+const bigNumberProps = {
+  value: 2345
+};
+export const bigNumber = template.bind(bigNumberProps);
+bigNumber.args = bigNumberProps;

package/dist/components/NumberInput/NumberInput.js

@@ -15,9 +15,9 @@ export const NumberInput = withEnhancedInput(({ field: { ref, ...incomingFieldPr
         let onWheelListener;
         let wheelListener;
         if (preventMouseWheel && inputRef?.current) {
-            mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel, { passive: true });
-            onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel, { passive: true });
-            wheelListener = inputRef.current.addEventListener('wheel', preventWheel, { passive: true });
+            mouseWheelListener = inputRef.current.addEventListener('mousewheel', preventWheel, { passive: false });
+            onWheelListener = inputRef.current.addEventListener('onwheel', preventWheel, { passive: false });
+            wheelListener = inputRef.current.addEventListener('wheel', preventWheel, { passive: false });
         }
         return () => {
             if (mouseWheelListener)

package/dist/components/NumberInput/stories.js

@@ -35,11 +35,6 @@ const iconOptions = {
   CheckIcon
 };
 const argTypes = {
-  value: {
-    control: {
-      type: 'number'
-    }
-  },
   prefixIcon: {
     defaultValue: null,
     description: 'Input prefix Icon',

package/dist/components/TextAreaInput/stories.js

@@ -21,13 +21,7 @@ export default {
 };
 const defaultValue = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae pulvinar odio. Duis laoreet lacus vel consequat congue. Ut euismod enim non eros lacinia mollis. Vestibulum libero quam, aliquet non justo laoreet, egestas molestie ante. Quisque urna leo, consectetur id dui aliquet, placerat iaculis augue. Pellentesque sed vestibulum augue, quis porta lectus.';
 const defaultPlaceholder = 'Tell us about your car.';
-const argTypes = {
-  value: {
-    control: {
-      type: 'string'
-    }
-  }
-};
+const argTypes = {};
 
 const Template = args => _jsx(TextAreaInput, _objectSpread({}, args));
 

package/dist/components/TextInput/stories.js

@@ -33,11 +33,6 @@ const iconOptions = {
   CheckIcon
 };
 const argTypes = {
-  value: {
-    control: {
-      type: 'string'
-    }
-  },
   prefixIcon: {
     defaultValue: null,
     description: 'Input prefix Icon',

package/dist/components/private/InputBase/withEnhancedInput.css.js

@@ -18,7 +18,7 @@ export const input = {
             background: 'transparent',
             outline: 'none',
             fontSize: vars.typography.size['4'].fontSize,
-            lineHeight: 1,
+            lineHeight: vars.typography.size['4'].lineHeight,
             height: vars.space['8'],
             padding: `calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px) calc(${vars.space['4']} - 1px)`,
             selectors: {

package/dist/themes/base/tokens.js

@@ -139,7 +139,7 @@ export const tokens = {
                     mild: colours.yellow['100'],
                     strong: colours.yellow['900'],
                 },
-                foreground: colours.yellow['200'],
+                foreground: white,
                 border: colours.yellow['900'],
             },
             neutral: {
@@ -166,7 +166,7 @@ export const tokens = {
                     mild: colours.blue['200'],
                     strong: colours.blue['900'],
                 },
-                foreground: colours.blue['200'],
+                foreground: white,
                 border: colours.blue['900'],
             },
         },

package/dist/themes/flat_red/tokens.js

@@ -119,7 +119,7 @@ export const tokens = {
                     mild: colours.yellow['100'],
                     strong: colours.yellow['900'],
                 },
-                foreground: colours.yellow['200'],
+                foreground: white,
                 border: colours.yellow['900'],
             },
             neutral: {
@@ -137,7 +137,7 @@ export const tokens = {
                     mild: colours.green['100'],
                     strong: colours.green['900'],
                 },
-                foreground: colours.green['200'],
+                foreground: white,
                 border: colours.green['900'],
             },
             information: {
@@ -146,7 +146,7 @@ export const tokens = {
                     mild: colours.blue['100'],
                     strong: colours.blue['900'],
                 },
-                foreground: colours.blue['200'],
+                foreground: white,
                 border: colours.blue['900'],
             },
         },

package/dist/utils/number.d.ts

@@ -0,0 +1,6 @@
+export declare const bigNumFormatter: (num: number) => {
+    value: number;
+    descriptor: string;
+};
+export declare const toPrettyBigNumber: (number: number, fractionDigits?: number) => string;
+//# sourceMappingURL=number.d.ts.map

package/dist/utils/number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../lib/utils/number.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,QACtB,MAAM,KACT;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAoBrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,WACrB,MAAM,8BAEZ,MAMF,CAAC"}

package/dist/utils/number.js

@@ -0,0 +1,25 @@
+export const bigNumFormatter = (num) => {
+    if (num < 1e3)
+        return {
+            value: num,
+            descriptor: '',
+        };
+    else if (num < 1e6)
+        return {
+            value: num / 1e3,
+            descriptor: 'K',
+        };
+    else {
+        return {
+            value: num / 1e6,
+            descriptor: 'M',
+        };
+    }
+};
+export const toPrettyBigNumber = (number, fractionDigits = 1) => {
+    const formatChunks = bigNumFormatter(number);
+    const value = Number.isInteger(formatChunks.value)
+        ? formatChunks.value
+        : formatChunks.value.toFixed(fractionDigits);
+    return `${value}${formatChunks.descriptor}`;
+};

package/package.json

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