@autoguru/overdrive 4.2.0 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @autoguru/overdrive
 
+## 4.3.1
+
+### Patch Changes
+
+-   3b81bdc: Button: Fixes warning and information text colours
+
+## 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

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

@@ -3,7 +3,7 @@ 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'];
+    textColour?: ComponentProps<typeof Text>['colour'];
 }
 export declare const NumberBubble: FunctionComponent<Props>;
 //# sourceMappingURL=NumberBubble.d.ts.map

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

@@ -4,9 +4,9 @@ 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({
+    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/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/package.json

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