@contentful/f36-badge 4.1.2 → 4.1.5

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 CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.5](https://github.com/contentful/forma-36/compare/@contentful/f36-badge@4.1.4...@contentful/f36-badge@4.1.5) (2022-02-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * fix badge alignment ([#1902](https://github.com/contentful/forma-36/issues/1902)) ([d25face](https://github.com/contentful/forma-36/commit/d25facea39e644e93b1e5c3f6e1ffc072696dd96))
12
+
13
+
14
+
15
+
16
+
17
+ ## [4.1.4](https://github.com/contentful/forma-36/compare/@contentful/f36-badge@4.1.3...@contentful/f36-badge@4.1.4) (2022-02-22)
18
+
19
+ **Note:** Version bump only for package @contentful/f36-badge
20
+
21
+
22
+
23
+
24
+
25
+ ## [4.1.3](https://github.com/contentful/forma-36/compare/@contentful/f36-badge@4.1.2...@contentful/f36-badge@4.1.3) (2022-02-17)
26
+
27
+ **Note:** Version bump only for package @contentful/f36-badge
28
+
29
+
30
+
31
+
32
+
6
33
  ## [4.1.2](https://github.com/contentful/forma-36/compare/@contentful/f36-badge@4.1.1...@contentful/f36-badge@4.1.2) (2022-02-15)
7
34
 
8
35
 
package/dist/main.js CHANGED
@@ -87,6 +87,7 @@ const $2a438b1691bd83eb$export$c9d43b5c20560398 = ({ variant: variant , size: si
87
87
  whiteSpace: 'nowrap',
88
88
  overflow: 'hidden',
89
89
  textOverflow: 'ellipsis',
90
+ verticalAlign: 'middle',
90
91
  ...$2a438b1691bd83eb$var$variantToStyles({
91
92
  variant: variant
92
93
  }),
package/dist/main.js.map CHANGED
@@ -1 +1 @@
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 ...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\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","EntityStatus","statusMap","published","draft","archived","changed","deleted","new","Omit","entityStatus","Ref","_EntityStatusBadge"],"version":3,"file":"main.js.map"}
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\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
@@ -78,6 +78,7 @@ const $8a1e33ed71d0ddeb$export$c9d43b5c20560398 = ({ variant: variant , size: si
78
78
  whiteSpace: 'nowrap',
79
79
  overflow: 'hidden',
80
80
  textOverflow: 'ellipsis',
81
+ verticalAlign: 'middle',
81
82
  ...$8a1e33ed71d0ddeb$var$variantToStyles({
82
83
  variant: variant
83
84
  }),
@@ -1 +1 @@
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 ...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\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","EntityStatus","statusMap","published","draft","archived","changed","deleted","new","Omit","entityStatus","Ref","_EntityStatusBadge"],"version":3,"file":"module.js.map"}
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\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.1.2",
3
+ "version": "4.1.5",
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.1.1",
24
+ "@contentful/f36-core": "^4.2.0",
25
25
  "@contentful/f36-tokens": "^4.0.0",
26
26
  "emotion": "^10.0.17"
27
27
  },
28
28
  "devDependencies": {
29
- "@contentful/f36-typography": "^4.1.1"
29
+ "@contentful/f36-typography": "^4.2.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "react": ">=16.8"
@@ -34,5 +34,5 @@
34
34
  "publishConfig": {
35
35
  "access": "public"
36
36
  },
37
- "gitHead": "27308acb14d60cb8a6e16048613a564cf2c4d7e1"
37
+ "gitHead": "779ef055353f77cde6181f8a612fa2dfd9804cdb"
38
38
  }