@auth0/quantum-product 1.10.1 → 1.11.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 (6) hide show
  1. package/esm/icon-button/icon-button.js +2 -2
  2. package/esm/spinner/spinner.js +17 -8
  3. package/icon-button/icon-button.js +2 -2
  4. package/package.json +1 -1
  5. package/spinner/spinner.d.ts +3 -1
  6. package/spinner/spinner.js +17 -8
package/esm/icon-button/icon-button.js CHANGED
@@ -52,8 +52,8 @@ var StyledIconButton = styled(MuiIconButton, {
52
52
  });
53
53
  export var IconButton = React.forwardRef(function (props, ref) {
54
54
  var iconButtonContext = useIconButtonContext();
55
- var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, _e = props.label, label = _e === void 0 ? 'icon button' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape", "label", "tooltipPlacement", "onTooltipClose"]);
55
+ var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
56
56
  var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
57
57
  return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
58
- React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, ariaLabel: label }, iconButtonProps), children)));
58
+ React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children)));
59
59
  });
package/esm/spinner/spinner.js CHANGED
@@ -32,14 +32,21 @@ var Root = styled('div', {
32
32
  })(function (_a) {
33
33
  var theme = _a.theme, ownerState = _a.ownerState;
34
34
  var sizeValue = {
35
- small: theme.typography.pxToRem(14),
35
+ small: theme.typography.pxToRem(16),
36
36
  medium: theme.typography.pxToRem(40),
37
37
  large: theme.typography.pxToRem(60),
38
38
  }[ownerState.size || 'medium'];
39
+ var fontSize = {
40
+ small: theme.typography.pxToRem(7),
41
+ medium: theme.typography.pxToRem(19),
42
+ large: theme.typography.pxToRem(30),
43
+ }[ownerState.size || 'medium'];
39
44
  return {
40
45
  height: sizeValue,
41
46
  width: sizeValue,
42
47
  position: 'relative',
48
+ fontSize: fontSize,
49
+ color: theme.tokens.color_fg_default,
43
50
  };
44
51
  });
45
52
  var StyledSpinner = styled('span', {
@@ -48,12 +55,13 @@ var StyledSpinner = styled('span', {
48
55
  })(function (_a) {
49
56
  var theme = _a.theme, ownerState = _a.ownerState;
50
57
  var sizeValue = {
51
- small: theme.typography.pxToRem(14),
58
+ small: theme.typography.pxToRem(16),
52
59
  medium: theme.typography.pxToRem(40),
53
60
  large: theme.typography.pxToRem(60),
54
61
  }[ownerState.size || 'medium'];
55
62
  return {
56
63
  height: sizeValue,
64
+ position: 'absolute',
57
65
  width: sizeValue,
58
66
  '@keyframes rotate': {
59
67
  '0%': { transform: 'rotate(0deg)' },
@@ -68,11 +76,14 @@ var StyledSpinner = styled('span', {
68
76
  animation: 'rotate 0.8s infinite linear',
69
77
  };
70
78
  });
71
- var StyledLogo = styled(Logo, { name: spinnerComponentName, slot: 'Logo' })({
79
+ var IconContainer = styled('span', { name: spinnerComponentName, slot: 'Logo' })({
72
80
  position: 'absolute',
73
81
  top: '50%',
74
82
  left: '50%',
75
83
  transform: 'translate(-48%, -50%)',
84
+ display: 'flex',
85
+ alignItems: 'center',
86
+ justifyContent: 'center',
76
87
  });
77
88
  var useUtilityClasses = function (_a) {
78
89
  var classes = _a.classes;
@@ -84,16 +95,14 @@ var useUtilityClasses = function (_a) {
84
95
  return composeClasses(slots, getSpinnerUtilityClass, classes);
85
96
  };
86
97
  export var Spinner = React.forwardRef(function (props, ref) {
98
+ var _a = props.size, size = _a === void 0 ? 'small' : _a, icon = props.icon, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, propClasses = props.classes, className = props.className, rootProps = __rest(props, ["size", "icon", "inverse", "LogoProps", "classes", "className"]);
87
99
  var classes = useUtilityClasses(props);
88
- var _a = props.size, size = _a === void 0 ? 'small' : _a, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, className = props.className, rootProps = __rest(props, ["size", "inverse", "LogoProps", "className"]);
89
100
  var ownerState = {
90
101
  size: size,
91
102
  inverse: inverse,
92
103
  };
93
- if (size === 'small') {
94
- return (React.createElement(StyledSpinner, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.spinner, className) }, rootProps)));
95
- }
96
104
  return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, className) }, rootProps),
97
105
  React.createElement(StyledSpinner, { ownerState: ownerState, className: classes.spinner }),
98
- React.createElement(StyledLogo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps))));
106
+ React.createElement(IconContainer, null, icon ||
107
+ (size !== 'small' && (React.createElement(Logo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps)))))));
99
108
  });
package/icon-button/icon-button.js CHANGED
@@ -78,8 +78,8 @@ var StyledIconButton = (0, styled_1.styled)(IconButton_1.default, {
78
78
  });
79
79
  exports.IconButton = React.forwardRef(function (props, ref) {
80
80
  var iconButtonContext = (0, icon_button_context_1.useIconButtonContext)();
81
- var children = props.children, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, _e = props.label, label = _e === void 0 ? 'icon button' : _e, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "color", "variant", "size", "disabled", "edge", "shape", "label", "tooltipPlacement", "onTooltipClose"]);
81
+ var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
82
82
  var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
83
83
  return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
