@citygross/components 0.7.147 → 0.7.153

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.
@@ -24,5 +24,6 @@ export declare type TBaseButton = styles.TButton & {
24
24
  color?: TButtonColor;
25
25
  buttonBadge?: string;
26
26
  badgeBackground?: string;
27
+ tabIndex?: number;
27
28
  };
28
- export declare function Button({ center, color, fullWidth, flexReverse, icon, selected, isDisabled, loading, noWrap, onClick, size, xsSize, borderRadius, childGap, buttonBadge, noShadow, hoverBackground, badgeBackground, children }: TBaseButton): JSX.Element;
29
+ export declare function Button({ center, color, fullWidth, flexReverse, icon, selected, isDisabled, loading, noWrap, onClick, size, xsSize, borderRadius, childGap, buttonBadge, noShadow, hoverBackground, badgeBackground, tabIndex, children }: TBaseButton): JSX.Element;
@@ -6,5 +6,6 @@ export declare type TIconButton = styles.TBaseSmallButton & {
6
6
  icon: JSX.Element;
7
7
  buttonBadge?: string;
8
8
  badgeBackground?: string;
9
+ tabIndex?: number;
9
10
  };
10
- export declare function IconButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, ...props }: TIconButton): JSX.Element;
11
+ export declare function IconButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, tabIndex, ...props }: TIconButton): JSX.Element;
@@ -9,5 +9,7 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
9
9
  size: keyof typeof ButtonSize;
10
10
  xsSize?: keyof typeof ButtonSize;
11
11
  children?: React.ReactNode;
12
+ href?: string;
13
+ tabIndex?: number;
12
14
  };
13
- export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, ...props }: TNavButton): JSX.Element;
15
+ export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, tabIndex, href, ...props }: TNavButton): JSX.Element;
@@ -30,8 +30,8 @@ exports.ButtonColor = void 0;
30
30
  })(exports.ButtonColor || (exports.ButtonColor = {}));
31
31
  function Button(_a) {
32
32
  var _b;
33
- var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, badgeBackground = _a.badgeBackground, children = _a.children;
34
- return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette
33
+ var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, children = _a.children;
34
+ return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { tabIndex: tabIndex, center: center, color: designTokens.theme && designTokens.theme.palette
35
35
  ? selected
36
36
  ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
37
37
  : designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  function IconButton(_a) {
15
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground"]);
16
- return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
15
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex"]);
16
+ return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
17
17
  loading && (React__default["default"].createElement(Button_styles.Loading, null,
18
18
  React__default["default"].createElement(Button_styles.LoadingContainer, null,
19
19
  React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
@@ -12,8 +12,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  function NavButton(_a) {
15
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow"]);
16
- return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
15
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, href = _a.href, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "href"]);
16
+ return href ? (React__default["default"].createElement("a", { href: href, onClick: function (e) { return onClick && onClick(e); }, tabIndex: tabIndex },
17
+ React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function () { }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
18
+ loading && (React__default["default"].createElement(Button_styles.Loading, null,
19
+ React__default["default"].createElement(Button_styles.LoadingContainer, null,
20
+ React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
21
+ React__default["default"].createElement(Button_styles.NavButtonIcon, null, icon),
22
+ icon ? (React__default["default"].createElement(Button_styles.NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
23
+ icon,
24
+ children)) : (children),
25
+ buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null))) : (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
17
26
  loading && (React__default["default"].createElement(Button_styles.Loading, null,
18
27
  React__default["default"].createElement(Button_styles.LoadingContainer, null,
19
28
  React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
@@ -1 +1 @@
1
- {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -22,8 +22,8 @@ var ButtonColor;
22
22
  })(ButtonColor || (ButtonColor = {}));
23
23
  function Button(_a) {
24
24
  var _b;
25
- var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, badgeBackground = _a.badgeBackground, children = _a.children;
26
- return (React.createElement(BasePrimaryButton, { center: center, color: theme && theme.palette
25
+ var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, borderRadius = _a.borderRadius, _f = _a.childGap, childGap = _f === void 0 ? 4 : _f, buttonBadge = _a.buttonBadge, noShadow = _a.noShadow, hoverBackground = _a.hoverBackground, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, children = _a.children;
26
+ return (React.createElement(BasePrimaryButton, { tabIndex: tabIndex, center: center, color: theme && theme.palette
27
27
  ? selected
28
28
  ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
29
29
  : theme === null || theme === void 0 ? void 0 : theme.palette[color]
@@ -4,8 +4,8 @@ import { theme } from '@citygross/design-tokens';
4
4
  import { BaseIconButton, Loading, LoadingContainer, LoadingSpinner, ButtonBadge } from './Button.styles.js';
5
5
 
6
6
  function IconButton(_a) {
7
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground"]);
8
- return (React.createElement(BaseIconButton, __assign({ color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
7
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex"]);
8
+ return (React.createElement(BaseIconButton, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
9
9
  loading && (React.createElement(Loading, null,
10
10
  React.createElement(LoadingContainer, null,
11
11
  React.createElement(LoadingSpinner, null)))),
@@ -4,8 +4,17 @@ import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, Na
4
4
  import { theme } from '@citygross/design-tokens';
5
5
 
6
6
  function NavButton(_a) {
7
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow"]);
8
- return (React.createElement(NavButton$1, __assign({ color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
7
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, href = _a.href, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "href"]);
8
+ return href ? (React.createElement("a", { href: href, onClick: function (e) { return onClick && onClick(e); }, tabIndex: tabIndex },
9
+ React.createElement(NavButton$1, __assign({ color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function () { }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
10
+ loading && (React.createElement(Loading, null,
11
+ React.createElement(LoadingContainer, null,
12
+ React.createElement(LoadingSpinner, null)))),
13
+ React.createElement(NavButtonIcon, null, icon),
14
+ icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
15
+ icon,
16
+ children)) : (children),
17
+ buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null))) : (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow }, props),
9
18
  loading && (React.createElement(Loading, null,
10
19
  React.createElement(LoadingContainer, null,
11
20
  React.createElement(LoadingSpinner, null)))),
@@ -1 +1 @@
1
- {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.147",
3
+ "version": "0.7.153",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
62
62
  "styled-components": "^5.2.1"
63
63
  },
64
64
  "dependencies": {
65
- "@citygross/design-tokens": "^0.2.46",
65
+ "@citygross/design-tokens": "^0.2.48",
66
66
  "@citygross/icons": "^0.1.8",
67
67
  "@citygross/react-use-bg-wizard": "^0.0.8",
68
- "@citygross/typography": "^0.0.76",
68
+ "@citygross/typography": "^0.0.78",
69
69
  "@citygross/utils": "^0.0.22",
70
70
  "framer-motion": "^4.1.17",
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "ce5a6f0a14a0f7d1c26a3de7d409c292acc73e2e"
74
+ "gitHead": "10cea9416672055c8b674a21feec99b13adfd1ea"
75
75
  }