@autoguru/overdrive 4.2.1 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/components/Button/Button.css.d.ts +9 -0
  3. package/dist/components/Button/Button.css.d.ts.map +1 -1
  4. package/dist/components/Button/Button.css.js +90 -0
  5. package/dist/components/Button/stories.js +37 -1
  6. package/dist/components/NumberBubble/NumberBubble.d.ts.map +1 -1
  7. package/dist/components/NumberBubble/NumberBubble.js +2 -2
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @autoguru/overdrive
2
2
 
3
+ ## 4.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - ff5cd80: Button: Gets new colour variants
8
+
3
9
  ## 4.2.1
4
10
 
5
11
  ### Patch Changes
package/dist/components/Button/Button.css.d.ts CHANGED
@@ -13,11 +13,17 @@ export declare const variant: {
13
13
  primary: string;
14
14
  secondary: string;
15
15
  danger: string;
16
+ information: string;
17
+ warning: string;
18
+ success: string;
16
19
  };
17
20
  export declare const defaultStates: {
18
21
  primary: string;
19
22
  secondary: string;
20
23
  danger: string;
24
+ information: string;
25
+ warning: string;
26
+ success: string;
21
27
  };
22
28
  export declare const minimal: {
23
29
  defaults: string;
@@ -27,5 +33,8 @@ export declare const minimalStates: {
27
33
  primary: string;
28
34
  secondary: string;
29
35
  danger: string;
36
+ information: string;
37
+ warning: string;
38
+ success: string;
30
39
  };
31
40
  //# sourceMappingURL=Button.css.d.ts.map
package/dist/components/Button/Button.css.d.ts.map CHANGED
@@ -1 +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"}
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;;;;;;;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 CHANGED
@@ -74,6 +74,21 @@ export const variant = {
74
74
  color: vars.colours.intent.danger.foreground,
75
75
  boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['2']}`,
76
76
  }),
77
+ information: style({
78
+ backgroundColor: vars.colours.intent.information.background.standard,
79
+ color: vars.colours.intent.information.foreground,
80
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['2']}`,
81
+ }),
82
+ warning: style({
83
+ backgroundColor: vars.colours.intent.warning.background.standard,
84
+ color: vars.colours.intent.warning.foreground,
85
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['2']}`,
86
+ }),
87
+ success: style({
88
+ backgroundColor: vars.colours.intent.success.background.standard,
89
+ color: vars.colours.intent.success.foreground,
90
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['2']}`,
91
+ }),
77
92
  };
