@contentful/f36-badge 4.23.2 → 4.24.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 +3 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +24 -7
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import g from 'react';
|
|
2
2
|
import { cx, css } from 'emotion';
|
|
3
3
|
import { Box } from '@contentful/f36-core';
|
|
4
4
|
import r from '@contentful/f36-tokens';
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var C=Object.defineProperty,R=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var P=(e,t,a)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,n=(e,t)=>{for(var a in t||(t={}))E.call(t,a)&&P(e,a,t[a]);if(p)for(var a of p(t))h.call(t,a)&&P(e,a,t[a]);return e},l=(e,t)=>R(e,T(t));var c=(e,t)=>{var a={};for(var o in e)E.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&p)for(var o of p(e))t.indexOf(o)<0&&h.call(e,o)&&(a[o]=e[o]);return a};var H=({variant:e})=>{switch(e){case"positive":return {color:r.green600,backgroundColor:r.green200};case"primary":return {color:r.blue600,backgroundColor:r.blue200};case"negative":return {color:r.red600,backgroundColor:r.red200};case"warning":return {color:r.orange600,backgroundColor:r.orange200};case"secondary":return {color:r.gray700,backgroundColor:r.gray200};case"primary-filled":return {color:r.colorWhite,backgroundColor:r.blue600};case"featured":return {color:r.purple600,backgroundColor:r.purple200};default:return {}}},N=({size:e})=>{switch(e){case"small":return {padding:`3px ${r.spacing2Xs}`,fontSize:"0.625rem",lineHeight:"0.625rem",maxHeight:"16px"};default:return {padding:`0 ${r.spacingXs}`,fontSize:`calc(1rem * (12 / ${r.fontBaseDefault}))`,lineHeight:"20px",maxHeight:"20px"}}},v=()=>({badge:({variant:e,size:t})=>css(n(n({columnGap:r.spacing2Xs,alignItems:"center",fontFamily:r.fontStackPrimary,fontWeight:r.fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r.borderRadiusSmall}`,overflow:"hidden",verticalAlign:"middle"},H({variant:e})),N({size:t}))),badgeIcon:css({flexShrink:0}),badgeText:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var m=g.forwardRef((e,t)=>{let a=v(),S=e,{children:o,variant:i="primary",size:s="default",testId:d="cf-ui-badge",startIcon:u,endIcon:f,className:k}=S,w=c(S,["children","variant","size","testId","startIcon","endIcon","className"]),B=x=>g.cloneElement(x,{size:"tiny",className:cx(a.badgeIcon,x.props.className),variant:i==="primary-filled"?"white":i});return g.createElement(Box,l(n({as:"div",testId:d,display:"inline-flex",className:cx(a.badge({variant:i,size:s}),k)},w),{ref:t}),u&&s==="default"&&B(u),g.createElement("span",{className:a.badgeText},o),f&&s==="default"&&B(f))});m.displayName="Badge";var W={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function I(e,t){let d=e,{entityStatus:a,size:o="default"}=d,i=c(d,["entityStatus","size"]),s=W[a];return g.createElement(m,l(n({},i),{size:o,variant:s,ref:t}),a)}I.displayName="EntityStatusBadge";var M=g.forwardRef(I);
|
|
7
7
|
|
|
8
|
-
export {
|
|
8
|
+
export { m as Badge, M as EntityStatusBadge };
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/Badge.tsx","../../src/Badge/Badge.styles.ts","../../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","_a","children","testId","className","otherProps","__objRest","__spreadProps","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,
|
|
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';\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 <span className={styles.badgeText}>{children}</span>\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: `3px ${tokens.spacing2Xs}`,\n fontSize: '0.625rem',\n lineHeight: '0.625rem',\n maxHeight: '16px',\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n fontSize: `calc(1rem * (12 / ${tokens.fontBaseDefault}))`,\n lineHeight: '20px',\n maxHeight: '20px',\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n fontFamily: tokens.fontStackPrimary,\n fontWeight: tokens.fontWeightDemiBold,\n textTransform: 'uppercase',\n letterSpacing:\n '0.06rem' /*move to tokens or update wide letter spacing token*/,\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 whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'negative',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,27 +1,44 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { PropsWithHTMLElement, CommonProps, EntityStatus } from '@contentful/f36-core';
|
|
2
|
+
import { PropsWithHTMLElement, CommonProps, PickUnion, EntityStatus } from '@contentful/f36-core';
|
|
3
3
|
|
|
4
4
|
declare type BadgeSize = 'default' | 'small';
|
|
5
5
|
declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
declare type BadgeSizeWithIconProps = {
|
|
8
8
|
/**
|
|
9
9
|
* Sets the size of the component
|
|
10
10
|
* @default default
|
|
11
11
|
*/
|
|
12
|
-
size?: BadgeSize
|
|
12
|
+
size?: Exclude<BadgeSize, 'small'>;
|
|
13
|
+
/**
|
|
14
|
+
* Expects any of the icon components. Renders the icon aligned to the start
|
|
15
|
+
*/
|
|
16
|
+
startIcon?: React.ReactElement;
|
|
17
|
+
/**
|
|
18
|
+
* Expects any of the icon components. Renders the icon aligned to the end
|
|
19
|
+
*/
|
|
20
|
+
endIcon?: React.ReactElement;
|
|
21
|
+
} | {
|
|
22
|
+
/**
|
|
23
|
+
* Sets the size of the component
|
|
24
|
+
* @default default
|
|
25
|
+
*/
|
|
26
|
+
size: PickUnion<BadgeSize, 'small'>;
|
|
27
|
+
startIcon?: never;
|
|
28
|
+
endIcon?: never;
|
|
29
|
+
};
|
|
30
|
+
declare type BadgeInternalProps = CommonProps & BadgeSizeWithIconProps & {
|
|
13
31
|
/**
|
|
14
32
|
* Determines the variation of the component
|
|
15
33
|
* @default primary
|
|
16
34
|
*/
|
|
17
35
|
variant?: BadgeVariant;
|
|
18
36
|
children: React.ReactNode;
|
|
19
|
-
}
|
|
37
|
+
};
|
|
20
38
|
declare type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
|
|
21
|
-
declare const Badge: React.ForwardRefExoticComponent<
|
|
39
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
40
|
|
|
23
|
-
interface EntityStatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children'> {
|
|
24
|
-
size?: BadgeSize;
|
|
41
|
+
interface EntityStatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {
|
|
25
42
|
entityStatus: EntityStatus;
|
|
26
43
|
}
|
|
27
44
|
declare const _EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/index.js
CHANGED
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var g = require('react');
|
|
6
6
|
var emotion = require('emotion');
|
|
7
7
|
var f36Core = require('@contentful/f36-core');
|
|
8
8
|
var r = require('@contentful/f36-tokens');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var g__default = /*#__PURE__*/_interopDefaultLegacy(g);
|
|
13
13
|
var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
|
|
14
14
|
|
|
15
|
-
var
|
|
15
|
+
var C=Object.defineProperty,R=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var P=(e,t,a)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,n=(e,t)=>{for(var a in t||(t={}))E.call(t,a)&&P(e,a,t[a]);if(p)for(var a of p(t))h.call(t,a)&&P(e,a,t[a]);return e},l=(e,t)=>R(e,T(t));var c=(e,t)=>{var a={};for(var o in e)E.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&p)for(var o of p(e))t.indexOf(o)<0&&h.call(e,o)&&(a[o]=e[o]);return a};var H=({variant:e})=>{switch(e){case"positive":return {color:r__default["default"].green600,backgroundColor:r__default["default"].green200};case"primary":return {color:r__default["default"].blue600,backgroundColor:r__default["default"].blue200};case"negative":return {color:r__default["default"].red600,backgroundColor:r__default["default"].red200};case"warning":return {color:r__default["default"].orange600,backgroundColor:r__default["default"].orange200};case"secondary":return {color:r__default["default"].gray700,backgroundColor:r__default["default"].gray200};case"primary-filled":return {color:r__default["default"].colorWhite,backgroundColor:r__default["default"].blue600};case"featured":return {color:r__default["default"].purple600,backgroundColor:r__default["default"].purple200};default:return {}}},N=({size:e})=>{switch(e){case"small":return {padding:`3px ${r__default["default"].spacing2Xs}`,fontSize:"0.625rem",lineHeight:"0.625rem",maxHeight:"16px"};default:return {padding:`0 ${r__default["default"].spacingXs}`,fontSize:`calc(1rem * (12 / ${r__default["default"].fontBaseDefault}))`,lineHeight:"20px",maxHeight:"20px"}}},v=()=>({badge:({variant:e,size:t})=>emotion.css(n(n({columnGap:r__default["default"].spacing2Xs,alignItems:"center",fontFamily:r__default["default"].fontStackPrimary,fontWeight:r__default["default"].fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r__default["default"].borderRadiusSmall}`,overflow:"hidden",verticalAlign:"middle"},H({variant:e})),N({size:t}))),badgeIcon:emotion.css({flexShrink:0}),badgeText:emotion.css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var m=g__default["default"].forwardRef((e,t)=>{let a=v(),S=e,{children:o,variant:i="primary",size:s="default",testId:d="cf-ui-badge",startIcon:u,endIcon:f,className:k}=S,w=c(S,["children","variant","size","testId","startIcon","endIcon","className"]),B=x=>g__default["default"].cloneElement(x,{size:"tiny",className:emotion.cx(a.badgeIcon,x.props.className),variant:i==="primary-filled"?"white":i});return g__default["default"].createElement(f36Core.Box,l(n({as:"div",testId:d,display:"inline-flex",className:emotion.cx(a.badge({variant:i,size:s}),k)},w),{ref:t}),u&&s==="default"&&B(u),g__default["default"].createElement("span",{className:a.badgeText},o),f&&s==="default"&&B(f))});m.displayName="Badge";var W={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function I(e,t){let d=e,{entityStatus:a,size:o="default"}=d,i=c(d,["entityStatus","size"]),s=W[a];return g__default["default"].createElement(m,l(n({},i),{size:o,variant:s,ref:t}),a)}I.displayName="EntityStatusBadge";var M=g__default["default"].forwardRef(I);
|
|
16
16
|
|
|
17
|
-
exports.Badge =
|
|
18
|
-
exports.EntityStatusBadge =
|
|
17
|
+
exports.Badge = m;
|
|
18
|
+
exports.EntityStatusBadge = M;
|
|
19
19
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge/Badge.tsx","../src/Badge/Badge.styles.ts","../src/EntityStatusBadge/EntityStatusBadge.tsx"],"names":["React","cx","Box","tokens","css","variantToStyles","variant","sizeToStyles","size","getBadgeStyles","__spreadValues","Badge","props","ref","_a","children","testId","className","otherProps","__objRest","__spreadProps","statusMap","EntityStatusBadge","entityStatus","_EntityStatusBadge"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,
|
|
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';\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 <span className={styles.badgeText}>{children}</span>\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: `3px ${tokens.spacing2Xs}`,\n fontSize: '0.625rem',\n lineHeight: '0.625rem',\n maxHeight: '16px',\n };\n default:\n return {\n padding: `0 ${tokens.spacingXs}`,\n fontSize: `calc(1rem * (12 / ${tokens.fontBaseDefault}))`,\n lineHeight: '20px',\n maxHeight: '20px',\n };\n }\n};\n\nexport const getBadgeStyles = () => ({\n badge: ({ variant, size }: BadgeStylesProps) =>\n css({\n columnGap: tokens.spacing2Xs,\n alignItems: 'center',\n fontFamily: tokens.fontStackPrimary,\n fontWeight: tokens.fontWeightDemiBold,\n textTransform: 'uppercase',\n letterSpacing:\n '0.06rem' /*move to tokens or update wide letter spacing token*/,\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 whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n});\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge, type BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant } from '../types';\n\nconst statusMap: { [key in EntityStatus]: BadgeVariant } = {\n published: 'positive',\n draft: 'warning',\n archived: 'negative',\n changed: 'primary',\n deleted: 'negative',\n new: 'primary-filled',\n};\n\nexport interface EntityStatusBadgeProps\n extends Omit<BadgeProps, 'variant' | 'children' | 'endIcon' | 'startIcon'> {\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, size = 'default', ...otherProps } = props;\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} size={size} variant={variant} ref={ref}>\n {entityStatus}\n </Badge>\n );\n}\n\nEntityStatusBadge.displayName = 'EntityStatusBadge';\n\nconst _EntityStatusBadge = React.forwardRef<\n HTMLDivElement,\n ExpandProps<EntityStatusBadgeProps>\n>(EntityStatusBadge);\nexport { _EntityStatusBadge as EntityStatusBadge };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-badge",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.24.0",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"build": "tsup"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@contentful/f36-core": "^4.
|
|
23
|
+
"@contentful/f36-core": "^4.24.0",
|
|
24
24
|
"@contentful/f36-tokens": "^4.0.1",
|
|
25
25
|
"emotion": "^10.0.17"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@contentful/f36-typography": "^4.
|
|
28
|
+
"@contentful/f36-typography": "^4.24.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"react": ">=16.8",
|