@citygross/components 0.7.144 → 0.7.145

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.
@@ -10,5 +10,4 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
10
10
  xsSize?: keyof typeof ButtonSize;
11
11
  children?: React.ReactNode;
12
12
  };
13
- declare const 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;
14
- export default NavButton;
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;
@@ -157,9 +157,9 @@ 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
- 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);
161
- 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
- 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);
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);
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);
163
163
  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
164
 
165
165
  exports.BaseButton = BaseButton;
@@ -174,4 +174,7 @@ exports.IconWrapper = IconWrapper;
174
174
  exports.Loading = Loading;
175
175
  exports.LoadingContainer = LoadingContainer;
176
176
  exports.LoadingSpinner = LoadingSpinner;
177
+ exports.NavButton = NavButton;
178
+ exports.NavButtonChild = NavButtonChild;
179
+ exports.NavButtonIcon = NavButtonIcon;
177
180
  //# sourceMappingURL=Button.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,28 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _tslib = require('../../../../_virtual/_tslib.js');
6
+ var React = require('react');
7
+ var Button_styles = require('./Button.styles.js');
8
+ var designTokens = require('@citygross/design-tokens');
9
+
10
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
+
12
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
+
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),
17
+ loading && (React__default["default"].createElement(Button_styles.Loading, null,
18
+ React__default["default"].createElement(Button_styles.LoadingContainer, null,
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 },
22
+ icon,
23
+ children)) : (children),
24
+ buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
25
+ }
26
+
27
+ exports.NavButton = NavButton;
28
+ //# sourceMappingURL=NavButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,9 +12,7 @@ var Box = require('./components/Box/Box.js');
12
12
  var IconButton = require('./components/Button/IconButton.js');
13
13
  var PaginationButton = require('./components/Button/PaginationButton.js');
14
14
  var SaveButton = require('./components/Button/SaveButton.js');
15
- require('react');
16
- require('./components/Button/Button.styles.js');
17
- require('@citygross/design-tokens');
15
+ var NavButton = require('./components/Button/NavButton.js');
18
16
  var BackButton = require('./components/BackButton/BackButton.js');
19
17
  var Chip = require('./components/Chips/Chip.js');
20
18
  var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
@@ -102,6 +100,7 @@ exports.Box = Box.Box;
102
100
  exports.IconButton = IconButton.IconButton;
103
101
  exports.PaginationButton = PaginationButton.PaginationButton;
104
102
  exports.SaveButton = SaveButton.SaveButton;
103
+ exports.NavButton = NavButton.NavButton;
105
104
  exports.BackButton = BackButton.BackButton;
106
105
  exports.Chip = Chip.Chip;
107
106
  exports.CartItemSummary = CartItemSummary.CartItemSummary;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -149,10 +149,10 @@ 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
- 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);
153
- 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
- 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);
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);
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);
155
155
  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
156
 
157
- export { BaseButton, BaseIconButton, BasePaginationButton, BasePrimaryButton, BasePrimaryCSS, ButtonBadge, ButtonChildContainer, IconContainer, IconWrapper, Loading, LoadingContainer, LoadingSpinner };
157
+ export { BaseButton, BaseIconButton, BasePaginationButton, BasePrimaryButton, BasePrimaryCSS, ButtonBadge, ButtonChildContainer, IconContainer, IconWrapper, Loading, LoadingContainer, LoadingSpinner, NavButton, NavButtonChild, NavButtonIcon };
158
158
  //# sourceMappingURL=Button.styles.js.map
@@ -0,0 +1,20 @@
1
+ import { __rest, __assign } from '../../../../_virtual/_tslib.js';
2
+ import React from 'react';
3
+ import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, NavButtonIcon, NavButtonChild, ButtonBadge } from './Button.styles.js';
4
+ import { theme } from '@citygross/design-tokens';
5
+
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),
9
+ loading && (React.createElement(Loading, null,
10
+ React.createElement(LoadingContainer, null,
11
+ React.createElement(LoadingSpinner, null)))),
12
+ React.createElement(NavButtonIcon, null, icon),
13
+ icon ? (React.createElement(NavButtonChild, { size: size, flexReverse: flexReverse, noWrap: noWrap, childGap: childGap },
14
+ icon,
15
+ children)) : (children),
16
+ buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, smallBadge: true }, buttonBadge)) : null));
17
+ }
18
+
19
+ export { NavButton };
20
+ //# sourceMappingURL=NavButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -8,9 +8,7 @@ export { Box } from './components/Box/Box.js';
8
8
  export { IconButton } from './components/Button/IconButton.js';
9
9
  export { PaginationButton } from './components/Button/PaginationButton.js';
10
10
  export { SaveButton } from './components/Button/SaveButton.js';
11
- import 'react';
12
- import './components/Button/Button.styles.js';
13
- import '@citygross/design-tokens';
11
+ export { NavButton } from './components/Button/NavButton.js';
14
12
  export { BackButton } from './components/BackButton/BackButton.js';
15
13
  export { Chip } from './components/Chips/Chip.js';
16
14
  export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.144",
3
+ "version": "0.7.145",
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.43",
65
+ "@citygross/design-tokens": "^0.2.44",
66
66
  "@citygross/icons": "^0.1.8",
67
67
  "@citygross/react-use-bg-wizard": "^0.0.8",
68
- "@citygross/typography": "^0.0.73",
68
+ "@citygross/typography": "^0.0.74",
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": "c2e6d68ea4cb3894b2cb1cf5e51be91072f083d5"
74
+ "gitHead": "cd17272c18522a9e9797e8ba75311efb863b021c"
75
75
  }