Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@contentful/f36-button

Package Overview
Dependencies
Maintainers
165
Versions
353
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-button - npm Package Compare versions

Comparing version 4.40.2 to 4.40.3

7

dist/esm/index.js

@@ -6,8 +6,9 @@ import { cx, css } from 'emotion';

import { Spinner } from '@contentful/f36-spinner';
import { hexToRGBA } from '@contentful/f36-utils';
var to=Object.defineProperty,eo=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var D=(t,e,r)=>e in t?to(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))G.call(e,r)&&D(t,r,e[r]);if(P)for(var r of P(e))A.call(e,r)&&D(t,r,e[r]);return t},B=(t,e)=>eo(t,ro(e));var y=(t,e)=>{var r={};for(var n in t)G.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&P)for(var n of P(t))e.indexOf(n)<0&&A.call(t,n)&&(r[n]=t[n]);return r};var no=({withDivider:t})=>{let e=io(t);return i({borderRadius:"0 !important",marginRight:"-1px",zIndex:o.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${o.borderRadiusMedium} !important`,borderTopLeftRadius:`${o.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o.borderRadiusMedium} !important`,borderTopRightRadius:`${o.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o.zIndexDefault+1}},e)},io=t=>t?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:o.colorWhite,height:"60%",left:"0",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{display:"none"}}}:{},O=({withDivider:t})=>({buttonGroup:css({display:"inline-flex",position:"relative"}),groupContent:css(no({withDivider:t}))});function U(t,e){let{variant:r="merged",withDivider:n,testId:a="cf-ui-button-group",children:u,className:l,spacing:p}=t,d=O({withDivider:n});return r==="spaced"?c.createElement(Stack,{className:l,isInline:!0,flexDirection:"row",testId:a,ref:e,spacing:p},u):c.createElement(Box,{testId:a,ref:e,className:cx(d.buttonGroup,l)},c.Children.map(u,(m,f)=>m?c.cloneElement(m,{key:f,className:cx(d.groupContent,m.props.className)}):null))}U.displayName="ButtonGroup";var L=c.forwardRef(U);var x=t=>{switch(t){case"primary":return {backgroundColor:o.blue700,borderColor:o.blue700};case"secondary":return {backgroundColor:o.gray200};case"positive":return {backgroundColor:o.green700,borderColor:o.green700};case"negative":return {backgroundColor:o.red800,borderColor:o.red800};case"transparent":return {backgroundColor:o.gray100,borderColor:o.gray100};default:return {}}},lo=t=>{switch(t){case"primary":return {color:o.colorWhite,backgroundColor:o.blue500,borderColor:o.blue500,"&:hover":{backgroundColor:o.blue600,borderColor:o.blue600,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.blue600,boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{borderColor:o.blue500,boxShadow:"unset"},"&:focus-visible":{borderColor:o.blue600,boxShadow:o.glowPrimary}};case"secondary":return {color:o.gray900,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};case"positive":return {color:o.colorWhite,backgroundColor:o.colorPositive,borderColor:o.colorPositive,"&:hover":{backgroundColor:o.green600,borderColor:o.green600,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.green600,boxShadow:o.glowPositive},"&:focus:not(:focus-visible)":{borderColor:o.colorPositive,boxShadow:"unset"},"&:focus-visible":{borderColor:o.green600,boxShadow:o.glowPositive}};case"negative":return {color:o.colorWhite,backgroundColor:o.red600,borderColor:o.red600,"&:hover":{backgroundColor:o.red700,borderColor:o.red700,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.red700,boxShadow:o.glowNegative},"&:focus:not(:focus-visible)":{borderColor:o.red600,boxShadow:"unset"},"&:focus-visible":{borderColor:o.red700,boxShadow:o.glowNegative}};case"transparent":return {color:o.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":x(t),"&:focus":{backgroundColor:"transparent",boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};default:return {}}},uo=t=>{switch(t){case"small":return {fontSize:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:`${o.spacing2Xs} ${o.spacingS}`,minHeight:"32px"};case"medium":return {fontSize:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"40px"};case"large":return {fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"48px"};default:return {}}},co=({hasChildren:t,variant:e})=>{let r={"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs}};return css([t?r:{},e!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:e,isActive:r,isDisabled:n,isFullWidth:a})=>css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:o.borderRadiusMedium,cursor:n?"not-allowed":"pointer",fontFamily:o.fontStackPrimary,opacity:n?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
var eo=Object.defineProperty,ro=Object.defineProperties;var no=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var G=(t,e,r)=>e in t?eo(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))A.call(e,r)&&G(t,r,e[r]);if(P)for(var r of P(e))_.call(e,r)&&G(t,r,e[r]);return t},B=(t,e)=>ro(t,no(e));var y=(t,e)=>{var r={};for(var n in t)A.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&P)for(var n of P(t))e.indexOf(n)<0&&_.call(t,n)&&(r[n]=t[n]);return r};var io=({withDivider:t})=>{let e=so(t);return i({borderRadius:"0 !important",marginRight:"-1px",zIndex:o.zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${o.borderRadiusMedium} !important`,borderTopLeftRadius:`${o.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o.borderRadiusMedium} !important`,borderTopRightRadius:`${o.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o.zIndexDefault+1}},e)},so=t=>t?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:o.colorWhite,height:"60%",left:"0",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{display:"none"}}}:{},$=({withDivider:t})=>({buttonGroup:css({display:"inline-flex",position:"relative"}),groupContent:css(io({withDivider:t}))});function L(t,e){let{variant:r="merged",withDivider:n,testId:a="cf-ui-button-group",children:u,className:l,spacing:p}=t,d=$({withDivider:n});return r==="spaced"?c.createElement(Stack,{className:l,isInline:!0,flexDirection:"row",testId:a,ref:e,spacing:p},u):c.createElement(Box,{testId:a,ref:e,className:cx(d.buttonGroup,l)},c.Children.map(u,(m,g)=>m?c.cloneElement(m,{key:g,className:cx(d.groupContent,m.props.className)}):null))}L.displayName="ButtonGroup";var W=c.forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o.blue700,borderColor:o.blue700};case"secondary":return {backgroundColor:o.gray200};case"positive":return {backgroundColor:o.green700,borderColor:o.green700};case"negative":return {backgroundColor:o.red800,borderColor:o.red800};case"transparent":return {backgroundColor:hexToRGBA(o.gray900,.1)};default:return {}}},uo=t=>{switch(t){case"primary":return {color:o.colorWhite,backgroundColor:o.blue500,borderColor:o.blue500,"&:hover":{backgroundColor:o.blue600,borderColor:o.blue600,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.blue600,boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{borderColor:o.blue500,boxShadow:"unset"},"&:focus-visible":{borderColor:o.blue600,boxShadow:o.glowPrimary}};case"secondary":return {color:o.gray900,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};case"positive":return {color:o.colorWhite,backgroundColor:o.colorPositive,borderColor:o.colorPositive,"&:hover":{backgroundColor:o.green600,borderColor:o.green600,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.green600,boxShadow:o.glowPositive},"&:focus:not(:focus-visible)":{borderColor:o.colorPositive,boxShadow:"unset"},"&:focus-visible":{borderColor:o.green600,boxShadow:o.glowPositive}};case"negative":return {color:o.colorWhite,backgroundColor:o.red600,borderColor:o.red600,"&:hover":{backgroundColor:o.red700,borderColor:o.red700,color:o.colorWhite},"&:active":x(t),"&:focus":{borderColor:o.red700,boxShadow:o.glowNegative},"&:focus:not(:focus-visible)":{borderColor:o.red600,boxShadow:"unset"},"&:focus-visible":{borderColor:o.red700,boxShadow:o.glowNegative}};case"transparent":return {color:o.gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:hexToRGBA(o.gray900,.05),color:o.gray900},"&:active":x(t),"&:focus":{backgroundColor:hexToRGBA(o.gray900,.05),color:o.gray900,boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};default:return {}}},co=t=>{switch(t){case"small":return {fontSize:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:`${o.spacing2Xs} ${o.spacingS}`,minHeight:"32px"};case"medium":return {fontSize:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"40px"};case"large":return {fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"48px"};default:return {}}},po=({hasChildren:t,variant:e})=>{let r={"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs}};return css([t?r:{},e!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},M=()=>({button:({variant:t,size:e,isActive:r,isDisabled:n,isFullWidth:a})=>css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:o.borderRadiusMedium,cursor:n?"not-allowed":"pointer",fontFamily:o.fontStackPrimary,opacity:n?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault},
border-color ${o.transitionDurationDefault} ${o.transitionEasingDefault}`},lo(t)),uo(e)),r?{transition:"none","&, &:hover":x(t)}:{})),buttonIcon:co,buttonContent:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var fo="button";function F(t,e){let r=W(),R=t,{as:n=fo,children:a,className:u,testId:l="cf-ui-button",variant:p="secondary",size:d="medium",startIcon:m,endIcon:f,isActive:v,isDisabled:S,isLoading:b,isFullWidth:Q,style:Y}=R,w=y(R,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),Z=cx(r.button({variant:p,size:d,isActive:v,isDisabled:S,isFullWidth:Q}),u),E=I=>{var N;let oo={primary:"white",secondary:"secondary",positive:"white",negative:"white",transparent:"secondary"};return !b&&c.createElement(Flex,{as:"span",className:r.buttonIcon({hasChildren:!!a,variant:p})},c.cloneElement(I,{size:(N=I.props.size)!=null?N:`${d==="large"?"medium":"small"}`,variant:p==="transparent"&&I.props.variant||oo[p]}))},z=c.createElement(c.Fragment,null,m&&E(m),a&&c.createElement(Box,{as:"span",display:"block",className:r.buttonContent},a),f&&E(f),b&&c.createElement(Box,{as:"span",marginLeft:a||!b?"spacingXs":"none"},c.createElement(Spinner,{customSize:18,variant:p==="secondary"?"default":"white"}))),k={["data-test-id"]:l,className:Z,ref:e,style:Y};return n==="a"?c.createElement("a",B(i(i({},w),k),{disabled:S}),z):c.createElement("button",B(i(i({type:"button"},w),k),{disabled:S}),z)}F.displayName="Button";var h=c.forwardRef(F);var yo=({isActive:t,isDisabled:e})=>{let r={background:o.blue100,borderColor:o.blue600,"&":{zIndex:o.zIndexDefault+1},"&:hover":{background:o.blue100}},n={background:o.colorWhite,"&:hover":{background:o.colorWhite,borderColor:e?o.gray300:o.blue600,zIndex:o.zIndexDefault+1},"&:focus":{boxShadow:o.glowPrimary,zIndex:o.zIndexDefault+2},"&:active, &:active:hover":e?{background:o.colorWhite,borderColor:o.gray300,zIndex:o.zIndexDefault+1}:{background:o.blue100,borderColor:o.blue600,zIndex:o.zIndexDefault+1}};return t?i(i({},n),r):n},H=({isActive:t,isDisabled:e})=>({toggleButton:css(yo({isActive:t,isDisabled:e}))});function j(t,e){let b=t,{testId:r="cf-ui-toggle-button",children:n,className:a,isDisabled:u=!1,isActive:l=!1,icon:p,onToggle:d,size:m="medium"}=b,f=y(b,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),v=H({isActive:l,isDisabled:u});return c.createElement(h,i({testId:r,type:"button",ref:e,size:m,onClick:()=>{!u&&d&&d();},className:cx(v.toggleButton,a),startIcon:p,isDisabled:u,"aria-pressed":l,"data-state":l?"on":"off"},f),n)}j.displayName="ToggleButton";var V=c.forwardRef(j);function J(t,e){let l=t,{testId:r="cf-ui-icon-button",variant:n="transparent",icon:a}=l,u=y(l,["testId","variant","icon"]);return c.createElement(h,B(i({testId:r,ref:e,variant:n},u),{startIcon:a}))}J.displayName="IconButton";var K=c.forwardRef(J);
border-color ${o.transitionDurationDefault} ${o.transitionEasingDefault}`},uo(t)),co(e)),r?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:po,buttonContent:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var bo="button";function H(t,e){let r=M(),N=t,{as:n=bo,children:a,className:u,testId:l="cf-ui-button",variant:p="secondary",size:d="medium",startIcon:m,endIcon:g,isActive:I,isDisabled:C,isLoading:b,isFullWidth:Y,style:Z}=N,E=y(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),oo=cx(r.button({variant:p,size:d,isActive:I,isDisabled:C,isFullWidth:Y}),u),z=v=>{var D;let to={primary:"white",secondary:"secondary",positive:"white",negative:"white",transparent:"secondary"};return !b&&c.createElement(Flex,{as:"span",className:r.buttonIcon({hasChildren:!!a,variant:p})},c.cloneElement(v,{size:(D=v.props.size)!=null?D:`${d==="large"?"medium":"small"}`,variant:p==="transparent"&&v.props.variant||to[p]}))},k=c.createElement(c.Fragment,null,m&&z(m),a&&c.createElement(Box,{as:"span",display:"block",className:r.buttonContent},a),g&&z(g),b&&c.createElement(Box,{as:"span",marginLeft:a||!b?"spacingXs":"none"},c.createElement(Spinner,{customSize:18,variant:p==="secondary"?"default":"white"}))),R={["data-test-id"]:l,className:oo,ref:e,style:Z};return n==="a"?c.createElement("a",B(i(i({},E),R),{disabled:C}),k):c.createElement("button",B(i(i({type:"button"},E),R),{disabled:C}),k)}H.displayName="Button";var h=c.forwardRef(H);var xo=({isActive:t,isDisabled:e})=>{let r={background:o.blue100,borderColor:o.blue600,"&":{zIndex:o.zIndexDefault+1},"&:hover":{background:o.blue100}},n={background:o.colorWhite,"&:hover":{background:o.colorWhite,borderColor:e?o.gray300:o.blue600,zIndex:o.zIndexDefault+1},"&:focus":{boxShadow:o.glowPrimary,zIndex:o.zIndexDefault+2},"&:active, &:active:hover":e?{background:o.colorWhite,borderColor:o.gray300,zIndex:o.zIndexDefault+1}:{background:o.blue100,borderColor:o.blue600,zIndex:o.zIndexDefault+1}};return t?i(i({},n),r):n},X=({isActive:t,isDisabled:e})=>({toggleButton:css(xo({isActive:t,isDisabled:e}))});function V(t,e){let b=t,{testId:r="cf-ui-toggle-button",children:n,className:a,isDisabled:u=!1,isActive:l=!1,icon:p,onToggle:d,size:m="medium"}=b,g=y(b,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),I=X({isActive:l,isDisabled:u});return c.createElement(h,i({testId:r,type:"button",ref:e,size:m,onClick:()=>{!u&&d&&d();},className:cx(I.toggleButton,a),startIcon:p,isDisabled:u,"aria-pressed":l,"data-state":l?"on":"off"},g),n)}V.displayName="ToggleButton";var q=c.forwardRef(V);function K(t,e){let l=t,{testId:r="cf-ui-icon-button",variant:n="transparent",icon:a}=l,u=y(l,["testId","variant","icon"]);return c.createElement(h,B(i({testId:r,ref:e,variant:n},u),{startIcon:a}))}K.displayName="IconButton";var Q=c.forwardRef(K);
export { h as Button, L as ButtonGroup, K as IconButton, V as ToggleButton };
export { h as Button, W as ButtonGroup, Q as IconButton, q as ToggleButton };
//# sourceMappingURL=index.js.map

