@activecollab/components 1.0.231 → 1.0.232
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/Button/Button.js +5 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Button/Styles.js +3 -1
- package/dist/cjs/components/Button/Styles.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts +1 -0
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +5 -1
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Styles.d.ts.map +1 -1
- package/dist/esm/components/Button/Styles.js +3 -1
- package/dist/esm/components/Button/Styles.js.map +1 -1
- package/dist/index.js +8 -2
- 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
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.Button = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
-
var _excluded = ["children", "variant", "size", "className"];
|
|
10
|
+
var _excluded = ["children", "active", "variant", "size", "className"];
|
|
11
11
|
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); }
|
|
12
12
|
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; }
|
|
13
13
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -21,6 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
21
21
|
*
|
|
22
22
|
* @prop {variant} - adds unique look and feel to button.
|
|
23
23
|
* @prop {size} - controls the size of a button.
|
|
24
|
+
* @prop {active} - adds active/pressed state to a button.
|
|
24
25
|
*
|
|
25
26
|
* @example
|
|
26
27
|
* return (
|
|
@@ -33,6 +34,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
33
34
|
*/
|
|
34
35
|
var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
35
36
|
var children = _ref.children,
|
|
37
|
+
_ref$active = _ref.active,
|
|
38
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
36
39
|
_ref$variant = _ref.variant,
|
|
37
40
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
38
41
|
_ref$size = _ref.size,
|
|
@@ -42,6 +45,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
42
45
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledButton, _extends({
|
|
43
46
|
className: className,
|
|
44
47
|
variant: variant,
|
|
48
|
+
active: active,
|
|
45
49
|
size: size,
|
|
46
50
|
ref: ref
|
|
47
51
|
}, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonElements, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","variant","size","className","args","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\ntype ButtonVariants =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\ntype ButtonSize = \"big\" | \"small\" | \"medium\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?: ButtonVariants;\n /** Button size can be big, medium or small */\n size?: ButtonSize;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","active","variant","size","className","args","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\ntype ButtonVariants =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\ntype ButtonSize = \"big\" | \"small\" | \"medium\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?: ButtonVariants;\n /** Button size can be big, medium or small */\n size?: ButtonSize;\n /** Set active state */\n active?: boolean;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n className={className}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA;AAKA;AAIkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBlB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBASEC,GAAG,EACA;EAAA,IARDC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBACrBC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IACfC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,oBACE,6BAAC,oBAAY;IACX,SAAS,EAAED,SAAU;IACrB,OAAO,EAAEF,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ;EAAI,GACLM,IAAI,GAEPL,QAAQ,YAAYM,KAAK,gBACxB,6BAAC,4BAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CN,QAAQ,CAACO,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,2BAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBR,QACD,CACY;AAEnB,CAAC,CACF;AAAC;AAEFH,MAAM,CAACa,WAAW,GAAG,QAAQ"}
|
|
@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
13
13
|
var StyledButton = _styledComponents.default.button.withConfig({
|
|
14
14
|
displayName: "Styles__StyledButton",
|
|
15
15
|
componentId: "sc-vi1kcr-0"
|
|
16
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
17
17
|
return props.size === "small" && (0, _styledComponents.css)(["height:24px;"]);
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
@@ -33,6 +33,8 @@ var StyledButton = _styledComponents.default.button.withConfig({
|
|
|
33
33
|
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]));
|
|
34
34
|
}, function (props) {
|
|
35
35
|
return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && (0, _styledComponents.css)([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && (0, _styledComponents.css)(["border-radius:var(--ac-br-4);"]), props.size === "big" && (0, _styledComponents.css)(["border-radius:var(--ac-br-8);"]));
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.active && (0, _styledComponents.css)(["pointer-events:none;", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && (0, _styledComponents.css)(["background-color:var(--only-black);"]), props.variant === "circle raised" && (0, _styledComponents.css)(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["color:var(--color-primary);", ""], props.children instanceof Array && (0, _styledComponents.css)(["background-color:var(--color-theme-300);"])));
|
|
36
38
|
});
|
|
37
39
|
exports.StyledButton = StyledButton;
|
|
38
40
|
StyledButton.displayName = "StyledButton";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledButton = styled.button<ButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAE5C,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","active","children","Array","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledButton = styled.button<ButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n\n ${(props) =>\n props.active &&\n css`\n pointer-events: none;\n\n ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n background-color: var(--color-primary-800);\n `}\n\n ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n border-color: var(--color-primary);\n color: var(--color-primary);\n `}\n\n ${props.variant === \"dark transparent\" &&\n css`\n background-color: var(--only-black);\n `}\n\n ${props.variant === \"circle raised\" &&\n css`\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n `}\n\n ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n background-color: var(--color-primary-200);\n `}\n\n ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n color: var(--color-primary);\n ${props.children instanceof Array &&\n css`\n background-color: var(--color-theme-300);\n `}\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ declare type ButtonSize = "big" | "small" | "medium";
|
|
|
4
4
|
export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
|
|
5
5
|
variant?: ButtonVariants;
|
|
6
6
|
size?: ButtonSize;
|
|
7
|
+
active?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & {
|
|
9
10
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,wBAAwB,EAEzB,MAAM,OAAO,CAAC;AAOf,aAAK,cAAc,GACf,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;AACpB,aAAK,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAErE,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,IAAI,CAAC,EAAE,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,wBAAwB,EAEzB,MAAM,OAAO,CAAC;AAOf,aAAK,cAAc,GACf,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;AACpB,aAAK,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAErE,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoBD,eAAO,MAAM,MAAM;;2CA2ClB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "variant", "size", "className"];
|
|
3
|
+
var _excluded = ["children", "active", "variant", "size", "className"];
|
|
4
4
|
import React, { forwardRef } from "react";
|
|
5
5
|
import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Styles";
|
|
6
6
|
/**
|
|
@@ -11,6 +11,7 @@ import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Style
|
|
|
11
11
|
*
|
|
12
12
|
* @prop {variant} - adds unique look and feel to button.
|
|
13
13
|
* @prop {size} - controls the size of a button.
|
|
14
|
+
* @prop {active} - adds active/pressed state to a button.
|
|
14
15
|
*
|
|
15
16
|
* @example
|
|
16
17
|
* return (
|
|
@@ -23,6 +24,8 @@ import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Style
|
|
|
23
24
|
*/
|
|
24
25
|
export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
25
26
|
var children = _ref.children,
|
|
27
|
+
_ref$active = _ref.active,
|
|
28
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
26
29
|
_ref$variant = _ref.variant,
|
|
27
30
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
28
31
|
_ref$size = _ref.size,
|
|
@@ -32,6 +35,7 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
32
35
|
return /*#__PURE__*/React.createElement(StyledButton, _extends({
|
|
33
36
|
className: className,
|
|
34
37
|
variant: variant,
|
|
38
|
+
active: active,
|
|
35
39
|
size: size,
|
|
36
40
|
ref: ref
|
|
37
41
|
}, args), children instanceof Array ? /*#__PURE__*/React.createElement(StyledButtonElements, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","variant","size","className","args","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\ntype ButtonVariants =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\ntype ButtonSize = \"big\" | \"small\" | \"medium\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?: ButtonVariants;\n /** Button size can be big, medium or small */\n size?: ButtonSize;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","active","variant","size","className","args","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\ntype ButtonVariants =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\ntype ButtonSize = \"big\" | \"small\" | \"medium\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?: ButtonVariants;\n /** Button size can be big, medium or small */\n size?: ButtonSize;\n /** Set active state */\n active?: boolean;\n}\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n className={className}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,QAGL,OAAO;AACd,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AAuBjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGJ,UAAU,CAI9B,gBASEK,GAAG,EACA;EAAA,IARDC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBACrBC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IACfC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,oBACE,oBAAC,YAAY;IACX,SAAS,EAAED,SAAU;IACrB,OAAO,EAAEF,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ;EAAI,GACLM,IAAI,GAEPL,QAAQ,YAAYM,KAAK,gBACxB,oBAAC,oBAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CN,QAAQ,CAACO,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,mBAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBR,QACD,CACY;AAEnB,CAAC,CACF;AAEDF,MAAM,CAACY,WAAW,GAAG,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,eAAO,MAAM,YAAY,gFA4PxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
|
4
4
|
export var StyledButton = styled.button.withConfig({
|
|
5
5
|
displayName: "Styles__StyledButton",
|
|
6
6
|
componentId: "sc-vi1kcr-0"
|
|
7
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
7
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
8
8
|
return props.size === "small" && css(["height:24px;"]);
|
|
9
9
|
}, function (props) {
|
|
10
10
|
return props.size === "big" && css(["height:40px;"]);
|
|
@@ -24,6 +24,8 @@ export var StyledButton = styled.button.withConfig({
|
|
|
24
24
|
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && css([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]));
|
|
25
25
|
}, function (props) {
|
|
26
26
|
return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && css(["border-radius:var(--ac-br-4);"]), props.size === "big" && css(["border-radius:var(--ac-br-8);"]));
|
|
27
|
+
}, function (props) {
|
|
28
|
+
return props.active && css(["pointer-events:none;", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), props.variant === "circle raised" && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"])));
|
|
27
29
|
});
|
|
28
30
|
StyledButton.displayName = "StyledButton";
|
|
29
31
|
export var StyledButtonElements = styled.span.withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledButton = styled.button<ButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAElD,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","active","children","Array","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledButton = styled.button<ButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n\n ${(props) =>\n props.active &&\n css`\n pointer-events: none;\n\n ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n background-color: var(--color-primary-800);\n `}\n\n ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n border-color: var(--color-primary);\n color: var(--color-primary);\n `}\n\n ${props.variant === \"dark transparent\" &&\n css`\n background-color: var(--only-black);\n `}\n\n ${props.variant === \"circle raised\" &&\n css`\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n `}\n\n ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n background-color: var(--color-primary-200);\n `}\n\n ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n color: var(--color-primary);\n ${props.children instanceof Array &&\n css`\n background-color: var(--color-theme-300);\n `}\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
var StyledButton$2 = styled__default["default"].button.withConfig({
|
|
233
233
|
displayName: "Styles__StyledButton",
|
|
234
234
|
componentId: "sc-vi1kcr-0"
|
|
235
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
235
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
236
236
|
return props.size === "small" && styled.css(["height:24px;"]);
|
|
237
237
|
}, function (props) {
|
|
238
238
|
return props.size === "big" && styled.css(["height:40px;"]);
|
|
@@ -252,6 +252,8 @@
|
|
|
252
252
|
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]));
|
|
253
253
|
}, function (props) {
|
|
254
254
|
return (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray" || props.variant === "dark transparent") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-4px;}.c-btn__elements__element:last-child svg{margin-right:-4px;}", " ", ""], props.size === "small" && styled.css(["border-radius:var(--ac-br-4);"]), props.size === "big" && styled.css(["border-radius:var(--ac-br-8);"]));
|
|
255
|
+
}, function (props) {
|
|
256
|
+
return props.active && styled.css(["pointer-events:none;", " ", " ", " ", " ", " ", ""], (props.variant === "primary" || props.variant === "contained") && styled.css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && styled.css(["background-color:var(--only-black);"]), props.variant === "circle raised" && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && styled.css(["color:var(--color-primary);", ""], props.children instanceof Array && styled.css(["background-color:var(--color-theme-300);"])));
|
|
255
257
|
});
|
|
256
258
|
StyledButton$2.displayName = "StyledButton";
|
|
257
259
|
var StyledButtonElements = styled__default["default"].span.withConfig({
|
|
@@ -265,7 +267,7 @@
|
|
|
265
267
|
})(["display:inline-flex;svg{margin:0 4px;}"]);
|
|
266
268
|
StyledButtonElement.displayName = "StyledButtonElement";
|
|
267
269
|
|
|
268
|
-
var _excluded$1c = ["children", "variant", "size", "className"];
|
|
270
|
+
var _excluded$1c = ["children", "active", "variant", "size", "className"];
|
|
269
271
|
/**
|
|
270
272
|
* @component Button
|
|
271
273
|
* @description
|
|
@@ -274,6 +276,7 @@
|
|
|
274
276
|
*
|
|
275
277
|
* @prop {variant} - adds unique look and feel to button.
|
|
276
278
|
* @prop {size} - controls the size of a button.
|
|
279
|
+
* @prop {active} - adds active/pressed state to a button.
|
|
277
280
|
*
|
|
278
281
|
* @example
|
|
279
282
|
* return (
|
|
@@ -286,6 +289,8 @@
|
|
|
286
289
|
*/
|
|
287
290
|
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
288
291
|
var children = _ref.children,
|
|
292
|
+
_ref$active = _ref.active,
|
|
293
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
289
294
|
_ref$variant = _ref.variant,
|
|
290
295
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
291
296
|
_ref$size = _ref.size,
|
|
@@ -295,6 +300,7 @@
|
|
|
295
300
|
return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
|
|
296
301
|
className: className,
|
|
297
302
|
variant: variant,
|
|
303
|
+
active: active,
|
|
298
304
|
size: size,
|
|
299
305
|
ref: ref
|
|
300
306
|
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElements, {
|