@autoguru/overdrive 4.1.18 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @autoguru/overdrive
 
+## 4.2.0
+
+### Minor Changes
+
+-   b6959f7: NumberBubble component intoduced
+
 ## 4.1.18
 
 ### Patch Changes

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

@@ -0,0 +1,2 @@
+export declare const bubbleText: string;
+//# sourceMappingURL=NumberBubble.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBubble.css.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAIrB,CAAC"}

package/dist/components/NumberBubble/NumberBubble.css.js

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+export const bubbleText = style({
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+});

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

@@ -0,0 +1,9 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Box } from '../Box';
+import { Text } from '../Text';
+export interface Props extends Omit<ComponentProps<typeof Box>, 'borderRadius' | 'position' | 'padding'> {
+    value: number;
+    textColour: ComponentProps<typeof Text>['colour'];
+}
+export declare const NumberBubble: FunctionComponent<Props>;
+//# sourceMappingURL=NumberBubble.d.ts.map

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

@@ -0,0 +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,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,SAAS,CAAC;IACvG,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA2BjD,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import * as React from 'react';
+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 > 10 || value < 0;
+    return (React.createElement(Box, { borderRadius: 'full', backgroundColour: 'gray900', display: 'inlineBlock', position: 'relative', padding: largeBubble ? '3' : '2', ...boxProps },
+        React.createElement(Text, { size: '2', strong: true, className: clsx(styles.bubbleText, useBoxStyles({
+                position: 'absolute',
+            })), colour: textColour }, value)));
+};

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

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

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

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

package/dist/components/NumberBubble/index.js

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

package/dist/components/NumberBubble/stories.js

@@ -0,0 +1,27 @@
+"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 * 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
+  }
+};
+
+const template = args => _jsx(NumberBubble, _objectSpread({}, args));
+
+const standardProps = {
+  value: 0
+};
+export const standard = template.bind(standardProps);
+standard.args = standardProps;

package/dist/components/index.d.ts

@@ -50,4 +50,5 @@ export * from './Tooltip';
 export * from './VisuallyHidden';
 export * from './MinimalModal';
 export * from './Image';
+export * from './NumberBubble';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -50,3 +50,4 @@ export * from './Tooltip';
 export * from './VisuallyHidden';
 export * from './MinimalModal';
 export * from './Image';
+export * from './NumberBubble';

package/package.json

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