@contentful/f36-badge 4.40.2 → 4.40.4
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 +4 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +20 -2
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/esm/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import s 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 { ClockIcon } from '@contentful/f36-icons';
|
|
5
6
|
|
|
6
|
-
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var
|
|
7
|
+
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))T.call(r,t)&&N(e,t,r[t]);return e},I=(e,r)=>Z(e,K(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&&v)for(var a of v(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color: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 {}}},ee=({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}}},O=()=>({badge:({variant:e,size:r})=>css(p(p({columnGap:i.spacing2Xs,alignItems:"center",borderRadius:i.borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:css({flexShrink:0}),badgeText:css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(b)for(var t of b(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)X.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&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:H,isWordBreak:w,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s.createElement(Box,f(g({},A),{as:J,className:cx(css({padding:0,fontFamily:i[n],fontWeight:i[o],color:i[l],fontSize:i[a],lineHeight:i[c]}),H?se():null,w?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s.forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s.createElement(h,f(g({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:n},l),{ref:r}),a)}L.displayName="Caption";var V=s.forwardRef(L),ce="h1";function U(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:ce,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}U.displayName="Heading";s.forwardRef(U);var pe="h3";function F(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:pe,testId:n,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s.forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:n="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s.createElement(h,f(g({as:fe,testId:o,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s.forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:n,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s.createElement(h,f(g({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:cx(css({letterSpacing:i.letterSpacingWide,textTransform:"uppercase"}),n)},l),{ref:r}),a)}G.displayName="SectionHeading";s.forwardRef(G);var ue=s.forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s.createElement(h,f(g({as:"p",testId:n,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var E=s.forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:n="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:H}=S,w=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s.cloneElement(B,{size:"tiny",className:cx(t.badgeIcon,B.props.className),variant:n==="primary-filled"?"white":n});return s.createElement(Box,I(p({as:"div",testId:l,display:"inline-flex",className:cx(t.badge({variant:n,size:o}),H)},w),{ref:r}),c&&o==="default"&&y(c),s.createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&o==="default"&&y(d))});E.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&n==="default",c=Se[t];return s.createElement(E,I(p(p({},o),l?{size:n,startIcon:s.createElement(ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s.forwardRef(q);
|
|
7
8
|
|
|
8
|
-
export {
|
|
9
|
+
export { E as Badge, Be as EntityStatusBadge };
|
|
9
10
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","styles","_a","children","testId","startIcon","endIcon","className","otherProps","__objRest","iconContent","icon","__spreadProps","_","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
|
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 type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type {\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.d.ts
CHANGED
|
@@ -38,9 +38,27 @@ declare type BadgeInternalProps = CommonProps & BadgeSizeWithIconProps & {
|
|
|
38
38
|
declare type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
|
|
39
39
|
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
declare type BadgeSizeWithIsScheduledProp = {
|
|
42
|
+
/**
|
|
43
|
+
* Sets the size of the component
|
|
44
|
+
* @default default
|
|
45
|
+
*/
|
|
46
|
+
size?: Exclude<BadgeSize, 'small'>;
|
|
47
|
+
/**
|
|
48
|
+
* Indicates that the entity that the badge is related to has a scheduled action
|
|
49
|
+
*/
|
|
50
|
+
isScheduled?: boolean;
|
|
51
|
+
} | {
|
|
52
|
+
/**
|
|
53
|
+
* Sets the size of the component
|
|
54
|
+
* @default default
|
|
55
|
+
*/
|
|
56
|
+
size: PickUnion<BadgeSize, 'small'>;
|
|
57
|
+
isScheduled?: never;
|
|
58
|
+
};
|
|
59
|
+
declare type EntityStatusBadgeProps = Omit<BadgeProps, 'children' | 'endIcon' | 'size' | 'startIcon' | 'variant'> & BadgeSizeWithIsScheduledProp & {
|
|
42
60
|
entityStatus: EntityStatus;
|
|
43
|
-
}
|
|
61
|
+
};
|
|
44
62
|
declare const _EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
45
63
|
|
|
46
64
|
export { Badge, BadgeProps, BadgeVariant, _EntityStatusBadge as EntityStatusBadge, EntityStatusBadgeProps };
|
package/dist/index.js
CHANGED
|
@@ -5,15 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var s = require('react');
|
|
6
6
|
var emotion = require('emotion');
|
|
7
7
|
var f36Core = require('@contentful/f36-core');
|
|
8
|
-
var
|
|
8
|
+
var i = require('@contentful/f36-tokens');
|
|
9
|
+
var f36Icons = require('@contentful/f36-icons');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
|
|
13
|
-
var
|
|
14
|
+
var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
|
|
14
15
|
|
|
15
|
-
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var
|
|
16
|
+
var Y=Object.defineProperty,Z=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var N=(e,r,t)=>r in e?Y(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,p=(e,r)=>{for(var t in r||(r={}))k.call(r,t)&&N(e,t,r[t]);if(v)for(var t of v(r))T.call(r,t)&&N(e,t,r[t]);return e},I=(e,r)=>Z(e,K(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&&v)for(var a of v(e))r.indexOf(a)<0&&T.call(e,a)&&(t[a]=e[a]);return t};var Q=({variant:e})=>{switch(e){case"positive":return {color: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 {}}},ee=({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}}},O=()=>({badge:({variant:e,size:r})=>emotion.css(p(p({columnGap:i__default["default"].spacing2Xs,alignItems:"center",borderRadius:i__default["default"].borderRadiusSmall,overflow:"hidden",verticalAlign:"middle"},Q({variant:e})),ee({size:r}))),badgeIcon:emotion.css({flexShrink:0}),badgeText:emotion.css({color:"currentcolor",lineHeight:"inherit",textTransform:"lowercase","::first-letter":{textTransform:"uppercase"}})});var ae=Object.defineProperty,ne=Object.defineProperties,ie=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,R=(e,r,t)=>r in e?ae(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,g=(e,r)=>{for(var t in r||(r={}))X.call(r,t)&&R(e,t,r[t]);if(b)for(var t of b(r))j.call(r,t)&&R(e,t,r[t]);return e},f=(e,r)=>ne(e,ie(r)),m=(e,r)=>{var t={};for(var a in e)X.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&&j.call(e,a)&&(t[a]=e[a]);return t},oe="span";function se(){return emotion.css({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"100%"})}function le(){return emotion.css({wordBreak:"break-word"})}function D(e,r){var t=e,{fontSize:a="fontSizeM",fontStack:n="fontStackPrimary",fontWeight:o="fontWeightNormal",fontColor:l="gray800",lineHeight:c="lineHeightM",children:d,isTruncated:H,isWordBreak:w,as:y,className:S,margin:B="none"}=t,A=m(t,["fontSize","fontStack","fontWeight","fontColor","lineHeight","children","isTruncated","isWordBreak","as","className","margin"]);let J=y||oe;return s__default["default"].createElement(f36Core.Box,f(g({},A),{as:J,className:emotion.cx(emotion.css({padding:0,fontFamily:i__default["default"][n],fontWeight:i__default["default"][o],color:i__default["default"][l],fontSize:i__default["default"][a],lineHeight:i__default["default"][c]}),H?se():null,w?le():null,S),margin:B,ref:r}),d)}D.displayName="Text";var h=s__default["default"].forwardRef(D),de="span";function L(e,r){var t=e,{children:a,fontWeight:n="fontWeightNormal",testId:o="cf-ui-caption"}=t,l=m(t,["children","fontWeight","testId"]);return s__default["default"].createElement(h,f(g({as:de,testId:o,fontSize:"fontSizeS",lineHeight:"lineHeightS",fontColor:"gray900",fontWeight:n},l),{ref:r}),a)}L.displayName="Caption";var V=s__default["default"].forwardRef(L),ce="h1";function U(e,r){var t=e,{children:a,testId:n="cf-ui-heading"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(g({as:ce,testId:n,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o),{ref:r}),a)}U.displayName="Heading";s__default["default"].forwardRef(U);var pe="h3";function F(e,r){var t=e,{children:a,testId:n="cf-ui-subheading"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(g({as:pe,testId:n,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o),{ref:r}),a)}F.displayName="Subheading";s__default["default"].forwardRef(F);var fe="h2";function $(e,r){var t=e,{children:a,size:n="default",testId:o="cf-ui-display-text"}=t,l=m(t,["children","size","testId"]);let c="fontSize2Xl",d="lineHeight2Xl";return n==="large"&&(c="fontSize3Xl",d="lineHeight3Xl"),s__default["default"].createElement(h,f(g({as:fe,testId:o,marginBottom:n==="default"?"spacingL":"spacingXl",fontSize:c,lineHeight:d,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},l),{ref:r}),a)}$.displayName="DisplayText";s__default["default"].forwardRef($);var me="h2";function G(e,r){var t=e,{children:a,className:n,testId:o="cf-ui-section-heading"}=t,l=m(t,["children","className","testId"]);return s__default["default"].createElement(h,f(g({as:me,testId:o,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:emotion.cx(emotion.css({letterSpacing:i__default["default"].letterSpacingWide,textTransform:"uppercase"}),n)},l),{ref:r}),a)}G.displayName="SectionHeading";s__default["default"].forwardRef(G);var ue=s__default["default"].forwardRef((e,r)=>{var t=e,{children:a,testId:n="cf-ui-paragraph"}=t,o=m(t,["children","testId"]);return s__default["default"].createElement(h,f(g({as:"p",testId:n,marginBottom:"spacingM",lineHeight:"lineHeightM"},o),{ref:r}),a)});ue.displayName="Paragraph";var E=s__default["default"].forwardRef((e,r)=>{let t=O(),S=e,{children:a,variant:n="primary",size:o="default",testId:l="cf-ui-badge",startIcon:c,endIcon:d,className:H}=S,w=x(S,["children","variant","size","testId","startIcon","endIcon","className"]),y=B=>s__default["default"].cloneElement(B,{size:"tiny",className:emotion.cx(t.badgeIcon,B.props.className),variant:n==="primary-filled"?"white":n});return s__default["default"].createElement(f36Core.Box,I(p({as:"div",testId:l,display:"inline-flex",className:emotion.cx(t.badge({variant:n,size:o}),H)},w),{ref:r}),c&&o==="default"&&y(c),s__default["default"].createElement(V,{fontWeight:"fontWeightMedium",isTruncated:!0,className:t.badgeText},a),d&&o==="default"&&y(d))});E.displayName="Badge";var Se={published:"positive",draft:"warning",archived:"secondary",changed:"primary",deleted:"negative",new:"primary-filled"};function q(e,r){let d=e,{entityStatus:t,isScheduled:a=void 0,size:n="default"}=d,o=x(d,["entityStatus","isScheduled","size"]),l=a&&n==="default",c=Se[t];return s__default["default"].createElement(E,I(p(p({},o),l?{size:n,startIcon:s__default["default"].createElement(f36Icons.ClockIcon,{testId:"schedule-icon"})}:{size:n}),{variant:c,ref:r}),t)}q.displayName="EntityStatusBadge";var Be=s__default["default"].forwardRef(q);
|
|
16
17
|
|
|
17
|
-
exports.Badge =
|
|
18
|
-
exports.EntityStatusBadge =
|
|
18
|
+
exports.Badge = E;
|
|
19
|
+
exports.EntityStatusBadge = Be;
|
|
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","_","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'secondary',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
|
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 type PickUnion,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\nimport { Caption } from '@contentful/f36-typography';\n\ntype BadgeSizeWithIconProps =\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: Exclude<BadgeSize, 'small'>;\n /**\n * Expects any of the icon components. Renders the icon aligned to the start\n */\n startIcon?: React.ReactElement;\n /**\n * Expects any of the icon components. Renders the icon aligned to the end\n */\n endIcon?: React.ReactElement;\n }\n | {\n /**\n * Sets the size of the component\n * @default default\n */\n size: PickUnion<BadgeSize, 'small'>;\n // We use discriminative union typing, so in case the size is set as small we don't allow startIcon or endIcon\n startIcon?: never;\n endIcon?: never;\n };\n\nexport type BadgeInternalProps = CommonProps &\n BadgeSizeWithIconProps & {\n /**\n * Determines the variation of the component\n * @default primary\n */\n variant?: BadgeVariant;\n\n children: React.ReactNode;\n };\n\nexport type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;\n\nexport const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(\n (props, ref) => {\n const styles = getBadgeStyles();\n const {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n startIcon,\n endIcon,\n className,\n ...otherProps\n } = props;\n\n const iconContent = (icon) =>\n React.cloneElement(icon, {\n size: 'tiny',\n className: cx(styles.badgeIcon, icon.props.className),\n variant: variant === 'primary-filled' ? 'white' : variant,\n });\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-flex\"\n className={cx(styles.badge({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {startIcon && size === 'default' && iconContent(startIcon)}\n <Caption\n fontWeight=\"fontWeightMedium\"\n isTruncated\n className={styles.badgeText}\n >\n {children}\n </Caption>\n {endIcon && size === 'default' && iconContent(endIcon)}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';\nimport type { CSSObject } from '@emotion/serialize';\n\nconst variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {\n switch (variant) {\n case 'positive':\n return {\n color: tokens.green600,\n backgroundColor: tokens.green200,\n };\n case 'primary':\n return {\n color: tokens.blue600,\n backgroundColor: tokens.blue200,\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.red200,\n };\n case 'warning':\n return {\n color: tokens.orange600,\n backgroundColor: tokens.orange200,\n };\n case 'secondary':\n return {\n color: tokens.gray700,\n backgroundColor: tokens.gray200,\n };\n case 'primary-filled':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue600,\n };\n case 'featured':\n return {\n color: tokens.purple600,\n backgroundColor: tokens.purple200,\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {\n switch (size) {\n case 'small':\n return {\n padding: `0 ${tokens.spacing2Xs}`,\n lineHeight: tokens.lineHeightS,\n maxHeight: tokens.lineHeightS,\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n lineHeight: tokens.lineHeightM,\n maxHeight: tokens.lineHeightM,\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n borderRadius: tokens.borderRadiusSmall,\n overflow: 'hidden',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n }),\n badgeIcon: css({\n flexShrink: 0,\n }),\n badgeText: css({\n color: 'currentcolor',\n lineHeight: 'inherit',\n textTransform: 'lowercase',\n '::first-letter': {\n textTransform: 'uppercase',\n },\n }),\n});\n","import React from 'react';\nimport type {\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.40.
|
|
3
|
+
"version": "4.40.4",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -20,12 +20,13 @@
|
|
|
20
20
|
"build": "tsup"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@contentful/f36-core": "^4.40.
|
|
23
|
+
"@contentful/f36-core": "^4.40.4",
|
|
24
|
+
"@contentful/f36-icons": "^4.25.0",
|
|
24
25
|
"@contentful/f36-tokens": "^4.0.1",
|
|
25
26
|
"emotion": "^10.0.17"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@contentful/f36-typography": "^4.40.
|
|
29
|
+
"@contentful/f36-typography": "^4.40.4"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|
|
31
32
|
"react": ">=16.8",
|