@twilio-paste/button
Advanced tools
Comparing version 2.3.15 to 2.3.16
@@ -6,2 +6,13 @@ # Change Log | ||
## [2.3.16](https://github.com/twilio-labs/paste/compare/@twilio-paste/button@2.3.15...@twilio-paste/button@2.3.16) (2020-10-07) | ||
### Bug Fixes | ||
* **button:** remove center justify content rule if reset ([246c82b](https://github.com/twilio-labs/paste/commit/246c82bb489b4223f9ecbab07a1d14c6325415e4)) | ||
## [2.3.15](https://github.com/twilio-labs/paste/compare/@twilio-paste/button@2.3.14...@twilio-paste/button@2.3.15) (2020-10-07) | ||
@@ -8,0 +19,0 @@ |
@@ -15,2 +15,2 @@ import{forwardRef as o,createElement as e,useMemo as r,Children as t,isValidElement as a,Fragment as n}from"react";import{Box as i,safelySpreadBoxProps as d}from"@twilio-paste/box";import{Stack as l}from"@twilio-paste/stack";import{Spinner as s}from"@twilio-paste/spinner";import{string as c,bool as u,oneOf as h}from"prop-types"; | ||
and limitations under the License. | ||
***************************************************************************** */var g=function(){return(g=Object.assign||function(o){for(var e,r=1,t=arguments.length;r<t;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(o[a]=e[a]);return o}).apply(this,arguments)};function v(o,e){var r={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(o);a<t.length;a++)e.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(o,t[a])&&(r[t[a]]=o[t[a]])}return r}var f={as:c,fullWidth:u,href:c,size:h(["small","default","icon","reset"]).isRequired,tabIndex:h([0,-1]),type:h(["submit","button","reset"]),disabled:u,buttonState:h(["disabled","loading","default"]).isRequired},b={as:c,fullWidth:u,href:c,size:h(["small","default","icon","reset"]),tabIndex:h([0,-1]),type:h(["submit","button","reset"]),disabled:u,loading:u,variant:h(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"]).isRequired},p=require("lodash.merge"),k={appearance:"none",background:"none",display:"inline-block",border:"none",outline:"none",transition:"background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in",fontFamily:"fontFamilyText",fontWeight:"fontWeightSemibold",textDecoration:"none",position:"relative",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"},_active:{textDecoration:"none"}},x={default:p({},k,{cursor:"pointer",_active:{boxShadow:"none"}}),disabled:p({},k,{cursor:"not-allowed"}),loading:p({},k,{cursor:"wait"})},w={default:{paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",borderRadius:"borderRadius20",fontSize:"fontSize30",lineHeight:"lineHeight20"},small:{paddingTop:"space20",paddingBottom:"space20",paddingLeft:"space30",paddingRight:"space30",borderRadius:"borderRadius10",fontSize:"fontSize30",lineHeight:"lineHeight20"},icon:{padding:"space30",borderRadius:"borderRadius20"},reset:{paddingTop:"space0",paddingRight:"space0",paddingBottom:"space0",paddingLeft:"space0",borderWidth:"borderWidth0"}},D=require("lodash.merge"),m={default:D({},x.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimary",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDark",boxShadow:"shadowBorderPrimaryDarker"}}),loading:D({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"}),disabled:D({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryLight",boxShadow:"shadowBorderPrimaryLight"})},y=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),m[a],w[t]))}));y.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(y.propTypes=f),y.displayName="PrimaryButton";var B=require("lodash.merge"),S={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},T={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},L={default:B({},x.default,{color:"colorTextLink",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryDarker"}}),loading:B({},x.loading,g(g({},S),{_hover:S,_active:S,_focus:S})),disabled:B({},x.disabled,g(g({},T),{_hover:T,_active:T,_focus:T}))},_=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),L[a],w[t]))}));_.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(_.propTypes=f),_.displayName="SecondaryButton";var I=require("lodash.merge"),W={default:I({},x.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructive",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDark",boxShadow:"shadowBorderDestructiveDarker"}}),loading:I({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:I({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},P=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),W[a],w[t]))}));P.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(P.propTypes=f),P.displayName="DestructiveButton";var z=require("lodash.merge"),E={default:z({},x.default,{color:"colorTextLinkDestructive",transition:"none",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:z({},x.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:z({},x.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},N=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),E[a],w[t]))}));N.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(N.propTypes=f),N.displayName="DestructiveLinkButton";var C=require("lodash.merge"),O={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},R={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},q={default:C({},x.default,{color:"colorTextLinkDestructive",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveDarker"}}),loading:C({},x.loading,g(g({},O),{_hover:O,_active:O,_focus:O})),disabled:C({},x.disabled,g(g({},R),{_hover:R,_active:R,_focus:R}))},V=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),q[a],w[t]))}));V.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(V.propTypes=f),V.displayName="DestructiveSecondaryButton";var F=require("lodash.merge"),j={default:F({},x.default,{color:"colorTextLink",transition:"none",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:F({},x.loading,{color:"colorTextLinkDarker"}),disabled:F({},x.disabled,{color:"colorTextLinkLight"})},H=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),j[a],w[t]))}));H.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(H.propTypes=f),H.displayName="LinkButton";var M=require("lodash.merge"),U={default:M({},x.default,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverse",_hover:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLighter"},_focus:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowFocusInverse"},_active:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLightest"}}),loading:M({},x.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:M({},x.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},A=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),U[a],w[t]))}));A.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(A.propTypes=f),A.displayName="InverseButton";var Y=require("lodash.merge"),G={default:Y({},x.default,{color:"colorTextInverse",transition:"none",_hover:{color:"colorTextInverseWeaker",textDecoration:"underline"},_focus:{color:"colorTextInverseWeaker",boxShadow:"shadowFocusInverse",textDecoration:"underline"},_active:{textDecoration:"underline"}}),loading:Y({},x.loading,{color:"colorTextInverse"}),disabled:Y({},x.disabled,{color:"colorTextInverseWeaker"})},J=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),G[a],w[t]))}));J.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(J.propTypes=f),J.displayName="InverseLinkButton";var K=require("lodash.merge"),Q={default:K({},x.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:K({},x.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:K({},x.disabled,{fontSize:"inherit",fontWeight:"inherit"})},X=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},d(l),Q[a],w[t]))}));X.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(X.propTypes=f),X.displayName="ResetButton";var Z=function(o){var r=o.buttonState,a=o.children,d=o.showLoading;return e(n,null,e(i,{as:"span",display:"flex",textDecoration:"inherit",opacity:"loading"===r?"0":"1","aria-hidden":"loading"===r?"true":"false",justifyContent:"center"},t.count(a)>1?e(l,{as:"span",orientation:"horizontal",spacing:"space20"},a):a),d?e(i,{as:"span",position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",lineHeight:"lineHeight30"},e(s,{decorative:!1,title:"Loading, please wait.",delay:0})):null)},$=o((function(o,n){var i=o.size,d=o.variant,l=o.children,s=o.disabled,c=o.loading,u=v(o,["size","variant","children","disabled","loading"]);!function(o){var e=o.as,r=o.href,t=o.tabIndex,a=o.variant,n=o.size,i=o.fullWidth,d=o.children,l=null!=r&&""!==r,s=null!=t;if("a"!==e&&l)throw new Error("[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as=\"a\"'.");if("a"===e&&!l)throw new Error("[Paste: Button] Missing href prop for link button.");if("a"===e&&"link"===a)throw new Error("[Paste: Button] This should be a link. Use the [Paste: Anchor] component.");if("reset"===a&&"reset"!==n)throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');if("icon"===n&&i)throw new Error("[Paste: Button] Icon buttons should not be fullWidth.");if(null==d)throw new Error("[Paste: Button] Must have non-null children.");if(s&&0!==t&&-1!==t)throw new Error("[Paste: Button] tabIndex must be 0 or -1.")}(o);var h=function(o,e){return o?"disabled":e?"loading":"default"}(s,c),f="loading"===h,b="default"!==h,p=function(o){switch(o){case"secondary":return _;case"destructive":return P;case"destructive_secondary":return V;case"link":return H;case"destructive_link":return N;case"reset":return X;case"inverse":return A;case"inverse_link":return J;case"primary":default:return y}}(d),k=r((function(){return function(o,e,r){var n="default";return null!=r?n=r:"link"===o||"destructive_link"===o?n="reset":1===t.count(e)&&t.forEach(e,(function(o){a(o)&&"string"==typeof o.type.displayName&&o.type.displayName.includes("Icon")&&(n="icon")})),n}(d,l,i)}),[i,d,l]);return e(p,g({},u,{buttonState:h,disabled:b,size:k,"aria-busy":"loading"===h?"true":"false",className:void 0,style:void 0,ref:n}),e(Z,{buttonState:h,showLoading:f},l))}));$.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&($.propTypes=b),$.displayName="Button";export{$ as Button}; | ||
***************************************************************************** */var v=function(){return(v=Object.assign||function(o){for(var e,r=1,t=arguments.length;r<t;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(o[a]=e[a]);return o}).apply(this,arguments)};function g(o,e){var r={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(o);a<t.length;a++)e.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(o,t[a])&&(r[t[a]]=o[t[a]])}return r}var f={as:c,fullWidth:u,href:c,size:h(["small","default","icon","reset"]).isRequired,tabIndex:h([0,-1]),type:h(["submit","button","reset"]),disabled:u,buttonState:h(["disabled","loading","default"]).isRequired,variant:h(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"])},b={as:c,fullWidth:u,href:c,size:h(["small","default","icon","reset"]),tabIndex:h([0,-1]),type:h(["submit","button","reset"]),disabled:u,loading:u,variant:h(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"]).isRequired},p=require("lodash.merge"),k={appearance:"none",background:"none",display:"inline-block",border:"none",outline:"none",transition:"background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in",fontFamily:"fontFamilyText",fontWeight:"fontWeightSemibold",textDecoration:"none",position:"relative",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"},_active:{textDecoration:"none"}},x={default:p({},k,{cursor:"pointer",_active:{boxShadow:"none"}}),disabled:p({},k,{cursor:"not-allowed"}),loading:p({},k,{cursor:"wait"})},w={default:{paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",borderRadius:"borderRadius20",fontSize:"fontSize30",lineHeight:"lineHeight20"},small:{paddingTop:"space20",paddingBottom:"space20",paddingLeft:"space30",paddingRight:"space30",borderRadius:"borderRadius10",fontSize:"fontSize30",lineHeight:"lineHeight20"},icon:{padding:"space30",borderRadius:"borderRadius20"},reset:{paddingTop:"space0",paddingRight:"space0",paddingBottom:"space0",paddingLeft:"space0",borderWidth:"borderWidth0"}},D=require("lodash.merge"),m={default:D({},x.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimary",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDark",boxShadow:"shadowBorderPrimaryDarker"}}),loading:D({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"}),disabled:D({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryLight",boxShadow:"shadowBorderPrimaryLight"})},y=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),m[a],w[t]))}));y.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(y.propTypes=f),y.displayName="PrimaryButton";var B=require("lodash.merge"),S={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},T={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},L={default:B({},x.default,{color:"colorTextLink",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryDarker"}}),loading:B({},x.loading,v(v({},S),{_hover:S,_active:S,_focus:S})),disabled:B({},x.disabled,v(v({},T),{_hover:T,_active:T,_focus:T}))},_=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),L[a],w[t]))}));_.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(_.propTypes=f),_.displayName="SecondaryButton";var I=require("lodash.merge"),W={default:I({},x.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructive",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDark",boxShadow:"shadowBorderDestructiveDarker"}}),loading:I({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:I({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},P=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),W[a],w[t]))}));P.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(P.propTypes=f),P.displayName="DestructiveButton";var z=require("lodash.merge"),E={default:z({},x.default,{color:"colorTextLinkDestructive",transition:"none",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:z({},x.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:z({},x.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},N=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),E[a],w[t]))}));N.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(N.propTypes=f),N.displayName="DestructiveLinkButton";var C=require("lodash.merge"),O={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},R={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},q={default:C({},x.default,{color:"colorTextLinkDestructive",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveDarker"}}),loading:C({},x.loading,v(v({},O),{_hover:O,_active:O,_focus:O})),disabled:C({},x.disabled,v(v({},R),{_hover:R,_active:R,_focus:R}))},V=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),q[a],w[t]))}));V.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(V.propTypes=f),V.displayName="DestructiveSecondaryButton";var F=require("lodash.merge"),j={default:F({},x.default,{color:"colorTextLink",transition:"none",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:F({},x.loading,{color:"colorTextLinkDarker"}),disabled:F({},x.disabled,{color:"colorTextLinkLight"})},H=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),j[a],w[t]))}));H.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(H.propTypes=f),H.displayName="LinkButton";var M=require("lodash.merge"),U={default:M({},x.default,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverse",_hover:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLighter"},_focus:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowFocusInverse"},_active:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLightest"}}),loading:M({},x.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:M({},x.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},A=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),U[a],w[t]))}));A.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(A.propTypes=f),A.displayName="InverseButton";var Y=require("lodash.merge"),G={default:Y({},x.default,{color:"colorTextInverse",transition:"none",_hover:{color:"colorTextInverseWeaker",textDecoration:"underline"},_focus:{color:"colorTextInverseWeaker",boxShadow:"shadowFocusInverse",textDecoration:"underline"},_active:{textDecoration:"underline"}}),loading:Y({},x.loading,{color:"colorTextInverse"}),disabled:Y({},x.disabled,{color:"colorTextInverseWeaker"})},J=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),G[a],w[t]))}));J.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(J.propTypes=f),J.displayName="InverseLinkButton";var K=require("lodash.merge"),Q={default:K({},x.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:K({},x.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:K({},x.disabled,{fontSize:"inherit",fontWeight:"inherit"})},X=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,l=g(o,["size","buttonState","fullWidth"]);return e(i,v({ref:r,width:n?"100%":"auto"},d(l),Q[a],w[t]))}));X.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(X.propTypes=f),X.displayName="ResetButton";var Z=function(o){var r=o.buttonState,a=o.children,d=o.showLoading,c=o.variant;return e(n,null,e(i,{as:"span",display:"flex",textDecoration:"inherit",opacity:"loading"===r?"0":"1","aria-hidden":"loading"===r?"true":"false",justifyContent:"reset"===c?null:"center"},t.count(a)>1?e(l,{as:"span",orientation:"horizontal",spacing:"space20"},a):a),d?e(i,{as:"span",position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",lineHeight:"lineHeight30"},e(s,{decorative:!1,title:"Loading, please wait.",delay:0})):null)},$=o((function(o,n){var i=o.size,d=o.variant,l=o.children,s=o.disabled,c=o.loading,u=g(o,["size","variant","children","disabled","loading"]);!function(o){var e=o.as,r=o.href,t=o.tabIndex,a=o.variant,n=o.size,i=o.fullWidth,d=o.children,l=null!=r&&""!==r,s=null!=t;if("a"!==e&&l)throw new Error("[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as=\"a\"'.");if("a"===e&&!l)throw new Error("[Paste: Button] Missing href prop for link button.");if("a"===e&&"link"===a)throw new Error("[Paste: Button] This should be a link. Use the [Paste: Anchor] component.");if("reset"===a&&"reset"!==n)throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');if("icon"===n&&i)throw new Error("[Paste: Button] Icon buttons should not be fullWidth.");if(null==d)throw new Error("[Paste: Button] Must have non-null children.");if(s&&0!==t&&-1!==t)throw new Error("[Paste: Button] tabIndex must be 0 or -1.")}(o);var h=function(o,e){return o?"disabled":e?"loading":"default"}(s,c),f="loading"===h,b="default"!==h,p=function(o){switch(o){case"secondary":return _;case"destructive":return P;case"destructive_secondary":return V;case"link":return H;case"destructive_link":return N;case"reset":return X;case"inverse":return A;case"inverse_link":return J;case"primary":default:return y}}(d),k=r((function(){return function(o,e,r){var n="default";return null!=r?n=r:"link"===o||"destructive_link"===o?n="reset":1===t.count(e)&&t.forEach(e,(function(o){a(o)&&"string"==typeof o.type.displayName&&o.type.displayName.includes("Icon")&&(n="icon")})),n}(d,l,i)}),[i,d,l]);return e(p,v({},u,{buttonState:h,disabled:b,size:k,"aria-busy":"loading"===h?"true":"false",className:void 0,style:void 0,ref:n}),e(Z,{buttonState:h,showLoading:f,variant:d},l))}));$.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&($.propTypes=b),$.displayName="Button";export{$ as Button}; |
@@ -1,1 +0,1 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),o=require("@twilio-paste/box"),r=require("@twilio-paste/stack"),t=require("@twilio-paste/spinner"),a=require("prop-types"),n=function(){return(n=Object.assign||function(e){for(var o,r=1,t=arguments.length;r<t;r++)for(var a in o=arguments[r])Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);return e}).apply(this,arguments)};function i(e,o){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++)o.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(r[t[a]]=e[t[a]])}return r}var l={as:a.string,fullWidth:a.bool,href:a.string,size:a.oneOf(["small","default","icon","reset"]).isRequired,tabIndex:a.oneOf([0,-1]),type:a.oneOf(["submit","button","reset"]),disabled:a.bool,buttonState:a.oneOf(["disabled","loading","default"]).isRequired},d={as:a.string,fullWidth:a.bool,href:a.string,size:a.oneOf(["small","default","icon","reset"]),tabIndex:a.oneOf([0,-1]),type:a.oneOf(["submit","button","reset"]),disabled:a.bool,loading:a.bool,variant:a.oneOf(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"]).isRequired},s=require("lodash.merge"),c={appearance:"none",background:"none",display:"inline-block",border:"none",outline:"none",transition:"background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in",fontFamily:"fontFamilyText",fontWeight:"fontWeightSemibold",textDecoration:"none",position:"relative",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"},_active:{textDecoration:"none"}},u={default:s({},c,{cursor:"pointer",_active:{boxShadow:"none"}}),disabled:s({},c,{cursor:"not-allowed"}),loading:s({},c,{cursor:"wait"})},h={default:{paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",borderRadius:"borderRadius20",fontSize:"fontSize30",lineHeight:"lineHeight20"},small:{paddingTop:"space20",paddingBottom:"space20",paddingLeft:"space30",paddingRight:"space30",borderRadius:"borderRadius10",fontSize:"fontSize30",lineHeight:"lineHeight20"},icon:{padding:"space30",borderRadius:"borderRadius20"},reset:{paddingTop:"space0",paddingRight:"space0",paddingBottom:"space0",paddingLeft:"space0",borderWidth:"borderWidth0"}},f=require("lodash.merge"),g={default:f({},u.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimary",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDark",boxShadow:"shadowBorderPrimaryDarker"}}),loading:f({},u.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"}),disabled:f({},u.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryLight",boxShadow:"shadowBorderPrimaryLight"})},v=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),g[l],h[a]))}));v.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(v.propTypes=l),v.displayName="PrimaryButton";var b=require("lodash.merge"),p={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},k={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},x={default:b({},u.default,{color:"colorTextLink",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryDarker"}}),loading:b({},u.loading,n(n({},p),{_hover:p,_active:p,_focus:p})),disabled:b({},u.disabled,n(n({},k),{_hover:k,_active:k,_focus:k}))},w=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),x[l],h[a]))}));w.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(w.propTypes=l),w.displayName="SecondaryButton";var D=require("lodash.merge"),m={default:D({},u.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructive",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDark",boxShadow:"shadowBorderDestructiveDarker"}}),loading:D({},u.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:D({},u.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},B=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),m[l],h[a]))}));B.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(B.propTypes=l),B.displayName="DestructiveButton";var y=require("lodash.merge"),S={default:y({},u.default,{color:"colorTextLinkDestructive",transition:"none",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:y({},u.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:y({},u.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},T=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),S[l],h[a]))}));T.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(T.propTypes=l),T.displayName="DestructiveLinkButton";var L=require("lodash.merge"),_={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},P={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},E={default:L({},u.default,{color:"colorTextLinkDestructive",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveDarker"}}),loading:L({},u.loading,n(n({},_),{_hover:_,_active:_,_focus:_})),disabled:L({},u.disabled,n(n({},P),{_hover:P,_active:P,_focus:P}))},I=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),E[l],h[a]))}));I.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(I.propTypes=l),I.displayName="DestructiveSecondaryButton";var W=require("lodash.merge"),C={default:W({},u.default,{color:"colorTextLink",transition:"none",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:W({},u.loading,{color:"colorTextLinkDarker"}),disabled:W({},u.disabled,{color:"colorTextLinkLight"})},z=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),C[l],h[a]))}));z.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(z.propTypes=l),z.displayName="LinkButton";var N=require("lodash.merge"),O={default:N({},u.default,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverse",_hover:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLighter"},_focus:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowFocusInverse"},_active:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLightest"}}),loading:N({},u.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:N({},u.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},R=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),O[l],h[a]))}));R.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(R.propTypes=l),R.displayName="InverseButton";var q=require("lodash.merge"),V={default:q({},u.default,{color:"colorTextInverse",transition:"none",_hover:{color:"colorTextInverseWeaker",textDecoration:"underline"},_focus:{color:"colorTextInverseWeaker",boxShadow:"shadowFocusInverse",textDecoration:"underline"},_active:{textDecoration:"underline"}}),loading:q({},u.loading,{color:"colorTextInverse"}),disabled:q({},u.disabled,{color:"colorTextInverseWeaker"})},F=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),V[l],h[a]))}));F.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(F.propTypes=l),F.displayName="InverseLinkButton";var j=require("lodash.merge"),H={default:j({},u.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:j({},u.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:j({},u.disabled,{fontSize:"inherit",fontWeight:"inherit"})},M=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),H[l],h[a]))}));M.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(M.propTypes=l),M.displayName="ResetButton";var U=function(a){var n=a.buttonState,i=a.children,l=a.showLoading;return e.createElement(e.Fragment,null,e.createElement(o.Box,{as:"span",display:"flex",textDecoration:"inherit",opacity:"loading"===n?"0":"1","aria-hidden":"loading"===n?"true":"false",justifyContent:"center"},e.Children.count(i)>1?e.createElement(r.Stack,{as:"span",orientation:"horizontal",spacing:"space20"},i):i),l?e.createElement(o.Box,{as:"span",position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",lineHeight:"lineHeight30"},e.createElement(t.Spinner,{decorative:!1,title:"Loading, please wait.",delay:0})):null)},A=e.forwardRef((function(o,r){var t=o.size,a=o.variant,l=o.children,d=o.disabled,s=o.loading,c=i(o,["size","variant","children","disabled","loading"]);!function(e){var o=e.as,r=e.href,t=e.tabIndex,a=e.variant,n=e.size,i=e.fullWidth,l=e.children,d=null!=r&&""!==r,s=null!=t;if("a"!==o&&d)throw new Error("[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as=\"a\"'.");if("a"===o&&!d)throw new Error("[Paste: Button] Missing href prop for link button.");if("a"===o&&"link"===a)throw new Error("[Paste: Button] This should be a link. Use the [Paste: Anchor] component.");if("reset"===a&&"reset"!==n)throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');if("icon"===n&&i)throw new Error("[Paste: Button] Icon buttons should not be fullWidth.");if(null==l)throw new Error("[Paste: Button] Must have non-null children.");if(s&&0!==t&&-1!==t)throw new Error("[Paste: Button] tabIndex must be 0 or -1.")}(o);var u=function(e,o){return e?"disabled":o?"loading":"default"}(d,s),h="loading"===u,f="default"!==u,g=function(e){switch(e){case"secondary":return w;case"destructive":return B;case"destructive_secondary":return I;case"link":return z;case"destructive_link":return T;case"reset":return M;case"inverse":return R;case"inverse_link":return F;case"primary":default:return v}}(a),b=e.useMemo((function(){return function(o,r,t){var a="default";return null!=t?a=t:"link"===o||"destructive_link"===o?a="reset":1===e.Children.count(r)&&e.Children.forEach(r,(function(o){e.isValidElement(o)&&"string"==typeof o.type.displayName&&o.type.displayName.includes("Icon")&&(a="icon")})),a}(a,l,t)}),[t,a,l]);return e.createElement(g,n({},c,{buttonState:u,disabled:f,size:b,"aria-busy":"loading"===u?"true":"false",className:void 0,style:void 0,ref:r}),e.createElement(U,{buttonState:u,showLoading:h},l))}));A.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(A.propTypes=d),A.displayName="Button",exports.Button=A; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),o=require("@twilio-paste/box"),r=require("@twilio-paste/stack"),t=require("@twilio-paste/spinner"),a=require("prop-types"),n=function(){return(n=Object.assign||function(e){for(var o,r=1,t=arguments.length;r<t;r++)for(var a in o=arguments[r])Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);return e}).apply(this,arguments)};function i(e,o){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++)o.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(r[t[a]]=e[t[a]])}return r}var l={as:a.string,fullWidth:a.bool,href:a.string,size:a.oneOf(["small","default","icon","reset"]).isRequired,tabIndex:a.oneOf([0,-1]),type:a.oneOf(["submit","button","reset"]),disabled:a.bool,buttonState:a.oneOf(["disabled","loading","default"]).isRequired,variant:a.oneOf(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"])},d={as:a.string,fullWidth:a.bool,href:a.string,size:a.oneOf(["small","default","icon","reset"]),tabIndex:a.oneOf([0,-1]),type:a.oneOf(["submit","button","reset"]),disabled:a.bool,loading:a.bool,variant:a.oneOf(["primary","secondary","destructive","destructive_link","destructive_secondary","link","inverse_link","inverse","reset"]).isRequired},s=require("lodash.merge"),c={appearance:"none",background:"none",display:"inline-block",border:"none",outline:"none",transition:"background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in",fontFamily:"fontFamilyText",fontWeight:"fontWeightSemibold",textDecoration:"none",position:"relative",_hover:{textDecoration:"none"},_focus:{textDecoration:"none",boxShadow:"shadowFocus"},_active:{textDecoration:"none"}},u={default:s({},c,{cursor:"pointer",_active:{boxShadow:"none"}}),disabled:s({},c,{cursor:"not-allowed"}),loading:s({},c,{cursor:"wait"})},h={default:{paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space40",borderRadius:"borderRadius20",fontSize:"fontSize30",lineHeight:"lineHeight20"},small:{paddingTop:"space20",paddingBottom:"space20",paddingLeft:"space30",paddingRight:"space30",borderRadius:"borderRadius10",fontSize:"fontSize30",lineHeight:"lineHeight20"},icon:{padding:"space30",borderRadius:"borderRadius20"},reset:{paddingTop:"space0",paddingRight:"space0",paddingBottom:"space0",paddingLeft:"space0",borderWidth:"borderWidth0"}},f=require("lodash.merge"),v={default:f({},u.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimary",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDark",boxShadow:"shadowBorderPrimaryDarker"}}),loading:f({},u.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"}),disabled:f({},u.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryLight",boxShadow:"shadowBorderPrimaryLight"})},g=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),v[l],h[a]))}));g.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(g.propTypes=l),g.displayName="PrimaryButton";var p=require("lodash.merge"),b={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},k={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},x={default:p({},u.default,{color:"colorTextLink",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimary",_hover:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowBorderPrimaryDarker"},_focus:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryDarker"}}),loading:p({},u.loading,n(n({},b),{_hover:b,_active:b,_focus:b})),disabled:p({},u.disabled,n(n({},k),{_hover:k,_active:k,_focus:k}))},w=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),x[l],h[a]))}));w.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(w.propTypes=l),w.displayName="SecondaryButton";var m=require("lodash.merge"),D={default:m({},u.default,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructive",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowFocus"},_active:{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDark",boxShadow:"shadowBorderDestructiveDarker"}}),loading:m({},u.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:m({},u.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},y=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),D[l],h[a]))}));y.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(y.propTypes=l),y.displayName="DestructiveButton";var B=require("lodash.merge"),S={default:B({},u.default,{color:"colorTextLinkDestructive",transition:"none",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:B({},u.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:B({},u.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},T=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),S[l],h[a]))}));T.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(T.propTypes=l),T.displayName="DestructiveLinkButton";var L=require("lodash.merge"),_={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},P={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},E={default:L({},u.default,{color:"colorTextLinkDestructive",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructive",_hover:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowBorderDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLightest",boxShadow:"shadowFocus"},_active:{color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveDarker"}}),loading:L({},u.loading,n(n({},_),{_hover:_,_active:_,_focus:_})),disabled:L({},u.disabled,n(n({},P),{_hover:P,_active:P,_focus:P}))},I=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),E[l],h[a]))}));I.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(I.propTypes=l),I.displayName="DestructiveSecondaryButton";var W=require("lodash.merge"),C={default:W({},u.default,{color:"colorTextLink",transition:"none",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:W({},u.loading,{color:"colorTextLinkDarker"}),disabled:W({},u.disabled,{color:"colorTextLinkLight"})},z=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),C[l],h[a]))}));z.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(z.propTypes=l),z.displayName="LinkButton";var N=require("lodash.merge"),O={default:N({},u.default,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverse",_hover:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLighter"},_focus:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowFocusInverse"},_active:{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseLightest"}}),loading:N({},u.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:N({},u.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},R=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),O[l],h[a]))}));R.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(R.propTypes=l),R.displayName="InverseButton";var q=require("lodash.merge"),V={default:q({},u.default,{color:"colorTextInverse",transition:"none",_hover:{color:"colorTextInverseWeaker",textDecoration:"underline"},_focus:{color:"colorTextInverseWeaker",boxShadow:"shadowFocusInverse",textDecoration:"underline"},_active:{textDecoration:"underline"}}),loading:q({},u.loading,{color:"colorTextInverse"}),disabled:q({},u.disabled,{color:"colorTextInverseWeaker"})},F=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),V[l],h[a]))}));F.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(F.propTypes=l),F.displayName="InverseLinkButton";var j=require("lodash.merge"),H={default:j({},u.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:j({},u.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:j({},u.disabled,{fontSize:"inherit",fontWeight:"inherit"})},M=e.forwardRef((function(r,t){var a=r.size,l=r.buttonState,d=r.fullWidth,s=i(r,["size","buttonState","fullWidth"]);return e.createElement(o.Box,n({ref:t,width:d?"100%":"auto"},o.safelySpreadBoxProps(s),H[l],h[a]))}));M.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(M.propTypes=l),M.displayName="ResetButton";var U=function(a){var n=a.buttonState,i=a.children,l=a.showLoading,d=a.variant;return e.createElement(e.Fragment,null,e.createElement(o.Box,{as:"span",display:"flex",textDecoration:"inherit",opacity:"loading"===n?"0":"1","aria-hidden":"loading"===n?"true":"false",justifyContent:"reset"===d?null:"center"},e.Children.count(i)>1?e.createElement(r.Stack,{as:"span",orientation:"horizontal",spacing:"space20"},i):i),l?e.createElement(o.Box,{as:"span",position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",lineHeight:"lineHeight30"},e.createElement(t.Spinner,{decorative:!1,title:"Loading, please wait.",delay:0})):null)},A=e.forwardRef((function(o,r){var t=o.size,a=o.variant,l=o.children,d=o.disabled,s=o.loading,c=i(o,["size","variant","children","disabled","loading"]);!function(e){var o=e.as,r=e.href,t=e.tabIndex,a=e.variant,n=e.size,i=e.fullWidth,l=e.children,d=null!=r&&""!==r,s=null!=t;if("a"!==o&&d)throw new Error("[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as=\"a\"'.");if("a"===o&&!d)throw new Error("[Paste: Button] Missing href prop for link button.");if("a"===o&&"link"===a)throw new Error("[Paste: Button] This should be a link. Use the [Paste: Anchor] component.");if("reset"===a&&"reset"!==n)throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');if("icon"===n&&i)throw new Error("[Paste: Button] Icon buttons should not be fullWidth.");if(null==l)throw new Error("[Paste: Button] Must have non-null children.");if(s&&0!==t&&-1!==t)throw new Error("[Paste: Button] tabIndex must be 0 or -1.")}(o);var u=function(e,o){return e?"disabled":o?"loading":"default"}(d,s),h="loading"===u,f="default"!==u,v=function(e){switch(e){case"secondary":return w;case"destructive":return y;case"destructive_secondary":return I;case"link":return z;case"destructive_link":return T;case"reset":return M;case"inverse":return R;case"inverse_link":return F;case"primary":default:return g}}(a),p=e.useMemo((function(){return function(o,r,t){var a="default";return null!=t?a=t:"link"===o||"destructive_link"===o?a="reset":1===e.Children.count(r)&&e.Children.forEach(r,(function(o){e.isValidElement(o)&&"string"==typeof o.type.displayName&&o.type.displayName.includes("Icon")&&(a="icon")})),a}(a,l,t)}),[t,a,l]);return e.createElement(v,n({},c,{buttonState:u,disabled:f,size:p,"aria-busy":"loading"===u?"true":"false",className:void 0,style:void 0,ref:r}),e.createElement(U,{buttonState:u,showLoading:h,variant:a},l))}));A.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(A.propTypes=d),A.displayName="Button",exports.Button=A; |
@@ -11,2 +11,3 @@ /// <reference types="react" /> | ||
showLoading: boolean; | ||
variant?: ButtonVariants; | ||
} | ||
@@ -22,2 +23,3 @@ export declare const DirectButtonPropTypes: { | ||
buttonState: any; | ||
variant: any; | ||
}; | ||
@@ -24,0 +26,0 @@ export interface DirectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { |
{ | ||
"name": "@twilio-paste/button", | ||
"version": "2.3.15", | ||
"version": "2.3.16", | ||
"category": "interaction", | ||
@@ -34,10 +34,10 @@ "status": "production", | ||
"peerDependencies": { | ||
"@twilio-paste/box": "^2.11.1", | ||
"@twilio-paste/box": "^2.11.2", | ||
"@twilio-paste/design-tokens": "^6.3.3", | ||
"@twilio-paste/icons": "^3.5.6", | ||
"@twilio-paste/spinner": "^2.0.20", | ||
"@twilio-paste/stack": "^0.1.42", | ||
"@twilio-paste/style-props": "^1.8.1", | ||
"@twilio-paste/icons": "^3.5.7", | ||
"@twilio-paste/spinner": "^2.0.21", | ||
"@twilio-paste/stack": "^0.1.43", | ||
"@twilio-paste/style-props": "^1.8.2", | ||
"@twilio-paste/styling-library": "^0.1.2", | ||
"@twilio-paste/theme": "^3.2.22", | ||
"@twilio-paste/theme": "^3.2.23", | ||
"@twilio-paste/types": "^3.0.25", | ||
@@ -50,14 +50,14 @@ "prop-types": "^15.7.2", | ||
"devDependencies": { | ||
"@twilio-paste/absolute": "^2.0.75", | ||
"@twilio-paste/box": "^2.11.2", | ||
"@twilio-paste/design-tokens": "^6.3.3", | ||
"@twilio-paste/icons": "^3.5.7", | ||
"@twilio-paste/spinner": "^2.0.21", | ||
"@twilio-paste/stack": "^0.1.43", | ||
"@twilio-paste/style-props": "^1.8.2", | ||
"@twilio-paste/absolute": "^2.0.76", | ||
"@twilio-paste/box": "^2.11.3", | ||
"@twilio-paste/design-tokens": "^6.3.4", | ||
"@twilio-paste/icons": "^3.5.8", | ||
"@twilio-paste/spinner": "^2.0.22", | ||
"@twilio-paste/stack": "^0.1.44", | ||
"@twilio-paste/style-props": "^1.8.3", | ||
"@twilio-paste/styling-library": "^0.1.2", | ||
"@twilio-paste/theme": "^3.2.23", | ||
"@twilio-paste/types": "^3.0.25" | ||
"@twilio-paste/theme": "^3.2.24", | ||
"@twilio-paste/types": "^3.0.26" | ||
}, | ||
"gitHead": "9d1de14e700e162b4ef3dabfc123c514070adf17" | ||
"gitHead": "099694d89be8b73b83fb7d5496c5d659af26c08a" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
122890
402