@autoguru/overdrive 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @autoguru/overdrive
 
+## 4.3.2
+
+### Patch Changes
+
+-   5930dd5: NumberBubble: Suppoertsa larger numbers
+
 ## 4.3.1
 
 ### Patch 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/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.1",
+	"version": "4.3.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",