@citygross/components 0.8.102 → 0.8.103
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/Stepper/Stepper.styles.d.ts +1 -1
- package/build/cjs/components/src/components/Stepper/Stepper.styles.js +17 -11
- package/build/cjs/components/src/components/Stepper/Stepper.styles.js.map +1 -1
- package/build/cjs/components/src/components/Stepper/StepperListItem.js +4 -8
- package/build/cjs/components/src/components/Stepper/StepperListItem.js.map +1 -1
- package/build/es/components/src/components/Stepper/Stepper.styles.js +17 -11
- package/build/es/components/src/components/Stepper/Stepper.styles.js.map +1 -1
- package/build/es/components/src/components/Stepper/StepperListItem.js +5 -9
- package/build/es/components/src/components/Stepper/StepperListItem.js.map +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,7 @@ export declare type TToolTipWrapper = {
|
|
|
9
9
|
export declare type TMaxWidthContainer = {
|
|
10
10
|
maxWidth?: number;
|
|
11
11
|
};
|
|
12
|
-
export declare const BaseStepperItem: import("styled-components").StyledComponent<"
|
|
12
|
+
export declare const BaseStepperItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TBaseStepper, never>;
|
|
13
13
|
export declare const BaseStepperList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
14
|
export declare const MaxWidthContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TMaxWidthContainer, never>;
|
|
15
15
|
export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -3,24 +3,30 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
+
var designTokens = require('@citygross/design-tokens');
|
|
6
7
|
var styled = require('styled-components');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
10
|
|
|
10
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
12
|
|
|
12
|
-
var
|
|
13
|
-
var _a, _b;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
var _a, _b, _c, _d;
|
|
14
|
+
var BaseStepperItem = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n border: none;\n border-right: 1px solid ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: center;\n height: 100%;\n padding: 25.5px ", "px;\n position: relative;\n ", ";\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n /* hide tooltip */\n > {\n &:first-child {\n display: none;\n }\n }\n\n /* dispaly tooltip */\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n"], ["\n background: ", ";\n border: none;\n border-right: 1px solid ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: center;\n height: 100%;\n padding: 25.5px ", "px;\n position: relative;\n ", ";\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n /* hide tooltip */\n > {\n &:first-child {\n display: none;\n }\n }\n\n /* dispaly tooltip */\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n"])), function (props) { var _a, _b; return (_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; }, (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.medium, function (_a) {
|
|
15
|
+
var disabled = _a.disabled;
|
|
16
|
+
return (disabled ? 'default' : 'pointer');
|
|
17
|
+
}, (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.md, function (_a) {
|
|
18
|
+
var _b;
|
|
19
|
+
var active = _a.active;
|
|
20
|
+
return active &&
|
|
21
|
+
"border-bottom: 3px solid ".concat((_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue, "\n ");
|
|
22
|
+
}, (_d = designTokens.theme.breakpoints) === null || _d === void 0 ? void 0 : _d.lg, function (_a) {
|
|
23
|
+
var _b;
|
|
24
|
+
var firstChild = _a.firstChild;
|
|
25
|
+
return firstChild && "border-left: 1px solid ".concat((_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.medium);
|
|
20
26
|
});
|
|
21
|
-
var BaseStepperList = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n
|
|
22
|
-
var MaxWidthContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n
|
|
23
|
-
var ButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n
|
|
27
|
+
var BaseStepperList = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n"], ["\n background: ", ";\n box-shadow: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
28
|
+
var MaxWidthContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"], ["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
29
|
+
var ButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n min-width: 155px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n min-width: 155px;\n"])));
|
|
24
30
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
25
31
|
|
|
26
32
|
exports.BaseStepperItem = BaseStepperItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stepper.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,14 +18,10 @@ function StepperListItem(_a) {
|
|
|
18
18
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
19
19
|
var active = _a.active, firstChild = _a.firstChild, step = _a.step, onClick = _a.onClick, disabled = _a.disabled, complete = _a.complete, tooltip = _a.tooltip, children = _a.children;
|
|
20
20
|
var _l = React.useState(false), isHover = _l[0], setIsHover = _l[1];
|
|
21
|
-
return (React__default["default"].createElement(
|
|
22
|
-
React__default["default"].createElement(Stepper_styles.BaseStepperItem, { active: active,
|
|
23
|
-
if (event.key === 'Enter' && !disabled) {
|
|
24
|
-
onClick && onClick();
|
|
25
|
-
}
|
|
26
|
-
}, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
21
|
+
return (React__default["default"].createElement(React.Fragment, null,
|
|
22
|
+
React__default["default"].createElement(Stepper_styles.BaseStepperItem, { active: active, disabled: disabled, firstChild: firstChild, onClick: onClick, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
27
23
|
React__default["default"].createElement(ToolTip.ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
|
|
28
|
-
React__default["default"].createElement(Badge.Badge, { width:
|
|
24
|
+
React__default["default"].createElement(Badge.Badge, { width: "30px", height: "30px", background: isHover
|
|
29
25
|
? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
30
26
|
: complete
|
|
31
27
|
? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white
|
|
@@ -37,7 +33,7 @@ function StepperListItem(_a) {
|
|
|
37
33
|
? (_g = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.white
|
|
38
34
|
: (_h = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _h === void 0 ? void 0 : _h.black, borderColor: designTokens.theme && (designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) && (isHover || active)
|
|
39
35
|
? (_j = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _j === void 0 ? void 0 : _j.brandBlue
|
|
40
|
-
: undefined }, complete ? (React__default["default"].createElement(icons.Icons.CheckMark, {
|
|
36
|
+
: undefined }, complete ? (React__default["default"].createElement(icons.Icons.CheckMark, { color: (_k = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _k === void 0 ? void 0 : _k.alertGreen, fillType: icons.FillType.STROKE, width: 18 })) : (Number(step) + 1)),
|
|
41
37
|
React__default["default"].createElement(typography.BodyText, null, children))));
|
|
42
38
|
}
|
|
43
39
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import { theme } from '@citygross/design-tokens';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
|
|
4
|
-
var
|
|
5
|
-
var _a, _b;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
var _a, _b, _c, _d;
|
|
6
|
+
var BaseStepperItem = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border: none;\n border-right: 1px solid ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: center;\n height: 100%;\n padding: 25.5px ", "px;\n position: relative;\n ", ";\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n /* hide tooltip */\n > {\n &:first-child {\n display: none;\n }\n }\n\n /* dispaly tooltip */\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n"], ["\n background: ", ";\n border: none;\n border-right: 1px solid ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-content: center;\n height: 100%;\n padding: 25.5px ", "px;\n position: relative;\n ", ";\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n /* hide tooltip */\n > {\n &:first-child {\n display: none;\n }\n }\n\n /* dispaly tooltip */\n &:hover {\n > {\n &:first-child {\n display: block;\n }\n }\n }\n"])), function (props) { var _a, _b; return (_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; }, (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.medium, function (_a) {
|
|
7
|
+
var disabled = _a.disabled;
|
|
8
|
+
return (disabled ? 'default' : 'pointer');
|
|
9
|
+
}, (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, (_c = theme === null || theme === void 0 ? void 0 : theme.spacings) === null || _c === void 0 ? void 0 : _c.md, function (_a) {
|
|
10
|
+
var _b;
|
|
11
|
+
var active = _a.active;
|
|
12
|
+
return active &&
|
|
13
|
+
"border-bottom: 3px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue, "\n ");
|
|
14
|
+
}, (_d = theme.breakpoints) === null || _d === void 0 ? void 0 : _d.lg, function (_a) {
|
|
15
|
+
var _b;
|
|
16
|
+
var firstChild = _a.firstChild;
|
|
17
|
+
return firstChild && "border-left: 1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.medium);
|
|
12
18
|
});
|
|
13
|
-
var BaseStepperList = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
14
|
-
var MaxWidthContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n max-width: ", "px;\n
|
|
15
|
-
var ButtonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n
|
|
19
|
+
var BaseStepperList = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n"], ["\n background: ", ";\n box-shadow: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
|
|
20
|
+
var MaxWidthContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"], ["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n\n @media (max-width: ", "px) {\n padding-right: ", "px;\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
21
|
+
var ButtonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n min-width: 155px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n min-width: 155px;\n"])));
|
|
16
22
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17
23
|
|
|
18
24
|
export { BaseStepperItem, BaseStepperList, ButtonContainer, MaxWidthContainer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stepper.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useState, Fragment } from 'react';
|
|
2
2
|
import { BaseStepperItem } from './Stepper.styles.js';
|
|
3
3
|
import { Badge } from '../Badge/Badge.js';
|
|
4
4
|
import { ToolTip } from '../ToolTip/ToolTip.js';
|
|
@@ -10,14 +10,10 @@ function StepperListItem(_a) {
|
|
|
10
10
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
11
11
|
var active = _a.active, firstChild = _a.firstChild, step = _a.step, onClick = _a.onClick, disabled = _a.disabled, complete = _a.complete, tooltip = _a.tooltip, children = _a.children;
|
|
12
12
|
var _l = useState(false), isHover = _l[0], setIsHover = _l[1];
|
|
13
|
-
return (React.createElement(
|
|
14
|
-
React.createElement(BaseStepperItem, { active: active,
|
|
15
|
-
if (event.key === 'Enter' && !disabled) {
|
|
16
|
-
onClick && onClick();
|
|
17
|
-
}
|
|
18
|
-
}, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
13
|
+
return (React.createElement(Fragment, null,
|
|
14
|
+
React.createElement(BaseStepperItem, { active: active, disabled: disabled, firstChild: firstChild, onClick: onClick, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
19
15
|
React.createElement(ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
|
|
20
|
-
React.createElement(Badge, { width:
|
|
16
|
+
React.createElement(Badge, { width: "30px", height: "30px", background: isHover
|
|
21
17
|
? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
22
18
|
: complete
|
|
23
19
|
? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.white
|
|
@@ -29,7 +25,7 @@ function StepperListItem(_a) {
|
|
|
29
25
|
? (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.white
|
|
30
26
|
: (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.black, borderColor: theme && (theme === null || theme === void 0 ? void 0 : theme.palette) && (isHover || active)
|
|
31
27
|
? (_j = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _j === void 0 ? void 0 : _j.brandBlue
|
|
32
|
-
: undefined }, complete ? (React.createElement(Icons.CheckMark, {
|
|
28
|
+
: undefined }, complete ? (React.createElement(Icons.CheckMark, { color: (_k = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _k === void 0 ? void 0 : _k.alertGreen, fillType: FillType.STROKE, width: 18 })) : (Number(step) + 1)),
|
|
33
29
|
React.createElement(BodyText, null, children))));
|
|
34
30
|
}
|
|
35
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StepperListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.103",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "d23555a5f0cf3650c8b89ea37c5f68b967edcacc"
|
|
80
80
|
}
|