@autoguru/overdrive 4.1.18 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @autoguru/overdrive
 
+## 4.3.0
+
+### Minor Changes
+
+-   ff5cd80: Button: Gets new colour variants
+
+## 4.2.1
+
+### Patch Changes
+
+-   5d20ae8: NumberBuble: Fixed wrong sizing for the value of 10
+
+## 4.2.0
+
+### Minor Changes
+
+-   b6959f7: NumberBubble component intoduced
+
 ## 4.1.18
 
 ### Patch Changes

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

@@ -13,11 +13,17 @@ export declare const variant: {
     primary: string;
     secondary: string;
     danger: string;
+    information: string;
+    warning: string;
+    success: string;
 };
 export declare const defaultStates: {
     primary: string;
     secondary: string;
     danger: string;
+    information: string;
+    warning: string;
+    success: string;
 };
 export declare const minimal: {
     defaults: string;
@@ -27,5 +33,8 @@ export declare const minimalStates: {
     primary: string;
     secondary: string;
     danger: string;
+    information: string;
+    warning: string;
+    success: string;
 };
 //# sourceMappingURL=Button.css.d.ts.map

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,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"}
+{"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;;;;;;;CA+BnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CA+EzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAyEzB,CAAC"}

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

@@ -74,6 +74,21 @@ export const variant = {
         color: vars.colours.intent.danger.foreground,
         boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['2']}`,
     }),
+    information: style({
+        backgroundColor: vars.colours.intent.information.background.standard,
+        color: vars.colours.intent.information.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['2']}`,
+    }),
+    warning: style({
+        backgroundColor: vars.colours.intent.warning.background.standard,
+        color: vars.colours.intent.warning.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['2']}`,
+    }),
+    success: style({
+        backgroundColor: vars.colours.intent.success.background.standard,
+        color: vars.colours.intent.success.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['2']}`,
+    }),
 };
 export const defaultStates = {
     primary: style({
@@ -115,6 +130,45 @@ export const defaultStates = {
             boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['1']}`,
         },
     }),
+    information: style({
+        ':hover': {
+            color: vars.colours.intent.information.foreground,
+            backgroundColor: vars.colours.intent.information.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.information.foreground,
+            backgroundColor: vars.colours.intent.information.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    warning: style({
+        ':hover': {
+            color: vars.colours.intent.warning.foreground,
+            backgroundColor: vars.colours.intent.warning.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.warning.foreground,
+            backgroundColor: vars.colours.intent.warning.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    success: style({
+        ':hover': {
+            color: vars.colours.intent.success.foreground,
+            backgroundColor: vars.colours.intent.success.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.success.foreground,
+            backgroundColor: vars.colours.intent.success.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['1']}`,
+        },
+    }),
 };
 export const minimal = {
     defaults: style({
@@ -161,4 +215,40 @@ export const minimalStates = {
             boxShadow: 'none',
         },
     }),
+    information: style({
+        ':hover': {
+            color: vars.colours.intent.information.background.strong,
+            backgroundColor: vars.colours.intent.information.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.information.background.strong,
+            backgroundColor: vars.colours.intent.information.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    warning: style({
+        ':hover': {
+            color: vars.colours.intent.warning.background.strong,
+            backgroundColor: vars.colours.intent.warning.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.warning.background.strong,
+            backgroundColor: vars.colours.intent.warning.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    success: style({
+        ':hover': {
+            color: vars.colours.intent.success.background.strong,
+            backgroundColor: vars.colours.intent.success.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.success.background.strong,
+            backgroundColor: vars.colours.intent.success.background.mild,
+            boxShadow: 'none',
+        },
+    }),
 };

package/dist/components/Button/stories.js

@@ -231,4 +231,40 @@ const secondaryMediumProps = {
   variant: 'secondary'
 };
 export const secondaryMedium = TemplateMulti.bind(secondaryMediumProps);
-secondaryMedium.args = secondaryMediumProps;
+secondaryMedium.args = secondaryMediumProps;
+const informationSmallProps = {
+  size: 'small',
+  variant: 'information'
+};
+export const informationSmall = TemplateMulti.bind(informationSmallProps);
+informationSmall.args = informationSmallProps;
+const informationMediumProps = {
+  size: 'medium',
+  variant: 'information'
+};
+export const informationMedium = TemplateMulti.bind(informationMediumProps);
+informationMedium.args = informationMediumProps;
+const warningSmallProps = {
+  size: 'small',
+  variant: 'warning'
+};
+export const warningSmall = TemplateMulti.bind(warningSmallProps);
+warningSmall.args = warningSmallProps;
+const warningMediumProps = {
+  size: 'medium',
+  variant: 'warning'
+};
+export const warningMedium = TemplateMulti.bind(warningMediumProps);
+warningMedium.args = warningMediumProps;
+const successSmallProps = {
+  size: 'small',
+  variant: 'success'
+};
+export const successSmall = TemplateMulti.bind(successSmallProps);
+successSmall.args = successSmallProps;
+const successMediumProps = {
+  size: 'medium',
+  variant: 'success'
+};
+export const successMedium = TemplateMulti.bind(successMediumProps);
+successMedium.args = successMediumProps;

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,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"}

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 > 9 || 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.3.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",