@autoguru/overdrive 4.1.10 → 4.1.13

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 (29) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/components/Button/Button.css.d.ts +1 -0
  3. package/dist/components/Button/Button.css.d.ts.map +1 -1
  4. package/dist/components/Button/Button.css.js +3 -0
  5. package/dist/components/Button/Button.d.ts.map +1 -1
  6. package/dist/components/Button/Button.js +6 -2
  7. package/dist/components/Button/stories.js +1 -1
  8. package/dist/components/Image/Image.d.ts.map +1 -1
  9. package/dist/components/Image/Image.js +1 -1
  10. package/dist/components/Image/ImageServerProvider.d.ts.map +1 -1
  11. package/dist/components/Image/ImageServerProvider.js +6 -9
  12. package/dist/components/Image/ResponsiveImage.d.ts.map +1 -1
  13. package/dist/components/Image/ResponsiveImage.js +6 -4
  14. package/dist/components/Image/SimpleImage.d.ts.map +1 -1
  15. package/dist/components/Image/stories.js +1 -1
  16. package/dist/components/Text/useTextStyles.d.ts.map +1 -1
  17. package/dist/components/TextLink/TextLink.css.js +3 -3
  18. package/dist/components/TextLink/TextLink.d.ts.map +1 -1
  19. package/dist/components/TextLink/TextLink.js +3 -4
  20. package/dist/components/TextLink/stories.js +8 -5
  21. package/dist/components/Tooltip/Tooltip.d.ts +1 -0
  22. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  23. package/dist/components/Tooltip/Tooltip.js +8 -2
  24. package/dist/components/Tooltip/stories.js +17 -1
  25. package/dist/hooks/useResponsiveValue/useResponsiveValue.d.ts.map +1 -1
  26. package/dist/hooks/useResponsiveValue/useResponsiveValue.js +4 -1
  27. package/dist/themes/base/tokens.js +2 -2
  28. package/dist/utils/resolveResponsiveProps.d.ts.map +1 -1
  29. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @autoguru/overdrive
2
2
 
3
+ ## 4.1.13
4
+
5
+ ### Patch Changes
6
+
7
+ - 7dbf75b: Tooltip: Gets auto closing timeout option
8
+
9
+ ## 4.1.12
10
+
11
+ ### Patch Changes
12
+
13
+ - 834f5bd: Button: Keep its layout unchanged in loading mode
14
+
15
+ ## 4.1.11
16
+
17
+ ### Patch Changes
18
+
19
+ - 5448c8a: base theme: Link colour updated to blue 500 TextLink: get link
20
+ colour
21
+
3
22
  ## 4.1.10
4
23
 
5
24
  ### Patch Changes
@@ -1,5 +1,6 @@
1
1
  export declare const root: string;
2
2
  export declare const body: string;
3
+ export declare const hiddenContent: string;
3
4
  export declare const loading: string;
4
5
  export declare const enabled: string;
5
6
  export declare const disabled: string;
@@ -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,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;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAwCzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAqCzB,CAAC"}
@@ -13,6 +13,9 @@ export const body = style({
13
13
  gridAutoFlow: 'column dense',
14
14
  gridGap: vars.space['1'],
15
15
  });
16
+ export const hiddenContent = style({
17
+ visibility: 'hidden',
18
+ });
16
19
  export const loading = style({
17
20
  cursor: 'not-allowed',
18
21
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAmHlB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAkJlB,CAAC"}
@@ -51,9 +51,13 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
51
51
  }, className),
52
52
  ref,
53
53
  };