84
- React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, ariaLabel: label }, iconButtonProps), children)));
84
+ React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children)));
85
85
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.10.1",
3
+ "version": "1.11.0",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/spinner/spinner.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare type ISpinnerProps = IStyledComponentProps<{
9
9
  size?: 'small' | 'medium' | 'large';
10
10
  LogoProps?: Partial<ILogoProps>;
11
11
  classes?: Partial<SpinnerClasses>;
12
+ icon?: React.ReactNode;
12
13
  };
13
14
  defaultComponent: 'div';
14
15
  }>;
@@ -18,4 +19,5 @@ export declare const Spinner: React.ForwardRefExoticComponent<{
18
19
  size?: "small" | "medium" | "large" | undefined;
19
20
  LogoProps?: Partial<ILogoProps> | undefined;
20
21
  classes?: Partial<Record<"spinner" | "root" | "logo", string>> | undefined;
21
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "classes" | "inverse" | "LogoProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
22
+ icon?: React.ReactNode;
23
+ } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "size" | "icon" | "classes" | "inverse" | "LogoProps"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
package/spinner/spinner.js CHANGED
@@ -61,14 +61,21 @@ var Root = (0, styled_1.styled)('div', {
61
61
  })(function (_a) {
62
62
  var theme = _a.theme, ownerState = _a.ownerState;
63
63
  var sizeValue = {
64
- small: theme.typography.pxToRem(14),
64
+ small: theme.typography.pxToRem(16),
65
65
  medium: theme.typography.pxToRem(40),
66
66
  large: theme.typography.pxToRem(60),
67
67
  }[ownerState.size || 'medium'];
68
+ var fontSize = {
69
+ small: theme.typography.pxToRem(7),
70
+ medium: theme.typography.pxToRem(19),
71
+ large: theme.typography.pxToRem(30),
72
+ }[ownerState.size || 'medium'];
68
73
  return {
69
74
  height: sizeValue,
70
75
  width: sizeValue,
71
76
  position: 'relative',
77
+ fontSize: fontSize,
78
+ color: theme.tokens.color_fg_default,
72
79
  };
73
80
  });
74
81
  var StyledSpinner = (0, styled_1.styled)('span', {
@@ -77,12 +84,13 @@ var StyledSpinner = (0, styled_1.styled)('span', {
77
84
  })(function (_a) {
78
85
  var theme = _a.theme, ownerState = _a.ownerState;
79
86
  var sizeValue = {
80
- small: theme.typography.pxToRem(14),
87
+ small: theme.typography.pxToRem(16),
81
88
  medium: theme.typography.pxToRem(40),
82
89
  large: theme.typography.pxToRem(60),
83
90
  }[ownerState.size || 'medium'];
84
91
  return {
85
92
  height: sizeValue,
93
+ position: 'absolute',
86
94
  width: sizeValue,
87
95
  '@keyframes rotate': {
88
96
  '0%': { transform: 'rotate(0deg)' },
@@ -97,11 +105,14 @@ var StyledSpinner = (0, styled_1.styled)('span', {
97
105
  animation: 'rotate 0.8s infinite linear',
98
106
  };
99
107
  });
100
- var StyledLogo = (0, styled_1.styled)(logo_1.Logo, { name: spinner_classes_1.spinnerComponentName, slot: 'Logo' })({
108
+ var IconContainer = (0, styled_1.styled)('span', { name: spinner_classes_1.spinnerComponentName, slot: 'Logo' })({
101
109
  position: 'absolute',
102
110
  top: '50%',
103
111
  left: '50%',
104
112
  transform: 'translate(-48%, -50%)',
113
+ display: 'flex',
114
+ alignItems: 'center',
115
+ justifyContent: 'center',
105
116
  });
106
117
  var useUtilityClasses = function (_a) {
107
118
  var classes = _a.classes;
@@ -113,16 +124,14 @@ var useUtilityClasses = function (_a) {
113
124
  return (0, classes_1.composeClasses)(slots, spinner_classes_1.getSpinnerUtilityClass, classes);
114
125
  };
115
126
  exports.Spinner = React.forwardRef(function (props, ref) {
127
+ var _a = props.size, size = _a === void 0 ? 'small' : _a, icon = props.icon, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, propClasses = props.classes, className = props.className, rootProps = __rest(props, ["size", "icon", "inverse", "LogoProps", "classes", "className"]);
116
128
  var classes = useUtilityClasses(props);
117
- var _a = props.size, size = _a === void 0 ? 'small' : _a, _b = props.inverse, inverse = _b === void 0 ? false : _b, _c = props.LogoProps, LogoProps = _c === void 0 ? {} : _c, className = props.className, rootProps = __rest(props, ["size", "inverse", "LogoProps", "className"]);
118
129
  var ownerState = {
119
130
  size: size,
120
131
  inverse: inverse,
121
132
  };
122
- if (size === 'small') {
123
- return (React.createElement(StyledSpinner, __assign({ ref: ref, ownerState: ownerState, className: (0, clsx_1.default)(classes.spinner, className) }, rootProps)));
124
- }
125
133
  return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
126
134
  React.createElement(StyledSpinner, { ownerState: ownerState, className: classes.spinner }),
127
- React.createElement(StyledLogo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps))));
135
+ React.createElement(IconContainer, null, icon ||
136
+ (size !== 'small' && (React.createElement(logo_1.Logo, __assign({ size: size === 'medium' ? 'xsmall' : 'small', color: inverse ? 'light' : 'dark' }, LogoProps)))))));
128
137
  });