@contentful/f36-button - npm Package Compare versions

Comparing version 4.0.1-next-v4-6660.2272 to 4.0.1-next-v4-6664.2273

dist/main.js

@@ -1,2 +0,2 @@
-var{cx:e,css:r}=require("emotion"),o=require("react"),t=g(o),{useState:n}=o,{Box:i,Flex:a,usePrimitive:s}=require("@contentful/f36-core"),l=g(require("@contentful/f36-tokens")),d=g(require("@babel/runtime/helpers/extends")),{Spinner:c}=require("@contentful/f36-spinner");function u(e,r,o,t){Object.defineProperty(e,r,{get:o,set:t,enumerable:!0,configurable:!0})}function g(e){return e&&e.__esModule?e.default:e}var b={};u(b,"ButtonGroup",(()=>m)),u(b,"ToggleButton",(()=>S)),u(b,"Button",(()=>D));const f=({variant:e,withDivider:r,spacing:o})=>{if("spaced"===e)return{marginLeft:l[o],marginRight:l[o],"&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}};const t=h(r);return{borderRadius:"0 !important",marginRight:"-1px",zIndex:l.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${l.borderRadiusMedium} !important`,borderTopLeftRadius:`${l.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${l.borderRadiusMedium} !important`,borderTopRightRadius:`${l.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:l.zIndexDefault+1},...t}},h=e=>e?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:l.colorWhite,height:"60%",left:"-1px",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{height:"100%"}}}:{};function p(o,n){const{variant:a="collapsed",withDivider:s,testId:l="cf-ui-button-group",children:d,className:c,spacing:u}=o,g=(({variant:e,withDivider:o,spacing:t="spacingS"})=>({buttonGroup:r({name:"vxcmzt",styles:"display:inline-flex;"}),groupContent:r(f({variant:e,withDivider:o,spacing:t}),"")}))({variant:a,withDivider:s,spacing:u});return t.createElement(i,{as:"div","data-test-id":l,ref:n,className:e(g.buttonGroup,c)},t.Children.map(d,((r,o)=>r?t.cloneElement(r,{key:o,className:e(g.groupContent,r.props.className)}):null)))}const m=t.forwardRef(p),v=e=>{switch(e){case"primary":return{transition:"none",", &:hover":{backgroundColor:l.blue700,borderColor:l.blue700}};case"secondary":return{transition:"none",", &:hover":{backgroundColor:l.gray200}};case"positive":return{transition:"none",", &:hover":{backgroundColor:l.green700,borderColor:l.green700}};case"negative":return{transition:"none",", &:hover":{backgroundColor:l.red800,borderColor:l.red800}};case"transparent":return{transition:"none",", &:hover":{backgroundColor:l.gray100,borderColor:l.gray100}};default:return{}}},C=e=>{switch(e){case"primary":return{color:l.colorWhite,backgroundColor:l.blue500,borderColor:l.blue500,"&:hover":{backgroundColor:l.blue600,borderColor:l.blue600},"&:active":v(e),"&:focus":{borderColor:l.blue600,boxShadow:l.glowPrimary}};case"secondary":return{color:l.gray900,backgroundColor:l.colorWhite,borderColor:l.gray300,"&:hover":{backgroundColor:l.gray100},"&:active":v(e),"&:focus":{boxShadow:l.glowMuted}};case"positive":return{color:l.colorWhite,backgroundColor:l.colorPositive,borderColor:l.colorPositive,"&:hover":{backgroundColor:l.green600,borderColor:l.green600},"&:active":v(e),"&:focus":{borderColor:l.green600,boxShadow:l.glowPositive}};case"negative":return{color:l.colorWhite,backgroundColor:l.red600,borderColor:l.red600,"&:hover":{backgroundColor:l.red700,borderColor:l.red700},"&:active":v(e),"&:focus":{borderColor:l.red700,boxShadow:l.glowNegative}};case"transparent":return{color:l.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:l.gray100,color:l.gray900},"&:active":v(e),"&:focus":{backgroundColor:"none",boxShadow:l.glowMuted}};default:return{}}},x=e=>{switch(e){case"small":return{fontSize:l.fontSizeM,lineHeight:l.lineHeightCondensed,padding:`${l.spacing2Xs} ${l.spacingS}`,minHeight:"32px"};case"medium":return{fontSize:l.fontSizeM,lineHeight:l.lineHeightCondensed,padding:`${l.spacingXs} ${l.spacingM}`,minHeight:"40px"};case"large":return{fontSize:l.fontSizeXl,lineHeight:l.lineHeightXl,padding:`${l.spacingXs} ${l.spacingM}`,minHeight:"48px"};default:return{}}},y=({alignIcon:e,hasChildren:o})=>{const t={start:{marginRight:l.spacing2Xs},end:{marginLeft:l.spacing2Xs}};return r(o?t[e]:{},"")},w="button",k=(o,n)=>{const u={button:({variant:e,size:o,isActive:t,isDisabled:n,isFullWidth:i})=>r({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:l.borderRadiusMedium,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,display:i?"flex":"inline-flex",minWidth:i?"100%":"auto",justifyContent:"center",alignItems:"center",fontWeight:l.fontWeightMedium,outline:"none",textDecoration:"none",transition:`background ${l.transitionDurationShort} ${l.transitionEasingDefault},\n        opacity ${l.transitionDurationDefault} ${l.transitionEasingDefault},\n        border-color ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,svg:{fill:"currentColor"},...C(e),...x(o),...t?v(e):{}},""),buttonIcon:y,dropdownIcon:r({marginLeft:l.spacingXs,fill:"currentColor"},"")},{as:g=w,children:b,className:f,testId:h="cf-ui-button",variant:p="secondary",size:m="medium",icon:k,isActive:D,isDisabled:z,isLoading:R,isFullWidth:S,alignIcon:I="start",style:E,...$}=o,{Element:M,primitiveProps:W}=s({testId:h,as:g,className:f,style:E}),N=e(u.button({variant:p,size:m,isActive:D,isDisabled:z,isFullWidth:S}),f),H=k&&!R&&t.createElement(a,{as:"span"},t.cloneElement(k,{className:u.buttonIcon({alignIcon:I,hasChildren:!!b}),size:""+("large"===m?"medium":"small")})),P=t.createElement(t.Fragment,null,k&&"start"===I&&H,t.createElement(a,{as:"span"},b),k&&"end"===I&&H,R&&t.createElement(i,{as:"span",marginLeft:b||!R?"spacingXs":"none"},t.createElement(c,{customSize:18,variant:"secondary"===p?"default":"white"})));return"a"===g?t.createElement(M,d({},$,W,{className:N,ref:n}),P):t.createElement(M,d({type:"button"},$,W,{disabled:z,className:N,ref:n}),P)},D=t.forwardRef(k),z=({isActive:e,isDisabled:r})=>{const o={background:l.blue100,borderColor:l.blue600,"&":{zIndex:l.zIndexDefault+1},"&:hover":{background:l.blue100}},t={background:l.colorWhite,"&:hover":{background:l.colorWhite,borderColor:r?l.gray300:l.blue600},"&&:focus":{boxShadow:l.glowPrimary,zIndex:l.zIndexDefault+2},"&:active, &:active:hover":r?{background:l.colorWhite,borderColor:l.gray300}:{background:l.blue100,borderColor:l.blue600}};return e?{...t,...o}:t};function R(o,i){const{testId:a="cf-ui-toggle-button",children:s,className:l,isDisabled:c,isActive:u,icon:g,onToggle:b,...f}=o,[h,p]=n(u),m=(({isActive:e,isDisabled:o})=>({toggleButton:r(z({isActive:e,isDisabled:o}),"")}))({isActive:h,isDisabled:c});return t.createElement(D,d({testId:a,type:"button",ref:i,onClick:()=>{!c&&b&&(p(!h),b())},className:e(m.toggleButton,l),icon:g,isDisabled:c,"aria-pressed":h,"data-state":h?"on":"off"},f),s)}const S=t.forwardRef(R);var I,E;I=module.exports,E=b,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return E[e]}})}));
+var{cx:e,css:r}=require("emotion"),o=require("react"),t=g(o),{useState:n}=o,{Box:i,usePrimitive:a,Flex:s}=require("@contentful/f36-core"),l=g(require("@contentful/f36-tokens")),d=g(require("@babel/runtime/helpers/extends")),{Spinner:c}=require("@contentful/f36-spinner");function u(e,r,o,t){Object.defineProperty(e,r,{get:o,set:t,enumerable:!0,configurable:!0})}function g(e){return e&&e.__esModule?e.default:e}var b={};u(b,"ButtonGroup",(()=>m)),u(b,"ToggleButton",(()=>S)),u(b,"Button",(()=>D));const f=({variant:e,withDivider:r,spacing:o})=>{if("spaced"===e)return{marginLeft:l[o],marginRight:l[o],"&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}};const t=h(r);return{borderRadius:"0 !important",marginRight:"-1px",zIndex:l.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${l.borderRadiusMedium} !important`,borderTopLeftRadius:`${l.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${l.borderRadiusMedium} !important`,borderTopRightRadius:`${l.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:l.zIndexDefault+1},...t}},h=e=>e?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:l.colorWhite,height:"60%",left:"-1px",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{height:"100%"}}}:{};function p(o,n){const{variant:a="collapsed",withDivider:s,testId:l="cf-ui-button-group",children:d,className:c,spacing:u}=o,g=(({variant:e,withDivider:o,spacing:t="spacingS"})=>({buttonGroup:r({name:"vxcmzt",styles:"display:inline-flex;"}),groupContent:r(f({variant:e,withDivider:o,spacing:t}),"")}))({variant:a,withDivider:s,spacing:u});return t.createElement(i,{as:"div","data-test-id":l,ref:n,className:e(g.buttonGroup,c)},t.Children.map(d,((r,o)=>r?t.cloneElement(r,{key:o,className:e(g.groupContent,r.props.className)}):null)))}const m=t.forwardRef(p),v=e=>{switch(e){case"primary":return{transition:"none",", &:hover":{backgroundColor:l.blue700,borderColor:l.blue700}};case"secondary":return{transition:"none",", &:hover":{backgroundColor:l.gray200}};case"positive":return{transition:"none",", &:hover":{backgroundColor:l.green700,borderColor:l.green700}};case"negative":return{transition:"none",", &:hover":{backgroundColor:l.red800,borderColor:l.red800}};case"transparent":return{transition:"none",", &:hover":{backgroundColor:l.gray100,borderColor:l.gray100}};default:return{}}},C=e=>{switch(e){case"primary":return{color:l.colorWhite,backgroundColor:l.blue500,borderColor:l.blue500,"&:hover":{backgroundColor:l.blue600,borderColor:l.blue600},"&:active":v(e),"&:focus":{borderColor:l.blue600,boxShadow:l.glowPrimary}};case"secondary":return{color:l.gray900,backgroundColor:l.colorWhite,borderColor:l.gray300,"&:hover":{backgroundColor:l.gray100},"&:active":v(e),"&:focus":{boxShadow:l.glowMuted}};case"positive":return{color:l.colorWhite,backgroundColor:l.colorPositive,borderColor:l.colorPositive,"&:hover":{backgroundColor:l.green600,borderColor:l.green600},"&:active":v(e),"&:focus":{borderColor:l.green600,boxShadow:l.glowPositive}};case"negative":return{color:l.colorWhite,backgroundColor:l.red600,borderColor:l.red600,"&:hover":{backgroundColor:l.red700,borderColor:l.red700},"&:active":v(e),"&:focus":{borderColor:l.red700,boxShadow:l.glowNegative}};case"transparent":return{color:l.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:l.gray100,color:l.gray900},"&:active":v(e),"&:focus":{backgroundColor:"none",boxShadow:l.glowMuted}};default:return{}}},x=e=>{switch(e){case"small":return{fontSize:l.fontSizeM,lineHeight:l.lineHeightCondensed,padding:`${l.spacing2Xs} ${l.spacingS}`,minHeight:"32px"};case"medium":return{fontSize:l.fontSizeM,lineHeight:l.lineHeightCondensed,padding:`${l.spacingXs} ${l.spacingM}`,minHeight:"40px"};case"large":return{fontSize:l.fontSizeXl,lineHeight:l.lineHeightXl,padding:`${l.spacingXs} ${l.spacingM}`,minHeight:"48px"};default:return{}}},y=({alignIcon:e,hasChildren:o})=>{const t={start:{marginRight:l.spacing2Xs},end:{marginLeft:l.spacing2Xs}};return r(o?t[e]:{},"")},w="button",k=(o,n)=>{const u={button:({variant:e,size:o,isActive:t,isDisabled:n,isFullWidth:i})=>r({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:l.borderRadiusMedium,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,display:i?"flex":"inline-flex",minWidth:i?"100%":"auto",justifyContent:"center",alignItems:"center",fontWeight:l.fontWeightMedium,outline:"none",textDecoration:"none",transition:`background ${l.transitionDurationShort} ${l.transitionEasingDefault},\n        opacity ${l.transitionDurationDefault} ${l.transitionEasingDefault},\n        border-color ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,svg:{fill:"currentColor"},...C(e),...x(o),...t?v(e):{}},""),buttonIcon:y,dropdownIcon:r({marginLeft:l.spacingXs,fill:"currentColor"},"")},{as:g=w,children:b,className:f,testId:h="cf-ui-button",variant:p="secondary",size:m="medium",icon:k,isActive:D,isDisabled:z,isLoading:R,isFullWidth:S,alignIcon:I="start",style:E,...$}=o,{Element:M,primitiveProps:W}=a({testId:h,as:g,className:f,style:E}),N=e(u.button({variant:p,size:m,isActive:D,isDisabled:z,isFullWidth:S}),f),H=k&&!R&&t.createElement(s,{as:"span"},t.cloneElement(k,{className:u.buttonIcon({alignIcon:I,hasChildren:!!b}),size:""+("large"===m?"medium":"small")})),P=t.createElement(t.Fragment,null,k&&"start"===I&&H,t.createElement(s,{as:"span"},b),k&&"end"===I&&H,R&&t.createElement(i,{as:"span",marginLeft:b||!R?"spacingXs":"none"},t.createElement(c,{customSize:18,variant:"secondary"===p?"default":"white"})));return"a"===g?t.createElement(M,d({},$,W,{className:N,ref:n}),P):t.createElement(M,d({type:"button"},$,W,{disabled:z,className:N,ref:n}),P)},D=t.forwardRef(k),z=({isActive:e,isDisabled:r})=>{const o={background:l.blue100,borderColor:l.blue600,"&":{zIndex:l.zIndexDefault+1},"&:hover":{background:l.blue100}},t={background:l.colorWhite,"&:hover":{background:l.colorWhite,borderColor:r?l.gray300:l.blue600},"&&:focus":{boxShadow:l.glowPrimary,zIndex:l.zIndexDefault+2},"&:active, &:active:hover":r?{background:l.colorWhite,borderColor:l.gray300}:{background:l.blue100,borderColor:l.blue600}};return e?{...t,...o}:t};function R(o,i){const{testId:a="cf-ui-toggle-button",children:s,className:l,isDisabled:c,isActive:u,icon:g,onToggle:b,...f}=o,[h,p]=n(u),m=(({isActive:e,isDisabled:o})=>({toggleButton:r(z({isActive:e,isDisabled:o}),"")}))({isActive:h,isDisabled:c});return t.createElement(D,d({testId:a,type:"button",ref:i,onClick:()=>{!c&&b&&(p(!h),b())},className:e(m.toggleButton,l),icon:g,isDisabled:c,"aria-pressed":h,"data-state":h?"on":"off"},f),s)}const S=t.forwardRef(R);var I,E;I=module.exports,E=b,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return E[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import{cx as e,css as o}from"emotion";import r,{useState as t}from"react";import{Box as n,usePrimitive as i,Flex as a}from"@contentful/f36-core";import s from"@contentful/f36-tokens";import l from"@babel/runtime/helpers/esm/extends";import{Spinner as d}from"@contentful/f36-spinner";function c(e,o,r,t){Object.defineProperty(e,o,{get:r,set:t,enumerable:!0,configurable:!0})}var u={};c(u,"ButtonGroup",(()=>p)),c(u,"ToggleButton",(()=>z)),c(u,"Button",(()=>w));const g=({variant:e,withDivider:o,spacing:r})=>{if("spaced"===e)return{marginLeft:s[r],marginRight:s[r],"&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}};const t=b(o);return{borderRadius:"0 !important",marginRight:"-1px",zIndex:s.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${s.borderRadiusMedium} !important`,borderTopLeftRadius:`${s.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${s.borderRadiusMedium} !important`,borderTopRightRadius:`${s.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:s.zIndexDefault+1},...t}},b=e=>e?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:s.colorWhite,height:"60%",left:"-1px",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{height:"100%"}}}:{};function m(t,i){const{variant:a="collapsed",withDivider:s,testId:l="cf-ui-button-group",children:d,className:c,spacing:u}=t,b=(({variant:e,withDivider:r,spacing:t="spacingS"})=>({buttonGroup:o({name:"vxcmzt",styles:"display:inline-flex;"}),groupContent:o(g({variant:e,withDivider:r,spacing:t}),"")}))({variant:a,withDivider:s,spacing:u});return r.createElement(n,{as:"div","data-test-id":l,ref:i,className:e(b.buttonGroup,c)},r.Children.map(d,((o,t)=>o?r.cloneElement(o,{key:t,className:e(b.groupContent,o.props.className)}):null)))}const p=r.forwardRef(m),f=e=>{switch(e){case"primary":return{transition:"none",", &:hover":{backgroundColor:s.blue700,borderColor:s.blue700}};case"secondary":return{transition:"none",", &:hover":{backgroundColor:s.gray200}};case"positive":return{transition:"none",", &:hover":{backgroundColor:s.green700,borderColor:s.green700}};case"negative":return{transition:"none",", &:hover":{backgroundColor:s.red800,borderColor:s.red800}};case"transparent":return{transition:"none",", &:hover":{backgroundColor:s.gray100,borderColor:s.gray100}};default:return{}}},h=e=>{switch(e){case"primary":return{color:s.colorWhite,backgroundColor:s.blue500,borderColor:s.blue500,"&:hover":{backgroundColor:s.blue600,borderColor:s.blue600},"&:active":f(e),"&:focus":{borderColor:s.blue600,boxShadow:s.glowPrimary}};case"secondary":return{color:s.gray900,backgroundColor:s.colorWhite,borderColor:s.gray300,"&:hover":{backgroundColor:s.gray100},"&:active":f(e),"&:focus":{boxShadow:s.glowMuted}};case"positive":return{color:s.colorWhite,backgroundColor:s.colorPositive,borderColor:s.colorPositive,"&:hover":{backgroundColor:s.green600,borderColor:s.green600},"&:active":f(e),"&:focus":{borderColor:s.green600,boxShadow:s.glowPositive}};case"negative":return{color:s.colorWhite,backgroundColor:s.red600,borderColor:s.red600,"&:hover":{backgroundColor:s.red700,borderColor:s.red700},"&:active":f(e),"&:focus":{borderColor:s.red700,boxShadow:s.glowNegative}};case"transparent":return{color:s.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:s.gray100,color:s.gray900},"&:active":f(e),"&:focus":{backgroundColor:"none",boxShadow:s.glowMuted}};default:return{}}},v=e=>{switch(e){case"small":return{fontSize:s.fontSizeM,lineHeight:s.lineHeightCondensed,padding:`${s.spacing2Xs} ${s.spacingS}`,minHeight:"32px"};case"medium":return{fontSize:s.fontSizeM,lineHeight:s.lineHeightCondensed,padding:`${s.spacingXs} ${s.spacingM}`,minHeight:"40px"};case"large":return{fontSize:s.fontSizeXl,lineHeight:s.lineHeightXl,padding:`${s.spacingXs} ${s.spacingM}`,minHeight:"48px"};default:return{}}},C=({alignIcon:e,hasChildren:r})=>{const t={start:{marginRight:s.spacing2Xs},end:{marginLeft:s.spacing2Xs}};return o(r?t[e]:{},"")},x="button",y=(t,c)=>{const u={button:({variant:e,size:r,isActive:t,isDisabled:n,isFullWidth:i})=>o({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:s.borderRadiusMedium,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,display:i?"flex":"inline-flex",minWidth:i?"100%":"auto",justifyContent:"center",alignItems:"center",fontWeight:s.fontWeightMedium,outline:"none",textDecoration:"none",transition:`background ${s.transitionDurationShort} ${s.transitionEasingDefault},\n        opacity ${s.transitionDurationDefault} ${s.transitionEasingDefault},\n        border-color ${s.transitionDurationDefault} ${s.transitionEasingDefault}`,svg:{fill:"currentColor"},...h(e),...v(r),...t?f(e):{}},""),buttonIcon:C,dropdownIcon:o({marginLeft:s.spacingXs,fill:"currentColor"},"")},{as:g=x,children:b,className:m,testId:p="cf-ui-button",variant:y="secondary",size:w="medium",icon:k,isActive:D,isDisabled:z,isLoading:R,isFullWidth:S,alignIcon:I="start",style:$,...E}=t,{Element:W,primitiveProps:M}=i({testId:p,as:g,className:m,style:$}),N=e(u.button({variant:y,size:w,isActive:D,isDisabled:z,isFullWidth:S}),m),B=k&&!R&&r.createElement(a,{as:"span"},r.cloneElement(k,{className:u.buttonIcon({alignIcon:I,hasChildren:!!b}),size:""+("large"===w?"medium":"small")})),H=r.createElement(r.Fragment,null,k&&"start"===I&&B,r.createElement(a,{as:"span"},b),k&&"end"===I&&B,R&&r.createElement(n,{as:"span",marginLeft:b||!R?"spacingXs":"none"},r.createElement(d,{customSize:18,variant:"secondary"===y?"default":"white"})));return"a"===g?r.createElement(W,l({},E,M,{className:N,ref:c}),H):r.createElement(W,l({type:"button"},E,M,{disabled:z,className:N,ref:c}),H)},w=r.forwardRef(y),k=({isActive:e,isDisabled:o})=>{const r={background:s.blue100,borderColor:s.blue600,"&":{zIndex:s.zIndexDefault+1},"&:hover":{background:s.blue100}},t={background:s.colorWhite,"&:hover":{background:s.colorWhite,borderColor:o?s.gray300:s.blue600},"&&:focus":{boxShadow:s.glowPrimary,zIndex:s.zIndexDefault+2},"&:active, &:active:hover":o?{background:s.colorWhite,borderColor:s.gray300}:{background:s.blue100,borderColor:s.blue600}};return e?{...t,...r}:t};function D(n,i){const{testId:a="cf-ui-toggle-button",children:s,className:d,isDisabled:c,isActive:u,icon:g,onToggle:b,...m}=n,[p,f]=t(u),h=(({isActive:e,isDisabled:r})=>({toggleButton:o(k({isActive:e,isDisabled:r}),"")}))({isActive:p,isDisabled:c});return r.createElement(w,l({testId:a,type:"button",ref:i,onClick:()=>{!c&&b&&(f(!p),b())},className:e(h.toggleButton,d),icon:g,isDisabled:c,"aria-pressed":p,"data-state":p?"on":"off"},m),s)}const z=r.forwardRef(D);export{p as ButtonGroup,z as ToggleButton,w as Button};
+import{cx as e,css as o}from"emotion";import r,{useState as t}from"react";import{Box as n,Flex as i,usePrimitive as a}from"@contentful/f36-core";import s from"@contentful/f36-tokens";import l from"@babel/runtime/helpers/esm/extends";import{Spinner as d}from"@contentful/f36-spinner";function c(e,o,r,t){Object.defineProperty(e,o,{get:r,set:t,enumerable:!0,configurable:!0})}var u={};c(u,"ButtonGroup",(()=>p)),c(u,"ToggleButton",(()=>z)),c(u,"Button",(()=>w));const g=({variant:e,withDivider:o,spacing:r})=>{if("spaced"===e)return{marginLeft:s[r],marginRight:s[r],"&:first-child":{marginLeft:0},"&:last-child":{marginRight:0}};const t=b(o);return{borderRadius:"0 !important",marginRight:"-1px",zIndex:s.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${s.borderRadiusMedium} !important`,borderTopLeftRadius:`${s.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${s.borderRadiusMedium} !important`,borderTopRightRadius:`${s.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:s.zIndexDefault+1},...t}},b=e=>e?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:s.colorWhite,height:"60%",left:"-1px",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{height:"100%"}}}:{};function m(t,i){const{variant:a="collapsed",withDivider:s,testId:l="cf-ui-button-group",children:d,className:c,spacing:u}=t,b=(({variant:e,withDivider:r,spacing:t="spacingS"})=>({buttonGroup:o({name:"vxcmzt",styles:"display:inline-flex;"}),groupContent:o(g({variant:e,withDivider:r,spacing:t}),"")}))({variant:a,withDivider:s,spacing:u});return r.createElement(n,{as:"div","data-test-id":l,ref:i,className:e(b.buttonGroup,c)},r.Children.map(d,((o,t)=>o?r.cloneElement(o,{key:t,className:e(b.groupContent,o.props.className)}):null)))}const p=r.forwardRef(m),f=e=>{switch(e){case"primary":return{transition:"none",", &:hover":{backgroundColor:s.blue700,borderColor:s.blue700}};case"secondary":return{transition:"none",", &:hover":{backgroundColor:s.gray200}};case"positive":return{transition:"none",", &:hover":{backgroundColor:s.green700,borderColor:s.green700}};case"negative":return{transition:"none",", &:hover":{backgroundColor:s.red800,borderColor:s.red800}};case"transparent":return{transition:"none",", &:hover":{backgroundColor:s.gray100,borderColor:s.gray100}};default:return{}}},h=e=>{switch(e){case"primary":return{color:s.colorWhite,backgroundColor:s.blue500,borderColor:s.blue500,"&:hover":{backgroundColor:s.blue600,borderColor:s.blue600},"&:active":f(e),"&:focus":{borderColor:s.blue600,boxShadow:s.glowPrimary}};case"secondary":return{color:s.gray900,backgroundColor:s.colorWhite,borderColor:s.gray300,"&:hover":{backgroundColor:s.gray100},"&:active":f(e),"&:focus":{boxShadow:s.glowMuted}};case"positive":return{color:s.colorWhite,backgroundColor:s.colorPositive,borderColor:s.colorPositive,"&:hover":{backgroundColor:s.green600,borderColor:s.green600},"&:active":f(e),"&:focus":{borderColor:s.green600,boxShadow:s.glowPositive}};case"negative":return{color:s.colorWhite,backgroundColor:s.red600,borderColor:s.red600,"&:hover":{backgroundColor:s.red700,borderColor:s.red700},"&:active":f(e),"&:focus":{borderColor:s.red700,boxShadow:s.glowNegative}};case"transparent":return{color:s.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:s.gray100,color:s.gray900},"&:active":f(e),"&:focus":{backgroundColor:"none",boxShadow:s.glowMuted}};default:return{}}},v=e=>{switch(e){case"small":return{fontSize:s.fontSizeM,lineHeight:s.lineHeightCondensed,padding:`${s.spacing2Xs} ${s.spacingS}`,minHeight:"32px"};case"medium":return{fontSize:s.fontSizeM,lineHeight:s.lineHeightCondensed,padding:`${s.spacingXs} ${s.spacingM}`,minHeight:"40px"};case"large":return{fontSize:s.fontSizeXl,lineHeight:s.lineHeightXl,padding:`${s.spacingXs} ${s.spacingM}`,minHeight:"48px"};default:return{}}},C=({alignIcon:e,hasChildren:r})=>{const t={start:{marginRight:s.spacing2Xs},end:{marginLeft:s.spacing2Xs}};return o(r?t[e]:{},"")},x="button",y=(t,c)=>{const u={button:({variant:e,size:r,isActive:t,isDisabled:n,isFullWidth:i})=>o({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:s.borderRadiusMedium,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,display:i?"flex":"inline-flex",minWidth:i?"100%":"auto",justifyContent:"center",alignItems:"center",fontWeight:s.fontWeightMedium,outline:"none",textDecoration:"none",transition:`background ${s.transitionDurationShort} ${s.transitionEasingDefault},\n        opacity ${s.transitionDurationDefault} ${s.transitionEasingDefault},\n        border-color ${s.transitionDurationDefault} ${s.transitionEasingDefault}`,svg:{fill:"currentColor"},...h(e),...v(r),...t?f(e):{}},""),buttonIcon:C,dropdownIcon:o({marginLeft:s.spacingXs,fill:"currentColor"},"")},{as:g=x,children:b,className:m,testId:p="cf-ui-button",variant:y="secondary",size:w="medium",icon:k,isActive:D,isDisabled:z,isLoading:R,isFullWidth:S,alignIcon:I="start",style:$,...E}=t,{Element:W,primitiveProps:M}=a({testId:p,as:g,className:m,style:$}),N=e(u.button({variant:y,size:w,isActive:D,isDisabled:z,isFullWidth:S}),m),B=k&&!R&&r.createElement(i,{as:"span"},r.cloneElement(k,{className:u.buttonIcon({alignIcon:I,hasChildren:!!b}),size:""+("large"===w?"medium":"small")})),H=r.createElement(r.Fragment,null,k&&"start"===I&&B,r.createElement(i,{as:"span"},b),k&&"end"===I&&B,R&&r.createElement(n,{as:"span",marginLeft:b||!R?"spacingXs":"none"},r.createElement(d,{customSize:18,variant:"secondary"===y?"default":"white"})));return"a"===g?r.createElement(W,l({},E,M,{className:N,ref:c}),H):r.createElement(W,l({type:"button"},E,M,{disabled:z,className:N,ref:c}),H)},w=r.forwardRef(y),k=({isActive:e,isDisabled:o})=>{const r={background:s.blue100,borderColor:s.blue600,"&":{zIndex:s.zIndexDefault+1},"&:hover":{background:s.blue100}},t={background:s.colorWhite,"&:hover":{background:s.colorWhite,borderColor:o?s.gray300:s.blue600},"&&:focus":{boxShadow:s.glowPrimary,zIndex:s.zIndexDefault+2},"&:active, &:active:hover":o?{background:s.colorWhite,borderColor:s.gray300}:{background:s.blue100,borderColor:s.blue600}};return e?{...t,...r}:t};function D(n,i){const{testId:a="cf-ui-toggle-button",children:s,className:d,isDisabled:c,isActive:u,icon:g,onToggle:b,...m}=n,[p,f]=t(u),h=(({isActive:e,isDisabled:r})=>({toggleButton:o(k({isActive:e,isDisabled:r}),"")}))({isActive:p,isDisabled:c});return r.createElement(w,l({testId:a,type:"button",ref:i,onClick:()=>{!c&&b&&(f(!p),b())},className:e(h.toggleButton,d),icon:g,isDisabled:c,"aria-pressed":p,"data-state":p?"on":"off"},m),s)}const z=r.forwardRef(D);export{p as ButtonGroup,z as ToggleButton,w as Button};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-button",
-  "version": "4.0.1-next-v4-6660.2272+367dfd9f",
+  "version": "4.0.1-next-v4-6664.2273+00c2a7bb",
   "description": "Forma 36: Button component",
