@citygross/components 0.7.118 → 0.7.119
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.
- package/build/@types/components/Button/Button.d.ts +2 -1
- package/build/@types/components/Button/Button.stories.d.ts +2 -0
- package/build/@types/components/Button/Button.styles.d.ts +2 -0
- package/build/@types/components/Button/SaveButton.d.ts +17 -0
- package/build/@types/components/Button/index.d.ts +1 -0
- package/build/cjs/components/src/components/Button/Button.js +1 -0
- package/build/cjs/components/src/components/Button/Button.js.map +1 -1
- package/build/cjs/components/src/components/Button/Button.styles.js +17 -12
- package/build/cjs/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/cjs/components/src/components/Button/SaveButton.js +45 -0
- package/build/cjs/components/src/components/Button/SaveButton.js.map +1 -0
- package/build/cjs/components/src/components/InfoTextBlock/InfoTextBlock.js +1 -0
- package/build/cjs/components/src/components/InfoTextBlock/InfoTextBlock.js.map +1 -1
- package/build/cjs/components/src/index.js +2 -0
- package/build/cjs/components/src/index.js.map +1 -1
- package/build/es/components/src/components/Button/Button.js +1 -0
- package/build/es/components/src/components/Button/Button.js.map +1 -1
- package/build/es/components/src/components/Button/Button.styles.js +16 -13
- package/build/es/components/src/components/Button/Button.styles.js.map +1 -1
- package/build/es/components/src/components/Button/SaveButton.js +37 -0
- package/build/es/components/src/components/Button/SaveButton.js.map +1 -0
- package/build/es/components/src/components/InfoTextBlock/InfoTextBlock.js +1 -0
- package/build/es/components/src/components/InfoTextBlock/InfoTextBlock.js.map +1 -1
- package/build/es/components/src/index.js +1 -0
- package/build/es/components/src/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -12,7 +12,8 @@ export declare enum ButtonColor {
|
|
|
12
12
|
'darkest' = 3,
|
|
13
13
|
'lightest' = 4,
|
|
14
14
|
'buttonGray' = 5,
|
|
15
|
-
'brandPurple' = 6
|
|
15
|
+
'brandPurple' = 6,
|
|
16
|
+
'alertGreen' = 7
|
|
16
17
|
}
|
|
17
18
|
export declare type TButtonColor = keyof typeof ButtonColor;
|
|
18
19
|
export declare type TBaseButton = styles.TButton & {
|
|
@@ -2,6 +2,7 @@ import { Story } from '@storybook/react';
|
|
|
2
2
|
import { Button, TBaseButton } from './Button';
|
|
3
3
|
import { TIconButton } from './IconButton';
|
|
4
4
|
import { TPaginationButton } from './PaginationButton';
|
|
5
|
+
import { TSaveButton } from './SaveButton';
|
|
5
6
|
declare const _default: {
|
|
6
7
|
component: typeof Button;
|
|
7
8
|
title: string;
|
|
@@ -48,3 +49,4 @@ export declare const paginationButton: Story<TPaginationButton>;
|
|
|
48
49
|
export declare const iconButton: Story<TIconButton>;
|
|
49
50
|
export declare const SelectButton: Story<TBaseButton>;
|
|
50
51
|
export declare const ButtonWithBadge: Story<TBaseButton>;
|
|
52
|
+
export declare const saveButton: Story<TSaveButton>;
|
|
@@ -38,6 +38,8 @@ export declare const BasePrimaryButton: import("styled-components").StyledCompon
|
|
|
38
38
|
xsSize?: "small" | "medium" | "large" | undefined;
|
|
39
39
|
}, never>;
|
|
40
40
|
export declare const ButtonChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TButtonChildContainer, never>;
|
|
41
|
+
export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
42
|
+
export declare const AnimationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
41
43
|
export declare const Loading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
42
44
|
export declare const LoadingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TButtonLoadingSpinner, never>;
|
|
43
45
|
export declare const LoadingSpinner: import("styled-components").StyledComponent<({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: import("../../components/Spinner/Spinner").TSpinner) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonSize, TButtonColor } from './Button';
|
|
3
|
+
import * as styles from './Button.styles';
|
|
4
|
+
export declare type TSaveButton = styles.TButton & {
|
|
5
|
+
beforeSaveText: string;
|
|
6
|
+
afterSaveText: string;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
color?: TButtonColor;
|
|
9
|
+
icon?: JSX.Element;
|
|
10
|
+
fullWidth?: boolean;
|
|
11
|
+
size?: keyof typeof ButtonSize;
|
|
12
|
+
xsSize?: keyof typeof ButtonSize;
|
|
13
|
+
onClick: (saved: boolean) => void;
|
|
14
|
+
saved?: boolean;
|
|
15
|
+
onAnimationComplete: () => void;
|
|
16
|
+
};
|
|
17
|
+
export declare function SaveButton({ beforeSaveText, afterSaveText, color, size, xsSize, icon, isDisabled, loading, selected, noWrap, onClick, fullWidth, childGap, saved, onAnimationComplete }: TSaveButton): JSX.Element;
|
|
@@ -25,6 +25,7 @@ exports.ButtonColor = void 0;
|
|
|
25
25
|
ButtonColor[ButtonColor["lightest"] = 4] = "lightest";
|
|
26
26
|
ButtonColor[ButtonColor["buttonGray"] = 5] = "buttonGray";
|
|
27
27
|
ButtonColor[ButtonColor["brandPurple"] = 6] = "brandPurple";
|
|
28
|
+
ButtonColor[ButtonColor["alertGreen"] = 7] = "alertGreen";
|
|
28
29
|
})(exports.ButtonColor || (exports.ButtonColor = {}));
|
|
29
30
|
function Button(_a) {
|
|
30
31
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -63,13 +63,14 @@ var SpinnerSize = function (size) {
|
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: 1;\n }\n }\n &:active {\n ::before {\n opacity: 1;\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: 1;\n }\n }\n &:active {\n ::before {\n opacity: 1;\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
|
|
66
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
67
|
-
return
|
|
66
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
67
|
+
return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
|
|
68
68
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
69
69
|
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.brandPurple) ||
|
|
70
|
-
props.
|
|
71
|
-
|
|
72
|
-
|
|
70
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.alertGreen) ||
|
|
71
|
+
props.isDisabled
|
|
72
|
+
? (_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white
|
|
73
|
+
: (_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.darkest;
|
|
73
74
|
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
74
75
|
var BasePrimaryButton = styled__default["default"](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n\n box-shadow: ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n\n box-shadow: ", ";\n }\n"], ["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n\n box-shadow: ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n\n box-shadow: ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
75
76
|
var _a, _b;
|
|
@@ -118,10 +119,12 @@ var ButtonChildContainer = styled__default["default"].div(templateObject_3 || (t
|
|
|
118
119
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonChildSmallGap
|
|
119
120
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonChildGap;
|
|
120
121
|
}, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
|
|
121
|
-
var
|
|
122
|
-
var
|
|
123
|
-
var
|
|
124
|
-
var
|
|
122
|
+
var IconWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: hidden;\n"], ["\n display: flex;\n position: relative;\n overflow: hidden;\n"])));
|
|
123
|
+
var AnimationWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
|
|
124
|
+
var Loading = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
125
|
+
var LoadingContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
|
|
126
|
+
var LoadingSpinner = styled__default["default"](Spinner.Spinner)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
127
|
+
var BaseIconButton = styled__default["default"](BaseButton)(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n border-radius: 50%;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n ", ";\n\n &::after {\n border-radius: 50%;\n box-shadow: ", ";\n }\n &::before {\n border-radius: 50%;\n }\n"], ["\n padding: ", "px;\n border-radius: 50%;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n ", ";\n\n &::after {\n border-radius: 50%;\n box-shadow: ", ";\n }\n &::before {\n border-radius: 50%;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
|
|
125
128
|
var _a;
|
|
126
129
|
return props.shadow && props.border
|
|
127
130
|
? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
|
|
@@ -131,21 +134,23 @@ var BaseIconButton = styled__default["default"](BaseButton)(templateObject_7 ||
|
|
|
131
134
|
? "box-shadow: inset 0px 0px 0px 1px ".concat(props.border)
|
|
132
135
|
: '';
|
|
133
136
|
}, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
|
|
134
|
-
var BasePaginationButton = styled__default["default"](BaseButton)(
|
|
137
|
+
var BasePaginationButton = styled__default["default"](BaseButton)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n text-align: center;\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n text-align: center;\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
|
|
135
138
|
var _a, _b, _c;
|
|
136
139
|
return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
|
|
137
140
|
? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
|
|
138
141
|
: "box-shadow: inset 0px 0px 0px 1px ".concat((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
|
|
139
142
|
});
|
|
140
|
-
var ButtonBadge = styled__default["default"].div(
|
|
141
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
143
|
+
var ButtonBadge = styled__default["default"].div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: 0 7px;\n background: black;\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: 0 7px;\n background: black;\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, 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; });
|
|
144
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
142
145
|
|
|
146
|
+
exports.AnimationWrapper = AnimationWrapper;
|
|
143
147
|
exports.BaseButton = BaseButton;
|
|
144
148
|
exports.BaseIconButton = BaseIconButton;
|
|
145
149
|
exports.BasePaginationButton = BasePaginationButton;
|
|
146
150
|
exports.BasePrimaryButton = BasePrimaryButton;
|
|
147
151
|
exports.ButtonBadge = ButtonBadge;
|
|
148
152
|
exports.ButtonChildContainer = ButtonChildContainer;
|
|
153
|
+
exports.IconWrapper = IconWrapper;
|
|
149
154
|
exports.Loading = Loading;
|
|
150
155
|
exports.LoadingContainer = LoadingContainer;
|
|
151
156
|
exports.LoadingSpinner = LoadingSpinner;
|
|
@@ -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,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var designTokens = require('@citygross/design-tokens');
|
|
7
|
+
var Button_styles = require('./Button.styles.js');
|
|
8
|
+
var typography = require('@citygross/typography');
|
|
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 SaveButton(_a) {
|
|
15
|
+
var _b;
|
|
16
|
+
var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _c = _a.color, color = _c === void 0 ? 'alertGreen' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, selected = _a.selected, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
|
|
17
|
+
var _f = React.useState(true), showAnimation = _f[0], setShowAnimation = _f[1];
|
|
18
|
+
var runOnClick = function (e) {
|
|
19
|
+
onClick(e);
|
|
20
|
+
if (setShowAnimation) {
|
|
21
|
+
setTimeout(function () {
|
|
22
|
+
setShowAnimation(false);
|
|
23
|
+
onAnimationComplete();
|
|
24
|
+
}, 1000);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { color: designTokens.theme && designTokens.theme.palette
|
|
28
|
+
? selected
|
|
29
|
+
? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
30
|
+
: saved
|
|
31
|
+
? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
|
|
32
|
+
: designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette.secondary
|
|
33
|
+
: 'white', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return runOnClick(e); } },
|
|
34
|
+
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
35
|
+
React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
|
|
36
|
+
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
37
|
+
React__default["default"].createElement(Button_styles.ButtonChildContainer, { size: size, noWrap: noWrap, childGap: childGap }, saved && icon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
38
|
+
React__default["default"].createElement(Button_styles.IconWrapper, null,
|
|
39
|
+
icon,
|
|
40
|
+
showAnimation && React__default["default"].createElement(Button_styles.AnimationWrapper, null)),
|
|
41
|
+
React__default["default"].createElement(typography.BodyText, { color: "white" }, afterSaveText))) : (React__default["default"].createElement(typography.BodyText, { color: "white" }, beforeSaveText)))));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
exports.SaveButton = SaveButton;
|
|
45
|
+
//# sourceMappingURL=SaveButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var Button = require('../Button/Button.js');
|
|
7
7
|
var designTokens = require('@citygross/design-tokens');
|
|
8
8
|
require('../Button/Button.styles.js');
|
|
9
|
+
require('@citygross/typography');
|
|
9
10
|
var fallback_grocery = require('../ListItem/assets/fallback_grocery.svg.js');
|
|
10
11
|
var InfoTextBlock_styles = require('./InfoTextBlock.styles.js');
|
|
11
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTextBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InfoTextBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,6 +11,7 @@ var Badge = require('./components/Badge/Badge.js');
|
|
|
11
11
|
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
|
+
var SaveButton = require('./components/Button/SaveButton.js');
|
|
14
15
|
var BackButton = require('./components/BackButton/BackButton.js');
|
|
15
16
|
var Chip = require('./components/Chips/Chip.js');
|
|
16
17
|
var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
|
|
@@ -97,6 +98,7 @@ exports.Badge = Badge.Badge;
|
|
|
97
98
|
exports.Box = Box.Box;
|
|
98
99
|
exports.IconButton = IconButton.IconButton;
|
|
99
100
|
exports.PaginationButton = PaginationButton.PaginationButton;
|
|
101
|
+
exports.SaveButton = SaveButton.SaveButton;
|
|
100
102
|
exports.BackButton = BackButton.BackButton;
|
|
101
103
|
exports.Chip = Chip.Chip;
|
|
102
104
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -17,6 +17,7 @@ var ButtonColor;
|
|
|
17
17
|
ButtonColor[ButtonColor["lightest"] = 4] = "lightest";
|
|
18
18
|
ButtonColor[ButtonColor["buttonGray"] = 5] = "buttonGray";
|
|
19
19
|
ButtonColor[ButtonColor["brandPurple"] = 6] = "brandPurple";
|
|
20
|
+
ButtonColor[ButtonColor["alertGreen"] = 7] = "alertGreen";
|
|
20
21
|
})(ButtonColor || (ButtonColor = {}));
|
|
21
22
|
function Button(_a) {
|
|
22
23
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -55,13 +55,14 @@ var SpinnerSize = function (size) {
|
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
var BaseButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: 1;\n }\n }\n &:active {\n ::before {\n opacity: 1;\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"], ["\n /* reset */\n outline: none;\n border: none;\n\n backface-visibility: hidden;\n cursor: pointer;\n border-radius: ", "px;\n /* overflow: hidden; */\n pointer-events: ", ";\n -webkit-font-smoothing: antialiased;\n user-select: ", ";\n\n position: relative;\n\n /* typography */\n\n font-family: ", ";\n font-weight: ", ";\n text-align: ", ";\n white-space: ", ";\n\n /* colors */\n\n background: ", ";\n\n color: ", ";\n\n /* Width & Height */\n\n width: ", ";\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: ", "px;\n top: 0;\n left: 0;\n box-shadow: ", ";\n opacity: 0;\n -webkit-transition: ", ";\n transition: ", ";\n }\n\n /* Hover Effect */\n\n &:hover {\n ::after {\n opacity: 1;\n }\n }\n &:active {\n ::before {\n opacity: 1;\n }\n ::after {\n opacity: 0;\n }\n }\n /* Media Queries */\n\n @media (max-width: ", "px) {\n align-self: ", ";\n }\n"])), function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
|
|
58
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
59
|
-
return
|
|
58
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
59
|
+
return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
|
|
60
60
|
props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
|
|
61
61
|
props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.brandPurple) ||
|
|
62
|
-
props.
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.alertGreen) ||
|
|
63
|
+
props.isDisabled
|
|
64
|
+
? (_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white
|
|
65
|
+
: (_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.darkest;
|
|
65
66
|
}, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_a = props.borderRadius) !== null && _a !== void 0 ? _a : (_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
|
|
66
67
|
var BasePrimaryButton = styled(BaseButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n\n box-shadow: ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n\n box-shadow: ", ";\n }\n"], ["\n /* TypoGraphy */\n\n font-size: ", ";\n line-height: ", ";\n\n /* shadow */\n\n box-shadow: ", ";\n\n /* Padding */\n\n padding: ", ";\n\n @media (min-width: ", "px) {\n font-size: ", ";\n\n padding: ", ";\n\n box-shadow: ", ";\n }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
|
|
67
68
|
var _a, _b;
|
|
@@ -110,10 +111,12 @@ var ButtonChildContainer = styled.div(templateObject_3 || (templateObject_3 = __
|
|
|
110
111
|
? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonChildSmallGap
|
|
111
112
|
: (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.buttonChildGap;
|
|
112
113
|
}, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
|
|
113
|
-
var
|
|
114
|
-
var
|
|
115
|
-
var
|
|
116
|
-
var
|
|
114
|
+
var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: hidden;\n"], ["\n display: flex;\n position: relative;\n overflow: hidden;\n"])));
|
|
115
|
+
var AnimationWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n background: ", ";\n animation: showHide 1s ease-in;\n\n @keyframes showHide {\n /* Chrome, Safari */\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n display: none;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen; });
|
|
116
|
+
var Loading = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n z-index: 3;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
117
|
+
var LoadingContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n @media (min-width: ", "px) {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
|
|
118
|
+
var LoadingSpinner = styled(Spinner)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
119
|
+
var BaseIconButton = styled(BaseButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: ", "px;\n border-radius: 50%;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n ", ";\n\n &::after {\n border-radius: 50%;\n box-shadow: ", ";\n }\n &::before {\n border-radius: 50%;\n }\n"], ["\n padding: ", "px;\n border-radius: 50%;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n ", ";\n\n &::after {\n border-radius: 50%;\n box-shadow: ", ";\n }\n &::before {\n border-radius: 50%;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
|
|
117
120
|
var _a;
|
|
118
121
|
return props.shadow && props.border
|
|
119
122
|
? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
|
|
@@ -123,14 +126,14 @@ var BaseIconButton = styled(BaseButton)(templateObject_7 || (templateObject_7 =
|
|
|
123
126
|
? "box-shadow: inset 0px 0px 0px 1px ".concat(props.border)
|
|
124
127
|
: '';
|
|
125
128
|
}, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
|
|
126
|
-
var BasePaginationButton = styled(BaseButton)(
|
|
129
|
+
var BasePaginationButton = styled(BaseButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n text-align: center;\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n height: ", "px;\n width: ", "px;\n min-width: ", "px;\n text-align: center;\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
|
|
127
130
|
var _a, _b, _c;
|
|
128
131
|
return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
|
|
129
132
|
? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
|
|
130
133
|
: "box-shadow: inset 0px 0px 0px 1px ".concat((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
|
|
131
134
|
});
|
|
132
|
-
var ButtonBadge = styled.div(
|
|
133
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
135
|
+
var ButtonBadge = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: 0 7px;\n background: black;\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n right: ", "px;\n padding: 0 7px;\n background: black;\n color: white;\n width: fit-content;\n border-radius: 100px;\n font-size: ", "px;\n line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, 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; });
|
|
136
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
134
137
|
|
|
135
|
-
export { BaseButton, BaseIconButton, BasePaginationButton, BasePrimaryButton, ButtonBadge, ButtonChildContainer, Loading, LoadingContainer, LoadingSpinner };
|
|
138
|
+
export { AnimationWrapper, BaseButton, BaseIconButton, BasePaginationButton, BasePrimaryButton, ButtonBadge, ButtonChildContainer, IconWrapper, Loading, LoadingContainer, LoadingSpinner };
|
|
136
139
|
//# 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,37 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { theme } from '@citygross/design-tokens';
|
|
3
|
+
import { BasePrimaryButton, Loading, LoadingContainer, LoadingSpinner, ButtonChildContainer, IconWrapper, AnimationWrapper } from './Button.styles.js';
|
|
4
|
+
import { BodyText } from '@citygross/typography';
|
|
5
|
+
|
|
6
|
+
function SaveButton(_a) {
|
|
7
|
+
var _b;
|
|
8
|
+
var beforeSaveText = _a.beforeSaveText, afterSaveText = _a.afterSaveText, _c = _a.color, color = _c === void 0 ? 'alertGreen' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, selected = _a.selected, noWrap = _a.noWrap, onClick = _a.onClick, fullWidth = _a.fullWidth, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, saved = _a.saved, onAnimationComplete = _a.onAnimationComplete;
|
|
9
|
+
var _f = useState(true), showAnimation = _f[0], setShowAnimation = _f[1];
|
|
10
|
+
var runOnClick = function (e) {
|
|
11
|
+
onClick(e);
|
|
12
|
+
if (setShowAnimation) {
|
|
13
|
+
setTimeout(function () {
|
|
14
|
+
setShowAnimation(false);
|
|
15
|
+
onAnimationComplete();
|
|
16
|
+
}, 1000);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
return (React.createElement(BasePrimaryButton, { color: theme && theme.palette
|
|
20
|
+
? selected
|
|
21
|
+
? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
22
|
+
: saved
|
|
23
|
+
? theme === null || theme === void 0 ? void 0 : theme.palette[color]
|
|
24
|
+
: theme === null || theme === void 0 ? void 0 : theme.palette.secondary
|
|
25
|
+
: 'white', isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return runOnClick(e); } },
|
|
26
|
+
loading && (React.createElement(Loading, null,
|
|
27
|
+
React.createElement(LoadingContainer, { xsSize: xsSize, size: size },
|
|
28
|
+
React.createElement(LoadingSpinner, null)))),
|
|
29
|
+
React.createElement(ButtonChildContainer, { size: size, noWrap: noWrap, childGap: childGap }, saved && icon ? (React.createElement(React.Fragment, null,
|
|
30
|
+
React.createElement(IconWrapper, null,
|
|
31
|
+
icon,
|
|
32
|
+
showAnimation && React.createElement(AnimationWrapper, null)),
|
|
33
|
+
React.createElement(BodyText, { color: "white" }, afterSaveText))) : (React.createElement(BodyText, { color: "white" }, beforeSaveText)))));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export { SaveButton };
|
|
37
|
+
//# sourceMappingURL=SaveButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Button } from '../Button/Button.js';
|
|
3
3
|
import { theme } from '@citygross/design-tokens';
|
|
4
4
|
import '../Button/Button.styles.js';
|
|
5
|
+
import '@citygross/typography';
|
|
5
6
|
import FallbackIcon from '../ListItem/assets/fallback_grocery.svg.js';
|
|
6
7
|
import { InfoBlock, InfoTextWrapper, ImageContainer, Image, ButtonContainer } from './InfoTextBlock.styles.js';
|
|
7
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTextBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InfoTextBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,6 +7,7 @@ export { Badge } from './components/Badge/Badge.js';
|
|
|
7
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
|
+
export { SaveButton } from './components/Button/SaveButton.js';
|
|
10
11
|
export { BackButton } from './components/BackButton/BackButton.js';
|
|
11
12
|
export { Chip } from './components/Chips/Chip.js';
|
|
12
13
|
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.
|
|
3
|
+
"version": "0.7.119",
|
|
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": "
|
|
74
|
+
"gitHead": "d00a3318846e1fe9eac7a7d4ffaaa12afd218c97"
|
|
75
75
|
}
|