@citygross/components 0.7.96 → 0.7.98
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/DeliverySelectionButton/DeliverySelectionButton.d.ts +11 -0
- package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.stories.d.ts +13 -0
- package/build/@types/components/DeliverySelectionButton/DeliverySelectionButton.styles.d.ts +2 -0
- package/build/@types/components/Menu/Menu.stories.d.ts +1 -0
- package/build/@types/components/Menu/Menu.styles.d.ts +4 -0
- package/build/@types/components/Menu/MenuItem.d.ts +5 -1
- package/build/@types/components/RadioBox/RadioBoxItem.d.ts +3 -1
- package/build/@types/components/RadioBox/RadioBoxItem.styles.d.ts +2 -0
- package/build/cjs/components/src/components/Menu/Menu.styles.js +13 -1
- package/build/cjs/components/src/components/Menu/Menu.styles.js.map +1 -1
- package/build/cjs/components/src/components/Menu/MenuItem.js +2 -2
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js +3 -3
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js +3 -1
- package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/build/es/components/src/components/Menu/Menu.styles.js +13 -1
- package/build/es/components/src/components/Menu/Menu.styles.js.map +1 -1
- package/build/es/components/src/components/Menu/MenuItem.js +2 -2
- package/build/es/components/src/components/RadioBox/RadioBoxItem.js +3 -3
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js +3 -1
- package/build/es/components/src/components/RadioBox/RadioBoxItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type TDeliverySelectionButton = {
|
|
3
|
+
icon: React.ReactElement;
|
|
4
|
+
label: string;
|
|
5
|
+
active: boolean;
|
|
6
|
+
onClick: () => number;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
name: string;
|
|
9
|
+
backgroundColor?: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const DeliverySelectionButton: React.FunctionComponent<TDeliverySelectionButton>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Story } from '@storybook/react';
|
|
3
|
+
import { TDeliverySelectionButton } from './DeliverySelectionButton';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: React.FunctionComponent<TDeliverySelectionButton>;
|
|
6
|
+
title: string;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const HomeDelivery: Story<TDeliverySelectionButton>;
|
|
10
|
+
export declare const PickupInStore: Story<TDeliverySelectionButton>;
|
|
11
|
+
export declare const Disabled: Story<TDeliverySelectionButton>;
|
|
12
|
+
export declare const differentBackgroundColor: Story<TDeliverySelectionButton>;
|
|
13
|
+
export declare const MultipleIcons: Story<TDeliverySelectionButton>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const DeliverySelectionButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const IconAndTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -3,6 +3,10 @@ export declare type TMenuItem = {
|
|
|
3
3
|
active?: boolean;
|
|
4
4
|
isFirstChild?: boolean;
|
|
5
5
|
isLastChild?: boolean;
|
|
6
|
+
borderColor?: string;
|
|
7
|
+
fontWeight?: string;
|
|
8
|
+
minWidth?: number;
|
|
9
|
+
textAlign?: string;
|
|
6
10
|
};
|
|
7
11
|
export declare type FadeProps = {
|
|
8
12
|
readonly isVisible?: boolean;
|
|
@@ -4,5 +4,9 @@ export declare type TMenuItem = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
4
4
|
active?: boolean;
|
|
5
5
|
isFirstChild?: boolean;
|
|
6
6
|
isLastChild?: boolean;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
fontWeight?: string;
|
|
9
|
+
minWidth?: number;
|
|
10
|
+
textAlign?: string;
|
|
7
11
|
};
|
|
8
|
-
export declare function MenuItem({ active, isFirstChild, isLastChild, children, ...props }: TMenuItem): JSX.Element;
|
|
12
|
+
export declare function MenuItem({ active, isFirstChild, isLastChild, borderColor, fontWeight, minWidth, textAlign, children, ...props }: TMenuItem): JSX.Element;
|
|
@@ -8,5 +8,7 @@ export declare type TRadioBox = styles.TBaseRadioBox & {
|
|
|
8
8
|
setActive?: () => void;
|
|
9
9
|
background?: string;
|
|
10
10
|
border?: string;
|
|
11
|
+
flexDirection?: string;
|
|
12
|
+
padding?: number;
|
|
11
13
|
};
|
|
12
|
-
export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children }: TRadioBox): JSX.Element;
|
|
14
|
+
export declare function RadioBoxItem({ radioColor, checked, isDisabled, name, align, setActive, background, border, boxShadow, children, flexDirection, padding }: TRadioBox): JSX.Element;
|
|
@@ -13,4 +13,6 @@ export declare type TBaseRadioBox = {
|
|
|
13
13
|
export declare const BaseRadioBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox & {
|
|
14
14
|
border?: string | undefined;
|
|
15
15
|
background?: string | undefined;
|
|
16
|
+
flexDirection?: string | undefined;
|
|
17
|
+
padding?: number | undefined;
|
|
16
18
|
}, never>;
|
|
@@ -10,7 +10,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var MenuContainer = styled__default["default"].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\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.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
13
|
-
var MenuItem = styled__default["default"].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) {
|
|
13
|
+
var MenuItem = styled__default["default"].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { return props.minWidth && props.minWidth; }, function (props) { return props.textAlign && props.textAlign; }, function (props) {
|
|
14
|
+
var _a;
|
|
15
|
+
return props.fontWeight
|
|
16
|
+
? props.fontWeight
|
|
17
|
+
: (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold;
|
|
18
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
19
|
+
var _a;
|
|
20
|
+
return props.active
|
|
21
|
+
? props.borderColor
|
|
22
|
+
? "".concat(props.borderColor)
|
|
23
|
+
: "".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary)
|
|
24
|
+
: 'transparent';
|
|
25
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.borderColor ? props.borderColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
14
26
|
var Fade = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
15
27
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
|
|
13
13
|
function MenuItem(_a) {
|
|
14
|
-
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, children = _a.children, props = _tslib.__rest(_a, ["active", "isFirstChild", "isLastChild", "children"]);
|
|
15
|
-
return (React__default["default"].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
|
|
14
|
+
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, borderColor = _a.borderColor, fontWeight = _a.fontWeight, minWidth = _a.minWidth, textAlign = _a.textAlign, children = _a.children, props = _tslib.__rest(_a, ["active", "isFirstChild", "isLastChild", "borderColor", "fontWeight", "minWidth", "textAlign", "children"]);
|
|
15
|
+
return (React__default["default"].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active, borderColor: borderColor, fontWeight: fontWeight, minWidth: minWidth, textAlign: textAlign }), children));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
exports.MenuItem = MenuItem;
|
|
@@ -12,9 +12,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
14
|
function RadioBoxItem(_a) {
|
|
15
|
-
var _b, _c;
|
|
16
|
-
var
|
|
17
|
-
return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
|
|
15
|
+
var _b, _c, _d;
|
|
16
|
+
var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
|
|
17
|
+
return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
|
|
18
18
|
React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
|
|
19
19
|
children));
|
|
20
20
|
}
|
|
@@ -14,7 +14,9 @@ exports.Alignment = void 0;
|
|
|
14
14
|
Alignment[Alignment["flex-start"] = 0] = "flex-start";
|
|
15
15
|
Alignment[Alignment["center"] = 1] = "center";
|
|
16
16
|
})(exports.Alignment || (exports.Alignment = {}));
|
|
17
|
-
var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
17
|
+
var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
18
|
+
return props.flexDirection ? props.flexDirection : 'row';
|
|
19
|
+
}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
|
|
18
20
|
return props.checked &&
|
|
19
21
|
props.border &&
|
|
20
22
|
"border: 1px solid ".concat(props.border && props.border);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,19 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\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.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
5
|
-
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) {
|
|
5
|
+
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { return props.minWidth && props.minWidth; }, function (props) { return props.textAlign && props.textAlign; }, function (props) {
|
|
6
|
+
var _a;
|
|
7
|
+
return props.fontWeight
|
|
8
|
+
? props.fontWeight
|
|
9
|
+
: (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold;
|
|
10
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
11
|
+
var _a;
|
|
12
|
+
return props.active
|
|
13
|
+
? props.borderColor
|
|
14
|
+
? "".concat(props.borderColor)
|
|
15
|
+
: "".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary)
|
|
16
|
+
: 'transparent';
|
|
17
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.borderColor ? props.borderColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
6
18
|
var Fade = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
7
19
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,8 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import { MenuItem as MenuItem$1 } from './Menu.styles.js';
|
|
4
4
|
|
|
5
5
|
function MenuItem(_a) {
|
|
6
|
-
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, children = _a.children, props = __rest(_a, ["active", "isFirstChild", "isLastChild", "children"]);
|
|
7
|
-
return (React.createElement(MenuItem$1, __assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
|
|
6
|
+
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, borderColor = _a.borderColor, fontWeight = _a.fontWeight, minWidth = _a.minWidth, textAlign = _a.textAlign, children = _a.children, props = __rest(_a, ["active", "isFirstChild", "isLastChild", "borderColor", "fontWeight", "minWidth", "textAlign", "children"]);
|
|
7
|
+
return (React.createElement(MenuItem$1, __assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active, borderColor: borderColor, fontWeight: fontWeight, minWidth: minWidth, textAlign: textAlign }), children));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export { MenuItem };
|
|
@@ -4,9 +4,9 @@ import { Radio } from '../FormElements/Radio/Radio.js';
|
|
|
4
4
|
import { BaseRadioBox } from './RadioBoxItem.styles.js';
|
|
5
5
|
|
|
6
6
|
function RadioBoxItem(_a) {
|
|
7
|
-
var _b, _c;
|
|
8
|
-
var
|
|
9
|
-
return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
|
|
7
|
+
var _b, _c, _d;
|
|
8
|
+
var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertGreen' : _e, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, _g = _a.background, background = _g === void 0 ? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white : _g, _h = _a.border, border = _h === void 0 ? (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.border : _h, _j = _a.boxShadow, boxShadow = _j === void 0 ? true : _j, children = _a.children, flexDirection = _a.flexDirection, _k = _a.padding, padding = _k === void 0 ? (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.md : _k;
|
|
9
|
+
return (React.createElement(BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow, flexDirection: flexDirection, padding: padding },
|
|
10
10
|
React.createElement(Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
|
|
11
11
|
children));
|
|
12
12
|
}
|
|
@@ -6,7 +6,9 @@ var Alignment;
|
|
|
6
6
|
Alignment[Alignment["flex-start"] = 0] = "flex-start";
|
|
7
7
|
Alignment[Alignment["center"] = 1] = "center";
|
|
8
8
|
})(Alignment || (Alignment = {}));
|
|
9
|
-
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-basis: 100%;\n padding: ", ";\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
9
|
+
var BaseRadioBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"], ["\n display: flex;\n flex-direction: ", ";\n flex-basis: 100%;\n padding: ", "px;\n align-items: ", ";\n gap: ", "px;\n cursor: ", ";\n ", ";\n\n background: ", ";\n border: solid 1px ", ";\n ", ";\n border-radius: 5px;\n ", ";\n -webkit-transition: background-color 400ms linear;\n -ms-transition: background-color 400ms linear;\n transition: background-color 400ms linear;\n"])), function (props) {
|
|
10
|
+
return props.flexDirection ? props.flexDirection : 'row';
|
|
11
|
+
}, function (props) { return props.padding; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
|
|
10
12
|
return props.checked &&
|
|
11
13
|
props.border &&
|
|
12
14
|
"border: 1px solid ".concat(props.border && props.border);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioBoxItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioBoxItem.styles.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.98",
|
|
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": "a2574bd403bc62e4ce2a87c6acf5bb623bb6ea8a"
|
|
75
75
|
}
|