@hyphen/hyphen-components 2.16.3 → 2.18.0

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { IconName, ResponsiveProp } from '../../types';
+import { BoxShadowSize, IconName, ResponsiveProp } from '../../types';
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FocusEvent, MouseEvent, ReactNode } from 'react';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -56,6 +56,10 @@ export interface BaseButtonProps {
      * Callback when Button receives focus.
      */
     onFocus?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * The size of the drop shadow applied to the Box
+     */
+    shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
     /**
      * Specify the tabIndex of the button.
      */

package/dist/components/Button/Button.stories.d.ts

@@ -11,4 +11,5 @@ export declare const Icons: () => React.JSX.Element;
 export declare const IconButton: () => React.JSX.Element;
 export declare const Loading: () => React.JSX.Element;
 export declare const Disabled: () => React.JSX.Element;
+export declare const Shadow: () => React.JSX.Element;
 export declare const Anchor: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -168,18 +168,36 @@
 
 .focus\:background-color-brand-gradient:focus { background: var(--color-background-brand-gradient); }
 
+.background-color-brand-gradient-reverse { background: var(--color-background-brand-gradient-reverse); }
+
+.hover\:background-color-brand-gradient-reverse:hover { background: var(--color-background-brand-gradient-reverse); }
+
+.focus\:background-color-brand-gradient-reverse:focus { background: var(--color-background-brand-gradient-reverse); }
+
 .background-color-brand-gradient-purple { background: var(--color-background-brand-gradient-purple); }
 
 .hover\:background-color-brand-gradient-purple:hover { background: var(--color-background-brand-gradient-purple); }
 
 .focus\:background-color-brand-gradient-purple:focus { background: var(--color-background-brand-gradient-purple); }
 
+.background-color-brand-gradient-purple-reverse { background: var(--color-background-brand-gradient-purple-reverse); }
+
+.hover\:background-color-brand-gradient-purple-reverse:hover { background: var(--color-background-brand-gradient-purple-reverse); }
+
+.focus\:background-color-brand-gradient-purple-reverse:focus { background: var(--color-background-brand-gradient-purple-reverse); }
+
 .background-color-brand-gradient-cyan { background: var(--color-background-brand-gradient-cyan); }
 
 .hover\:background-color-brand-gradient-cyan:hover { background: var(--color-background-brand-gradient-cyan); }
 
 .focus\:background-color-brand-gradient-cyan:focus { background: var(--color-background-brand-gradient-cyan); }
 
+.background-color-brand-gradient-cyan-reverse { background: var(--color-background-brand-gradient-cyan-reverse); }
+
+.hover\:background-color-brand-gradient-cyan-reverse:hover { background: var(--color-background-brand-gradient-cyan-reverse); }
+
+.focus\:background-color-brand-gradient-cyan-reverse:focus { background: var(--color-background-brand-gradient-cyan-reverse); }
+
 .background-color-brand-yellow { background: var(--color-background-brand-yellow); }
 
 .hover\:background-color-brand-yellow:hover { background: var(--color-background-brand-yellow); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
  */
 
 :root {
@@ -36,8 +36,11 @@
   --color-background-toast: #262626;
   --color-background-toast-error: #ef4444;
   --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
+  --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #fa0a64 100%);
   --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
+  --color-background-brand-gradient-purple-reverse: linear-gradient(270deg, #b47dff 0%, #4b32aa 100%);
   --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
+  --color-background-brand-gradient-cyan-reverse: linear-gradient(270deg, #00b4ff 0%, #dc50ff 100%);
   --color-background-brand-yellow: #ffd200;
   --color-background-brand-orange: #ff911e;
   --color-background-brand-magenta: #ff3278;
@@ -308,7 +311,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
  */
 
 :root.dark {

package/dist/hyphen-components.cjs.development.js

@@ -754,9 +754,9 @@ var handleReactRouterClick = function handleReactRouterClick(event, onClick, tar
 
 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"};
 
-var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "tabIndex", "target", "type", "size", "variant"];
+var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _classNames;
+  var _classNames, _extends2;
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? undefined : _ref$children,
     _ref$as = _ref.as,
@@ -785,14 +785,16 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? undefined : _ref$target,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? undefined : _ref$type,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
@@ -800,7 +802,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$s[c];
   });
-  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));
+  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));
   var handleClick = handleReactRouterClick;
   var handleFocus = function handleFocus(event) {
     if (onFocus) onFocus(event);
@@ -844,21 +846,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var buttonElement = getElementType(Button, {
     as: as
   });
-  return React.createElement(buttonElement, _extends({
-    id: id,
-    href: href,
-    className: buttonClasses,
-    disabled: disabled,
-    target: as === 'a' && href ? target : null,
-    onBlur: handleBlur,
-    onClick: function onClick(event) {
-      return handleClick(event, _onClick, target, navigate);
-    },
-    onFocus: handleFocus,
-    ref: ref,
-    type: type || (as !== 'a' && !href ? 'button' : undefined),
-    tabIndex: tabIndex
-  }, restProps), buttonContent);
+  return React.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) {
+    return handleClick(event, _onClick, target, navigate);
+  }, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
 });
 
 var _excluded$E = ["background", "borderColor", "borderWidth", "children", "display", "padding"];