11

dist/index.js

@@ -10,2 +10,3 @@ 'use strict';

var f36Spinner = require('@contentful/f36-spinner');
var f36Utils = require('@contentful/f36-utils');

@@ -17,10 +18,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var to=Object.defineProperty,eo=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var D=(t,e,r)=>e in t?to(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))G.call(e,r)&&D(t,r,e[r]);if(P)for(var r of P(e))A.call(e,r)&&D(t,r,e[r]);return t},B=(t,e)=>eo(t,ro(e));var y=(t,e)=>{var r={};for(var n in t)G.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&P)for(var n of P(t))e.indexOf(n)<0&&A.call(t,n)&&(r[n]=t[n]);return r};var no=({withDivider:t})=>{let e=io(t);return i({borderRadius:"0 !important",marginRight:"-1px",zIndex:o__default["default"].zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${o__default["default"].borderRadiusMedium} !important`,borderTopLeftRadius:`${o__default["default"].borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o__default["default"].borderRadiusMedium} !important`,borderTopRightRadius:`${o__default["default"].borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o__default["default"].zIndexDefault+1}},e)},io=t=>t?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:o__default["default"].colorWhite,height:"60%",left:"0",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{display:"none"}}}:{},O=({withDivider:t})=>({buttonGroup:emotion.css({display:"inline-flex",position:"relative"}),groupContent:emotion.css(no({withDivider:t}))});function U(t,e){let{variant:r="merged",withDivider:n,testId:a="cf-ui-button-group",children:u,className:l,spacing:p}=t,d=O({withDivider:n});return r==="spaced"?c__default["default"].createElement(f36Core.Stack,{className:l,isInline:!0,flexDirection:"row",testId:a,ref:e,spacing:p},u):c__default["default"].createElement(f36Core.Box,{testId:a,ref:e,className:emotion.cx(d.buttonGroup,l)},c__default["default"].Children.map(u,(m,f)=>m?c__default["default"].cloneElement(m,{key:f,className:emotion.cx(d.groupContent,m.props.className)}):null))}U.displayName="ButtonGroup";var L=c__default["default"].forwardRef(U);var x=t=>{switch(t){case"primary":return {backgroundColor:o__default["default"].blue700,borderColor:o__default["default"].blue700};case"secondary":return {backgroundColor:o__default["default"].gray200};case"positive":return {backgroundColor:o__default["default"].green700,borderColor:o__default["default"].green700};case"negative":return {backgroundColor:o__default["default"].red800,borderColor:o__default["default"].red800};case"transparent":return {backgroundColor:o__default["default"].gray100,borderColor:o__default["default"].gray100};default:return {}}},lo=t=>{switch(t){case"primary":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].blue500,borderColor:o__default["default"].blue500,"&:hover":{backgroundColor:o__default["default"].blue600,borderColor:o__default["default"].blue600,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].blue600,boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].blue500,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].blue600,boxShadow:o__default["default"].glowPrimary}};case"secondary":return {color:o__default["default"].gray900,backgroundColor:o__default["default"].colorWhite,borderColor:o__default["default"].gray300,"&:hover":{backgroundColor:o__default["default"].gray100,color:o__default["default"].gray900},"&:active":x(t),"&:focus":{boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default["default"].glowPrimary}};case"positive":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].colorPositive,borderColor:o__default["default"].colorPositive,"&:hover":{backgroundColor:o__default["default"].green600,borderColor:o__default["default"].green600,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].green600,boxShadow:o__default["default"].glowPositive},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].colorPositive,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].green600,boxShadow:o__default["default"].glowPositive}};case"negative":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].red600,borderColor:o__default["default"].red600,"&:hover":{backgroundColor:o__default["default"].red700,borderColor:o__default["default"].red700,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].red700,boxShadow:o__default["default"].glowNegative},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].red600,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].red700,boxShadow:o__default["default"].glowNegative}};case"transparent":return {color:o__default["default"].gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:o__default["default"].gray100,color:o__default["default"].gray900},"&:active":x(t),"&:focus":{backgroundColor:"transparent",boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default["default"].glowPrimary}};default:return {}}},uo=t=>{switch(t){case"small":return {fontSize:o__default["default"].fontSizeM,lineHeight:o__default["default"].lineHeightCondensed,padding:`${o__default["default"].spacing2Xs} ${o__default["default"].spacingS}`,minHeight:"32px"};case"medium":return {fontSize:o__default["default"].fontSizeM,lineHeight:o__default["default"].lineHeightCondensed,padding:`${o__default["default"].spacingXs} ${o__default["default"].spacingM}`,minHeight:"40px"};case"large":return {fontSize:o__default["default"].fontSizeXl,lineHeight:o__default["default"].lineHeightXl,padding:`${o__default["default"].spacingXs} ${o__default["default"].spacingM}`,minHeight:"48px"};default:return {}}},co=({hasChildren:t,variant:e})=>{let r={"&:first-child":{marginRight:o__default["default"].spacing2Xs},"&:last-child":{marginLeft:o__default["default"].spacing2Xs}};return emotion.css([t?r:{},e!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:e,isActive:r,isDisabled:n,isFullWidth:a})=>emotion.css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:o__default["default"].borderRadiusMedium,cursor:n?"not-allowed":"pointer",fontFamily:o__default["default"].fontStackPrimary,opacity:n?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o__default["default"].fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o__default["default"].transitionDurationShort} ${o__default["default"].transitionEasingDefault},
var eo=Object.defineProperty,ro=Object.defineProperties;var no=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var G=(t,e,r)=>e in t?eo(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))A.call(e,r)&&G(t,r,e[r]);if(P)for(var r of P(e))_.call(e,r)&&G(t,r,e[r]);return t},B=(t,e)=>ro(t,no(e));var y=(t,e)=>{var r={};for(var n in t)A.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&P)for(var n of P(t))e.indexOf(n)<0&&_.call(t,n)&&(r[n]=t[n]);return r};var io=({withDivider:t})=>{let e=so(t);return i({borderRadius:"0 !important",marginRight:"-1px",zIndex:o__default["default"].zIndexDefault,"&:first-child":{borderBottomLeftRadius:`${o__default["default"].borderRadiusMedium} !important`,borderTopLeftRadius:`${o__default["default"].borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o__default["default"].borderRadiusMedium} !important`,borderTopRightRadius:`${o__default["default"].borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o__default["default"].zIndexDefault+1}},e)},so=t=>t?{position:"relative","&:before":{content:'""',width:"1px",opacity:"20%",backgroundColor:o__default["default"].colorWhite,height:"60%",left:"0",position:"absolute"},"&:first-child, &:focus":{"&:before":{display:"none"}},"&:hover, &:hover + &":{"&:before":{display:"none"}}}:{},$=({withDivider:t})=>({buttonGroup:emotion.css({display:"inline-flex",position:"relative"}),groupContent:emotion.css(io({withDivider:t}))});function L(t,e){let{variant:r="merged",withDivider:n,testId:a="cf-ui-button-group",children:u,className:l,spacing:p}=t,d=$({withDivider:n});return r==="spaced"?c__default["default"].createElement(f36Core.Stack,{className:l,isInline:!0,flexDirection:"row",testId:a,ref:e,spacing:p},u):c__default["default"].createElement(f36Core.Box,{testId:a,ref:e,className:emotion.cx(d.buttonGroup,l)},c__default["default"].Children.map(u,(m,g)=>m?c__default["default"].cloneElement(m,{key:g,className:emotion.cx(d.groupContent,m.props.className)}):null))}L.displayName="ButtonGroup";var W=c__default["default"].forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o__default["default"].blue700,borderColor:o__default["default"].blue700};case"secondary":return {backgroundColor:o__default["default"].gray200};case"positive":return {backgroundColor:o__default["default"].green700,borderColor:o__default["default"].green700};case"negative":return {backgroundColor:o__default["default"].red800,borderColor:o__default["default"].red800};case"transparent":return {backgroundColor:f36Utils.hexToRGBA(o__default["default"].gray900,.1)};default:return {}}},uo=t=>{switch(t){case"primary":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].blue500,borderColor:o__default["default"].blue500,"&:hover":{backgroundColor:o__default["default"].blue600,borderColor:o__default["default"].blue600,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].blue600,boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].blue500,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].blue600,boxShadow:o__default["default"].glowPrimary}};case"secondary":return {color:o__default["default"].gray900,backgroundColor:o__default["default"].colorWhite,borderColor:o__default["default"].gray300,"&:hover":{backgroundColor:o__default["default"].gray100,color:o__default["default"].gray900},"&:active":x(t),"&:focus":{boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default["default"].glowPrimary}};case"positive":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].colorPositive,borderColor:o__default["default"].colorPositive,"&:hover":{backgroundColor:o__default["default"].green600,borderColor:o__default["default"].green600,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].green600,boxShadow:o__default["default"].glowPositive},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].colorPositive,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].green600,boxShadow:o__default["default"].glowPositive}};case"negative":return {color:o__default["default"].colorWhite,backgroundColor:o__default["default"].red600,borderColor:o__default["default"].red600,"&:hover":{backgroundColor:o__default["default"].red700,borderColor:o__default["default"].red700,color:o__default["default"].colorWhite},"&:active":x(t),"&:focus":{borderColor:o__default["default"].red700,boxShadow:o__default["default"].glowNegative},"&:focus:not(:focus-visible)":{borderColor:o__default["default"].red600,boxShadow:"unset"},"&:focus-visible":{borderColor:o__default["default"].red700,boxShadow:o__default["default"].glowNegative}};case"transparent":return {color:o__default["default"].gray800,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default["default"].gray900,.05),color:o__default["default"].gray900},"&:active":x(t),"&:focus":{backgroundColor:f36Utils.hexToRGBA(o__default["default"].gray900,.05),color:o__default["default"].gray900,boxShadow:o__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default["default"].glowPrimary}};default:return {}}},co=t=>{switch(t){case"small":return {fontSize:o__default["default"].fontSizeM,lineHeight:o__default["default"].lineHeightCondensed,padding:`${o__default["default"].spacing2Xs} ${o__default["default"].spacingS}`,minHeight:"32px"};case"medium":return {fontSize:o__default["default"].fontSizeM,lineHeight:o__default["default"].lineHeightCondensed,padding:`${o__default["default"].spacingXs} ${o__default["default"].spacingM}`,minHeight:"40px"};case"large":return {fontSize:o__default["default"].fontSizeXl,lineHeight:o__default["default"].lineHeightXl,padding:`${o__default["default"].spacingXs} ${o__default["default"].spacingM}`,minHeight:"48px"};default:return {}}},po=({hasChildren:t,variant:e})=>{let r={"&:first-child":{marginRight:o__default["default"].spacing2Xs},"&:last-child":{marginLeft:o__default["default"].spacing2Xs}};return emotion.css([t?r:{},e!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},M=()=>({button:({variant:t,size:e,isActive:r,isDisabled:n,isFullWidth:a})=>emotion.css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:o__default["default"].borderRadiusMedium,cursor:n?"not-allowed":"pointer",fontFamily:o__default["default"].fontStackPrimary,opacity:n?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o__default["default"].fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o__default["default"].transitionDurationShort} ${o__default["default"].transitionEasingDefault},
opacity ${o__default["default"].transitionDurationDefault} ${o__default["default"].transitionEasingDefault},
border-color ${o__default["default"].transitionDurationDefault} ${o__default["default"].transitionEasingDefault}`},lo(t)),uo(e)),r?{transition:"none","&, &:hover":x(t)}:{})),buttonIcon:co,buttonContent:emotion.css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var fo="button";function F(t,e){let r=W(),R=t,{as:n=fo,children:a,className:u,testId:l="cf-ui-button",variant:p="secondary",size:d="medium",startIcon:m,endIcon:f,isActive:v,isDisabled:S,isLoading:b,isFullWidth:Q,style:Y}=R,w=y(R,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),Z=emotion.cx(r.button({variant:p,size:d,isActive:v,isDisabled:S,isFullWidth:Q}),u),E=I=>{var N;let oo={primary:"white",secondary:"secondary",positive:"white",negative:"white",transparent:"secondary"};return !b&&c__default["default"].createElement(f36Core.Flex,{as:"span",className:r.buttonIcon({hasChildren:!!a,variant:p})},c__default["default"].cloneElement(I,{size:(N=I.props.size)!=null?N:`${d==="large"?"medium":"small"}`,variant:p==="transparent"&&I.props.variant||oo[p]}))},z=c__default["default"].createElement(c__default["default"].Fragment,null,m&&E(m),a&&c__default["default"].createElement(f36Core.Box,{as:"span",display:"block",className:r.buttonContent},a),f&&E(f),b&&c__default["default"].createElement(f36Core.Box,{as:"span",marginLeft:a||!b?"spacingXs":"none"},c__default["default"].createElement(f36Spinner.Spinner,{customSize:18,variant:p==="secondary"?"default":"white"}))),k={["data-test-id"]:l,className:Z,ref:e,style:Y};return n==="a"?c__default["default"].createElement("a",B(i(i({},w),k),{disabled:S}),z):c__default["default"].createElement("button",B(i(i({type:"button"},w),k),{disabled:S}),z)}F.displayName="Button";var h=c__default["default"].forwardRef(F);var yo=({isActive:t,isDisabled:e})=>{let r={background:o__default["default"].blue100,borderColor:o__default["default"].blue600,"&":{zIndex:o__default["default"].zIndexDefault+1},"&:hover":{background:o__default["default"].blue100}},n={background:o__default["default"].colorWhite,"&:hover":{background:o__default["default"].colorWhite,borderColor:e?o__default["default"].gray300:o__default["default"].blue600,zIndex:o__default["default"].zIndexDefault+1},"&:focus":{boxShadow:o__default["default"].glowPrimary,zIndex:o__default["default"].zIndexDefault+2},"&:active, &:active:hover":e?{background:o__default["default"].colorWhite,borderColor:o__default["default"].gray300,zIndex:o__default["default"].zIndexDefault+1}:{background:o__default["default"].blue100,borderColor:o__default["default"].blue600,zIndex:o__default["default"].zIndexDefault+1}};return t?i(i({},n),r):n},H=({isActive:t,isDisabled:e})=>({toggleButton:emotion.css(yo({isActive:t,isDisabled:e}))});function j(t,e){let b=t,{testId:r="cf-ui-toggle-button",children:n,className:a,isDisabled:u=!1,isActive:l=!1,icon:p,onToggle:d,size:m="medium"}=b,f=y(b,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),v=H({isActive:l,isDisabled:u});return c__default["default"].createElement(h,i({testId:r,type:"button",ref:e,size:m,onClick:()=>{!u&&d&&d();},className:emotion.cx(v.toggleButton,a),startIcon:p,isDisabled:u,"aria-pressed":l,"data-state":l?"on":"off"},f),n)}j.displayName="ToggleButton";var V=c__default["default"].forwardRef(j);function J(t,e){let l=t,{testId:r="cf-ui-icon-button",variant:n="transparent",icon:a}=l,u=y(l,["testId","variant","icon"]);return c__default["default"].createElement(h,B(i({testId:r,ref:e,variant:n},u),{startIcon:a}))}J.displayName="IconButton";var K=c__default["default"].forwardRef(J);
border-color ${o__default["default"].transitionDurationDefault} ${o__default["default"].transitionEasingDefault}`},uo(t)),co(e)),r?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:po,buttonContent:emotion.css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var bo="button";function H(t,e){let r=M(),N=t,{as:n=bo,children:a,className:u,testId:l="cf-ui-button",variant:p="secondary",size:d="medium",startIcon:m,endIcon:g,isActive:I,isDisabled:C,isLoading:b,isFullWidth:Y,style:Z}=N,E=y(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),oo=emotion.cx(r.button({variant:p,size:d,isActive:I,isDisabled:C,isFullWidth:Y}),u),z=v=>{var D;let to={primary:"white",secondary:"secondary",positive:"white",negative:"white",transparent:"secondary"};return !b&&c__default["default"].createElement(f36Core.Flex,{as:"span",className:r.buttonIcon({hasChildren:!!a,variant:p})},c__default["default"].cloneElement(v,{size:(D=v.props.size)!=null?D:`${d==="large"?"medium":"small"}`,variant:p==="transparent"&&v.props.variant||to[p]}))},k=c__default["default"].createElement(c__default["default"].Fragment,null,m&&z(m),a&&c__default["default"].createElement(f36Core.Box,{as:"span",display:"block",className:r.buttonContent},a),g&&z(g),b&&c__default["default"].createElement(f36Core.Box,{as:"span",marginLeft:a||!b?"spacingXs":"none"},c__default["default"].createElement(f36Spinner.Spinner,{customSize:18,variant:p==="secondary"?"default":"white"}))),R={["data-test-id"]:l,className:oo,ref:e,style:Z};return n==="a"?c__default["default"].createElement("a",B(i(i({},E),R),{disabled:C}),k):c__default["default"].createElement("button",B(i(i({type:"button"},E),R),{disabled:C}),k)}H.displayName="Button";var h=c__default["default"].forwardRef(H);var xo=({isActive:t,isDisabled:e})=>{let r={background:o__default["default"].blue100,borderColor:o__default["default"].blue600,"&":{zIndex:o__default["default"].zIndexDefault+1},"&:hover":{background:o__default["default"].blue100}},n={background:o__default["default"].colorWhite,"&:hover":{background:o__default["default"].colorWhite,borderColor:e?o__default["default"].gray300:o__default["default"].blue600,zIndex:o__default["default"].zIndexDefault+1},"&:focus":{boxShadow:o__default["default"].glowPrimary,zIndex:o__default["default"].zIndexDefault+2},"&:active, &:active:hover":e?{background:o__default["default"].colorWhite,borderColor:o__default["default"].gray300,zIndex:o__default["default"].zIndexDefault+1}:{background:o__default["default"].blue100,borderColor:o__default["default"].blue600,zIndex:o__default["default"].zIndexDefault+1}};return t?i(i({},n),r):n},X=({isActive:t,isDisabled:e})=>({toggleButton:emotion.css(xo({isActive:t,isDisabled:e}))});function V(t,e){let b=t,{testId:r="cf-ui-toggle-button",children:n,className:a,isDisabled:u=!1,isActive:l=!1,icon:p,onToggle:d,size:m="medium"}=b,g=y(b,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),I=X({isActive:l,isDisabled:u});return c__default["default"].createElement(h,i({testId:r,type:"button",ref:e,size:m,onClick:()=>{!u&&d&&d();},className:emotion.cx(I.toggleButton,a),startIcon:p,isDisabled:u,"aria-pressed":l,"data-state":l?"on":"off"},g),n)}V.displayName="ToggleButton";var q=c__default["default"].forwardRef(V);function K(t,e){let l=t,{testId:r="cf-ui-icon-button",variant:n="transparent",icon:a}=l,u=y(l,["testId","variant","icon"]);return c__default["default"].createElement(h,B(i({testId:r,ref:e,variant:n},u),{startIcon:a}))}K.displayName="IconButton";var Q=c__default["default"].forwardRef(K);
exports.Button = h;
exports.ButtonGroup = L;
exports.IconButton = K;
exports.ToggleButton = V;
exports.ButtonGroup = W;
exports.IconButton = Q;
exports.ToggleButton = q;
//# sourceMappingURL=index.js.map

9

package.json
{
"name": "@contentful/f36-button",
"version": "4.40.2",
"version": "4.40.3",
"description": "Forma 36: Button component",

@@ -9,9 +9,10 @@ "scripts": {

"dependencies": {
"@contentful/f36-core": "^4.40.2",
"@contentful/f36-spinner": "^4.40.2",
"@contentful/f36-core": "^4.40.3",
"@contentful/f36-spinner": "^4.40.3",
"@contentful/f36-tokens": "^4.0.1",
"@contentful/f36-utils": "^4.24.1",
"emotion": "^10.0.17"
},
"devDependencies": {
"@contentful/f36-icon": "^4.40.2",
"@contentful/f36-icon": "^4.40.3",
"@contentful/f36-icons": "^4.23.2"

@@ -18,0 +19,0 @@ },

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc