@activecollab/components 1.0.407 → 1.0.408
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/dist/cjs/components/Badge/Badge.js +7 -8
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Badge/Styles.js +11 -6
- package/dist/cjs/components/Badge/Styles.js.map +1 -1
- package/dist/cjs/components/CounterButton/CounterButton.js +5 -3
- package/dist/cjs/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/cjs/components/CounterButton/Styles.js +10 -9
- package/dist/cjs/components/CounterButton/Styles.js.map +1 -1
- package/dist/cjs/components/Filter/StartMenu.js +7 -1
- package/dist/cjs/components/Filter/StartMenu.js.map +1 -1
- package/dist/esm/components/Badge/Badge.d.ts +2 -3
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +7 -8
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Badge/Styles.d.ts.map +1 -1
- package/dist/esm/components/Badge/Styles.js +11 -6
- package/dist/esm/components/Badge/Styles.js.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.js +6 -4
- package/dist/esm/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/esm/components/CounterButton/Styles.d.ts +1 -3
- package/dist/esm/components/CounterButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/Styles.js +8 -7
- package/dist/esm/components/CounterButton/Styles.js.map +1 -1
- package/dist/esm/components/Filter/StartMenu.js +8 -2
- package/dist/esm/components/Filter/StartMenu.js.map +1 -1
- package/dist/index.js +88 -77
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,7 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
17
17
|
* @prop {position} - dictates the position of a badge.
|
|
18
18
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
19
19
|
* @prop {backgroundColor} - background-color of a badge.
|
|
20
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* <IconButton variant="text gray" size="big">
|
|
@@ -34,19 +33,19 @@ var Badge = function Badge(_ref) {
|
|
|
34
33
|
className = _ref.className,
|
|
35
34
|
_ref$position = _ref.position,
|
|
36
35
|
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
_ref$
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return isVisible ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
36
|
+
backgroundColor = _ref.backgroundColor,
|
|
37
|
+
value = _ref.value,
|
|
38
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
39
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
43
41
|
className: (0, _classnames.default)("c-badge", className),
|
|
44
42
|
dimension: dimension,
|
|
45
43
|
position: position,
|
|
44
|
+
isStandalone: isStandalone,
|
|
46
45
|
backgroundColor: backgroundColor,
|
|
47
46
|
role: "status",
|
|
48
47
|
value: value
|
|
49
|
-
}, value && value > 100 ? 99 + "+" : value)
|
|
48
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
50
49
|
};
|
|
51
50
|
exports.Badge = Badge;
|
|
52
51
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","value","isStandalone","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n value?: number;\n isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor,\n\n value,\n isStandalone = false,\n}: BadgeProps) => {\n return (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n isStandalone={isStandalone}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n );\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAavC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAQA;EAAA,0BAPhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IACxBC,eAAe,QAAfA,eAAe;IAEfC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;EAEpB,oBACE,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAC,mBAAU,EAAC,SAAS,EAAEL,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,YAAY,EAAEG,YAAa;IAC3B,eAAe,EAAEF,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEC;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B;AAElB,CAAC;AAAC"}
|
|
@@ -12,8 +12,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
12
12
|
var StyledBadge = _styledComponents.default.div.withConfig({
|
|
13
13
|
displayName: "Styles__StyledBadge",
|
|
14
14
|
componentId: "sc-6o8do5-0"
|
|
15
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;
|
|
16
|
-
return props.backgroundColor;
|
|
15
|
+
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
|
|
16
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
17
|
+
}, function (props) {
|
|
18
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
17
19
|
}, function (props) {
|
|
18
20
|
return props.dimension + "px";
|
|
19
21
|
}, function (props) {
|
|
@@ -21,16 +23,19 @@ var StyledBadge = _styledComponents.default.div.withConfig({
|
|
|
21
23
|
}, function (props) {
|
|
22
24
|
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
23
25
|
}, function (_ref) {
|
|
24
|
-
var
|
|
25
|
-
return
|
|
26
|
+
var isStandalone = _ref.isStandalone;
|
|
27
|
+
return isStandalone && (0, _styledComponents.css)(["position:static;z-index:0;"]);
|
|
26
28
|
}, function (_ref2) {
|
|
27
29
|
var position = _ref2.position;
|
|
28
|
-
return position === "top-
|
|
30
|
+
return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
|
|
29
31
|
}, function (_ref3) {
|
|
30
32
|
var position = _ref3.position;
|
|
31
|
-
return position === "
|
|
33
|
+
return position === "top-right" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-end:0;"]);
|
|
32
34
|
}, function (_ref4) {
|
|
33
35
|
var position = _ref4.position;
|
|
36
|
+
return position === "bottom-right" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-end:0;"]);
|
|
37
|
+
}, function (_ref5) {
|
|
38
|
+
var position = _ref5.position;
|
|
34
39
|
return position === "bottom-left" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-start:0;"]);
|
|
35
40
|
});
|
|
36
41
|
exports.StyledBadge = StyledBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","dimension","value","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","isStandalone","dimension","value","css","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) =>\n !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n border: ${(props) =>\n props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n color: var(--color-theme-100);\n display: flex;\n font-size: 10px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ isStandalone }) =>\n isStandalone &&\n css`\n position: static;\n z-index: 0;\n `}\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAAyC;AAAA;AAGlC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4SACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe;AAAA,GAC/D,UAACD,KAAK;EAAA,OACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC;AAAA,GACpD,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAMhC,UAACH,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAErC,UAACH,KAAK;EAAA,OACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGF,YAAY,QAAZA,YAAY;EAAA,OACfA,YAAY,QACZG,qBAAG,iCAGF;AAAA,GAED;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBD,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBD,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BD,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BD,qBAAG,8CAGF;AAAA,EACJ;AAAC"}
|
|
@@ -49,9 +49,11 @@ var CounterButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
49
49
|
weight: "medium",
|
|
50
50
|
className: "c-counter-button__label",
|
|
51
51
|
$active: counter > 0 || active
|
|
52
|
-
}, label), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
}, label), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
53
|
+
isStandalone: true,
|
|
54
|
+
dimension: 16,
|
|
55
|
+
value: counter
|
|
56
|
+
}) : null), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
55
57
|
title: "".concat(tooltipText),
|
|
56
58
|
popperTooltipClassName: "z-index-1300"
|
|
57
59
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButtonReset, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.js","names":["CounterButton","forwardRef","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","classNames","React","cloneElement","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"CounterButton.js","names":["CounterButton","forwardRef","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","classNames","React","cloneElement","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n StyledBadge,\n StyledCounterButton,\n StyledCounterButtonLabel,\n StyledCounterButtonReset,\n StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface ICounterButtonProps {\n /** Set active state */\n active?: boolean;\n /** Label for value */\n label?: string;\n /** Icon */\n icon?: ReactElement;\n /** Number of applied filters */\n counter?: number;\n /** OnClearAll callback */\n onClearAll: (event?) => void;\n /** Tooltip content */\n tooltipText?: string;\n /** Applies passed classes */\n className?: string;\n /** Disabled state of a button */\n disabled?: boolean;\n}\n\nexport const CounterButton = forwardRef<HTMLDivElement, ICounterButtonProps>(\n (\n {\n label,\n icon,\n active,\n counter = 0,\n tooltipText,\n onClearAll,\n className,\n disabled = false,\n ...args\n },\n ref\n ) => {\n return (\n <StyledCounterButtonWrapper ref={ref} className={className}>\n <StyledCounterButton\n disabled={disabled}\n aria-disabled={disabled}\n className={classNames(\"c-counter-button\", {\n \"c-counter-button__selected\": counter,\n })}\n {...args}\n variant=\"text gray\"\n $active={counter > 0 || active}\n $selected={counter > 0}\n >\n {icon &&\n React.cloneElement(icon, {\n className: classNames(\"c-counter-button__icon\"),\n })}\n {label && (\n <StyledCounterButtonLabel\n color=\"secondary\"\n weight=\"medium\"\n className=\"c-counter-button__label\"\n $active={counter > 0 || active}\n >\n {label}\n </StyledCounterButtonLabel>\n )}\n {counter > 0 ? (\n <StyledBadge isStandalone={true} dimension={16} value={counter} />\n ) : null}\n </StyledCounterButton>\n {counter > 0 ? (\n <Tooltip\n title={`${tooltipText}`}\n popperTooltipClassName=\"z-index-1300\"\n >\n <StyledCounterButtonReset\n variant=\"text colored\"\n className=\"c-counter-button__reset\"\n onClick={onClearAll}\n >\n <CloseSmallIcon />\n </StyledCounterButtonReset>\n </Tooltip>\n ) : null}\n </StyledCounterButtonWrapper>\n );\n }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAMkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBX,IAAMA,aAAa,gBAAG,IAAAC,iBAAU,EACrC,gBAYEC,GAAG,EACA;EAAA,IAXDC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,oBACNC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,IAAI;EAIT,oBACE,6BAAC,kCAA0B;IAAC,GAAG,EAAET,GAAI;IAAC,SAAS,EAAEO;EAAU,gBACzD,6BAAC,2BAAmB;IAClB,QAAQ,EAAEC,QAAS;IACnB,iBAAeA,QAAS;IACxB,SAAS,EAAE,IAAAE,mBAAU,EAAC,kBAAkB,EAAE;MACxC,4BAA4B,EAAEN;IAChC,CAAC;EAAE,GACCK,IAAI;IACR,OAAO,EAAC,WAAW;IACnB,OAAO,EAAEL,OAAO,GAAG,CAAC,IAAID,MAAO;IAC/B,SAAS,EAAEC,OAAO,GAAG;EAAE,IAEtBF,IAAI,iBACHS,cAAK,CAACC,YAAY,CAACV,IAAI,EAAE;IACvBK,SAAS,EAAE,IAAAG,mBAAU,EAAC,wBAAwB;EAChD,CAAC,CAAC,EACHT,KAAK,iBACJ,6BAAC,gCAAwB;IACvB,KAAK,EAAC,WAAW;IACjB,MAAM,EAAC,QAAQ;IACf,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEG,OAAO,GAAG,CAAC,IAAID;EAAO,GAE9BF,KAAK,CAET,EACAG,OAAO,GAAG,CAAC,gBACV,6BAAC,mBAAW;IAAC,YAAY,EAAE,IAAK;IAAC,SAAS,EAAE,EAAG;IAAC,KAAK,EAAEA;EAAQ,EAAG,GAChE,IAAI,CACY,EACrBA,OAAO,GAAG,CAAC,gBACV,6BAAC,gBAAO;IACN,KAAK,YAAKC,WAAW,CAAG;IACxB,sBAAsB,EAAC;EAAc,gBAErC,6BAAC,gCAAwB;IACvB,OAAO,EAAC,cAAc;IACtB,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEC;EAAW,gBAEpB,6BAAC,mBAAc,OAAG,CACO,CACnB,GACR,IAAI,CACmB;AAEjC,CAAC,CACF;AAAC;AAEFR,aAAa,CAACe,WAAW,GAAG,eAAe"}
|
|
@@ -4,12 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.
|
|
7
|
+
exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButton = exports.StyledBadge = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _Body = require("../Typography/Variants/Body2");
|
|
10
10
|
var _Button = require("../Button/Button");
|
|
11
11
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
12
12
|
var _FontStyle = require("../FontStyle");
|
|
13
|
+
var _Badge = require("../Badge");
|
|
13
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
16
|
var StyledCounterButtonWrapper = _styledComponents.default.div.withConfig({
|
|
@@ -32,21 +33,15 @@ var StyledCounterButton = (0, _styledComponents.default)(_Button.Button).withCon
|
|
|
32
33
|
});
|
|
33
34
|
exports.StyledCounterButton = StyledCounterButton;
|
|
34
35
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
35
|
-
var StyledCounterButtonCounter = _styledComponents.default.div.withConfig({
|
|
36
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
37
|
-
componentId: "sc-1ecrcba-2"
|
|
38
|
-
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
|
|
39
|
-
exports.StyledCounterButtonCounter = StyledCounterButtonCounter;
|
|
40
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
41
36
|
var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
|
|
42
37
|
displayName: "Styles__StyledCounterButtonReset",
|
|
43
|
-
componentId: "sc-1ecrcba-
|
|
38
|
+
componentId: "sc-1ecrcba-2"
|
|
44
39
|
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
45
40
|
exports.StyledCounterButtonReset = StyledCounterButtonReset;
|
|
46
41
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
47
42
|
var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
|
|
48
43
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
49
|
-
componentId: "sc-1ecrcba-
|
|
44
|
+
componentId: "sc-1ecrcba-3"
|
|
50
45
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
51
46
|
"pointerEvents": "none"
|
|
52
47
|
}, StyledCounterButton, function (props) {
|
|
@@ -56,4 +51,10 @@ var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withC
|
|
|
56
51
|
});
|
|
57
52
|
exports.StyledCounterButtonLabel = StyledCounterButtonLabel;
|
|
58
53
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
54
|
+
var StyledBadge = (0, _styledComponents.default)(_Badge.Badge).withConfig({
|
|
55
|
+
displayName: "Styles__StyledBadge",
|
|
56
|
+
componentId: "sc-1ecrcba-4"
|
|
57
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
58
|
+
exports.StyledBadge = StyledBadge;
|
|
59
|
+
StyledBadge.displayName = "StyledBadge";
|
|
59
60
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","disabled","css","$selected","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","disabled","css","$selected","StyledCounterButtonReset","StyledCounterButtonLabel","Body2","StyledBadge","Badge"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Badge } from \"../Badge\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n !props.disabled &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n\nexport const StyledBadge = styled(Badge)`\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledBadge.displayName = \"StyledBadge\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAO1B,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,uBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACb,CAACD,KAAK,CAACE,QAAQ,QACfC,qBAAG,iGAUF;AAAA,GAED,UAACH,KAAK;EAAA,OACNA,KAAK,CAACI,SAAS,QACfD,qBAAG,wGAIF;AAAA,GAEC,UAACH,KAAK;EAAA,OACRA,KAAK,CAACE,QAAQ,QACdC,qBAAG,uCAGF;AAAA,EACJ;AAAC;AAEFL,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAAC;AAEFM,wBAAwB,CAACR,WAAW,GAAG,0BAA0B;AAE1D,IAAMS,wBAAwB,GAAG,IAAAb,yBAAM,EAACc,WAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BT,mBAAmB,EACjB,UAACE,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,QACdE,qBAAG,oCAEF;AAAA,GAGH,UAACH,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbE,qBAAG,kCAEF;AAAA,EACJ;AAAC;AAEFG,wBAAwB,CAACT,WAAW,GAAG,0BAA0B;AAE1D,IAAMW,WAAW,GAAG,IAAAf,yBAAM,EAACgB,YAAK,CAAC;EAAA;EAAA;AAAA,0CAGvC;AAAC;AAEFD,WAAW,CAACX,WAAW,GAAG,aAAa"}
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _Icons = require("../Icons");
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
11
|
var _utils = require("../../utils");
|
|
12
|
+
var _Badge = require("../Badge");
|
|
12
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
15
|
var StartMenu = function StartMenu(_ref) {
|
|
@@ -36,6 +37,7 @@ var StartMenu = function StartMenu(_ref) {
|
|
|
36
37
|
title = _ref2.title,
|
|
37
38
|
submenu = _ref2.submenu;
|
|
38
39
|
var count = 0;
|
|
40
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
39
41
|
if (typeof selected[id] === "string") {
|
|
40
42
|
count += 1;
|
|
41
43
|
} else {
|
|
@@ -48,7 +50,11 @@ var StartMenu = function StartMenu(_ref) {
|
|
|
48
50
|
onClick: function onClick() {
|
|
49
51
|
return onItemClick(id);
|
|
50
52
|
}
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/_react.default.createElement(
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
|
|
54
|
+
dimension: 16,
|
|
55
|
+
value: count,
|
|
56
|
+
isStandalone: true
|
|
57
|
+
}) : null, /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
|
|
52
58
|
}
|
|
53
59
|
}) : emptyFilterText ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
54
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { Badge } from \"../Badge\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n let count = 0;\n // Popricati o ovome kada je selected[id] vrednost 0.\n if (typeof selected[id] === \"string\") {\n count += 1;\n } else {\n count = selected[id]?.length;\n }\n\n if (submenu?.length > 1) {\n return (\n <StyledStartMenuListItem\n key={`filter-list-item-${index}`}\n onClick={() => onItemClick(id)}\n >\n <StyledStartMenuTitle>{title}</StyledStartMenuTitle>\n {count > 0 ? (\n <Badge dimension={16} value={count} isStandalone={true} />\n ) : null}\n <ArrowRightIcon />\n </StyledStartMenuListItem>\n );\n }\n })\n ) : emptyFilterText ? (\n <StyledStartMenuNoResults>{emptyFilterText}</StyledStartMenuNoResults>\n ) : null}\n {children}\n </StyledStartMenuList>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAMA;AACA;AAAiC;AAAA;AAW1B,IAAMA,SAA8D,GAAG,SAAjEA,SAA8D,OASrE;EAAA,IARJC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,eAAe,QAAfA,eAAe;IACfC,QAAQ,QAARA,QAAQ;EAER,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB,IAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAACH,GAAG,CAAC;EACzC,IAAMI,MAAM,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,MAAM;EAEjC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAID,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBR,cAAc,CAACQ,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAER,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,6BAAC,2BAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACc,GAAG,CAAC,iBAAyBC,KAAa,EAAK;IAAA,IAAxCC,EAAE,SAAFA,EAAE;MAAEC,KAAK,SAALA,KAAK;MAAEC,OAAO,SAAPA,OAAO;IAC5B,IAAIC,KAAK,GAAG,CAAC;IACb;IACA,IAAI,OAAOlB,QAAQ,CAACe,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGlB,QAAQ,CAACe,EAAE,CAAC,iDAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,6BAAC,+BAAuB;QACtB,GAAG,6BAAsBL,KAAK,CAAG;QACjC,OAAO,EAAE;UAAA,OAAMb,WAAW,CAACc,EAAE,CAAC;QAAA;MAAC,gBAE/B,6BAAC,4BAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,6BAAC,YAAK;QAAC,SAAS,EAAE,EAAG;QAAC,KAAK,EAAEA,KAAM;QAAC,YAAY,EAAE;MAAK,EAAG,GACxD,IAAI,eACR,6BAAC,qBAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAb,eAAe,gBACjB,6BAAC,gCAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC;AAAC"}
|
|
@@ -5,8 +5,8 @@ export interface BadgeProps {
|
|
|
5
5
|
dimension?: number;
|
|
6
6
|
className?: string;
|
|
7
7
|
backgroundColor?: string;
|
|
8
|
-
isVisible?: boolean;
|
|
9
8
|
value?: number;
|
|
9
|
+
isStandalone?: boolean;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* @component Badge
|
|
@@ -17,7 +17,6 @@ export interface BadgeProps {
|
|
|
17
17
|
* @prop {position} - dictates the position of a badge.
|
|
18
18
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
19
19
|
* @prop {backgroundColor} - background-color of a badge.
|
|
20
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* <IconButton variant="text gray" size="big">
|
|
@@ -28,6 +27,6 @@ export interface BadgeProps {
|
|
|
28
27
|
* @see
|
|
29
28
|
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
30
29
|
*/
|
|
31
|
-
export declare const Badge: ({ dimension, className, position, backgroundColor,
|
|
30
|
+
export declare const Badge: ({ dimension, className, position, backgroundColor, value, isStandalone, }: BadgeProps) => JSX.Element;
|
|
32
31
|
export {};
|
|
33
32
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,8EAQf,UAAU,gBAcZ,CAAC"}
|
|
@@ -10,7 +10,6 @@ import { StyledBadge } from "./Styles";
|
|
|
10
10
|
* @prop {position} - dictates the position of a badge.
|
|
11
11
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
12
12
|
* @prop {backgroundColor} - background-color of a badge.
|
|
13
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
14
13
|
*
|
|
15
14
|
* @example
|
|
16
15
|
* <IconButton variant="text gray" size="big">
|
|
@@ -27,18 +26,18 @@ export var Badge = function Badge(_ref) {
|
|
|
27
26
|
className = _ref.className,
|
|
28
27
|
_ref$position = _ref.position,
|
|
29
28
|
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
_ref$
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return isVisible ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
29
|
+
backgroundColor = _ref.backgroundColor,
|
|
30
|
+
value = _ref.value,
|
|
31
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
32
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
33
|
+
return /*#__PURE__*/React.createElement(StyledBadge, {
|
|
36
34
|
className: classNames("c-badge", className),
|
|
37
35
|
dimension: dimension,
|
|
38
36
|
position: position,
|
|
37
|
+
isStandalone: isStandalone,
|
|
39
38
|
backgroundColor: backgroundColor,
|
|
40
39
|
role: "status",
|
|
41
40
|
value: value
|
|
42
|
-
}, value && value > 100 ? 99 + "+" : value)
|
|
41
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
43
42
|
};
|
|
44
43
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","value","isStandalone"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n value?: number;\n isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor,\n\n value,\n isStandalone = false,\n}: BadgeProps) => {\n return (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n isStandalone={isStandalone}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n );\n};\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,UAAU;AAatC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAQA;EAAA,0BAPhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IACxBC,eAAe,QAAfA,eAAe;IAEfC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;EAEpB,oBACE,oBAAC,WAAW;IACV,SAAS,EAAET,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,YAAY,EAAEG,YAAa;IAC3B,eAAe,EAAEF,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEC;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B;AAElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,qFAuDvB,CAAC"}
|
|
@@ -3,8 +3,10 @@ import { FontStyle } from "../FontStyle";
|
|
|
3
3
|
export var StyledBadge = styled.div.withConfig({
|
|
4
4
|
displayName: "Styles__StyledBadge",
|
|
5
5
|
componentId: "sc-6o8do5-0"
|
|
6
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;
|
|
7
|
-
return props.backgroundColor;
|
|
6
|
+
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, function (props) {
|
|
7
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
8
|
+
}, function (props) {
|
|
9
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
8
10
|
}, function (props) {
|
|
9
11
|
return props.dimension + "px";
|
|
10
12
|
}, function (props) {
|
|
@@ -12,16 +14,19 @@ export var StyledBadge = styled.div.withConfig({
|
|
|
12
14
|
}, function (props) {
|
|
13
15
|
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
14
16
|
}, function (_ref) {
|
|
15
|
-
var
|
|
16
|
-
return
|
|
17
|
+
var isStandalone = _ref.isStandalone;
|
|
18
|
+
return isStandalone && css(["position:static;z-index:0;"]);
|
|
17
19
|
}, function (_ref2) {
|
|
18
20
|
var position = _ref2.position;
|
|
19
|
-
return position === "top-
|
|
21
|
+
return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
20
22
|
}, function (_ref3) {
|
|
21
23
|
var position = _ref3.position;
|
|
22
|
-
return position === "
|
|
24
|
+
return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
23
25
|
}, function (_ref4) {
|
|
24
26
|
var position = _ref4.position;
|
|
27
|
+
return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
28
|
+
}, function (_ref5) {
|
|
29
|
+
var position = _ref5.position;
|
|
25
30
|
return position === "bottom-left" && css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
26
31
|
});
|
|
27
32
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props)
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","isStandalone","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) =>\n !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n border: ${(props) =>\n props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n color: var(--color-theme-100);\n display: flex;\n font-size: 10px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ isStandalone }) =>\n isStandalone &&\n css`\n position: static;\n z-index: 0;\n `}\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,cAAc;AAGxC,OAAO,IAAMC,WAAW,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,4SACjCF,SAAS,EAES,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe;AAAA,GAC/D,UAACD,KAAK;EAAA,OACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC;AAAA,GACpD,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAMhC,UAACH,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAErC,UAACH,KAAK;EAAA,OACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGF,YAAY,QAAZA,YAAY;EAAA,OACfA,YAAY,IACZN,GAAG,gCAGF;AAAA,GAED;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBT,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBT,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BT,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BT,GAAG,6CAGF;AAAA,EACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,UAAU,EAAE,CAAC,KAAK,CAAC,KAAA,KAAK,IAAI,CAAC;IAC7B,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,UAAU,EAAE,CAAC,KAAK,CAAC,KAAA,KAAK,IAAI,CAAC;IAC7B,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4FA+DzB,CAAC"}
|
|
@@ -5,7 +5,7 @@ import React, { forwardRef } from "react";
|
|
|
5
5
|
import classNames from "classnames";
|
|
6
6
|
import { Tooltip } from "../Tooltip/Tooltip";
|
|
7
7
|
import CloseSmallIcon from "../Icons/collection/CloseSmall";
|
|
8
|
-
import {
|
|
8
|
+
import { StyledBadge, StyledCounterButton, StyledCounterButtonLabel, StyledCounterButtonReset, StyledCounterButtonWrapper } from "./Styles";
|
|
9
9
|
export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
10
10
|
var label = _ref.label,
|
|
11
11
|
icon = _ref.icon,
|
|
@@ -38,9 +38,11 @@ export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
38
38
|
weight: "medium",
|
|
39
39
|
className: "c-counter-button__label",
|
|
40
40
|
$active: counter > 0 || active
|
|
41
|
-
}, label), counter > 0 ? /*#__PURE__*/React.createElement(
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
}, label), counter > 0 ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
42
|
+
isStandalone: true,
|
|
43
|
+
dimension: 16,
|
|
44
|
+
value: counter
|
|
45
|
+
}) : null), counter > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
44
46
|
title: "" + tooltipText,
|
|
45
47
|
popperTooltipClassName: "z-index-1300"
|
|
46
48
|
}, /*#__PURE__*/React.createElement(StyledCounterButtonReset, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.js","names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","
|
|
1
|
+
{"version":3,"file":"CounterButton.js","names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledBadge","StyledCounterButton","StyledCounterButtonLabel","StyledCounterButtonReset","StyledCounterButtonWrapper","CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","cloneElement","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n StyledBadge,\n StyledCounterButton,\n StyledCounterButtonLabel,\n StyledCounterButtonReset,\n StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface ICounterButtonProps {\n /** Set active state */\n active?: boolean;\n /** Label for value */\n label?: string;\n /** Icon */\n icon?: ReactElement;\n /** Number of applied filters */\n counter?: number;\n /** OnClearAll callback */\n onClearAll: (event?) => void;\n /** Tooltip content */\n tooltipText?: string;\n /** Applies passed classes */\n className?: string;\n /** Disabled state of a button */\n disabled?: boolean;\n}\n\nexport const CounterButton = forwardRef<HTMLDivElement, ICounterButtonProps>(\n (\n {\n label,\n icon,\n active,\n counter = 0,\n tooltipText,\n onClearAll,\n className,\n disabled = false,\n ...args\n },\n ref\n ) => {\n return (\n <StyledCounterButtonWrapper ref={ref} className={className}>\n <StyledCounterButton\n disabled={disabled}\n aria-disabled={disabled}\n className={classNames(\"c-counter-button\", {\n \"c-counter-button__selected\": counter,\n })}\n {...args}\n variant=\"text gray\"\n $active={counter > 0 || active}\n $selected={counter > 0}\n >\n {icon &&\n React.cloneElement(icon, {\n className: classNames(\"c-counter-button__icon\"),\n })}\n {label && (\n <StyledCounterButtonLabel\n color=\"secondary\"\n weight=\"medium\"\n className=\"c-counter-button__label\"\n $active={counter > 0 || active}\n >\n {label}\n </StyledCounterButtonLabel>\n )}\n {counter > 0 ? (\n <StyledBadge isStandalone={true} dimension={16} value={counter} />\n ) : null}\n </StyledCounterButton>\n {counter > 0 ? (\n <Tooltip\n title={`${tooltipText}`}\n popperTooltipClassName=\"z-index-1300\"\n >\n <StyledCounterButtonReset\n variant=\"text colored\"\n className=\"c-counter-button__reset\"\n onClick={onClearAll}\n >\n <CloseSmallIcon />\n </StyledCounterButtonReset>\n </Tooltip>\n ) : null}\n </StyledCounterButtonWrapper>\n );\n }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAsB,OAAO;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,OAAOC,cAAc,MAAM,gCAAgC;AAC3D,SACEC,WAAW,EACXC,mBAAmB,EACnBC,wBAAwB,EACxBC,wBAAwB,EACxBC,0BAA0B,QACrB,UAAU;AAqBjB,OAAO,IAAMC,aAAa,gBAAGT,UAAU,CACrC,gBAYEU,GAAG,EACA;EAAA,IAXDC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,oBACNC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,IAAI;EAIT,oBACE,oBAAC,0BAA0B;IAAC,GAAG,EAAET,GAAI;IAAC,SAAS,EAAEO;EAAU,gBACzD,oBAAC,mBAAmB;IAClB,QAAQ,EAAEC,QAAS;IACnB,iBAAeA,QAAS;IACxB,SAAS,EAAEjB,UAAU,CAAC,kBAAkB,EAAE;MACxC,4BAA4B,EAAEa;IAChC,CAAC;EAAE,GACCK,IAAI;IACR,OAAO,EAAC,WAAW;IACnB,OAAO,EAAEL,OAAO,GAAG,CAAC,IAAID,MAAO;IAC/B,SAAS,EAAEC,OAAO,GAAG;EAAE,IAEtBF,IAAI,iBACHb,KAAK,CAACqB,YAAY,CAACR,IAAI,EAAE;IACvBK,SAAS,EAAEhB,UAAU,CAAC,wBAAwB;EAChD,CAAC,CAAC,EACHU,KAAK,iBACJ,oBAAC,wBAAwB;IACvB,KAAK,EAAC,WAAW;IACjB,MAAM,EAAC,QAAQ;IACf,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEG,OAAO,GAAG,CAAC,IAAID;EAAO,GAE9BF,KAAK,CAET,EACAG,OAAO,GAAG,CAAC,gBACV,oBAAC,WAAW;IAAC,YAAY,EAAE,IAAK;IAAC,SAAS,EAAE,EAAG;IAAC,KAAK,EAAEA;EAAQ,EAAG,GAChE,IAAI,CACY,EACrBA,OAAO,GAAG,CAAC,gBACV,oBAAC,OAAO;IACN,KAAK,OAAKC,WAAc;IACxB,sBAAsB,EAAC;EAAc,gBAErC,oBAAC,wBAAwB;IACvB,OAAO,EAAC,cAAc;IACtB,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEC;EAAW,gBAEpB,oBAAC,cAAc,OAAG,CACO,CACnB,GACR,IAAI,CACmB;AAEjC,CAAC,CACF;AAEDP,aAAa,CAACY,WAAW,GAAG,eAAe"}
|
|
@@ -7,14 +7,12 @@ export declare const StyledCounterButtonWrapper: import("styled-components").Sty
|
|
|
7
7
|
export declare const StyledCounterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/Button").ButtonProps & {
|
|
8
8
|
children?: import("react").ReactNode;
|
|
9
9
|
} & import("react").RefAttributes<HTMLButtonElement>>, any, StyledCounterButtonProps, never>;
|
|
10
|
-
export declare const StyledCounterButtonCounter: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
-
$selected?: boolean | undefined;
|
|
12
|
-
}, never>;
|
|
13
10
|
export declare const StyledCounterButtonReset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/Button").ButtonProps & {
|
|
14
11
|
children?: import("react").ReactNode;
|
|
15
12
|
} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
|
|
16
13
|
export declare const StyledCounterButtonLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Variants/Body2").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
17
14
|
$active?: boolean | undefined;
|
|
18
15
|
}, never>;
|
|
16
|
+
export declare const StyledBadge: import("styled-components").StyledComponent<({ dimension, className, position, backgroundColor, value, isStandalone, }: import("../Badge").BadgeProps) => JSX.Element, any, {}, never>;
|
|
19
17
|
export {};
|
|
20
18
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAQA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;4FA8B/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;;sEAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC;AAIF,eAAO,MAAM,WAAW,wLAGvB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Body2 } from "../Typography/Variants/Body2";
|
|
|
3
3
|
import { Button } from "../Button/Button";
|
|
4
4
|
import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
5
5
|
import { FontStyle } from "../FontStyle";
|
|
6
|
+
import { Badge } from "../Badge";
|
|
6
7
|
export var StyledCounterButtonWrapper = styled.div.withConfig({
|
|
7
8
|
displayName: "Styles__StyledCounterButtonWrapper",
|
|
8
9
|
componentId: "sc-1ecrcba-0"
|
|
@@ -21,19 +22,14 @@ export var StyledCounterButton = styled(Button).withConfig({
|
|
|
21
22
|
return props.disabled && css(["pointer-events:none;opacity:0.5;"]);
|
|
22
23
|
});
|
|
23
24
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
24
|
-
export var StyledCounterButtonCounter = styled.div.withConfig({
|
|
25
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
26
|
-
componentId: "sc-1ecrcba-2"
|
|
27
|
-
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
|
|
28
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
29
25
|
export var StyledCounterButtonReset = styled(Button).withConfig({
|
|
30
26
|
displayName: "Styles__StyledCounterButtonReset",
|
|
31
|
-
componentId: "sc-1ecrcba-
|
|
27
|
+
componentId: "sc-1ecrcba-2"
|
|
32
28
|
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
33
29
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
34
30
|
export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
35
31
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
36
|
-
componentId: "sc-1ecrcba-
|
|
32
|
+
componentId: "sc-1ecrcba-3"
|
|
37
33
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
38
34
|
"pointerEvents": "none"
|
|
39
35
|
}, StyledCounterButton, function (props) {
|
|
@@ -42,4 +38,9 @@ export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
|
42
38
|
return props.$active && css(["color:var(--color-primary);"]);
|
|
43
39
|
});
|
|
44
40
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
41
|
+
export var StyledBadge = styled(Badge).withConfig({
|
|
42
|
+
displayName: "Styles__StyledBadge",
|
|
43
|
+
componentId: "sc-1ecrcba-4"
|
|
44
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
45
|
+
StyledBadge.displayName = "StyledBadge";
|
|
45
46
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","Badge","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","StyledCounterButtonReset","StyledCounterButtonLabel","StyledBadge"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Badge } from \"../Badge\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n !props.disabled &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n\nexport const StyledBadge = styled(Badge)`\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledBadge.displayName = \"StyledBadge\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,KAAK,QAAQ,UAAU;AAOhC,OAAO,IAAMC,0BAA0B,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXH,SAAS,EACTD,cAAc,CAEjB;AAEDG,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,uBAC7C,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACb,CAACD,KAAK,CAACE,QAAQ,IACfZ,GAAG,gGAUF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,IACfb,GAAG,uGAIF;AAAA,GAEC,UAACU,KAAK;EAAA,OACRA,KAAK,CAACE,QAAQ,IACdZ,GAAG,sCAGF;AAAA,EACJ;AAEDS,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMM,wBAAwB,GAAGf,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAEDY,wBAAwB,CAACN,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMO,wBAAwB,GAAGhB,MAAM,CAACE,KAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BQ,mBAAmB,EACjB,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,IACdX,GAAG,mCAEF;AAAA,GAGH,UAACU,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbX,GAAG,iCAEF;AAAA,EACJ;AAEDe,wBAAwB,CAACP,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMQ,WAAW,GAAGjB,MAAM,CAACM,KAAK,CAAC;EAAA;EAAA;AAAA,0CAGvC;AAEDW,WAAW,CAACR,WAAW,GAAG,aAAa"}
|