54
- const child = isLoading ? (React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })) : (React.createElement(Box, { alignItems: "center", justifyContent: "center", height: "full", className: styles.body }, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
54
+ const buttonContents = useMemo(() => (React.createElement(React.Fragment, null, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
55
55
  ? 'small'
56
- : 'medium', ...maybeIconProps })) : (children)));
56
+ : 'medium', ...maybeIconProps })) : (children))), [maybeIconProps, isSingleIconChild, children, size]);
57
+ const child = isLoading ? (React.createElement(Box, { display: "flex", justifyContent: "center", position: "relative", alignItems: "center", width: "full", height: "full" },
58
+ React.createElement(Box, { position: "absolute", alignItems: "center", justifyContent: "center", display: "flex", width: "full", height: "full" },
59
+ React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })),
60
+ React.createElement(Box, { width: "full", height: "full", className: [styles.body, styles.hiddenContent] }, buttonContents))) : (React.createElement(Box, { height: "full", alignItems: "center", justifyContent: "center", className: styles.body }, buttonContents));
57
61
  return isValidElement(Component)
58
62
  ?
59
63
  cloneElement(Component, { ref, ...props }, child)
@@ -62,7 +62,7 @@ const TemplateMulti = args => _jsxs(_Fragment, {
62
62
  children: _jsx(Button, _objectSpread(_objectSpread({
63
63
  isLoading: true
64
64
  }, args), {}, {
65
- children: "Login"
65
+ children: "A very very very long button Label"
66
66
  }))
67
67
  }), _jsx(Column, {
68
68
  children: _jsx(Button, _objectSpread(_objectSpread({
@@ -1 +1 @@
1
- {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IAI7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAQ1C,CAAC"}
1
+ {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IAI7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAQzC,CAAC"}
@@ -2,4 +2,4 @@ import * as React from 'react';
2
2
  import { useImageServer } from './ImageServerProvider';
3
3
  import { ResponsiveImage } from './ResponsiveImage';
4
4
  import { SimpleImage } from './SimpleImage';
5
- export const Image = ({ unoptimised = false, ...props }) => ((useImageServer() && !unoptimised) ? (React.createElement(ResponsiveImage, { ...props })) : (React.createElement(SimpleImage, { ...props })));
5
+ export const Image = ({ unoptimised = false, ...props }) => useImageServer() && !unoptimised ? (React.createElement(ResponsiveImage, { ...props })) : (React.createElement(SimpleImage, { ...props }));
@@ -1 +1 @@
1
- {"version":3,"file":"ImageServerProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ImageServerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,UAAU,SAAS;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACtC,aAAa,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAE1C,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IACxC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;CACzD;AAED,eAAO,MAAM,QAAQ,EAAC,kBAAkB,CAAC,UAAU,CAiBjD,CAAC;AAWH,eAAO,MAAM,cAAc,0BAAmC,CAAC;AAE/D,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAgC7F,CAAC"}
1
+ {"version":3,"file":"ImageServerProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ImageServerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,UAAU,SAAS;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACtC,aAAa,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAE1C,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IACxC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;CACzD;AAED,eAAO,MAAM,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAiBnD,CAAC;AAWF,eAAO,MAAM,cAAc,0BAAmC,CAAC;AAE/D,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAClD,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAgC1C,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { createContext, useCallback, useContext, useMemo } from 'react';
2
+ import { createContext, useCallback, useContext, useMemo, } from 'react';
3
3
  export const widthMap = {
4
4
  '1': 16,
5
5
  '2': 32,
@@ -27,19 +27,16 @@ const defaultValue = {
27
27
  const imageServerCtx = createContext(null);
28
28
  export const useImageServer = () => useContext(imageServerCtx);
29
29
  export const ImageServerProvider = ({ children, srcUrlMapper = defaultValue.srcUrlMapper, getWidthValue = defaultValue.getWidthValue, widthMap = defaultValue.widthMap, }) => {
30
- const generateSrcSet = useCallback(({ quality, src }) => (Object.keys(widthMap).map((key) => {
30
+ const generateSrcSet = useCallback(({ quality, src }) => Object.keys(widthMap)
31
+ .map((key) => {
31
32
  const width = getWidthValue(key);
32
33
  return `${srcUrlMapper({ quality, src, width })} ${width}w`;
33
- }).join(', ')), [widthMap, srcUrlMapper, getWidthValue]);
34
+ })
35
+ .join(', '), [widthMap, srcUrlMapper, getWidthValue]);
34
36
  return (React.createElement(imageServerCtx.Provider, { value: useMemo(() => ({
35
37
  widthMap,
36
38
  srcUrlMapper,
37
39
  getWidthValue,
38
40
  generateSrcSet,
39
- }), [
40
- srcUrlMapper,
41
- widthMap,
42
- getWidthValue,
43
- generateSrcSet,
44
- ]) }, children));
41
+ }), [srcUrlMapper, widthMap, getWidthValue, generateSrcSet]) }, children));
45
42
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQ/E,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAanD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAgCpD,CAAC"}
1
+ {"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQzD,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAanD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAuCpD,CAAC"}
@@ -14,9 +14,11 @@ export const ResponsiveImage = ({ imageWidth: imageWidthList, sizes: sizesList =
14
14
  width: getWidthValue(imageWidth),
15
15
  quality,
16
16
  }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
17
- const srcset = useMemo(() => imageWidth ? void 0 : generateSrcSet({
18
- src: incomingSrc,
19
- quality,
20
- }), [incomingSrc, quality]);
17
+ const srcset = useMemo(() => imageWidth
18
+ ? void 0
19
+ : generateSrcSet({
20
+ src: incomingSrc,
21
+ quality,
22
+ }), [incomingSrc, quality]);
21
23
  return (React.createElement(SimpleImage, { sizes: sizes, srcSet: srcset, src: src, ...imgProps }));
22
24
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC3G,GAAG,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;CAEnB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAiBhD,CAAC"}
1
+ {"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,KAChB,SAAQ,OAAO,CACd,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,CACpE;IACD,GAAG,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAiBhD,CAAC"}
@@ -172,7 +172,7 @@ const AllSizeTemplate = args => _jsx(ImageServerProvider, {
172
172
  children: args.quality
173
173
  })]
174
174
  }), _jsxs(Text, {
175
- children: ["Width: ", _jsxs(Text, {
175
+ children: ["Width:", ' ', _jsxs(Text, {
176
176
  strong: true,
177
177
  children: [width, ": ", calcWidth(width), "px"]
178
178
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,EAAE,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,2EASd,cAAc,WAWzB,CAAC"}
1
+ {"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,EAAE,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,2EASvB,cAAc,WAWhB,CAAC"}
@@ -5,14 +5,14 @@ export const root = style({
5
5
  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
6
6
  transitionDuration: '0.2s',
7
7
  transitionProperty: 'box-shadow',
8
- boxShadow: `inset 0 -2px 0 0 ${vars.typography.colour.primary}`,
8
+ boxShadow: `inset 0 0px 0 0 ${vars.typography.colour.link}`,
9
9
  ':hover': {
10
- boxShadow: `inset 0 -1.6em 0 0 ${vars.typography.colour.primary}`,
10
+ boxShadow: `inset 0 -2px 0 0 ${vars.typography.colour.link}`,
11
11
  },
12
12
  });
13
13
  export const muted = style({
14
14
  ':hover': {
15
15
  color: 'white',
16
- boxShadow: `inset 0 -1.6em 0 0 ${vars.typography.colour.primary}`,
16
+ boxShadow: `inset 0 -1.6em 0 0 ${vars.typography.colour.link}`,
17
17
  },
18
18
  });
@@ -1 +1 @@
1
- {"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,aAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,iFA2DpB,CAAC"}
1
+ {"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,aAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,iFAyDpB,CAAC"}
@@ -5,9 +5,9 @@ import { cloneElement, createElement, forwardRef, isValidElement, } from 'react'
5
5
  import { Box, useBoxStyles } from '../Box';
6
6
  import { Text } from '../Text';
7
7
  import * as styles from './TextLink.css';
8
- export const TextLink = forwardRef(({ is: Component, children, className, fontWeight = 'bold', strong, muted = false, size, ...props }, ref) => {
8
+ export const TextLink = forwardRef(({ is: Component, children, className, strong, fontWeight = 'semiBold', muted = false, size, ...props }, ref) => {
9
9
  invariant(!(Component !== undefined && props.href !== undefined), 'You cannot have both href and as defined.');
10
- const body = (React.createElement(Text, { is: "span", colour: muted && 'muted', size: size, strong: strong, fontWeight: fontWeight, className: clsx(styles.root, useBoxStyles({
10
+ const body = (React.createElement(Text, { is: "span", colour: muted ? 'muted' : 'link', size: size, fontWeight: fontWeight, strong: strong, className: clsx(useBoxStyles({
11
11
  is: 'span',
12
12
  pointerEvents: 'none',
13
13
  }), {
@@ -17,10 +17,9 @@ export const TextLink = forwardRef(({ is: Component, children, className, fontWe
17
17
  rel: props.rel ?? 'noopener noreferrer',
18
18
  ...props,
19
19
  ref,
20
- className,
21
20
  };
22
21
  if (Component === undefined) {
23
- return (React.createElement(Box, { is: "a", ...allProps }, body));
22
+ return (React.createElement(Box, { is: "a", className: [className, styles.root], ...allProps }, body));
24
23
  }
25
24
  return isValidElement(Component)
26
25
  ? cloneElement(Component, allProps, body)
@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
7
7
  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; }
8
8
 
9
9
  import * as React from 'react';
10
+ import { Box } from "../Box/index.js";
10
11
  import { Text } from "../Text/index.js";
11
12
  import { TextLink } from "./index.js";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,7 +43,7 @@ export default {
42
43
  type: 'select'
43
44
  }
44
45
  },
45
- weight: {
46
+ fontWeight: {
46
47
  options: fontWeightOptions,
47
48
  defaultValue: null,
48
49
  control: {
@@ -71,9 +72,11 @@ export default {
71
72
  }
72
73
  };
73
74
 
74
- const Template = args => _jsx(TextLink, _objectSpread(_objectSpread({}, args), {}, {
75
- children: "Hello"
76
- }));
75
+ const Template = args => _jsx(Box, {
76
+ children: _jsx(TextLink, _objectSpread(_objectSpread({}, args), {}, {
77
+ children: "Hello"
78
+ }))
79
+ });
77
80
 
78
81
  const InsideParagraphTemplate = args => _jsxs(Text, {
79
82
  is: "p",
@@ -86,7 +89,7 @@ const standardProps = {
86
89
  muted: false,
87
90
  size: '4',
88
91
  align: 'left',
89
- fontWeight: 'bold'
92
+ fontWeight: 'semiBold'
90
93
  };
91
94
  export const standard = Template.bind(standardProps);
92
95
  standard.args = standardProps;
@@ -4,6 +4,7 @@ export interface Props {
4
4
  label: string;
5
5
  alignment?: EAlignment;
6
6
  children: ReactElement;
7
+ closeAfter?: number;
7
8
  }
8
9
  export declare const Tooltip: FunctionComponent<Props>;
9
10
  //# sourceMappingURL=Tooltip.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,YAAY,EAIZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAoD5C,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,YAAY,EAKZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CA6D5C,CAAC"}
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { Children, cloneElement, useCallback, useRef, useState, } from 'react';
2
+ import { Children, cloneElement, useCallback, useEffect, useRef, useState, } from 'react';
3
3
  import { Box } from '../Box';
4
4
  import { Positioner } from '../Positioner';
5
5
  import { EAlignment } from '../Positioner/alignment';
6
6
  import { Text } from '../Text';
7
7
  import * as styles from './Tooltip.css';
8
- export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
8
+ export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, closeAfter = null, }) => {
9
9
  const [isOpen, setIsOpen] = useState(false);
10
10
  const childRef = useRef(null);
11
11
  const triggerRef = useRef(null);
@@ -21,6 +21,12 @@ export const Tooltip = ({ alignment = EAlignment.RIGHT, label, children, }) => {
21
21
  setIsOpen(false);
22
22
  }, 1e3 / 2);
23
23
  }, [setIsOpen]);
24
+ useEffect(() => {
25
+ let timeout;
26
+ if (isOpen && typeof closeAfter === 'number')
27
+ timeout = setTimeout(() => setIsOpen(false), closeAfter);
28
+ return () => (timeout ? clearTimeout(timeout) : void 0);
29
+ }, [closeAfter, isOpen]);
24
30
  return (React.createElement(React.Fragment, null,
25
31
  cloneElement(Children.only(children), {
26
32
  ref: triggerRef,
@@ -31,6 +31,15 @@ export default {
31
31
  control: {
32
32
  type: 'select'
33
33
  }
34
+ },
35
+ label: {
36
+ defaultValue: ''
37
+ },
38
+ closeAfter: {
39
+ defaultValue: EAlignment.RIGHT,
40
+ control: {
41
+ type: 'number'
42
+ }
34
43
  }
35
44
  }
36
45
  };
@@ -45,10 +54,17 @@ const Template = args => _jsx(Tooltip, _objectSpread(_objectSpread({}, args), {}
45
54
  }));
46
55
 
47
56
  const standardProps = {
48
- label: 'Im the tooltip body'
57
+ label: 'Im the tooltip body',
58
+ closeAfter: null
49
59
  };
50
60
  export const standard = Template.bind(standardProps);
51
61
  standard.args = standardProps;
62
+ const withAtuCloseProps = {
63
+ label: 'I will automatically close after 5 seconds',
64
+ closeAfter: 5e3
65
+ };
66
+ export const withAutoClose = Template.bind(withAtuCloseProps);
67
+ withAutoClose.args = withAtuCloseProps;
52
68
  const withLongTextProps = {
53
69
  label: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
54
70
  alignment: EAlignment.BOTTOM
@@ -1 +1 @@
1
- {"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAC1E,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,YAAY,UAAQ,GAClB,CAAC,CAYH"}
1
+ {"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAC1E,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,YAAY,UAAQ,GAClB,CAAC,CAeH"}
@@ -11,5 +11,8 @@ export function useResponsiveValue(responsiveValue, fallbackCase = false) {
11
11
  activeBreakPoint = index + 1;
12
12
  return activeBreakPoint;
13
13
  }, 1);
14
- return useMemo(() => getEarliestKnownToken(responsiveValue, activeBP), [responsiveValue, activeBP]);
14
+ return useMemo(() => getEarliestKnownToken(responsiveValue, activeBP), [
15
+ responsiveValue,
16
+ activeBP,
17
+ ]);
15
18
  }
@@ -88,7 +88,7 @@ export const tokens = {
88
88
  },
89
89
  foreground: {
90
90
  body: colours.gray['900'],
91
- link: colours.green['600'],
91
+ link: colours.blue['500'],
92
92
  },
93
93
  background: {
94
94
  body: white,
@@ -234,7 +234,7 @@ export const tokens = {
234
234
  primary: colours.green['600'],
235
235
  secondary: colours.gray['700'],
236
236
  shine: colours.yellow['500'],
237
- link: colours.green['600'],
237
+ link: colours.blue['500'],
238
238
  dark: colours.gray['900'],
239
239
  white,
240
240
  muted: colours.gray['400'],
@@ -1 +1 @@
1
- {"version":3,"file":"resolveResponsiveProps.d.ts","sourceRoot":"","sources":["../../lib/utils/resolveResponsiveProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,oBAAY,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAExC,aAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,OAAO,WAAW,EAAE,GAAG,CAAC,CAAC;AAShE,eAAO,MAAM,sBAAsB,6IAalC,CAAC;AAwBF,wBAAgB,qBAAqB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAClF,kBAAkB,EAAE,MAAM,EAAE,EAC5B,OAAO,EAAE,MAAM,GACb,MAAM,CAaR"}
1
+ {"version":3,"file":"resolveResponsiveProps.d.ts","sourceRoot":"","sources":["../../lib/utils/resolveResponsiveProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,oBAAY,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAExC,aAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,OAAO,WAAW,EAAE,GAAG,CAAC,CAAC;AAShE,eAAO,MAAM,sBAAsB,6IAalC,CAAC;AAwBF,wBAAgB,qBAAqB,CACpC,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAC5C,kBAAkB,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAavD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autoguru/overdrive",
3
- "version": "4.1.10",
3
+ "version": "4.1.13",
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",