@contentful/f36-badge 4.6.2 → 4.7.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/CHANGELOG.md +7 -0
- package/dist/main.js +7 -8
- package/dist/main.js.map +1 -1
- package/dist/module.js +7 -8
- package/dist/module.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
package/dist/main.js
CHANGED
|
@@ -55,8 +55,7 @@ const $2a438b1691bd83eb$var$variantToStyles = ({ variant: variant })=>{
|
|
|
55
55
|
backgroundColor: ($parcel$interopDefault($2TfL1$contentfulf36tokens)).purple200
|
|
56
56
|
};
|
|
57
57
|
default:
|
|
58
|
-
return {
|
|
59
|
-
};
|
|
58
|
+
return {};
|
|
60
59
|
}
|
|
61
60
|
};
|
|
62
61
|
const $2a438b1691bd83eb$var$sizeToStyles = ({ size: size })=>{
|
|
@@ -78,7 +77,7 @@ const $2a438b1691bd83eb$var$sizeToStyles = ({ size: size })=>{
|
|
|
78
77
|
}
|
|
79
78
|
};
|
|
80
79
|
const $2a438b1691bd83eb$export$c9d43b5c20560398 = ({ variant: variant , size: size })=>{
|
|
81
|
-
return
|
|
80
|
+
return /*#__PURE__*/ $2TfL1$emotion.css({
|
|
82
81
|
fontFamily: ($parcel$interopDefault($2TfL1$contentfulf36tokens)).fontStackPrimary,
|
|
83
82
|
fontWeight: ($parcel$interopDefault($2TfL1$contentfulf36tokens)).fontWeightDemiBold,
|
|
84
83
|
textTransform: 'uppercase',
|
|
@@ -94,13 +93,13 @@ const $2a438b1691bd83eb$export$c9d43b5c20560398 = ({ variant: variant , size: si
|
|
|
94
93
|
...$2a438b1691bd83eb$var$sizeToStyles({
|
|
95
94
|
size: size
|
|
96
95
|
})
|
|
97
|
-
})
|
|
96
|
+
});
|
|
98
97
|
};
|
|
99
98
|
|
|
100
99
|
|
|
101
100
|
const $0b9eb5cb77360f1e$export$37acb3580601e69a = /*#__PURE__*/ ($parcel$interopDefault($2TfL1$react)).forwardRef((props, ref)=>{
|
|
102
101
|
const { children: children , variant: variant = 'primary' , size: size = 'default' , testId: testId = 'cf-ui-badge' , className: className , ...otherProps } = props;
|
|
103
|
-
return
|
|
102
|
+
return /*#__PURE__*/ ($parcel$interopDefault($2TfL1$react)).createElement($2TfL1$contentfulf36core.Box, {
|
|
104
103
|
as: "div",
|
|
105
104
|
testId: testId,
|
|
106
105
|
display: "inline-block",
|
|
@@ -110,7 +109,7 @@ const $0b9eb5cb77360f1e$export$37acb3580601e69a = /*#__PURE__*/ ($parcel$interop
|
|
|
110
109
|
}), className),
|
|
111
110
|
...otherProps,
|
|
112
111
|
ref: ref
|
|
113
|
-
}, children)
|
|
112
|
+
}, children);
|
|
114
113
|
});
|
|
115
114
|
$0b9eb5cb77360f1e$export$37acb3580601e69a.displayName = 'Badge';
|
|
116
115
|
|
|
@@ -128,11 +127,11 @@ const $db994f281dc286ac$var$statusMap = {
|
|
|
128
127
|
function $db994f281dc286ac$var$EntityStatusBadge(props, ref) {
|
|
129
128
|
const { entityStatus: entityStatus , ...otherProps } = props;
|
|
130
129
|
const variant = $db994f281dc286ac$var$statusMap[entityStatus];
|
|
131
|
-
return
|
|
130
|
+
return /*#__PURE__*/ ($parcel$interopDefault($2TfL1$react)).createElement($0b9eb5cb77360f1e$export$37acb3580601e69a, {
|
|
132
131
|
...otherProps,
|
|
133
132
|
variant: variant,
|
|
134
133
|
ref: ref
|
|
135
|
-
}, entityStatus)
|
|
134
|
+
}, entityStatus);
|
|
136
135
|
}
|
|
137
136
|
$db994f281dc286ac$var$EntityStatusBadge.displayName = 'EntityStatusBadge';
|
|
138
137
|
const $db994f281dc286ac$export$ab4ed1b313ef6d98 = /*#__PURE__*/ ($parcel$interopDefault($2TfL1$react)).forwardRef($db994f281dc286ac$var$EntityStatusBadge);
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/components/badge/src/index.ts","packages/components/badge/src/Badge/Badge.tsx","packages/components/badge/src/Badge/Badge.styles.ts","packages/components/badge/src/EntityStatusBadge/EntityStatusBadge.tsx"],"sourcesContent":["export { Badge } from './Badge/Badge';\nexport type { BadgeProps } from './Badge/Badge';\nexport { EntityStatusBadge } from './EntityStatusBadge/EntityStatusBadge';\nexport type { EntityStatusBadgeProps } from './EntityStatusBadge/EntityStatusBadge';\nexport type { BadgeVariant } from './types';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport interface BadgeInternalProps extends CommonProps {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\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 {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n className,\n ...otherProps\n } = props;\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-block\"\n className={cx(getBadgeStyles({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize } 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 variant,\n size,\n}: {\n variant: BadgeVariant;\n size: BadgeSize;\n}) => {\n return css({\n fontFamily: tokens.fontStackPrimary,\n fontWeight: tokens.fontWeightDemiBold,\n\n textTransform: 'uppercase',\n letterSpacing:\n '0.06rem' /*move to tokens or update wide letter spacing token*/,\n borderRadius: `${tokens.borderRadiusSmall}`,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n });\n};\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant, BadgeSize } 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'> {\n size?: BadgeSize;\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, ...otherProps } = props;\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} 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"],"names":["Badge","BadgeProps","EntityStatusBadge","EntityStatusBadgeProps","BadgeVariant","React","Box","CommonProps","PropsWithHTMLElement","ExpandProps","BadgeSize","getBadgeStyles","BadgeInternalProps","size","variant","children","ReactNode","forwardRef","HTMLDivElement","props","ref","testId","className","otherProps","displayName","tokens","CSSObject","variantToStyles","color","green600","backgroundColor","green200","blue600","blue200","red600","red200","orange600","orange200","gray700","gray200","colorWhite","purple600","purple200","sizeToStyles","padding","spacing2Xs","fontSize","lineHeight","maxHeight","spacingXs","fontBaseDefault","fontFamily","fontStackPrimary","fontWeight","fontWeightDemiBold","textTransform","letterSpacing","borderRadius","borderRadiusSmall","whiteSpace","overflow","textOverflow","verticalAlign","EntityStatus","statusMap","published","draft","archived","changed","deleted","new","Omit","entityStatus","Ref","_EntityStatusBadge"],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -46,8 +46,7 @@ const $8a1e33ed71d0ddeb$var$variantToStyles = ({ variant: variant })=>{
|
|
|
46
46
|
backgroundColor: $6t5Db$contentfulf36tokens.purple200
|
|
47
47
|
};
|
|
48
48
|
default:
|
|
49
|
-
return {
|
|
50
|
-
};
|
|
49
|
+
return {};
|
|
51
50
|
}
|
|
52
51
|
};
|
|
53
52
|
const $8a1e33ed71d0ddeb$var$sizeToStyles = ({ size: size })=>{
|
|
@@ -69,7 +68,7 @@ const $8a1e33ed71d0ddeb$var$sizeToStyles = ({ size: size })=>{
|
|
|
69
68
|
}
|
|
70
69
|
};
|
|
71
70
|
const $8a1e33ed71d0ddeb$export$c9d43b5c20560398 = ({ variant: variant , size: size })=>{
|
|
72
|
-
return
|
|
71
|
+
return /*#__PURE__*/ $6t5Db$css({
|
|
73
72
|
fontFamily: $6t5Db$contentfulf36tokens.fontStackPrimary,
|
|
74
73
|
fontWeight: $6t5Db$contentfulf36tokens.fontWeightDemiBold,
|
|
75
74
|
textTransform: 'uppercase',
|
|
@@ -85,13 +84,13 @@ const $8a1e33ed71d0ddeb$export$c9d43b5c20560398 = ({ variant: variant , size: si
|
|
|
85
84
|
...$8a1e33ed71d0ddeb$var$sizeToStyles({
|
|
86
85
|
size: size
|
|
87
86
|
})
|
|
88
|
-
})
|
|
87
|
+
});
|
|
89
88
|
};
|
|
90
89
|
|
|
91
90
|
|
|
92
91
|
const $23fe874050de62bc$export$37acb3580601e69a = /*#__PURE__*/ $6t5Db$react.forwardRef((props, ref)=>{
|
|
93
92
|
const { children: children , variant: variant = 'primary' , size: size = 'default' , testId: testId = 'cf-ui-badge' , className: className , ...otherProps } = props;
|
|
94
|
-
return
|
|
93
|
+
return /*#__PURE__*/ $6t5Db$react.createElement($6t5Db$Box, {
|
|
95
94
|
as: "div",
|
|
96
95
|
testId: testId,
|
|
97
96
|
display: "inline-block",
|
|
@@ -101,7 +100,7 @@ const $23fe874050de62bc$export$37acb3580601e69a = /*#__PURE__*/ $6t5Db$react.for
|
|
|
101
100
|
}), className),
|
|
102
101
|
...otherProps,
|
|
103
102
|
ref: ref
|
|
104
|
-
}, children)
|
|
103
|
+
}, children);
|
|
105
104
|
});
|
|
106
105
|
$23fe874050de62bc$export$37acb3580601e69a.displayName = 'Badge';
|
|
107
106
|
|
|
@@ -119,11 +118,11 @@ const $a23f6dc8cefcf8e1$var$statusMap = {
|
|
|
119
118
|
function $a23f6dc8cefcf8e1$var$EntityStatusBadge(props, ref) {
|
|
120
119
|
const { entityStatus: entityStatus , ...otherProps } = props;
|
|
121
120
|
const variant = $a23f6dc8cefcf8e1$var$statusMap[entityStatus];
|
|
122
|
-
return
|
|
121
|
+
return /*#__PURE__*/ $6t5Db$react.createElement($23fe874050de62bc$export$37acb3580601e69a, {
|
|
123
122
|
...otherProps,
|
|
124
123
|
variant: variant,
|
|
125
124
|
ref: ref
|
|
126
|
-
}, entityStatus)
|
|
125
|
+
}, entityStatus);
|
|
127
126
|
}
|
|
128
127
|
$a23f6dc8cefcf8e1$var$EntityStatusBadge.displayName = 'EntityStatusBadge';
|
|
129
128
|
const $a23f6dc8cefcf8e1$export$ab4ed1b313ef6d98 = /*#__PURE__*/ $6t5Db$react.forwardRef($a23f6dc8cefcf8e1$var$EntityStatusBadge);
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/components/badge/src/index.ts","packages/components/badge/src/Badge/Badge.tsx","packages/components/badge/src/Badge/Badge.styles.ts","packages/components/badge/src/EntityStatusBadge/EntityStatusBadge.tsx"],"sourcesContent":["export { Badge } from './Badge/Badge';\nexport type { BadgeProps } from './Badge/Badge';\nexport { EntityStatusBadge } from './EntityStatusBadge/EntityStatusBadge';\nexport type { EntityStatusBadgeProps } from './EntityStatusBadge/EntityStatusBadge';\nexport type { BadgeVariant } from './types';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\n\nexport interface BadgeInternalProps extends CommonProps {\n /**\n * Sets the size of the component\n * @default default\n */\n size?: BadgeSize;\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 {\n children,\n variant = 'primary',\n size = 'default',\n testId = 'cf-ui-badge',\n className,\n ...otherProps\n } = props;\n\n return (\n <Box\n as=\"div\"\n testId={testId}\n display=\"inline-block\"\n className={cx(getBadgeStyles({ variant, size }), className)}\n {...otherProps}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n);\n\nBadge.displayName = 'Badge';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport type { BadgeVariant, BadgeSize } 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 variant,\n size,\n}: {\n variant: BadgeVariant;\n size: BadgeSize;\n}) => {\n return css({\n fontFamily: tokens.fontStackPrimary,\n fontWeight: tokens.fontWeightDemiBold,\n\n textTransform: 'uppercase',\n letterSpacing:\n '0.06rem' /*move to tokens or update wide letter spacing token*/,\n borderRadius: `${tokens.borderRadiusSmall}`,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n verticalAlign: 'middle',\n ...variantToStyles({ variant }),\n ...sizeToStyles({ size }),\n });\n};\n","import React from 'react';\nimport type { EntityStatus, ExpandProps } from '@contentful/f36-core';\n\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeProps } from '../Badge/Badge';\nimport type { BadgeVariant, BadgeSize } 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'> {\n size?: BadgeSize;\n entityStatus: EntityStatus;\n}\n\nfunction EntityStatusBadge(\n props: EntityStatusBadgeProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { entityStatus, ...otherProps } = props;\n const variant = statusMap[entityStatus];\n return (\n <Badge {...otherProps} 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"],"names":["Badge","BadgeProps","EntityStatusBadge","EntityStatusBadgeProps","BadgeVariant","React","Box","CommonProps","PropsWithHTMLElement","ExpandProps","BadgeSize","getBadgeStyles","BadgeInternalProps","size","variant","children","ReactNode","forwardRef","HTMLDivElement","props","ref","testId","className","otherProps","displayName","tokens","CSSObject","variantToStyles","color","green600","backgroundColor","green200","blue600","blue200","red600","red200","orange600","orange200","gray700","gray200","colorWhite","purple600","purple200","sizeToStyles","padding","spacing2Xs","fontSize","lineHeight","maxHeight","spacingXs","fontBaseDefault","fontFamily","fontStackPrimary","fontWeight","fontWeightDemiBold","textTransform","letterSpacing","borderRadius","borderRadiusSmall","whiteSpace","overflow","textOverflow","verticalAlign","EntityStatus","statusMap","published","draft","archived","changed","deleted","new","Omit","entityStatus","Ref","_EntityStatusBadge"],"version":3,"file":"module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-badge",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@babel/runtime": "^7.6.2",
|
|
24
|
-
"@contentful/f36-core": "^4.
|
|
24
|
+
"@contentful/f36-core": "^4.7.0",
|
|
25
25
|
"@contentful/f36-tokens": "^4.0.1",
|
|
26
26
|
"emotion": "^10.0.17"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@contentful/f36-typography": "^4.
|
|
29
|
+
"@contentful/f36-typography": "^4.7.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=16.8"
|