@contentful/f36-button - npm Package Compare versions

Comparing version 4.0.1-next-v4-6507.2250 to 4.0.1-next-v4-6548.2251

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,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};
+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};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-button",
-  "version": "4.0.1-next-v4-6507.2250+9aa220c9",
+  "version": "4.0.1-next-v4-6548.2251+ae9665da",
   "description": "Forma 36: Button component",
@@ -10,10 +10,10 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-6507.2250+9aa220c9",
-    "@contentful/f36-spinner": "4.0.1-next-v4-6507.2250+9aa220c9",
-    "@contentful/f36-tokens": "4.0.1-next-v4-6507.2250+9aa220c9",
+    "@contentful/f36-core": "4.0.1-next-v4-6548.2251+ae9665da",
+    "@contentful/f36-spinner": "4.0.1-next-v4-6548.2251+ae9665da",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6548.2251+ae9665da",
     "emotion": "^10.0.17"
   },
   "devDependencies": {
-    "@contentful/f36-icon": "4.0.1-next-v4-6507.2250+9aa220c9",
-    "@contentful/f36-icons": "4.0.1-next-v4-6507.2250+9aa220c9"
+    "@contentful/f36-icon": "4.0.1-next-v4-6548.2251+ae9665da",
+    "@contentful/f36-icons": "4.0.1-next-v4-6548.2251+ae9665da"
   },
@@ -41,3 +41,3 @@ "peerDependencies": {
   },
-  "gitHead": "9aa220c9e64a2982fd106d48d115e25df0bb3e07"
+  "gitHead": "ae9665da75f49a4d419c4bfa234a695fad309abb"
 }

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-6548.2251+ae9665da

• Updated@contentful/f36-spinner@4.0.1-next-v4-6548.2251+ae9665da

• Updated@contentful/f36-tokens@4.0.1-next-v4-6548.2251+ae9665da