@autoguru/overdrive 4.1.16 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @autoguru/overdrive
 
+## 4.2.0
+
+### Minor Changes
+
+-   b6959f7: NumberBubble component intoduced
+
+## 4.1.18
+
+### Patch Changes
+
+-   5e2efa2: Checkbox: Removes extra right padding when it has no label Radio:
+    Removes extra right padding when it has no label
+
+## 4.1.17
+
+### Patch Changes
+
+-   5fc3db9: Radio: Can have empty children Checkbox: Can have empty children
+
 ## 4.1.16
 
 ### Patch Changes

package/dist/components/CheckBox/CheckBox.d.ts

@@ -6,7 +6,7 @@ export interface Props {
     disabled?: boolean;
     name?: string;
     value: string;
-    children: ReactNode;
+    children?: ReactNode;
     onClick?(checked: boolean): void;
     onChange?(checked: boolean): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAW9C,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IAEpB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAEjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,gFAiDpB,CAAC"}
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAW9C,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAEjC,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,gFAiDpB,CAAC"}

package/dist/components/CheckBox/stories.js

@@ -80,6 +80,13 @@ const uncheckedProps = {
   children: 'check me!',
   value: '1'
 };
+const emptyProps = {
+  checked: false,
+  disabled: false,
+  name: 'check-name',
+  children: null,
+  value: '1'
+};
 const checkedProps = {
   checked: true,
   disabled: false,
@@ -185,6 +192,8 @@ export const disabledChecked = Template.bind(disabledCheckedProps);
 disabledChecked.args = disabledCheckedProps;
 export const multipleLines = Template.bind(multipleLinesProps);
 multipleLines.args = multipleLinesProps;
+export const withNoChildren = Template.bind(emptyProps);
+withNoChildren.args = emptyProps;
 export const withComponent = Template.bind(withComponentProps);
 withComponent.args = withComponentProps;
 withComponent.argTypes = {

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/Radio/Radio.d.ts

@@ -4,7 +4,7 @@ export interface Props {
     value: string;
     className?: string;
     disabled?: boolean;
-    children: ReactNode;
+    children?: ReactNode;
 }
 export declare const Radio: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,gFAmDjB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,gFAmDjB,CAAC"}

package/dist/components/Radio/stories.js

@@ -108,6 +108,11 @@ const disabledProps = {
   children: 'check me!',
   value: 'berry'
 };
+const emptyProps = {
+  disabled: true,
+  children: null,
+  value: 'berry'
+};
 const disabledCheckedProps = {
   checked: true,
   disabled: true,
@@ -194,6 +199,8 @@ disabled.argTypes = argTypes;
 export const disabledChecked = Template.bind(disabledCheckedProps);
 disabledChecked.args = disabledCheckedProps;
 disabledChecked.argTypes = argTypes;
+export const withNoChildren = Template.bind(emptyProps);
+withNoChildren.args = emptyProps;
 export const multipleLines = Template.bind(multipleLinesProps);
 multipleLines.args = multipleLinesProps;
 multipleLines.argTypes = argTypes;

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/dist/components/private/CheckableBase/CheckableBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IAEzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFA0FzB,CAAC"}
+{"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IAEzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFA6FzB,CAAC"}

package/dist/components/private/CheckableBase/CheckableBase.js

@@ -11,7 +11,7 @@ export const CheckableBase = forwardRef(({ className = '', label = '', checked =
         }
     };
     const nakedLabel = ['string', 'number'].includes(typeof label);
-    return (React.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flexStart", padding: "3", paddingLeft: "none", position: "relative", className: [
+    return (React.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flexStart", paddingY: "3", paddingRight: label ? '3' : 'none', paddingLeft: "none", position: "relative", className: [
             styles.root,
             useBoxStyles({ is: 'button' }),
             className,
@@ -24,7 +24,7 @@ export const CheckableBase = forwardRef(({ className = '', label = '', checked =
                 styles.checkable,
                 useBoxStyles({ is: 'button' }),
             ] }, children),
-        React.createElement(Box, { is: "label", width: "full", pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), useTextStyles({ size: '4' }), {
+        label ? (React.createElement(Box, { is: "label", width: "full", pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), useTextStyles({ size: '4' }), {
                 [styles.label.disabled]: disabled,
-            }) }, nakedLabel ? React.createElement(Text, { is: "span" }, label) : label)));
+            }) }, nakedLabel ? React.createElement(Text, { is: "span" }, label) : label)) : null));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.1.16",
+	"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",