@contentful/f36-button - npm Package Compare versions

Comparing version 4.0.1-next-v4-8499.2349 to 4.0.1-next-v4-8514.2351

dist/main.js

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

dist/types.d.ts

@@ -108,3 +108,16 @@ import { CommonProps, PolymorphicProps, PolymorphicComponent } from "@contentful/f36-core";
 export const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<unknown>>;
+interface IconButtonInternalProps extends Omit<ButtonInternalProps, 'startIcon' | 'endIcon'> {
+    /**
+     * Expects any of the icon components
+     */
+    icon: React.ReactElement;
+    /**
+     * Aria label is required when using icon only
+     */
+    'aria-label': string;
+}
+declare const _DEFAULT_TAG1 = "button";
+export type IconButtonProps<E extends React.ElementType = typeof _DEFAULT_TAG1> = PolymorphicProps<IconButtonInternalProps, E, 'disabled'>;
+export const IconButton: PolymorphicComponent<IconButtonInternalProps, typeof _DEFAULT_TAG1, 'disabled'>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@contentful/f36-button",
-  "version": "4.0.1-next-v4-8499.2349+40401f4b",
+  "version": "4.0.1-next-v4-8514.2351+eee20b54",
   "description": "Forma 36: Button component",
@@ -10,10 +10,10 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-8499.2349+40401f4b",
-    "@contentful/f36-spinner": "4.0.1-next-v4-8499.2349+40401f4b",
-    "@contentful/f36-tokens": "4.0.1-next-v4-8499.2349+40401f4b",
+    "@contentful/f36-core": "4.0.1-next-v4-8514.2351+eee20b54",
+    "@contentful/f36-spinner": "4.0.1-next-v4-8514.2351+eee20b54",
+    "@contentful/f36-tokens": "4.0.1-next-v4-8514.2351+eee20b54",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-icon": "4.0.1-next-v4-8499.2349+40401f4b",
-    "@contentful/f36-icons": "4.0.1-next-v4-8499.2349+40401f4b"
+    "@contentful/f36-icon": "4.0.1-next-v4-8514.2351+eee20b54",
+    "@contentful/f36-icons": "4.0.1-next-v4-8514.2351+eee20b54"
   },
@@ -41,3 +41,3 @@ "peerDependencies": {
   },
-  "gitHead": "40401f4bc83ed1424ca3ff5084ebbf155b4a1f4a"
+  "gitHead": "eee20b548a1922dfc189eb3636af58076ff5c050"
 }

src/index.ts

@@ -7,1 +7,3 @@ export { ButtonGroup } from './ButtonGroup';
 export type { ButtonProps } from './Button';
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';

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

Improved metrics

Total package byte prevSize

167810

increased by3.96%

Number of package files

26

increased by13.04%

Lines of code

827

increased by6.3%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-8514.2351+eee20b54

• Updated@contentful/f36-spinner@4.0.1-next-v4-8514.2351+eee20b54

• Updated@contentful/f36-tokens@4.0.1-next-v4-8514.2351+eee20b54