@@ -10,10 +10,10 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-6660.2272+367dfd9f",
-    "@contentful/f36-spinner": "4.0.1-next-v4-6660.2272+367dfd9f",
-    "@contentful/f36-tokens": "4.0.1-next-v4-6660.2272+367dfd9f",
+    "@contentful/f36-core": "4.0.1-next-v4-6664.2273+00c2a7bb",
+    "@contentful/f36-spinner": "4.0.1-next-v4-6664.2273+00c2a7bb",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6664.2273+00c2a7bb",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-icon": "4.0.1-next-v4-6660.2272+367dfd9f",
-    "@contentful/f36-icons": "4.0.1-next-v4-6660.2272+367dfd9f"
+    "@contentful/f36-icon": "4.0.1-next-v4-6664.2273+00c2a7bb",
+    "@contentful/f36-icons": "4.0.1-next-v4-6664.2273+00c2a7bb"
   },
@@ -41,3 +41,3 @@ "peerDependencies": {
   },
-  "gitHead": "367dfd9f774c8e6d2c22ab58fa94518b7f14fc20"
+  "gitHead": "00c2a7bb8dbb16bd1bbcda2fc7c0d687ffc02231"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No metric changes

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-6664.2273+00c2a7bb

• Updated@contentful/f36-spinner@4.0.1-next-v4-6664.2273+00c2a7bb

• Updated@contentful/f36-tokens@4.0.1-next-v4-6664.2273+00c2a7bb