@activecollab/components 2.0.426 → 2.0.428
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 +6 -2
- package/dist/cjs/components/Button/Button.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 +6 -2
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/index.js +6 -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 @@ exports.Button = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
-
var _excluded = ["children", "active", "variant", "size", "className"];
|
|
10
|
+
var _excluded = ["children", "active", "variant", "size", "type", "className"];
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
13
13
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -22,6 +22,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
22
22
|
* @prop {variant} - adds unique look and feel to button.
|
|
23
23
|
* @prop {size} - controls the size of a button.
|
|
24
24
|
* @prop {active} - adds active/pressed state to a button.
|
|
25
|
+
* @prop {type} - defaults to "button"; pass "submit" for a form's submit control.
|
|
25
26
|
*
|
|
26
27
|
* @example
|
|
27
28
|
* return (
|
|
@@ -41,6 +42,8 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
|
|
|
41
42
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
42
43
|
_ref$size = _ref.size,
|
|
43
44
|
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
45
|
+
_ref$type = _ref.type,
|
|
46
|
+
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
44
47
|
className = _ref.className,
|
|
45
48
|
args = _objectWithoutProperties(_ref, _excluded);
|
|
46
49
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledButton, _extends({
|
|
@@ -61,7 +64,8 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
|
|
|
61
64
|
size: size,
|
|
62
65
|
ref: ref,
|
|
63
66
|
"aria-pressed": active,
|
|
64
|
-
role: "button"
|
|
67
|
+
role: "button",
|
|
68
|
+
type: type
|
|
65
69
|
}, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonElements, {
|
|
66
70
|
className: "c-btn__elements"
|
|
67
71
|
}, children.map(function (value, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Button","exports","forwardRef","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","className","args","createElement","StyledButton","classnames","Array","iconOnly","role","StyledButtonElements","map","value","index","StyledButtonElement","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\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":"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
|
|
1
|
+
{"version":3,"file":"Button.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Button","exports","forwardRef","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","className","args","createElement","StyledButton","classnames","Array","iconOnly","role","StyledButtonElements","map","value","index","StyledButtonElement","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\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 * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\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 type = \"button\",\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 type={type}\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":"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","ignoreList":[]}
|
|
@@ -16,6 +16,7 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
|
|
|
16
16
|
* @prop {variant} - adds unique look and feel to button.
|
|
17
17
|
* @prop {size} - controls the size of a button.
|
|
18
18
|
* @prop {active} - adds active/pressed state to a button.
|
|
19
|
+
* @prop {type} - defaults to "button"; pass "submit" for a form's submit control.
|
|
19
20
|
*
|
|
20
21
|
* @example
|
|
21
22
|
* return (
|
|
@@ -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;AAUf,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
|
|
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;AAUf,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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;2CA4DlB,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
|
-
const _excluded = ["children", "active", "variant", "size", "className"];
|
|
3
|
+
const _excluded = ["children", "active", "variant", "size", "type", "className"];
|
|
4
4
|
import React, { forwardRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Styles";
|
|
@@ -13,6 +13,7 @@ import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Style
|
|
|
13
13
|
* @prop {variant} - adds unique look and feel to button.
|
|
14
14
|
* @prop {size} - controls the size of a button.
|
|
15
15
|
* @prop {active} - adds active/pressed state to a button.
|
|
16
|
+
* @prop {type} - defaults to "button"; pass "submit" for a form's submit control.
|
|
16
17
|
*
|
|
17
18
|
* @example
|
|
18
19
|
* return (
|
|
@@ -32,6 +33,8 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
32
33
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
33
34
|
_ref$size = _ref.size,
|
|
34
35
|
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
36
|
+
_ref$type = _ref.type,
|
|
37
|
+
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
35
38
|
className = _ref.className,
|
|
36
39
|
args = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
37
40
|
return /*#__PURE__*/React.createElement(StyledButton, _extends({
|
|
@@ -52,7 +55,8 @@ export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
52
55
|
size: size,
|
|
53
56
|
ref: ref,
|
|
54
57
|
"aria-pressed": active,
|
|
55
|
-
role: "button"
|
|
58
|
+
role: "button",
|
|
59
|
+
type: type
|
|
56
60
|
}, args), children instanceof Array ? /*#__PURE__*/React.createElement(StyledButtonElements, {
|
|
57
61
|
className: "c-btn__elements"
|
|
58
62
|
}, children.map((value, index) => value ? /*#__PURE__*/React.createElement(StyledButtonElement, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","className","args","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Object","Array","iconOnly","role","map","value","index","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\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;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,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,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","_ref","ref","children","_ref$active","active","_ref$variant","variant","_ref$size","size","_ref$type","type","className","args","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Object","Array","iconOnly","role","map","value","index","key","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\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 * @prop {type} - defaults to \"button\"; pass \"submit\" for a form's submit control.\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 type = \"button\",\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 type={type}\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;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,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;AACA,OAAO,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,EAUEC,GAAG,KACA;EAAA,IATDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAL,IAAA,CACdM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,WAAW,GAAAA,YAAA;IAAAE,SAAA,GAAAP,IAAA,CACrBQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IAAAE,SAAA,GAAAT,IAAA,CACfU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IACfE,SAAS,GAAAX,IAAA,CAATW,SAAS;IACNC,IAAI,GAAAC,6BAAA,CAAAb,IAAA,EAAAc,SAAA;EAIT,oBACErB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXL,SAAS,EAAEhB,UAAU,CAAC,OAAO,EAAEgB,SAAS,EAAE;MACxC,kBAAkB,EAAEL,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,EAAEE,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBN,QAAQ,YAAYe,MAAM,IAAI,EAAEf,QAAQ,YAAYgB,KAAK;IAC7D,CAAC,CAAE;IACHC,QAAQ,EAAEjB,QAAQ,YAAYe,MAAM,IAAI,EAAEf,QAAQ,YAAYgB,KAAK,CAAE;IACrEZ,OAAO,EAAEA,OAAQ;IACjBF,MAAM,EAAEA,MAAO;IACfI,IAAI,EAAEA,IAAK;IACXP,GAAG,EAAEA,GAAI;IACT,gBAAcG,MAAO;IACrBgB,IAAI,EAAC,QAAQ;IACbV,IAAI,EAAEA;EAAK,GACPE,IAAI,GAEPV,QAAQ,YAAYgB,KAAK,gBACxBzB,KAAA,CAAAsB,aAAA,CAACjB,oBAAoB;IAACa,SAAS,EAAC;EAAiB,GAC9CT,QAAQ,CAACmB,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KACzBD,KAAK,gBACH7B,KAAA,CAAAsB,aAAA,CAAClB,mBAAmB;IAClBc,SAAS,EAAC,0BAA0B;IACpCa,GAAG,EAAED;EAAM,GAEVD,KACkB,CAAC,GACpB,IACN,CACoB,CAAC,GAEvBpB,QAEU,CAAC;AAEnB,CACF,CAAC;AAEDH,MAAM,CAAC0B,WAAW,GAAG,QAAQ","ignoreList":[]}
|
package/dist/index.js
CHANGED
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
})(["display:inline-flex;svg{margin:0 4px;}"]);
|
|
209
209
|
StyledButtonElement.displayName = "StyledButtonElement";
|
|
210
210
|
|
|
211
|
-
var _excluded$5X = ["children", "active", "variant", "size", "className"];
|
|
211
|
+
var _excluded$5X = ["children", "active", "variant", "size", "type", "className"];
|
|
212
212
|
/**
|
|
213
213
|
* @component Button
|
|
214
214
|
* @description
|
|
@@ -218,6 +218,7 @@
|
|
|
218
218
|
* @prop {variant} - adds unique look and feel to button.
|
|
219
219
|
* @prop {size} - controls the size of a button.
|
|
220
220
|
* @prop {active} - adds active/pressed state to a button.
|
|
221
|
+
* @prop {type} - defaults to "button"; pass "submit" for a form's submit control.
|
|
221
222
|
*
|
|
222
223
|
* @example
|
|
223
224
|
* return (
|
|
@@ -237,6 +238,8 @@
|
|
|
237
238
|
variant = _ref$variant === void 0 ? "contained" : _ref$variant,
|
|
238
239
|
_ref$size = _ref.size,
|
|
239
240
|
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
241
|
+
_ref$type = _ref.type,
|
|
242
|
+
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
240
243
|
className = _ref.className,
|
|
241
244
|
args = _objectWithoutProperties(_ref, _excluded$5X);
|
|
242
245
|
return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
|
|
@@ -257,7 +260,8 @@
|
|
|
257
260
|
size: size,
|
|
258
261
|
ref: ref,
|
|
259
262
|
"aria-pressed": active,
|
|
260
|
-
role: "button"
|
|
263
|
+
role: "button",
|
|
264
|
+
type: type
|
|
261
265
|
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElements, {
|
|
262
266
|
className: "c-btn__elements"
|
|
263
267
|
}, children.map(function (value, index) {
|