@activecollab/components 1.0.343 → 1.0.344
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 +1 -2
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js +1 -2
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +1 -2
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js +1 -2
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/index.js +2 -4
- 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
|
@@ -63,8 +63,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
63
63
|
size: size,
|
|
64
64
|
ref: ref,
|
|
65
65
|
"aria-pressed": active,
|
|
66
|
-
role: "button"
|
|
67
|
-
type: "button"
|
|
66
|
+
role: "button"
|
|
68
67
|
}, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonElements, {
|
|
69
68
|
className: "c-btn__elements"
|
|
70
69
|
}, children.map(function (value, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","active","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 /** Button size dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed 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 * https://design.activecollab.com/docs/components/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={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\n
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","active","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 /** Button size dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed 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 * https://design.activecollab.com/docs/components/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={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\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;AACA;AAIkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlB;AACA;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,EAAE,IAAAC,mBAAU,EAAC,OAAO,EAAEF,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBH,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAER,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAE;IACrE,OAAO,EAAEN,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ,GAAI;IACT,gBAAcE,MAAO;IACrB,IAAI,EAAC;EAAQ,GACTI,IAAI,GAEPL,QAAQ,YAAYQ,KAAK,gBACxB,6BAAC,4BAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CR,QAAQ,CAACS,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,GAEvBV,QACD,CACY;AAEnB,CAAC,CACF;AAAC;AAEFH,MAAM,CAACe,WAAW,GAAG,QAAQ"}
|
|
@@ -27,8 +27,7 @@ var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
|
27
27
|
$completed: completed,
|
|
28
28
|
$disabled: disabled,
|
|
29
29
|
$animation: !disabled && completed && animate,
|
|
30
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
31
|
-
type: "button"
|
|
30
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
32
31
|
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
33
32
|
viewBox: "0 0 48 48",
|
|
34
33
|
className: checkMarkClassName
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.js","names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","classnames","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.js","names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","classnames","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n >\n <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n </svg>\n </StyledCompleteCheckbox>\n );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAkD;AAmB3C,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA4C,OAQnD;EAAA,0BAPJC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,kBAAkB,QAAlBA,kBAAkB;EAElB,oBACE,6BAAC,8BAAsB;IACrB,OAAO,EAAEH,OAAQ;IACjB,SAAS,EAAE,IAAAI,mBAAU,EAAC,qBAAqB,EAAEH,SAAS,CAAE;IACxD,QAAQ,EAAEC,OAAQ;IAClB,UAAU,EAAEL,SAAU;IACtB,SAAS,EAAEC,QAAS;IACpB,UAAU,EAAE,CAACA,QAAQ,IAAID,SAAS,IAAIE,OAAQ;IAC9C,mBAAmB,EAAE,CAAC,CAACI;EAAmB,gBAE1C;IAAK,OAAO,EAAC,WAAW;IAAC,SAAS,EAAEA;EAAmB,gBACrD;IAAM,CAAC,EAAC;EAA+F,EAAG,eAC1G;IAAU,MAAM,EAAC;EAAyB,EAAG,CACzC,CACiB;AAE7B,CAAC;AAAC;AAEFP,gBAAgB,CAACS,WAAW,GAAG,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;2CA0DlB,CAAC"}
|
|
@@ -52,8 +52,7 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
52
52
|
size: size,
|
|
53
53
|
ref: ref,
|
|
54
54
|
"aria-pressed": active,
|
|
55
|
-
role: "button"
|
|
56
|
-
type: "button"
|
|
55
|
+
role: "button"
|
|
57
56
|
}, args), children instanceof Array ? /*#__PURE__*/React.createElement(StyledButtonElements, {
|
|
58
57
|
className: "c-btn__elements"
|
|
59
58
|
}, children.map(function (value, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","active","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 /** Button size dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed 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 * https://design.activecollab.com/docs/components/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={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\n
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","active","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 /** Button size dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed 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 * https://design.activecollab.com/docs/components/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={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\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,IAEVC,UAAU,QAEL,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AAoBjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAI9B,gBASEM,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,EAAEX,UAAU,CAAC,OAAO,EAAEU,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBH,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAEP,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK,CAAE;IACrE,OAAO,EAAEL,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ,GAAI;IACT,gBAAcE,MAAO;IACrB,IAAI,EAAC;EAAQ,GACTI,IAAI,GAEPL,QAAQ,YAAYO,KAAK,gBACxB,oBAAC,oBAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CP,QAAQ,CAACQ,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,GAEvBT,QACD,CACY;AAEnB,CAAC,CACF;AAEDF,MAAM,CAACa,WAAW,GAAG,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CAyBvD,CAAC"}
|
|
@@ -20,8 +20,7 @@ export var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
|
20
20
|
$completed: completed,
|
|
21
21
|
$disabled: disabled,
|
|
22
22
|
$animation: !disabled && completed && animate,
|
|
23
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
24
|
-
type: "button"
|
|
23
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
25
24
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
26
25
|
viewBox: "0 0 48 48",
|
|
27
26
|
className: checkMarkClassName
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n >\n <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n </svg>\n </StyledCompleteCheckbox>\n );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,sBAAsB,QAAQ,UAAU;AAmBjD,OAAO,IAAMC,gBAA4C,GAAG,SAA/CA,gBAA4C,OAQnD;EAAA,0BAPJC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,kBAAkB,QAAlBA,kBAAkB;EAElB,oBACE,oBAAC,sBAAsB;IACrB,OAAO,EAAEH,OAAQ;IACjB,SAAS,EAAEN,UAAU,CAAC,qBAAqB,EAAEO,SAAS,CAAE;IACxD,QAAQ,EAAEC,OAAQ;IAClB,UAAU,EAAEL,SAAU;IACtB,SAAS,EAAEC,QAAS;IACpB,UAAU,EAAE,CAACA,QAAQ,IAAID,SAAS,IAAIE,OAAQ;IAC9C,mBAAmB,EAAE,CAAC,CAACI;EAAmB,gBAE1C;IAAK,OAAO,EAAC,WAAW;IAAC,SAAS,EAAEA;EAAmB,gBACrD;IAAM,CAAC,EAAC;EAA+F,EAAG,eAC1G;IAAU,MAAM,EAAC;EAAyB,EAAG,CACzC,CACiB;AAE7B,CAAC;AAEDP,gBAAgB,CAACQ,WAAW,GAAG,kBAAkB"}
|
package/dist/index.js
CHANGED
|
@@ -318,8 +318,7 @@
|
|
|
318
318
|
size: size,
|
|
319
319
|
ref: ref,
|
|
320
320
|
"aria-pressed": active,
|
|
321
|
-
role: "button"
|
|
322
|
-
type: "button"
|
|
321
|
+
role: "button"
|
|
323
322
|
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElements, {
|
|
324
323
|
className: "c-btn__elements"
|
|
325
324
|
}, children.map(function (value, index) {
|
|
@@ -9564,8 +9563,7 @@
|
|
|
9564
9563
|
$completed: completed,
|
|
9565
9564
|
$disabled: disabled,
|
|
9566
9565
|
$animation: !disabled && completed && animate,
|
|
9567
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
9568
|
-
type: "button"
|
|
9566
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
9569
9567
|
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
9570
9568
|
viewBox: "0 0 48 48",
|
|
9571
9569
|
className: checkMarkClassName
|