@contentful/f36-badge 4.30.0 → 4.30.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { cx, css } from 'emotion';
|
|
|
3
3
|
import { Box } from '@contentful/f36-core';
|
|
4
4
|
import n from '@contentful/f36-tokens';
|
|
5
5
|
|
|
6
|
-
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var
|
|
6
|
+
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var C=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))N.call(r,t)&&C(e,t,r[t]);if(B)for(var t of B(r))T.call(r,t)&&C(e,t,r[t]);return e},x=(e,r)=>Z(e,K(r));var b=(e,r)=>{var t={};for(var a in e)N.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&B)for(var a of B(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color:n.green600,backgroundColor:n.green200};case"primary":return {color:n.blue600,backgroundColor:n.blue200};case"negative":return {color:n.red600,backgroundColor:n.red200};case"warning":return {color:n.orange600,backgroundColor:n.orange200};case"secondary":return {color:n.gray700,backgroundColor:n.gray200};case"primary-filled":return {color:n.colorWhite,backgroundColor:n.blue600};case"featured":return {color:n.purple600,backgroundColor:n.purple200};default:return {}}},ee=({size:e})=>{switch(e){case"small":return {padding:`0 ${n.spacing2Xs}`,lineHeight:n.lineHeightS,maxHeight:n.lineHeightS};default:return {padding:`0 ${n.spacingXs}`,lineHeight:n.lineHeightM,maxHeight:n.lineHeightM}}},k=()=>({badge:({variant:e,size:r})=>css(g(g({columnGap:n.spacing2Xs,alignItems:"center",borderRadius:n.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:css({flexShrink:0}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,M=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))M.call(r,t)&&R(e,t,r[t]);if(E)for(var t of E(r))X.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)M.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&E)for(var a of E(e))r.indexOf(a)<0&&X.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return css({wordBreak:"break-word"})}function j(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:d="lineHeightM",children:c,isTruncated:z,isWordBreak:w,as:y,className:S,margin:v="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s.createElement(Box,f(p({},A),{as:J,className:cx(css({padding:0,fontFamily:n[i],fontWeight:n[o],color:n[l],fontSize:n[a],lineHeight:n[d]}),z?se():null,w?le():null,S),margin:v,ref:r}),c)}j.displayName="Text";var h=s.forwardRef(j),de="span";function D(e,r){var t=e,{children:a,fontWeight:i="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s.createElement(h,f(p({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:i},l),{ref:r}),a)}D.displayName="Caption";var L=s.forwardRef(D),ce="h1";function V(e,r){var t=e,{children:a,testId:i="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:ce,testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}V.displayName="Heading";s.forwardRef(V);var ge="h3";function F(e,r){var t=e,{children:a,testId:i="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:ge,testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s.forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:i="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return i==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),s.createElement(h,f(p({as:fe,testId:o,marginBottom:i==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s.forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:i,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s.createElement(h,f(p({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:cx(css({letterSpacing:n.letterSpacingWide,textTransform:"uppercase"}),i)},l),{ref:r}),a)}G.displayName="SectionHeading";s.forwardRef(G);var ue=s.forwardRef((e,r)=>{var t=e,{children:a,testId:i="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(p({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var P=s.forwardRef((e,r)=>{let t=k(),S=e,{children:a,variant:i="primary",size:o="default",testId:l="cf-ui-badge",startIcon:d,endIcon:c,className:z}=S,w=b(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=v=>s.cloneElement(v,{size:"tiny",className:cx(t.badgeIcon,v.props.className),variant:i==="primary-filled"?"white":i});return s.createElement(Box,x(g({as:"div",testId:l,display:"inline-flex",className:cx(t.badge({variant:i,size:o}),z)},w),{ref:r}),d&&o==="default"&&y(d),s.createElement(L,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),c&&o==="default"&&y(c))});P.displayName="Badge";var ye={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let l=e,{entityStatus:t,size:a="default"}=l,i=b(l,["entityStatus","size"]),o=ye[t];return s.createElement(P,x(g({},i),{size:a,variant:o,ref:r}),t)}q.displayName="EntityStatusBadge";var Se=s.forwardRef(q);
|
|
7
7
|
|
|
8
|
-
export {
|
|
8
|
+
export { P as Badge, Se as EntityStatusBadge };
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","statusMap","
|
|
1
|
+
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'negative',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
package/dist/index.js
CHANGED
|
@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
|
|
13
13
|
var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
|
|
14
14
|
|
|
15
|
-
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var
|
|
15
|
+
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var C=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))N.call(r,t)&&C(e,t,r[t]);if(B)for(var t of B(r))T.call(r,t)&&C(e,t,r[t]);return e},x=(e,r)=>Z(e,K(r));var b=(e,r)=>{var t={};for(var a in e)N.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&B)for(var a of B(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color:n__default["default"].green600,backgroundColor:n__default["default"].green200};case"primary":return {color:n__default["default"].blue600,backgroundColor:n__default["default"].blue200};case"negative":return {color:n__default["default"].red600,backgroundColor:n__default["default"].red200};case"warning":return {color:n__default["default"].orange600,backgroundColor:n__default["default"].orange200};case"secondary":return {color:n__default["default"].gray700,backgroundColor:n__default["default"].gray200};case"primary-filled":return {color:n__default["default"].colorWhite,backgroundColor:n__default["default"].blue600};case"featured":return {color:n__default["default"].purple600,backgroundColor:n__default["default"].purple200};default:return {}}},ee=({size:e})=>{switch(e){case"small":return {padding:`0 ${n__default["default"].spacing2Xs}`,lineHeight:n__default["default"].lineHeightS,maxHeight:n__default["default"].lineHeightS};default:return {padding:`0 ${n__default["default"].spacingXs}`,lineHeight:n__default["default"].lineHeightM,maxHeight:n__default["default"].lineHeightM}}},k=()=>({badge:({variant:e,size:r})=>emotion.css(g(g({columnGap:n__default["default"].spacing2Xs,alignItems:"center",borderRadius:n__default["default"].borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,M=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))M.call(r,t)&&R(e,t,r[t]);if(E)for(var t of E(r))X.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)M.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&E)for(var a of E(e))r.indexOf(a)<0&&X.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return emotion.css({wordBreak:"break-word"})}function j(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:d="lineHeightM",children:c,isTruncated:z,isWordBreak:w,as:y,className:S,margin:v="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s__default["default"].createElement(f36Core.Box,f(p({},A),{as:J,className:emotion.cx(emotion.css({padding:0,fontFamily:n__default["default"][i],fontWeight:n__default["default"][o],color:n__default["default"][l],fontSize:n__default["default"][a],lineHeight:n__default["default"][d]}),z?se():null,w?le():null,S),margin:v,ref:r}),c)}j.displayName="Text";var h=s__default["default"].forwardRef(j),de="span";function D(e,r){var t=e,{children:a,fontWeight:i="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s__default["default"].createElement(h,f(p({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:i},l),{ref:r}),a)}D.displayName="Caption";var L=s__default["default"].forwardRef(D),ce="h1";function V(e,r){var t=e,{children:a,testId:i="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(p({as:ce,testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}V.displayName="Heading";s__default["default"].forwardRef(V);var ge="h3";function F(e,r){var t=e,{children:a,testId:i="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(p({as:ge,testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s__default["default"].forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:i="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeight2Xl";return i==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),s__default["default"].createElement(h,f(p({as:fe,testId:o,marginBottom:i==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s__default["default"].forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:i,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s__default["default"].createElement(h,f(p({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:n__default["default"].letterSpacingWide,textTransform:"uppercase"}),i)},l),{ref:r}),a)}G.displayName="SectionHeading";s__default["default"].forwardRef(G);var ue=s__default["default"].forwardRef((e,r)=>{var t=e,{children:a,testId:i="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(p({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var P=s__default["default"].forwardRef((e,r)=>{let t=k(),S=e,{children:a,variant:i="primary",size:o="default",testId:l="cf-ui-badge",startIcon:d,endIcon:c,className:z}=S,w=b(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=v=>s__default["default"].cloneElement(v,{size:"tiny",className:emotion.cx(t.badgeIcon,v.props.className),variant:i==="primary-filled"?"white":i});return s__default["default"].createElement(f36Core.Box,x(g({as:"div",testId:l,display:"inline-flex",className:emotion.cx(t.badge({variant:i,size:o}),z)},w),{ref:r}),d&&o==="default"&&y(d),s__default["default"].createElement(L,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),c&&o==="default"&&y(c))});P.displayName="Badge";var ye={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let l=e,{entityStatus:t,size:a="default"}=l,i=b(l,["entityStatus","size"]),o=ye[t];return s__default["default"].createElement(P,x(g({},i),{size:a,variant:o,ref:r}),t)}q.displayName="EntityStatusBadge";var Se=s__default["default"].forwardRef(q);
|
|
16
16
|
|
|
17
|
-
exports.Badge =
|
|
18
|
-
exports.EntityStatusBadge =
|
|
17
|
+
exports.Badge = P;
|
|
18
|
+
exports.EntityStatusBadge = Se;
|
|
19
19
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge/Badge.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","statusMap","
|
|
1
|
+
{"version":3,"sources":["../src/Badge/Badge.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'negative',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-badge",
|
|
3
|
-
"version": "4.30.
|
|
3
|
+
"version": "4.30.2",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"build": "tsup"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@contentful/f36-core": "^4.30.
|
|
23
|
+
"@contentful/f36-core": "^4.30.2",
|
|
24
24
|
"@contentful/f36-tokens": "^4.0.1",
|
|
25
25
|
"emotion": "^10.0.17"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@contentful/f36-typography": "^4.30.
|
|
28
|
+
"@contentful/f36-typography": "^4.30.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"react": ">=16.8",
|