78
93
  export const defaultStates = {
79
94
  primary: style({
@@ -115,6 +130,45 @@ export const defaultStates = {
115
130
  boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['1']}`,
116
131
  },
117
132
  }),
133
+ information: style({
134
+ ':hover': {
135
+ color: vars.colours.intent.information.foreground,
136
+ backgroundColor: vars.colours.intent.information.background.strong,
137
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['3']}`,
138
+ },
139
+ ':active': {
140
+ transform: 'scale(0.97)',
141
+ color: vars.colours.intent.information.foreground,
142
+ backgroundColor: vars.colours.intent.information.background.strong,
143
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['1']}`,
144
+ },
145
+ }),
146
+ warning: style({
147
+ ':hover': {
148
+ color: vars.colours.intent.warning.foreground,
149
+ backgroundColor: vars.colours.intent.warning.background.strong,
150
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['3']}`,
151
+ },
152
+ ':active': {
153
+ transform: 'scale(0.97)',
154
+ color: vars.colours.intent.warning.foreground,
155
+ backgroundColor: vars.colours.intent.warning.background.strong,
156
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['1']}`,
157
+ },
158
+ }),
159
+ success: style({
160
+ ':hover': {
161
+ color: vars.colours.intent.success.foreground,
162
+ backgroundColor: vars.colours.intent.success.background.strong,
163
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['3']}`,
164
+ },
165
+ ':active': {
166
+ transform: 'scale(0.97)',
167
+ color: vars.colours.intent.success.foreground,
168
+ backgroundColor: vars.colours.intent.success.background.strong,
169
+ boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['1']}`,
170
+ },
171
+ }),
118
172
  };
119
173
  export const minimal = {
120
174
  defaults: style({
@@ -161,4 +215,40 @@ export const minimalStates = {
161
215
  boxShadow: 'none',
162
216
  },
163
217
  }),
218
+ information: style({
219
+ ':hover': {
220
+ color: vars.colours.intent.information.background.strong,
221
+ backgroundColor: vars.colours.intent.information.background.mild,
222
+ boxShadow: 'none',
223
+ },
224
+ ':active': {
225
+ color: vars.colours.intent.information.background.strong,
226
+ backgroundColor: vars.colours.intent.information.background.mild,
227
+ boxShadow: 'none',
228
+ },
229
+ }),
230
+ warning: style({
231
+ ':hover': {
232
+ color: vars.colours.intent.warning.background.strong,
233
+ backgroundColor: vars.colours.intent.warning.background.mild,
234
+ boxShadow: 'none',
235
+ },
236
+ ':active': {
237
+ color: vars.colours.intent.warning.background.strong,
238
+ backgroundColor: vars.colours.intent.warning.background.mild,
239
+ boxShadow: 'none',
240
+ },
241
+ }),
242
+ success: style({
243
+ ':hover': {
244
+ color: vars.colours.intent.success.background.strong,
245
+ backgroundColor: vars.colours.intent.success.background.mild,
246
+ boxShadow: 'none',
247
+ },
248
+ ':active': {
249
+ color: vars.colours.intent.success.background.strong,
250
+ backgroundColor: vars.colours.intent.success.background.mild,
251
+ boxShadow: 'none',
252
+ },
253
+ }),
164
254
  };
package/dist/components/Button/stories.js CHANGED
@@ -231,4 +231,40 @@ const secondaryMediumProps = {
231
231
  variant: 'secondary'
232
232
  };
233
233
  export const secondaryMedium = TemplateMulti.bind(secondaryMediumProps);
234
- secondaryMedium.args = secondaryMediumProps;
234
+ secondaryMedium.args = secondaryMediumProps;
235
+ const informationSmallProps = {
236
+ size: 'small',
237
+ variant: 'information'
238
+ };
239
+ export const informationSmall = TemplateMulti.bind(informationSmallProps);
240
+ informationSmall.args = informationSmallProps;
241
+ const informationMediumProps = {
242
+ size: 'medium',
243
+ variant: 'information'
244
+ };
245
+ export const informationMedium = TemplateMulti.bind(informationMediumProps);
246
+ informationMedium.args = informationMediumProps;
247
+ const warningSmallProps = {
248
+ size: 'small',
249
+ variant: 'warning'
250
+ };
251
+ export const warningSmall = TemplateMulti.bind(warningSmallProps);
252
+ warningSmall.args = warningSmallProps;
253
+ const warningMediumProps = {
254
+ size: 'medium',
255
+ variant: 'warning'
256
+ };
257
+ export const warningMedium = TemplateMulti.bind(warningMediumProps);
258
+ warningMedium.args = warningMediumProps;
259
+ const successSmallProps = {
260
+ size: 'small',
261
+ variant: 'success'
262
+ };
263
+ export const successSmall = TemplateMulti.bind(successSmallProps);
264
+ successSmall.args = successSmallProps;
265
+ const successMediumProps = {
266
+ size: 'medium',
267
+ variant: 'success'
268
+ };
269
+ export const successMedium = TemplateMulti.bind(successMediumProps);
270
+ successMedium.args = successMediumProps;
package/dist/components/NumberBubble/NumberBubble.d.ts.map CHANGED
@@ -1 +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,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA2BjD,CAAC"}
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 CHANGED
@@ -5,8 +5,8 @@ import { Text } from '../Text';
5
5
  import * as styles from './NumberBubble.css';
6
6
  export const NumberBubble = ({ value, textColour = 'white', ...boxProps }) => {
7
7
  const largeBubble = value > 9 || value < 0;
8
- return (React.createElement(Box, { borderRadius: 'full', backgroundColour: 'gray900', display: 'inlineBlock', position: 'relative', padding: largeBubble ? '3' : '2', ...boxProps },
9
- React.createElement(Text, { size: '2', strong: true, className: clsx(styles.bubbleText, useBoxStyles({
8
+ return (React.createElement(Box, { borderRadius: "full", backgroundColour: "gray900", display: "inlineBlock", position: "relative", padding: largeBubble ? '3' : '2', ...boxProps },
9
+ React.createElement(Text, { size: "2", strong: true, className: clsx(styles.bubbleText, useBoxStyles({
10
10
  position: 'absolute',
11
11
  })), colour: textColour }, value)));
12
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autoguru/overdrive",
3
- "version": "4.2.1",
3
+ "version": "4.3.0",
4
4
  "description": "Overdrive is a product component library, and design system for AutoGuru.",
5
5
  "types": "dist/index.d.ts",
6
6
  "main": "dist/index.js",