Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@twilio-paste/button
Advanced tools
@twilio-paste/button - npm Package Compare versions
Comparing version 2.1.6 to 2.2.0
@@ -6,2 +6,13 @@ # Change Log | ||
| # [2.2.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/button@2.1.6...@twilio-paste/button@2.2.0) (2020-08-31) | ||
| ### Features | ||
| * **button:** add desctructive_secondary variant ([52dbfec](https://github.com/twilio-labs/paste/commit/52dbfec786f63d11090c8082cee1132951ad18ce)) | ||
| ## [2.1.6](https://github.com/twilio-labs/paste/compare/@twilio-paste/button@2.1.5...@twilio-paste/button@2.1.6) (2020-08-31) | ||
@@ -8,0 +19,0 @@ |
@@ -1,2 +0,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 l}from"@twilio-paste/box";import{Stack as d}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"; | ||
| import{forwardRef as o,createElement as e,useMemo as r,Children as t,isValidElement as a,Fragment as i}from"react";import{Box as n,safelySpreadBoxProps as d}from"@twilio-paste/box";import{Stack as l}from"@twilio-paste/stack";import{Spinner as c}from"@twilio-paste/spinner";import{string as s,bool as u,oneOf as h}from"prop-types"; | ||
| /*! ***************************************************************************** | ||
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation. All rights reserved. | ||
| 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 f(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 b={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},p={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","link","reset"]).isRequired},v=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:v({},k,{cursor:"pointer",_active:{boxShadow:"none"}}),disabled:v({},k,{cursor:"not-allowed"}),loading:v({},k,{cursor:"wait"})},m={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"}},w=require("lodash.merge"),y={default:w({},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:w({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryDarker",boxShadow:"shadowBorderPrimaryDarker"}),disabled:w({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundPrimaryLight",boxShadow:"shadowBorderPrimaryLight"})},D=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),y[a],m[t]))}));D.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(D.propTypes=b),D.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,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),L[a],m[t]))}));_.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(_.propTypes=b),_.displayName="SecondaryButton";var P=require("lodash.merge"),I={default:P({},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:P({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:P({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},W=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),I[a],m[t]))}));W.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(W.propTypes=b),W.displayName="DestructiveButton";var z=require("lodash.merge"),E={default:z({},x.default,{color:"colorTextLink",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:z({},x.loading,{color:"colorTextLinkDarker"}),disabled:z({},x.disabled,{color:"colorTextLinkLight"})},N=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),E[a],m[t]))}));N.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(N.propTypes=b),N.displayName="LinkButton";var C=require("lodash.merge"),O={default:C({},x.default,{color:"colorTextLinkDestructive",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:C({},x.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:C({},x.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},R=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),O[a],m[t]))}));R.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(R.propTypes=b),R.displayName="DestructiveLinkButton";var q=require("lodash.merge"),V={default:q({},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:q({},x.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:q({},x.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},j=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),V[a],m[t]))}));j.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(j.propTypes=b),j.displayName="InverseButton";var F=require("lodash.merge"),H={default:F({},x.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:F({},x.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:F({},x.disabled,{fontSize:"inherit",fontWeight:"inherit"})},M=o((function(o,r){var t=o.size,a=o.buttonState,n=o.fullWidth,d=f(o,["size","buttonState","fullWidth"]);return e(i,g({ref:r,width:n?"100%":"auto"},l(d),H[a],m[t]))}));M.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(M.propTypes=b),M.displayName="ResetButton";var U=function(o){var r=o.buttonState,a=o.children,l=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"},t.count(a)>1?e(d,{as:"span",orientation:"horizontal",spacing:"space20"},a):a),l?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)},A=o((function(o,n){var i=o.size,l=o.variant,d=o.children,s=o.disabled,c=o.loading,u=f(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,l=o.children,d=null!=r&&""!==r,s=null!=t;if("a"!==e&&d)throw new Error("[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as=\"a\"'.");if("a"===e&&!d)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==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 h=function(o,e){return o?"disabled":e?"loading":"default"}(s,c),b="loading"===h,p="default"!==h,v=function(o){switch(o){case"secondary":return _;case"destructive":return W;case"link":return N;case"destructive_link":return R;case"reset":return M;case"inverse":return j;case"primary":default:return D}}(l),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}(l,d,i)}),[i,l,d]);return e(v,g({},u,{buttonState:h,disabled:p,size:k,"aria-busy":"loading"===h?"true":"false",className:void 0,style:void 0,ref:n}),e(U,{buttonState:h,showLoading:b},d))}));A.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(A.propTypes=p),A.displayName="Button";export{A as Button}; | ||
| ***************************************************************************** */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 b={as:s,fullWidth:u,href:s,size:h(["small","default","icon","reset"]).isRequired,tabIndex:h([0,-1]),type:h(["submit","button","reset"]),disabled:u,buttonState:h(["disabled","loading","default"]).isRequired},f={as:s,fullWidth:u,href:s,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","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,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),m[a],w[t]))}));y.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(y.propTypes=b),y.displayName="PrimaryButton";var B=require("lodash.merge"),S={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},L={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},T={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({},L),{_hover:L,_active:L,_focus:L}))},_=o((function(o,r){var t=o.size,a=o.buttonState,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),T[a],w[t]))}));_.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(_.propTypes=b),_.displayName="SecondaryButton";var P=require("lodash.merge"),W={default:P({},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:P({},x.loading,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveDarker",boxShadow:"shadowBorderDestructiveDarker"}),disabled:P({},x.disabled,{color:"colorTextInverse",backgroundColor:"colorBackgroundDestructiveLight",boxShadow:"shadowBorderDestructiveLight"})},I=o((function(o,r){var t=o.size,a=o.buttonState,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),W[a],w[t]))}));I.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(I.propTypes=b),I.displayName="DestructiveButton";var z=require("lodash.merge"),C={default:z({},x.default,{color:"colorTextLinkDestructive",_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"}})},E=o((function(o,r){var t=o.size,a=o.buttonState,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),C[a],w[t]))}));E.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(E.propTypes=b),E.displayName="DestructiveLinkButton";var N=require("lodash.merge"),O={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},R={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},q={default:N({},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:N({},x.loading,g(g({},O),{_hover:O,_active:O,_focus:O})),disabled:N({},x.disabled,g(g({},R),{_hover:R,_active:R,_focus:R}))},V=o((function(o,r){var t=o.size,a=o.buttonState,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),q[a],w[t]))}));V.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(V.propTypes=b),V.displayName="DestructiveSecondaryButton";var F=require("lodash.merge"),j={default:F({},x.default,{color:"colorTextLink",_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,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),j[a],w[t]))}));H.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(H.propTypes=b),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,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),U[a],w[t]))}));A.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(A.propTypes=b),A.displayName="InverseButton";var Y=require("lodash.merge"),G={default:Y({},x.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:Y({},x.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:Y({},x.disabled,{fontSize:"inherit",fontWeight:"inherit"})},J=o((function(o,r){var t=o.size,a=o.buttonState,i=o.fullWidth,l=v(o,["size","buttonState","fullWidth"]);return e(n,g({ref:r,width:i?"100%":"auto"},d(l),G[a],w[t]))}));J.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(J.propTypes=b),J.displayName="ResetButton";var K=function(o){var r=o.buttonState,a=o.children,d=o.showLoading;return e(i,null,e(n,{as:"span",display:"flex",textDecoration:"inherit",opacity:"loading"===r?"0":"1","aria-hidden":"loading"===r?"true":"false"},t.count(a)>1?e(l,{as:"span",orientation:"horizontal",spacing:"space20"},a):a),d?e(n,{as:"span",position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"center",alignItems:"center",lineHeight:"lineHeight30"},e(c,{decorative:!1,title:"Loading, please wait.",delay:0})):null)},Q=o((function(o,i){var n=o.size,d=o.variant,l=o.children,c=o.disabled,s=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,i=o.size,n=o.fullWidth,d=o.children,l=null!=r&&""!==r,c=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"!==i)throw new Error('[Paste: Button] The "RESET" variant can only be used with the "RESET" size.');if("icon"===i&&n)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(c&&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"}(c,s),b="loading"===h,f="default"!==h,p=function(o){switch(o){case"secondary":return _;case"destructive":return I;case"destructive_secondary":return V;case"link":return H;case"destructive_link":return E;case"reset":return J;case"inverse":return A;case"primary":default:return y}}(d),k=r((function(){return function(o,e,r){var i="default";return null!=r?i=r:"link"===o||"destructive_link"===o?i="reset":1===t.count(e)&&t.forEach(e,(function(o){a(o)&&"string"==typeof o.type.displayName&&o.type.displayName.includes("Icon")&&(i="icon")})),i}(d,l,n)}),[n,d,l]);return e(p,g({},u,{buttonState:h,disabled:f,size:k,"aria-busy":"loading"===h?"true":"false",className:void 0,style:void 0,ref:i}),e(K,{buttonState:h,showLoading:b},l))}));Q.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(Q.propTypes=f),Q.displayName="Button";export{Q 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","link","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"})},p=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]))}));p.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(p.propTypes=l),p.displayName="PrimaryButton";var b=require("lodash.merge"),v={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({},v),{_hover:v,_active:v,_focus:v})),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 m=require("lodash.merge"),y={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"})},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),y[l],h[a]))}));B.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(B.propTypes=l),B.displayName="DestructiveButton";var D=require("lodash.merge"),S={default:D({},u.default,{color:"colorTextLink",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:D({},u.loading,{color:"colorTextLinkDarker"}),disabled:D({},u.disabled,{color:"colorTextLinkLight"})},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="LinkButton";var L=require("lodash.merge"),P={default:L({},u.default,{color:"colorTextLinkDestructive",_hover:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"},_active:{color:"colorTextLinkDestructiveDarker",textDecoration:"underline"},_focus:{color:"colorTextLinkDestructiveDark",textDecoration:"underline"}}),loading:L({},u.loading,{color:"colorTextLinkDestructiveDarker",_hover:{color:"colorTextLinkDestructiveDarker"},_active:{color:"colorTextLinkDestructiveDarker"},_focus:{color:"colorTextLinkDestructiveDarker"}}),disabled:L({},u.disabled,{color:"colorTextLinkDestructiveLight",_hover:{color:"colorTextLinkDestructiveLight"},_active:{color:"colorTextLinkDestructiveLight"},_focus:{color:"colorTextLinkDestructiveLight"}})},_=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),P[l],h[a]))}));_.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(_.propTypes=l),_.displayName="DestructiveLinkButton";var E=require("lodash.merge"),I={default:E({},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:E({},u.loading,{color:"colorTextInverse",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverseLight",boxShadow:"shadowBorderInverseDarker"}),disabled:E({},u.disabled,{color:"colorTextInverseWeaker",fontWeight:"fontWeightSemibold",backgroundColor:"colorBackgroundInverse",boxShadow:"shadowBorderInverseDarker"})},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),I[l],h[a]))}));W.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(W.propTypes=l),W.displayName="InverseButton";var z=require("lodash.merge"),O={default:z({},u.default,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:z({},u.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:z({},u.disabled,{fontSize:"inherit",fontWeight:"inherit"})},C=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]))}));C.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(C.propTypes=l),C.displayName="ResetButton";var N=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"},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)},R=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"link":return T;case"destructive_link":return _;case"reset":return C;case"inverse":return W;case"primary":default:return p}}(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(N,{buttonState:u,showLoading:h},l))}));R.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(R.propTypes=d),R.displayName="Button",exports.Button=R; | ||
| "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","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"})},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),g[l],h[a]))}));b.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(b.propTypes=l),b.displayName="PrimaryButton";var v=require("lodash.merge"),p={color:"colorTextLinkDarker",backgroundColor:"colorBackgroundPrimaryLighter",boxShadow:"shadowBorderPrimaryLighter"},k={color:"colorTextLinkLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderPrimaryLight"},x={default:v({},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:v({},u.loading,n(n({},p),{_hover:p,_active:p,_focus:p})),disabled:v({},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",_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"}})},L=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]))}));L.defaultProps={as:"a"},"development"===process.env.NODE_ENV&&(L.propTypes=l),L.displayName="DestructiveLinkButton";var T=require("lodash.merge"),_={color:"colorTextLinkDestructiveDarker",backgroundColor:"colorBackgroundDestructiveLighter",boxShadow:"shadowBorderDestructiveLighter"},P={color:"colorTextLinkDestructiveLight",backgroundColor:"colorBackgroundBody",boxShadow:"shadowBorderDestructiveLight"},E={default:T({},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:T({},u.loading,n(n({},_),{_hover:_,_active:_,_focus:_})),disabled:T({},u.disabled,n(n({},P),{_hover:P,_active:P,_focus:P}))},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),E[l],h[a]))}));W.defaultProps={as:"button"},"development"===process.env.NODE_ENV&&(W.propTypes=l),W.displayName="DestructiveSecondaryButton";var I=require("lodash.merge"),C={default:I({},u.default,{color:"colorTextLink",_hover:{color:"colorTextLinkDark",textDecoration:"underline"},_focus:{color:"colorTextLinkDark",textDecoration:"underline"},_active:{color:"colorTextLinkDarker",textDecoration:"underline"}}),loading:I({},u.loading,{color:"colorTextLinkDarker"}),disabled:I({},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,{fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),loading:q({},u.loading,{fontSize:"inherit",fontWeight:"inherit"}),disabled:q({},u.disabled,{fontSize:"inherit",fontWeight:"inherit"})},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:"button"},"development"===process.env.NODE_ENV&&(F.propTypes=l),F.displayName="ResetButton";var j=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"},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)},H=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 W;case"link":return z;case"destructive_link":return L;case"reset":return F;case"inverse":return R;case"primary":default:return b}}(a),v=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:v,"aria-busy":"loading"===u?"true":"false",className:void 0,style:void 0,ref:r}),e.createElement(j,{buttonState:u,showLoading:h},l))}));H.defaultProps={as:"button",fullWidth:!1,disabled:!1,loading:!1,type:"button",variant:"primary"},"development"===process.env.NODE_ENV&&(H.propTypes=d),H.displayName="Button",exports.Button=H; |
@@ -5,3 +5,3 @@ /// <reference types="react" /> | ||
| export declare type ButtonSizes = 'small' | 'default' | 'icon' | 'reset'; | ||
| export declare type ButtonVariants = 'primary' | 'secondary' | 'destructive' | 'destructive_link' | 'link' | 'inverse' | 'reset'; | ||
| export declare type ButtonVariants = 'primary' | 'secondary' | 'destructive' | 'destructive_link' | 'destructive_secondary' | 'link' | 'inverse' | 'reset'; | ||
| export declare type ButtonStates = 'disabled' | 'loading' | 'default'; | ||
@@ -8,0 +8,0 @@ export declare type ButtonTabIndexes = 0 | -1; |
| { | ||
| "name": "@twilio-paste/button", | ||
| "version": "2.1.6", | ||
| "version": "2.2.0", | ||
| "category": "interaction", | ||
@@ -34,18 +34,2 @@ "status": "production", | ||
| "peerDependencies": { | ||
| "@twilio-paste/box": "^2.9.4", | ||
| "@twilio-paste/design-tokens": "^6.2.0", | ||
| "@twilio-paste/icons": "^3.1.0", | ||
| "@twilio-paste/spinner": "^2.0.5", | ||
| "@twilio-paste/stack": "^0.1.31", | ||
| "@twilio-paste/style-props": "^1.5.3", | ||
| "@twilio-paste/styling-library": "^0.1.2", | ||
| "@twilio-paste/theme": "^3.2.16", | ||
| "@twilio-paste/types": "^3.0.19", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "react-uid": "^2.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@twilio-paste/absolute": "^2.0.64", | ||
| "@twilio-paste/box": "^2.9.5", | ||
@@ -59,5 +43,21 @@ "@twilio-paste/design-tokens": "^6.2.1", | ||
| "@twilio-paste/theme": "^3.2.17", | ||
| "@twilio-paste/types": "^3.0.20" | ||
| "@twilio-paste/types": "^3.0.20", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "react-uid": "^2.2.0" | ||
| }, | ||
| "gitHead": "42c85440ee93e03d376aff6262daa43ae537b0b4" | ||
| "devDependencies": { | ||
| "@twilio-paste/absolute": "^2.0.65", | ||
| "@twilio-paste/box": "^2.9.6", | ||
| "@twilio-paste/design-tokens": "^6.2.2", | ||
| "@twilio-paste/icons": "^3.1.2", | ||
| "@twilio-paste/spinner": "^2.0.7", | ||
| "@twilio-paste/stack": "^0.1.33", | ||
| "@twilio-paste/style-props": "^1.5.5", | ||
| "@twilio-paste/styling-library": "^0.1.2", | ||
| "@twilio-paste/theme": "^3.2.18", | ||
| "@twilio-paste/types": "^3.0.21" | ||
| }, | ||
| "gitHead": "fec8793dd2a7b63a2c88e5334e11a65d560b1b6d" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by8.15%
111803
- Number of package files
- increased by7.69%
28
- Lines of code
- increased by9.44%
371
Worsened metrics
- Number of low supply chain risk alerts
- increased by11.76%
19
No dependency changes