@contentful/f36-badge 4.71.2 → 4.72.0
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 +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import i from '@contentful/f36-tokens';
|
|
|
5
5
|
import 'react-dom';
|
|
6
6
|
import { ClockIcon } from '@contentful/f36-icons';
|
|
7
7
|
|
|
8
|
-
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(x)for(var t of x(r))M.call(r,t)&&k(e,t,r[t]);return e},b=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&x)for(var a of x(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l.createContext("low"),h=()=>l.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),u=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:N,as:S,className:v,margin:B="none"}=t,_=u(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l.createElement(Box,m(f({},_),{as:Q,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[s],color:i[o],fontSize:i[a],lineHeight:i[d],letterSpacing:i[c]}),T?de():null,N?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=u(t,["children","fontWeight","testId"]);let d=h();return l.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=u(t,["children","testId"]);let o=h();return l.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=u(t,["children","testId"]);let o=h();return l.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}U.displayName="Subheading";l.forwardRef(U);var ue="h2";function K(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=u(t,["children","size","testId"]);let d="fontSize2Xl",c="
|
|
8
|
+
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(x)for(var t of x(r))M.call(r,t)&&k(e,t,r[t]);return e},b=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&x)for(var a of x(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l.createContext("low"),h=()=>l.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),u=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:N,as:S,className:v,margin:B="none"}=t,_=u(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l.createElement(Box,m(f({},_),{as:Q,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[s],color:i[o],fontSize:i[a],lineHeight:i[d],letterSpacing:i[c]}),T?de():null,N?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=u(t,["children","fontWeight","testId"]);let d=h();return l.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=u(t,["children","testId"]);let o=h();return l.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=u(t,["children","testId"]);let o=h();return l.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}U.displayName="Subheading";l.forwardRef(U);var ue="h2";function K(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=u(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeightXl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l.createElement(y,m(f({as:ue,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}K.displayName="DisplayText";l.forwardRef(K);var he="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=u(t,["children","className","testId"]);let d=h();return l.createElement(y,m(f({as:he,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightMedium",fontColor:"gray600",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingDefault,textTransform:"lowercase","&:first-letter":{textTransform:"uppercase"}}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l.forwardRef(Y);var ye=l.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=u(t,["children","testId"]);let o=h();return l.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ye.displayName="Paragraph";var Se=({variant:e})=>{switch(e){case"positive":return {color:i.green600,backgroundColor:i.green200};case"primary":return {color:i.blue600,backgroundColor:i.blue200};case"negative":return {color:i.red600,backgroundColor:i.red200};case"warning":return {color:i.orange600,backgroundColor:i.orange200};case"secondary":return {color:i.gray700,backgroundColor:i.gray200};case"primary-filled":return {color:i.colorWhite,backgroundColor:i.blue600};case"featured":return {color:i.purple600,backgroundColor:i.purple200};default:return {}}},ve=({size:e})=>{switch(e){case"small":return {padding:`0 ${i.spacing2Xs}`,lineHeight:i.lineHeightS,maxHeight:i.lineHeightS};default:return {padding:`0 ${i.spacingXs}`,lineHeight:i.lineHeightM,maxHeight:i.lineHeightM}}},q=()=>({badge:({variant:e,size:r})=>css(g(g({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Se({variant:e})),ve({size:r}))),badgeIcon:css({flexShrink:0}),badgeIconCustomTiny:css({width:"0.875rem",height:"0.875rem"}),badgeText:({textTransform:e})=>css([{color:"currentcolor",lineHeight:"inherit"},e!=="none"&&{textTransform:"lowercase","&::first-letter":{textTransform:"uppercase"}}])});var C=l.forwardRef((e,r)=>{let t=q(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w,textTransform:T=void 0}=v,N=H(v,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),S=B=>l.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l.createElement(Box,b(g({as:"div",testId:o,display:"inline-flex",className:cx(t.badge({variant:n,size:s}),w)},N),{ref:r}),d&&S(d),l.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:T})},a),c&&S(c))});C.displayName="Badge";var be={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=H(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=be[t];return l.createElement(C,b(g(g({},s),o?{size:n,startIcon:l.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}Z.displayName="EntityStatusBadge";var He=l.forwardRef(Z);
|
|
9
9
|
|
|
10
10
|
export { C as Badge, He as EntityStatusBadge };
|
|
11
11
|
//# sourceMappingURL=out.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../../utils/src/Portal/Portal.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_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} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n children: React.ReactNode;\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactNode;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactNode;\n /**\n * By default the Badge uses CSS to capitalize only the first letter of the\n * badge text. This CSS is hit by a bug in Firefox that results in the badge\n * being rendered slightly too wide. To avoid the bug, set this property to\n * `none` to disable the text transformation. Please be sure the initial\n * letter of the badge text is already capitalized!\n */\n textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\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 textTransform = undefined,\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 [styles.badgeIconCustomTiny]: size === 'small',\n }),\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 && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText({ textTransform })}\n >\n {children}\n </Caption>\n {endIcon && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n children: React.ReactElement;\n /**\n * Container element for Portal\n */\n container?: Document | HTMLElement;\n}\n\nexport function Portal({\n children,\n container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n const container = useRef<Document | HTMLElement | undefined>(\n containerElement,\n );\n const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n useEffect(() => {\n if (!container.current) {\n container.current = document.body;\n }\n\n const portalContainer = portal.current;\n portalContainer.setAttribute('data-cf-ui-portal', '');\n container.current.appendChild(portalContainer);\n\n return () => {\n if (container.current) {\n container.current.removeChild(portalContainer);\n }\n };\n }, []);\n\n return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: ({\n textTransform,\n }: {\n textTransform: BadgeInternalProps['textTransform'];\n }) =>\n css([\n {\n color: 'currentcolor',\n lineHeight: 'inherit',\n },\n textTransform !== 'none' && {\n textTransform: 'lowercase',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n ]),\n});\n","import React from 'react';\nimport type {\n EntityStatus,\n ExpandProps,\n PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Indicates that the entity that the badge is related to has a scheduled action\n */\n isScheduled?: boolean;\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 isScheduled\n isScheduled?: never;\n };\n\nexport type EntityStatusBadgeProps = Omit<\n BadgeProps,\n 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n BadgeSizeWithIsScheduledProp & {\n entityStatus: EntityStatus;\n };\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n entityStatus,\n isScheduled = undefined,\n size = 'default',\n ...otherProps\n } = props;\n const withClockIcon = isScheduled && size === 'default';\n const variant = statusMap[entityStatus];\n\n return (\n <Badge\n {...otherProps}\n {...(withClockIcon\n ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n : { size })}\n variant={variant}\n ref={ref}\n >\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"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../../utils/src/Portal/Portal.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_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} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n children: React.ReactNode;\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactNode;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactNode;\n /**\n * By default the Badge uses CSS to capitalize only the first letter of the\n * badge text. This CSS is hit by a bug in Firefox that results in the badge\n * being rendered slightly too wide. To avoid the bug, set this property to\n * `none` to disable the text transformation. Please be sure the initial\n * letter of the badge text is already capitalized!\n */\n textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\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 textTransform = undefined,\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 [styles.badgeIconCustomTiny]: size === 'small',\n }),\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 && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText({ textTransform })}\n >\n {children}\n </Caption>\n {endIcon && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n children: React.ReactElement;\n /**\n * Container element for Portal\n */\n container?: Document | HTMLElement;\n}\n\nexport function Portal({\n children,\n container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n const container = useRef<Document | HTMLElement | undefined>(\n containerElement,\n );\n const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n useEffect(() => {\n if (!container.current) {\n container.current = document.body;\n }\n\n const portalContainer = portal.current;\n portalContainer.setAttribute('data-cf-ui-portal', '');\n container.current.appendChild(portalContainer);\n\n return () => {\n if (container.current) {\n container.current.removeChild(portalContainer);\n }\n };\n }, []);\n\n return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: ({\n textTransform,\n }: {\n textTransform: BadgeInternalProps['textTransform'];\n }) =>\n css([\n {\n color: 'currentcolor',\n lineHeight: 'inherit',\n },\n textTransform !== 'none' && {\n textTransform: 'lowercase',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n ]),\n});\n","import React from 'react';\nimport type {\n EntityStatus,\n ExpandProps,\n PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Indicates that the entity that the badge is related to has a scheduled action\n */\n isScheduled?: boolean;\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 isScheduled\n isScheduled?: never;\n };\n\nexport type EntityStatusBadgeProps = Omit<\n BadgeProps,\n 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n BadgeSizeWithIsScheduledProp & {\n entityStatus: EntityStatus;\n };\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n entityStatus,\n isScheduled = undefined,\n size = 'default',\n ...otherProps\n } = props;\n const withClockIcon = isScheduled && size === 'default';\n const variant = statusMap[entityStatus];\n\n return (\n <Badge\n {...otherProps}\n {...(withClockIcon\n ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n : { size })}\n variant={variant}\n ref={ref}\n >\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,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
12
12
|
var l__default = /*#__PURE__*/_interopDefault(l);
|
|
13
13
|
var i__default = /*#__PURE__*/_interopDefault(i);
|
|
14
14
|
|
|
15
|
-
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(x)for(var t of x(r))M.call(r,t)&&k(e,t,r[t]);return e},b=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&x)for(var a of x(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l__default.default.createContext("low"),h=()=>l__default.default.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),u=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return emotion.css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:N,as:S,className:v,margin:B="none"}=t,_=u(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l__default.default.createElement(f36Core.Box,m(f({},_),{as:Q,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default.default[n],fontWeight:i__default.default[s],color:i__default.default[o],fontSize:i__default.default[a],lineHeight:i__default.default[d],letterSpacing:i__default.default[c]}),T?de():null,N?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l__default.default.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=u(t,["children","fontWeight","testId"]);let d=h();return l__default.default.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l__default.default.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=u(t,["children","testId"]);let o=h();return l__default.default.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l__default.default.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=u(t,["children","testId"]);let o=h();return l__default.default.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}U.displayName="Subheading";l__default.default.forwardRef(U);var ue="h2";function K(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=u(t,["children","size","testId"]);let d="fontSize2Xl",c="
|
|
15
|
+
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var k=(e,r,t)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))R.call(r,t)&&k(e,t,r[t]);if(x)for(var t of x(r))M.call(r,t)&&k(e,t,r[t]);return e},b=(e,r)=>te(e,re(r));var H=(e,r)=>{var t={};for(var a in e)R.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&x)for(var a of x(e))r.indexOf(a)<0&&M.call(e,a)&&(t[a]=e[a]);return t};var D=l__default.default.createContext("low"),h=()=>l__default.default.useContext(D);D.Provider;var ie=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?ie(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))$.call(r,t)&&L(e,t,r[t]);if(I)for(var t of I(r))j.call(r,t)&&L(e,t,r[t]);return e},m=(e,r)=>oe(e,se(r)),u=(e,r)=>{var t={};for(var a in e)$.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&I)for(var a of I(e))r.indexOf(a)<0&&j.call(e,a)&&(t[a]=e[a]);return t},le="span";function de(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function ce(){return emotion.css({wordBreak:"break-word"})}function V(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:s="fontWeightNormal",fontColor:o="gray800",lineHeight:d="lineHeightM",letterSpacing:c="letterSpacingDefault",children:w,isTruncated:T,isWordBreak:N,as:S,className:v,margin:B="none"}=t,_=u(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=S||le;return l__default.default.createElement(f36Core.Box,m(f({},_),{as:Q,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default.default[n],fontWeight:i__default.default[s],color:i__default.default[o],fontSize:i__default.default[a],lineHeight:i__default.default[d],letterSpacing:i__default.default[c]}),T?de():null,N?ce():null,v),margin:B,ref:r}),w)}V.displayName="Text";var y=l__default.default.forwardRef(V),ge="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=u(t,["children","fontWeight","testId"]);let d=h();return l__default.default.createElement(y,m(f({as:ge,testId:s,fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l__default.default.forwardRef(A),pe="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=u(t,["children","testId"]);let o=h();return l__default.default.createElement(y,m(f({as:pe,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:o==="high"?"fontSizeXlHigh":"fontSizeXl",lineHeight:o==="high"?"lineHeightXlHigh":"lineHeightXl"},s),{ref:r}),a)}G.displayName="Heading";l__default.default.forwardRef(G);var fe="h3";function U(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=u(t,["children","testId"]);let o=h();return l__default.default.createElement(y,m(f({as:fe,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}U.displayName="Subheading";l__default.default.forwardRef(U);var ue="h2";function K(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=u(t,["children","size","testId"]);let d="fontSize2Xl",c="lineHeightXl";return n==="large"&&(d="fontSize3Xl",c="lineHeight3Xl"),l__default.default.createElement(y,m(f({as:ue,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:d,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}K.displayName="DisplayText";l__default.default.forwardRef(K);var he="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=u(t,["children","className","testId"]);let d=h();return l__default.default.createElement(y,m(f({as:he,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightMedium",fontColor:"gray600",fontSize:d==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:d==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default.default.letterSpacingDefault,textTransform:"lowercase","&:first-letter":{textTransform:"uppercase"}}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l__default.default.forwardRef(Y);var ye=l__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=u(t,["children","testId"]);let o=h();return l__default.default.createElement(y,m(f({as:"p",testId:n,fontSize:o==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:o==="high"?"lineHeightMHigh":"lineHeightM",marginBottom:"spacingM"},s),{ref:r}),a)});ye.displayName="Paragraph";var Se=({variant:e})=>{switch(e){case"positive":return {color:i__default.default.green600,backgroundColor:i__default.default.green200};case"primary":return {color:i__default.default.blue600,backgroundColor:i__default.default.blue200};case"negative":return {color:i__default.default.red600,backgroundColor:i__default.default.red200};case"warning":return {color:i__default.default.orange600,backgroundColor:i__default.default.orange200};case"secondary":return {color:i__default.default.gray700,backgroundColor:i__default.default.gray200};case"primary-filled":return {color:i__default.default.colorWhite,backgroundColor:i__default.default.blue600};case"featured":return {color:i__default.default.purple600,backgroundColor:i__default.default.purple200};default:return {}}},ve=({size:e})=>{switch(e){case"small":return {padding:`0 ${i__default.default.spacing2Xs}`,lineHeight:i__default.default.lineHeightS,maxHeight:i__default.default.lineHeightS};default:return {padding:`0 ${i__default.default.spacingXs}`,lineHeight:i__default.default.lineHeightM,maxHeight:i__default.default.lineHeightM}}},q=()=>({badge:({variant:e,size:r})=>emotion.css(g(g({columnGap:i__default.default.spacing2Xs,alignItems:"center",borderRadius:i__default.default.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Se({variant:e})),ve({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeIconCustomTiny:emotion.css({width:"0.875rem",height:"0.875rem"}),badgeText:({textTransform:e})=>emotion.css([{color:"currentcolor",lineHeight:"inherit"},e!=="none"&&{textTransform:"lowercase","&::first-letter":{textTransform:"uppercase"}}])});var C=l__default.default.forwardRef((e,r)=>{let t=q(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:d,endIcon:c,className:w,textTransform:T=void 0}=v,N=H(v,["children","variant","size","testId","startIcon","endIcon","className","textTransform"]),S=B=>l__default.default.cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className,{[t.badgeIconCustomTiny]:s==="small"}),variant:n==="primary-filled"?"white":n});return l__default.default.createElement(f36Core.Box,b(g({as:"div",testId:o,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:s}),w)},N),{ref:r}),d&&S(d),l__default.default.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText({textTransform:T})},a),c&&S(c))});C.displayName="Badge";var be={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function Z(e,r){let c=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=c,s=H(c,["entityStatus","isScheduled","size"]),o=a&&n==="default",d=be[t];return l__default.default.createElement(C,b(g(g({},s),o?{size:n,startIcon:l__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:d,ref:r}),t)}Z.displayName="EntityStatusBadge";var He=l__default.default.forwardRef(Z);
|
|
16
16
|
|
|
17
17
|
exports.Badge = C;
|
|
18
18
|
exports.EntityStatusBadge = He;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge/Badge.tsx","../../utils/src/Portal/Portal.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_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} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n children: React.ReactNode;\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactNode;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactNode;\n /**\n * By default the Badge uses CSS to capitalize only the first letter of the\n * badge text. This CSS is hit by a bug in Firefox that results in the badge\n * being rendered slightly too wide. To avoid the bug, set this property to\n * `none` to disable the text transformation. Please be sure the initial\n * letter of the badge text is already capitalized!\n */\n textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\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 textTransform = undefined,\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 [styles.badgeIconCustomTiny]: size === 'small',\n }),\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 && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText({ textTransform })}\n >\n {children}\n </Caption>\n {endIcon && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n children: React.ReactElement;\n /**\n * Container element for Portal\n */\n container?: Document | HTMLElement;\n}\n\nexport function Portal({\n children,\n container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n const container = useRef<Document | HTMLElement | undefined>(\n containerElement,\n );\n const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n useEffect(() => {\n if (!container.current) {\n container.current = document.body;\n }\n\n const portalContainer = portal.current;\n portalContainer.setAttribute('data-cf-ui-portal', '');\n container.current.appendChild(portalContainer);\n\n return () => {\n if (container.current) {\n container.current.removeChild(portalContainer);\n }\n };\n }, []);\n\n return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: ({\n textTransform,\n }: {\n textTransform: BadgeInternalProps['textTransform'];\n }) =>\n css([\n {\n color: 'currentcolor',\n lineHeight: 'inherit',\n },\n textTransform !== 'none' && {\n textTransform: 'lowercase',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n ]),\n});\n","import React from 'react';\nimport type {\n EntityStatus,\n ExpandProps,\n PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Indicates that the entity that the badge is related to has a scheduled action\n */\n isScheduled?: boolean;\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 isScheduled\n isScheduled?: never;\n };\n\nexport type EntityStatusBadgeProps = Omit<\n BadgeProps,\n 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n BadgeSizeWithIsScheduledProp & {\n entityStatus: EntityStatus;\n };\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n entityStatus,\n isScheduled = undefined,\n size = 'default',\n ...otherProps\n } = props;\n const withClockIcon = isScheduled && size === 'default';\n const variant = statusMap[entityStatus];\n\n return (\n <Badge\n {...otherProps}\n {...(withClockIcon\n ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n : { size })}\n variant={variant}\n ref={ref}\n >\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"]}
|
|
1
|
+
{"version":3,"sources":["../src/Badge/Badge.tsx","../../utils/src/Portal/Portal.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","u","useRef","useEffect","useCallback","Children","isValidElement","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","textTransform","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","D","ClockIcon","statusMap","EntityStatusBadge","entityStatus","isScheduled","withClockIcon","_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} from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport type * as CSS from 'csstype';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport type BadgeInternalProps = CommonProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n children: React.ReactNode;\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactNode;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactNode;\n /**\n * By default the Badge uses CSS to capitalize only the first letter of the\n * badge text. This CSS is hit by a bug in Firefox that results in the badge\n * being rendered slightly too wide. To avoid the bug, set this property to\n * `none` to disable the text transformation. Please be sure the initial\n * letter of the badge text is already capitalized!\n */\n textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;\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 textTransform = undefined,\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 [styles.badgeIconCustomTiny]: size === 'small',\n }),\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 && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText({ textTransform })}\n >\n {children}\n </Caption>\n {endIcon && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n children: React.ReactElement;\n /**\n * Container element for Portal\n */\n container?: Document | HTMLElement;\n}\n\nexport function Portal({\n children,\n container: containerElement,\n}: PortalProps): React.ReactPortal | null {\n const container = useRef<Document | HTMLElement | undefined>(\n containerElement,\n );\n const portal = useRef<HTMLDivElement>(document.createElement('div'));\n\n useEffect(() => {\n if (!container.current) {\n container.current = document.body;\n }\n\n const portalContainer = portal.current;\n portalContainer.setAttribute('data-cf-ui-portal', '');\n container.current.appendChild(portalContainer);\n\n return () => {\n if (container.current) {\n container.current.removeChild(portalContainer);\n }\n };\n }, []);\n\n return portal.current ? createPortal(children, portal.current) : null;\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\nimport type { BadgeInternalProps } from './Badge';\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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: ({\n textTransform,\n }: {\n textTransform: BadgeInternalProps['textTransform'];\n }) =>\n css([\n {\n color: 'currentcolor',\n lineHeight: 'inherit',\n },\n textTransform !== 'none' && {\n textTransform: 'lowercase',\n '&::first-letter': {\n textTransform: 'uppercase',\n },\n },\n ]),\n});\n","import React from 'react';\nimport type {\n EntityStatus,\n ExpandProps,\n PickUnion,\n} from '@contentful/f36-core';\nimport { ClockIcon } from '@contentful/f36-icons';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeSize, BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\ntype BadgeSizeWithIsScheduledProp =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Indicates that the entity that the badge is related to has a scheduled action\n */\n isScheduled?: boolean;\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 isScheduled\n isScheduled?: never;\n };\n\nexport type EntityStatusBadgeProps = Omit<\n BadgeProps,\n 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'\n> &\n BadgeSizeWithIsScheduledProp & {\n entityStatus: EntityStatus;\n };\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n entityStatus,\n isScheduled = undefined,\n size = 'default',\n ...otherProps\n } = props;\n const withClockIcon = isScheduled && size === 'default';\n const variant = statusMap[entityStatus];\n\n return (\n <Badge\n {...otherProps}\n {...(withClockIcon\n ? { size, startIcon: <ClockIcon testId=\"schedule-icon\" /> }\n : { size })}\n variant={variant}\n ref={ref}\n >\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.
|
|
3
|
+
"version": "4.72.0",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
"build": "tsup"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@contentful/f36-core": "^4.
|
|
23
|
+
"@contentful/f36-core": "^4.72.0",
|
|
24
24
|
"@contentful/f36-icons": "^4.29.0",
|
|
25
|
-
"@contentful/f36-tokens": "^4.0
|
|
25
|
+
"@contentful/f36-tokens": "^4.1.0",
|
|
26
26
|
"emotion": "^10.0.17"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@contentful/f36-typography": "^4.
|
|
29
|
+
"@contentful/f36-typography": "^4.72.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=16.8",
|