@citygross/components 0.7.154 → 0.7.156

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.
@@ -48,5 +48,7 @@ export declare const WithIconButton: Story<TBaseButton>;
48
48
  export declare const paginationButton: Story<TPaginationButton>;
49
49
  export declare const iconButton: Story<TIconButton>;
50
50
  export declare const SelectButton: Story<TBaseButton>;
51
- export declare const ButtonWithBadge: Story<TBaseButton>;
51
+ export declare const ButtonWithBadge: Story<TBaseButton & {
52
+ keepLabel?: boolean;
53
+ }>;
52
54
  export declare const saveButton: Story<TSaveButton>;
@@ -21,6 +21,9 @@ declare type TBasePrimaryButton = TButton & {
21
21
  size: TButtonSize;
22
22
  xsSize?: TButtonSize;
23
23
  };
24
+ declare type TNavButton = {
25
+ keepLabel?: boolean;
26
+ };
24
27
  export declare type TBaseSmallButton = Omit<TButton, 'size' | 'flexReverse' | 'fullWidth' | 'center'> & {
25
28
  width?: number;
26
29
  height?: number;
@@ -75,7 +78,7 @@ export declare const NavButton: import("styled-components").StyledComponent<"but
75
78
  color?: string | undefined;
76
79
  border?: string | undefined;
77
80
  shadow?: boolean | undefined;
78
- }, never>;
81
+ } & TNavButton, never>;
79
82
  export declare const NavButtonIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
80
- export declare const NavButtonChild: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TButtonChildContainer, never>;
83
+ export declare const NavButtonChild: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavButton & TButtonChildContainer, never>;
81
84
  export {};
@@ -11,5 +11,6 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
11
11
  children?: React.ReactNode;
12
12
  href?: string;
13
13
  tabIndex?: number;
14
+ keepLabel?: boolean;
14
15
  };
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, ...props }: TNavButton): JSX.Element;
16
+ 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, keepLabel, ...props }: TNavButton): JSX.Element;
@@ -157,9 +157,13 @@ var ButtonBadge = styled__default["default"].div(templateObject_14 || (templateO
157
157
  ? "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgePaddingSmall, "px ").concat((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonBadgePadding, "px")
158
158
  : "".concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs, "px ").concat((_d = props.theme.constants) === null || _d === void 0 ? void 0 : _d.buttonBadgePadding, "px");
159
159
  }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
160
- var NavButton = styled__default["default"](BaseButton)(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BaseIconButtonCSS, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
160
+ var NavButton = styled__default["default"](BaseButton)(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
161
161
  var NavButtonIcon = styled__default["default"].div(templateObject_16 || (templateObject_16 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
162
- var NavButtonChild = styled__default["default"].div(templateObject_17 || (templateObject_17 = _tslib.__makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, ButtonChildContainerCSS);
162
+ var NavButtonChild = styled__default["default"].div(templateObject_17 || (templateObject_17 = _tslib.__makeTemplateObject(["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) {
163
+ return props.keepLabel
164
+ ? ButtonChildContainerCSS
165
+ : "display: none;\n ";
166
+ }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, ButtonChildContainerCSS);
163
167
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
164
168
 
165
169
  exports.BaseButton = BaseButton;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,13 +12,13 @@ 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, tabIndex = _a.tabIndex, 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"]);
16
- return (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),
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, keepLabel = _a.keepLabel, 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", "keepLabel"]);
16
+ return (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, keepLabel: keepLabel, 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
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)))),
20
- React__default["default"].createElement(Button_styles.NavButtonIcon, null, icon),
21
- icon ? (React__default["default"].createElement(Button_styles.NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
20
+ !keepLabel && React__default["default"].createElement(Button_styles.NavButtonIcon, null, icon),
21
+ icon ? (React__default["default"].createElement(Button_styles.NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, keepLabel: keepLabel, childGap: childGap },
22
22
  icon,
23
23
  children)) : (children),
24
24
  buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
@@ -149,9 +149,13 @@ var ButtonBadge = styled.div(templateObject_14 || (templateObject_14 = __makeTem
149
149
  ? "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgePaddingSmall, "px ").concat((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonBadgePadding, "px")
150
150
  : "".concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs, "px ").concat((_d = props.theme.constants) === null || _d === void 0 ? void 0 : _d.buttonBadgePadding, "px");
151
151
  }, function (props) { var _a; return (_a = props.background) !== null && _a !== void 0 ? _a : 'black'; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
152
- var NavButton = styled(BaseButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BaseIconButtonCSS, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
152
+ var NavButton = styled(BaseButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n @media (max-width: ", "px) {\n ", "\n }\n\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { return (props.keepLabel ? BasePrimaryCSS : BaseIconButtonCSS); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, BasePrimaryCSS);
153
153
  var NavButtonIcon = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
154
- var NavButtonChild = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: none;\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n display: none;\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, ButtonChildContainerCSS);
154
+ var NavButtonChild = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"], ["\n ", "\n @media (min-width: ", "px) {\n ", "\n }\n"])), function (props) {
155
+ return props.keepLabel
156
+ ? ButtonChildContainerCSS
157
+ : "display: none;\n ";
158
+ }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, ButtonChildContainerCSS);
155
159
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
156
160
 
157
161
  export { BaseButton, BaseIconButton, BasePaginationButton, BasePrimaryButton, BasePrimaryCSS, ButtonBadge, ButtonChildContainer, IconContainer, IconWrapper, Loading, LoadingContainer, LoadingSpinner, NavButton, NavButtonChild, NavButtonIcon };
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,13 +4,13 @@ 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, tabIndex = _a.tabIndex, 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"]);
8
- return (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),
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, keepLabel = _a.keepLabel, 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", "keepLabel"]);
8
+ return (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, keepLabel: keepLabel, 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
9
  loading && (React.createElement(Loading, null,
10
10
  React.createElement(LoadingContainer, null,
11
11
  React.createElement(LoadingSpinner, null)))),
12
- React.createElement(NavButtonIcon, null, icon),
13
- icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
12
+ !keepLabel && React.createElement(NavButtonIcon, null, icon),
13
+ icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, keepLabel: keepLabel, childGap: childGap },
14
14
  icon,
15
15
  children)) : (children),
16
16
  buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.154",
3
+ "version": "0.7.156",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "7e74aac907ae81de552c04f13518588701bd2c0d"
74
+ "gitHead": "b9d044e018fa8a985b4d26f81abedc9fbf6c0af9"
75
75
  }