@hyphen/hyphen-components 2.16.3 → 2.18.0
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/components/Button/Button.d.ts +5 -1
- package/dist/components/Button/Button.stories.d.ts +1 -0
- package/dist/css/utilities.css +19 -1
- package/dist/css/variables.css +5 -2
- package/dist/hyphen-components.cjs.development.js +10 -20
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +10 -20
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/lib/tokens.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/Button/Button.mdx +7 -0
- package/src/components/Button/Button.stories.tsx +19 -3
- package/src/components/Button/Button.test.tsx +241 -293
- package/src/components/Button/Button.tsx +13 -2
|
@@ -750,9 +750,9 @@ var handleReactRouterClick = function handleReactRouterClick(event, onClick, tar
|
|
|
750
750
|
|
|
751
751
|
var styles$s = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
|
|
752
752
|
|
|
753
|
-
var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "
|
|
753
|
+
var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
|
|
754
754
|
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
755
|
-
var _classNames;
|
|
755
|
+
var _classNames, _extends2;
|
|
756
756
|
var _ref$children = _ref.children,
|
|
757
757
|
children = _ref$children === void 0 ? undefined : _ref$children,
|
|
758
758
|
_ref$as = _ref.as,
|
|
@@ -781,14 +781,16 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
781
781
|
onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
|
|
782
782
|
_ref$onBlur = _ref.onBlur,
|
|
783
783
|
onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
|
|
784
|
+
_ref$shadow = _ref.shadow,
|
|
785
|
+
shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
|
|
786
|
+
_ref$size = _ref.size,
|
|
787
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
784
788
|
_ref$tabIndex = _ref.tabIndex,
|
|
785
789
|
tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
|
|
786
790
|
_ref$target = _ref.target,
|
|
787
791
|
target = _ref$target === void 0 ? undefined : _ref$target,
|
|
788
792
|
_ref$type = _ref.type,
|
|
789
793
|
type = _ref$type === void 0 ? undefined : _ref$type,
|
|
790
|
-
_ref$size = _ref.size,
|
|
791
|
-
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
792
794
|
_ref$variant = _ref.variant,
|
|
793
795
|
variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
|
|
794
796
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
|
|
@@ -796,7 +798,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
796
798
|
var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
|
|
797
799
|
return styles$s[c];
|
|
798
800
|
});
|
|
799
|
-
var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
|
|
801
|
+
var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
|
|
800
802
|
var handleClick = handleReactRouterClick;
|
|
801
803
|
var handleFocus = function handleFocus(event) {
|
|
802
804
|
if (onFocus) onFocus(event);
|
|
@@ -840,21 +842,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
840
842
|
var buttonElement = getElementType(Button, {
|
|
841
843
|
as: as
|
|
842
844
|
});
|
|
843
|
-
return createElement(buttonElement, _extends({
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
className: buttonClasses,
|
|
847
|
-
disabled: disabled,
|
|
848
|
-
target: as === 'a' && href ? target : null,
|
|
849
|
-
onBlur: handleBlur,
|
|
850
|
-
onClick: function onClick(event) {
|
|
851
|
-
return handleClick(event, _onClick, target, navigate);
|
|
852
|
-
},
|
|
853
|
-
onFocus: handleFocus,
|
|
854
|
-
ref: ref,
|
|
855
|
-
type: type || (as !== 'a' && !href ? 'button' : undefined),
|
|
856
|
-
tabIndex: tabIndex
|
|
857
|
-
}, restProps), buttonContent);
|
|
845
|
+
return createElement(buttonElement, _extends((_extends2 = {}, _extends2['aria-disabled'] = disabled, _extends2.id = id, _extends2.href = href, _extends2.className = buttonClasses, _extends2.disabled = disabled, _extends2.target = as === 'a' && href ? target : null, _extends2.rel = as === 'a' && href && target === '_blank' ? 'noopener noreferrer' : null, _extends2.onBlur = handleBlur, _extends2.onClick = function onClick(event) {
|
|
846
|
+
return handleClick(event, _onClick, target, navigate);
|
|
847
|
+
}, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
|
|
858
848
|
});
|
|
859
849
|
|
|
860
850
|
var _excluded$E = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
|