@activecollab/components 1.0.267 → 1.0.269
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 +5 -3
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Badge/Styles.js +4 -1
- package/dist/cjs/components/Badge/Styles.js.map +1 -1
- package/dist/cjs/components/Links/Link.js +1 -3
- package/dist/cjs/components/Links/Link.js.map +1 -1
- package/dist/esm/components/Badge/Badge.d.ts +2 -1
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +5 -3
- 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 +4 -1
- package/dist/esm/components/Badge/Styles.js.map +1 -1
- package/dist/esm/components/Links/Link.d.ts.map +1 -1
- package/dist/esm/components/Links/Link.js +1 -3
- package/dist/esm/components/Links/Link.js.map +1 -1
- package/dist/index.js +9 -7
- 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
|
@@ -37,14 +37,16 @@ var Badge = function Badge(_ref) {
|
|
|
37
37
|
_ref$backgroundColor = _ref.backgroundColor,
|
|
38
38
|
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
39
39
|
_ref$isVisible = _ref.isVisible,
|
|
40
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible
|
|
40
|
+
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
41
|
+
value = _ref.value;
|
|
41
42
|
return isVisible ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
42
43
|
className: (0, _classnames.default)("c-badge", className),
|
|
43
44
|
dimension: dimension,
|
|
44
45
|
position: position,
|
|
45
46
|
backgroundColor: backgroundColor,
|
|
46
|
-
role: "status"
|
|
47
|
-
|
|
47
|
+
role: "status",
|
|
48
|
+
value: value
|
|
49
|
+
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
48
50
|
};
|
|
49
51
|
exports.Badge = Badge;
|
|
50
52
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","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 isVisible?: 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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n isVisible = true,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","value","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 isVisible?: boolean;\n value?: number;\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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n isVisible = true,\n value,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n ) : null;\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;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAE,mBAAU,EAAC,SAAS,EAAEL,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC;AAAC"}
|
|
@@ -6,17 +6,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.StyledBadge = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
var _FontStyle = require("../FontStyle");
|
|
9
10
|
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); }
|
|
10
11
|
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; }
|
|
11
12
|
var StyledBadge = _styledComponents.default.div.withConfig({
|
|
12
13
|
displayName: "Styles__StyledBadge",
|
|
13
14
|
componentId: "sc-6o8do5-0"
|
|
14
|
-
})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";
|
|
15
|
+
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
|
|
15
16
|
return props.backgroundColor;
|
|
16
17
|
}, function (props) {
|
|
17
18
|
return props.dimension + "px";
|
|
18
19
|
}, function (props) {
|
|
19
20
|
return props.dimension + "px";
|
|
21
|
+
}, function (props) {
|
|
22
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
20
23
|
}, function (_ref) {
|
|
21
24
|
var position = _ref.position;
|
|
22
25
|
return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","props","backgroundColor","dimension","position","css"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n inline-size: ${(props) => props.dimension + \"px\"};\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","dimension","value","position","css"],"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) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n color: var(--color-theme-100);\n display: flex;\n font-size: 12px;\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 ${({ 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,mUACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBC,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBC,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BC,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BC,qBAAG,8CAGF;AAAA,EACJ;AAAC"}
|
|
@@ -48,9 +48,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
48
48
|
variant: variant,
|
|
49
49
|
size: size,
|
|
50
50
|
$iconOnly: children instanceof Object && !(children instanceof Array)
|
|
51
|
-
}, args, {
|
|
52
|
-
tabIndex: 1
|
|
53
|
-
}), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElements, {
|
|
51
|
+
}, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElements, {
|
|
54
52
|
className: "c-link__elements"
|
|
55
53
|
}, children.map(function (value, index) {
|
|
56
54
|
return value ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElement, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n
|
|
1
|
+
{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI,GAEPL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}
|
|
@@ -6,6 +6,7 @@ export interface BadgeProps {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
isVisible?: boolean;
|
|
9
|
+
value?: number;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
11
12
|
* @component Badge
|
|
@@ -27,6 +28,6 @@ export interface BadgeProps {
|
|
|
27
28
|
* @see
|
|
28
29
|
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
29
30
|
*/
|
|
30
|
-
export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, }: BadgeProps) => JSX.Element | null;
|
|
31
|
+
export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, value, }: BadgeProps) => JSX.Element | null;
|
|
31
32
|
export {};
|
|
32
33
|
//# 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,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,2EAOf,UAAU,uBAaZ,CAAC"}
|
|
@@ -30,13 +30,15 @@ export var Badge = function Badge(_ref) {
|
|
|
30
30
|
_ref$backgroundColor = _ref.backgroundColor,
|
|
31
31
|
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
32
32
|
_ref$isVisible = _ref.isVisible,
|
|
33
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible
|
|
33
|
+
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
34
|
+
value = _ref.value;
|
|
34
35
|
return isVisible ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
35
36
|
className: classNames("c-badge", className),
|
|
36
37
|
dimension: dimension,
|
|
37
38
|
position: position,
|
|
38
39
|
backgroundColor: backgroundColor,
|
|
39
|
-
role: "status"
|
|
40
|
-
|
|
40
|
+
role: "status",
|
|
41
|
+
value: value
|
|
42
|
+
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
41
43
|
};
|
|
42
44
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible"],"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 isVisible?: 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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n isVisible = true,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible","value"],"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 isVisible?: boolean;\n value?: number;\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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n isVisible = true,\n value,\n}: BadgeProps) => {\n return isVisible ? (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n ) : null;\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;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,oBAAC,WAAW;IACV,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"
|
|
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,qFA8CvB,CAAC"}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
+
import { FontStyle } from "../FontStyle";
|
|
2
3
|
export var StyledBadge = styled.div.withConfig({
|
|
3
4
|
displayName: "Styles__StyledBadge",
|
|
4
5
|
componentId: "sc-6o8do5-0"
|
|
5
|
-
})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";
|
|
6
|
+
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
|
|
6
7
|
return props.backgroundColor;
|
|
7
8
|
}, function (props) {
|
|
8
9
|
return props.dimension + "px";
|
|
9
10
|
}, function (props) {
|
|
10
11
|
return props.dimension + "px";
|
|
12
|
+
}, function (props) {
|
|
13
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
11
14
|
}, function (_ref) {
|
|
12
15
|
var position = _ref.position;
|
|
13
16
|
return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","StyledBadge","div","props","backgroundColor","dimension","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n background-color: ${(props) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n inline-size: ${(props) => props.dimension + \"px\"};\n
|
|
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) => props.backgroundColor};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n border: 2px solid var(--page-paper-main);\n color: var(--color-theme-100);\n display: flex;\n font-size: 12px;\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 ${({ 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,mUACjCF,SAAS,EAES,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBR,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBR,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BR,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BR,GAAG,6CAGF;AAAA,EACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA0DxD,CAAC"}
|
|
@@ -37,9 +37,7 @@ export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
37
37
|
variant: variant,
|
|
38
38
|
size: size,
|
|
39
39
|
$iconOnly: children instanceof Object && !(children instanceof Array)
|
|
40
|
-
}, args, {
|
|
41
|
-
tabIndex: 1
|
|
42
|
-
}), children instanceof Array ? /*#__PURE__*/React.createElement(StyledLinkElements, {
|
|
40
|
+
}, args), children instanceof Array ? /*#__PURE__*/React.createElement(StyledLinkElements, {
|
|
43
41
|
className: "c-link__elements"
|
|
44
42
|
}, children.map(function (value, index) {
|
|
45
43
|
return value ? /*#__PURE__*/React.createElement(StyledLinkElement, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n
|
|
1
|
+
{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n PolymorphicComponentPropsWithRef,\n PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\"\n | \"text link-primary\"\n | \"text link-gray\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n <C extends React.ElementType = \"a\">(\n {\n as,\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n }: LinkProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const Component = as || \"a\";\n\n return (\n <StyledLink\n ref={ref}\n as={Component}\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n $iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAmCC,UAAU,QAAQ,OAAO;AACxE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,UAAU;AAsC5E;AACA;AACA;AACA,OAAO,IAAMC,IAA8C,gBAAGL,UAAU,CACtE,gBAUEM,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,oBAAC,UAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,QAAQ,EAAEW,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAC;MAC5D,kBAAkB,EAAEL;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;EAAE,GAClEH,IAAI,GAEPL,QAAQ,YAAYQ,KAAK,gBACxB,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CR,QAAQ,CAACS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,iBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBV,QACD,CACU;AAEjB,CAAC,CACF;AAEDH,IAAI,CAACe,WAAW,GAAG,MAAM"}
|
package/dist/index.js
CHANGED
|
@@ -12341,9 +12341,7 @@
|
|
|
12341
12341
|
variant: variant,
|
|
12342
12342
|
size: size,
|
|
12343
12343
|
$iconOnly: children instanceof Object && !(children instanceof Array)
|
|
12344
|
-
}, args, {
|
|
12345
|
-
tabIndex: 1
|
|
12346
|
-
}), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
|
|
12344
|
+
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
|
|
12347
12345
|
className: "c-link__elements"
|
|
12348
12346
|
}, children.map(function (value, index) {
|
|
12349
12347
|
return value ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElement, {
|
|
@@ -15693,12 +15691,14 @@
|
|
|
15693
15691
|
var StyledBadge = styled__default["default"].div.withConfig({
|
|
15694
15692
|
displayName: "Styles__StyledBadge",
|
|
15695
15693
|
componentId: "sc-6o8do5-0"
|
|
15696
|
-
})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";
|
|
15694
|
+
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
|
|
15697
15695
|
return props.backgroundColor;
|
|
15698
15696
|
}, function (props) {
|
|
15699
15697
|
return props.dimension + "px";
|
|
15700
15698
|
}, function (props) {
|
|
15701
15699
|
return props.dimension + "px";
|
|
15700
|
+
}, function (props) {
|
|
15701
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
15702
15702
|
}, function (_ref) {
|
|
15703
15703
|
var position = _ref.position;
|
|
15704
15704
|
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
@@ -15742,14 +15742,16 @@
|
|
|
15742
15742
|
_ref$backgroundColor = _ref.backgroundColor,
|
|
15743
15743
|
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
15744
15744
|
_ref$isVisible = _ref.isVisible,
|
|
15745
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible
|
|
15745
|
+
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
15746
|
+
value = _ref.value;
|
|
15746
15747
|
return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
15747
15748
|
className: classNames__default["default"]("c-badge", className),
|
|
15748
15749
|
dimension: dimension,
|
|
15749
15750
|
position: position,
|
|
15750
15751
|
backgroundColor: backgroundColor,
|
|
15751
|
-
role: "status"
|
|
15752
|
-
|
|
15752
|
+
role: "status",
|
|
15753
|
+
value: value
|
|
15754
|
+
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
15753
15755
|
};
|
|
15754
15756
|
|
|
15755
15757
|
exports.Accordion = Accordion;
|