@contentful/f36-badge 4.58.0 → 4.58.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 +5 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +8 -7
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import l from 'react';
|
|
2
2
|
import { cx, css } from 'emotion';
|
|
3
3
|
import { Box } from '@contentful/f36-core';
|
|
4
|
-
import
|
|
4
|
+
import i from '@contentful/f36-tokens';
|
|
5
|
+
import 'react-dom';
|
|
5
6
|
import { ClockIcon } from '@contentful/f36-icons';
|
|
6
7
|
|
|
7
|
-
var
|
|
8
|
+
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var T=(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={}))k.call(r,t)&&T(e,t,r[t]);if(b)for(var t of b(r))R.call(r,t)&&T(e,t,r[t]);return e},H=(e,r)=>te(e,re(r));var x=(e,r)=>{var t={};for(var a in e)k.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&&R.call(e,a)&&(t[a]=e[a]);return t};var ae=({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 {}}},ne=({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}}},M=()=>({badge:({variant:e,size:r})=>css(g(g({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},ae({variant:e})),ne({size:r}))),badgeIcon:css({flexShrink:0}),badgeIconCustomTiny:css({width:"0.875rem",height:"0.875rem"}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var D=l.createContext("low"),u=()=>l.useContext(D);D.Provider;var se=Object.defineProperty,le=Object.defineProperties,ce=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?se(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)=>le(e,ce(r)),h=(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},de="span";function ge(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function pe(){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:c="lineHeightM",letterSpacing:d="letterSpacingDefault",children:w,isTruncated:W,isWordBreak:S,as:v,className:B,margin:Z="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=v||de;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[c],letterSpacing:i[d]}),W?ge():null,S?pe():null,B),margin:Z,ref:r}),w)}V.displayName="Text";var y=l.forwardRef(V),fe="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let c=u();return l.createElement(y,m(f({as:fe,testId:s,fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l.forwardRef(A),me="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:me,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 he="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l.createElement(y,m(f({as:he,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l.forwardRef(K);var ye="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),l.createElement(y,m(f({as:ye,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l.forwardRef(U);var Se="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let c=u();return l.createElement(y,m(f({as:Se,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l.forwardRef(Y);var ve=l.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();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)});ve.displayName="Paragraph";var C=l.forwardRef((e,r)=>{let t=M(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:c,endIcon:d,className:w}=v,W=x(v,["children","variant","size","testId","startIcon","endIcon","className"]),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,H(g({as:"div",testId:o,display:"inline-flex",className:cx(t.badge({variant:n,size:s}),w)},W),{ref:r}),c&&S(c),l.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&S(d))});C.displayName="Badge";var He={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function J(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,s=x(d,["entityStatus","isScheduled","size"]),o=a&&n==="default",c=He[t];return l.createElement(C,H(g(g({},s),o?{size:n,startIcon:l.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}J.displayName="EntityStatusBadge";var xe=l.forwardRef(J);
|
|
8
9
|
|
|
9
|
-
export {
|
|
10
|
+
export { C as Badge, xe as EntityStatusBadge };
|
|
10
11
|
//# sourceMappingURL=out.js.map
|
|
11
12
|
//# 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","_","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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\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\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 [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}\n >\n {children}\n </Caption>\n {endIcon && 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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\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 {\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","../../src/Badge/Badge.styles.ts","../../../utils/src/Portal/Portal.tsx","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","u","useRef","useEffect","useCallback","Children","isValidElement","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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\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\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 [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}\n >\n {children}\n </Caption>\n {endIcon && 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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\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 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
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var l = require('react');
|
|
4
4
|
var emotion = require('emotion');
|
|
5
5
|
var f36Core = require('@contentful/f36-core');
|
|
6
|
-
var
|
|
6
|
+
var i = require('@contentful/f36-tokens');
|
|
7
|
+
require('react-dom');
|
|
7
8
|
var f36Icons = require('@contentful/f36-icons');
|
|
8
9
|
|
|
9
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
11
|
|
|
11
|
-
var
|
|
12
|
-
var
|
|
12
|
+
var l__default = /*#__PURE__*/_interopDefault(l);
|
|
13
|
+
var i__default = /*#__PURE__*/_interopDefault(i);
|
|
13
14
|
|
|
14
|
-
var
|
|
15
|
+
var ee=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var T=(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={}))k.call(r,t)&&T(e,t,r[t]);if(b)for(var t of b(r))R.call(r,t)&&T(e,t,r[t]);return e},H=(e,r)=>te(e,re(r));var x=(e,r)=>{var t={};for(var a in e)k.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&&R.call(e,a)&&(t[a]=e[a]);return t};var ae=({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 {}}},ne=({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}}},M=()=>({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"},ae({variant:e})),ne({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeIconCustomTiny:emotion.css({width:"0.875rem",height:"0.875rem"}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var D=l__default.default.createContext("low"),u=()=>l__default.default.useContext(D);D.Provider;var se=Object.defineProperty,le=Object.defineProperties,ce=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,L=(e,r,t)=>r in e?se(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)=>le(e,ce(r)),h=(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},de="span";function ge(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function pe(){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:c="lineHeightM",letterSpacing:d="letterSpacingDefault",children:w,isTruncated:W,isWordBreak:S,as:v,className:B,margin:Z="none"}=t,_=h(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","letterSpacing","children","isTruncated","isWordBreak","as","className","margin"]);let Q=v||de;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[c],letterSpacing:i__default.default[d]}),W?ge():null,S?pe():null,B),margin:Z,ref:r}),w)}V.displayName="Text";var y=l__default.default.forwardRef(V),fe="span";function A(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:s="cf-ui-caption"}=t,o=h(t,["children","fontWeight","testId"]);let c=u();return l__default.default.createElement(y,m(f({as:fe,testId:s,fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",fontColor:"gray900",fontWeight:n},o),{ref:r}),a)}A.displayName="Caption";var F=l__default.default.forwardRef(A),me="h1";function G(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:me,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 he="h3";function K(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,s=h(t,["children","testId"]);let o=u();return l__default.default.createElement(y,m(f({as:he,testId:n,marginBottom:"spacingM",fontSize:o==="high"?"fontSizeLHigh":"fontSizeL",lineHeight:o==="high"?"lineHeightLHigh":"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},s),{ref:r}),a)}K.displayName="Subheading";l__default.default.forwardRef(K);var ye="h2";function U(e,r){var t=e,{children:a,size:n="default",testId:s="cf-ui-display-text"}=t,o=h(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),l__default.default.createElement(y,m(f({as:ye,testId:s,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o),{ref:r}),a)}U.displayName="DisplayText";l__default.default.forwardRef(U);var Se="h2";function Y(e,r){var t=e,{children:a,className:n,testId:s="cf-ui-section-heading"}=t,o=h(t,["children","className","testId"]);let c=u();return l__default.default.createElement(y,m(f({as:Se,testId:s,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:c==="high"?"fontSizeSHigh":"fontSizeS",lineHeight:c==="high"?"lineHeightSHigh":"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default.default.letterSpacingWide,textTransform:"uppercase"}),n)},o),{ref:r}),a)}Y.displayName="SectionHeading";l__default.default.forwardRef(Y);var ve=l__default.default.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,s=h(t,["children","testId"]);let o=u();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)});ve.displayName="Paragraph";var C=l__default.default.forwardRef((e,r)=>{let t=M(),v=e,{children:a,variant:n="primary",size:s="default",testId:o="cf-ui-badge",startIcon:c,endIcon:d,className:w}=v,W=x(v,["children","variant","size","testId","startIcon","endIcon","className"]),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,H(g({as:"div",testId:o,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:s}),w)},W),{ref:r}),c&&S(c),l__default.default.createElement(F,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&S(d))});C.displayName="Badge";var He={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function J(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,s=x(d,["entityStatus","isScheduled","size"]),o=a&&n==="default",c=He[t];return l__default.default.createElement(C,H(g(g({},s),o?{size:n,startIcon:l__default.default.createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}J.displayName="EntityStatusBadge";var xe=l__default.default.forwardRef(J);
|
|
15
16
|
|
|
16
|
-
exports.Badge =
|
|
17
|
-
exports.EntityStatusBadge =
|
|
17
|
+
exports.Badge = C;
|
|
18
|
+
exports.EntityStatusBadge = xe;
|
|
18
19
|
//# sourceMappingURL=out.js.map
|
|
19
20
|
//# 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","_","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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\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\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 [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}\n >\n {children}\n </Caption>\n {endIcon && 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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\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 {\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","../src/Badge/Badge.styles.ts","../../utils/src/Portal/Portal.tsx","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","u","useRef","useEffect","useCallback","Children","isValidElement","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';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\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\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 [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}\n >\n {children}\n </Caption>\n {endIcon && 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 badgeIconCustomTiny: css({\n width: '0.875rem',\n height: '0.875rem',\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\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 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.58.
|
|
3
|
+
"version": "4.58.2",
|
|
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.58.
|
|
23
|
+
"@contentful/f36-core": "^4.58.2",
|
|
24
24
|
"@contentful/f36-icons": "^4.27.0",
|
|
25
|
-
"@contentful/f36-tokens": "^4.0.
|
|
25
|
+
"@contentful/f36-tokens": "^4.0.4",
|
|
26
26
|
"emotion": "^10.0.17"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@contentful/f36-typography": "^4.58.
|
|
29
|
+
"@contentful/f36-typography": "^4.58.2"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=16.8",
|