@contentful/f36-badge 4.16.0 → 4.19.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 +21 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +19 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +9 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +7 -7
- package/dist/main.js +0 -142
- package/dist/main.js.map +0 -1
- package/dist/module.js +0 -134
- package/dist/module.js.map +0 -1
- package/dist/types.d.ts +0 -26
- package/dist/types.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.19.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies []:
|
|
8
|
+
- @contentful/f36-core@4.19.0
|
|
9
|
+
|
|
10
|
+
## 4.18.0
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies []:
|
|
15
|
+
- @contentful/f36-core@4.18.0
|
|
16
|
+
|
|
17
|
+
## 4.17.0
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies []:
|
|
22
|
+
- @contentful/f36-core@4.17.0
|
|
23
|
+
|
|
3
24
|
## 4.16.0
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropsWithHTMLElement, CommonProps, EntityStatus } from '@contentful/f36-core';
|
|
3
|
+
|
|
4
|
+
declare type BadgeSize = 'default' | 'small';
|
|
5
|
+
declare type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
|
|
6
|
+
|
|
7
|
+
interface BadgeInternalProps extends CommonProps {
|
|
8
|
+
/**
|
|
9
|
+
* Sets the size of the component
|
|
10
|
+
* @default default
|
|
11
|
+
*/
|
|
12
|
+
size?: BadgeSize;
|
|
13
|
+
/**
|
|
14
|
+
* Determines the variation of the component
|
|
15
|
+
* @default primary
|
|
16
|
+
*/
|
|
17
|
+
variant?: BadgeVariant;
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
declare type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
|
|
21
|
+
declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof BadgeInternalProps> & BadgeInternalProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
interface EntityStatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children'> {
|
|
24
|
+
size?: BadgeSize;
|
|
25
|
+
entityStatus: EntityStatus;
|
|
26
|
+
}
|
|
27
|
+
declare const _EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
|
|
29
|
+
export { Badge, BadgeProps, BadgeVariant, _EntityStatusBadge as EntityStatusBadge, EntityStatusBadgeProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var B = require('react');
|
|
6
|
+
var emotion = require('emotion');
|
|
7
|
+
var f36Core = require('@contentful/f36-core');
|
|
8
|
+
var r = require('@contentful/f36-tokens');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var B__default = /*#__PURE__*/_interopDefaultLegacy(B);
|
|
13
|
+
var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
|
|
14
|
+
|
|
15
|
+
var P=Object.defineProperty,h=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,t,a)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,i=(e,t)=>{for(var a in t||(t={}))u.call(t,a)&&m(e,a,t[a]);if(s)for(var a of s(t))y.call(t,a)&&m(e,a,t[a]);return e},d=(e,t)=>h(e,b(t));var p=(e,t)=>{var a={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&y.call(e,o)&&(a[o]=e[o]);return a};var C=({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 {}}},k=({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"}}},f=({variant:e,size:t})=>emotion.css(i(i({fontFamily:r__default["default"].fontStackPrimary,fontWeight:r__default["default"].fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r__default["default"].borderRadiusSmall}`,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",verticalAlign:"middle"},C({variant:e})),k({size:t})));var g=B__default["default"].forwardRef((e,t)=>{let c=e,{children:a,variant:o="primary",size:l="default",testId:n="cf-ui-badge",className:E}=c,v=p(c,["children","variant","size","testId","className"]);return B__default["default"].createElement(f36Core.Box,d(i({as:"div",testId:n,display:"inline-block",className:emotion.cx(f({variant:o,size:l}),E)},v),{ref:t}),a)});g.displayName="Badge";var R={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function x(e,t){let n=e,{entityStatus:a}=n,o=p(n,["entityStatus"]),l=R[a];return B__default["default"].createElement(g,d(i({},o),{variant:l,ref:t}),a)}x.displayName="EntityStatusBadge";var T=B__default["default"].forwardRef(x);
|
|
16
|
+
|
|
17
|
+
exports.Badge = g;
|
|
18
|
+
exports.EntityStatusBadge = T;
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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,MAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAIpB,IAAMC,EAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,OACD,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,MACG,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,UAEA,MAAO,CAAC,EAEd,EAEMI,EAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,OACD,QACH,MAAO,CACL,QAAS,OAAOL,EAAO,aACvB,SAAU,WACV,WAAY,WACZ,UAAW,MACb,UAEA,MAAO,CACL,QAAS,KAAKA,EAAO,YACrB,SAAU,qBAAqBA,EAAO,oBACtC,WAAY,OACZ,UAAW,MACb,EAEN,EAEaM,EAAiB,CAAC,CAC7B,QAAAH,EACA,KAAAE,CACF,IAISJ,EAAIM,IAAA,CACT,WAAYP,EAAO,iBACnB,WAAYA,EAAO,mBAEnB,cAAe,YACf,cACE,UACF,aAAc,GAAGA,EAAO,oBACxB,WAAY,SACZ,SAAU,SACV,aAAc,WACd,cAAe,UACZE,EAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,EAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,ED1DI,IAAMG,EAAQX,EAAM,WACzB,CAACY,EAAOC,IAAQ,CACd,IAOIC,EAAAF,EANF,UAAAG,EACA,QAAAT,EAAU,UACV,KAAAE,EAAO,UACP,OAAAQ,EAAS,cACT,UAAAC,CApCN,EAsCQH,EADCI,EAAAC,EACDL,EADC,CALH,WACA,UACA,OACA,SACA,cAIF,OACEd,EAAA,cAACE,EAAAkB,EAAAV,EAAA,CACC,GAAG,MACH,OAAQM,EACR,QAAQ,eACR,UAAWf,EAAGQ,EAAe,CAAE,QAAAH,EAAS,KAAAE,CAAK,CAAC,EAAGS,CAAS,GACtDC,GALL,CAMC,IAAKL,IAEJE,CACH,CAEJ,CACF,EAEAJ,EAAM,YAAc,QEvDpB,OAAOX,MAAW,QAMlB,IAAMqB,EAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,WACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAQA,SAASC,EACPV,EACAC,EACA,CACA,IAAwCC,EAAAF,EAAhC,cAAAW,CAzBV,EAyB0CT,EAAfI,EAAAC,EAAeL,EAAf,CAAjB,iBACFR,EAAUe,EAAUE,GAC1B,OACEvB,EAAA,cAACW,EAAAS,EAAAV,EAAA,GAAUQ,GAAV,CAAsB,QAASZ,EAAS,IAAKO,IAC3CU,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAME,EAAqBxB,EAAM,WAG/BsB,CAAiB","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\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, 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"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import B from 'react';
|
|
2
|
+
import { cx, css } from 'emotion';
|
|
3
|
+
import { Box } from '@contentful/f36-core';
|
|
4
|
+
import r from '@contentful/f36-tokens';
|
|
5
|
+
|
|
6
|
+
var P=Object.defineProperty,h=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var m=(e,t,a)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,i=(e,t)=>{for(var a in t||(t={}))u.call(t,a)&&m(e,a,t[a]);if(s)for(var a of s(t))y.call(t,a)&&m(e,a,t[a]);return e},d=(e,t)=>h(e,b(t));var p=(e,t)=>{var a={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&y.call(e,o)&&(a[o]=e[o]);return a};var C=({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 {}}},k=({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"}}},f=({variant:e,size:t})=>css(i(i({fontFamily:r.fontStackPrimary,fontWeight:r.fontWeightDemiBold,textTransform:"uppercase",letterSpacing:"0.06rem",borderRadius:`${r.borderRadiusSmall}`,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",verticalAlign:"middle"},C({variant:e})),k({size:t})));var g=B.forwardRef((e,t)=>{let c=e,{children:a,variant:o="primary",size:l="default",testId:n="cf-ui-badge",className:E}=c,v=p(c,["children","variant","size","testId","className"]);return B.createElement(Box,d(i({as:"div",testId:n,display:"inline-block",className:cx(f({variant:o,size:l}),E)},v),{ref:t}),a)});g.displayName="Badge";var R={published:"positive",draft:"warning",archived:"negative",changed:"primary",deleted:"negative",new:"primary-filled"};function x(e,t){let n=e,{entityStatus:a}=n,o=p(n,["entityStatus"]),l=R[a];return B.createElement(g,d(i({},o),{variant:l,ref:t}),a)}x.displayName="EntityStatusBadge";var T=B.forwardRef(x);
|
|
7
|
+
|
|
8
|
+
export { g as Badge, T as EntityStatusBadge };
|
|
9
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +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,MAIK,uBCPP,OAAOC,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAIpB,IAAMC,EAAkB,CAAC,CAAE,QAAAC,CAAQ,IAA4C,CAC7E,OAAQA,OACD,WACH,MAAO,CACL,MAAOH,EAAO,SACd,gBAAiBA,EAAO,QAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,OACd,gBAAiBA,EAAO,MAC1B,MACG,UACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,MACG,YACH,MAAO,CACL,MAAOA,EAAO,QACd,gBAAiBA,EAAO,OAC1B,MACG,iBACH,MAAO,CACL,MAAOA,EAAO,WACd,gBAAiBA,EAAO,OAC1B,MACG,WACH,MAAO,CACL,MAAOA,EAAO,UACd,gBAAiBA,EAAO,SAC1B,UAEA,MAAO,CAAC,EAEd,EAEMI,EAAe,CAAC,CAAE,KAAAC,CAAK,IAAsC,CACjE,OAAQA,OACD,QACH,MAAO,CACL,QAAS,OAAOL,EAAO,aACvB,SAAU,WACV,WAAY,WACZ,UAAW,MACb,UAEA,MAAO,CACL,QAAS,KAAKA,EAAO,YACrB,SAAU,qBAAqBA,EAAO,oBACtC,WAAY,OACZ,UAAW,MACb,EAEN,EAEaM,EAAiB,CAAC,CAC7B,QAAAH,EACA,KAAAE,CACF,IAISJ,EAAIM,IAAA,CACT,WAAYP,EAAO,iBACnB,WAAYA,EAAO,mBAEnB,cAAe,YACf,cACE,UACF,aAAc,GAAGA,EAAO,oBACxB,WAAY,SACZ,SAAU,SACV,aAAc,WACd,cAAe,UACZE,EAAgB,CAAE,QAAAC,CAAQ,CAAC,GAC3BC,EAAa,CAAE,KAAAC,CAAK,CAAC,EACzB,ED1DI,IAAMG,EAAQX,EAAM,WACzB,CAACY,EAAOC,IAAQ,CACd,IAOIC,EAAAF,EANF,UAAAG,EACA,QAAAT,EAAU,UACV,KAAAE,EAAO,UACP,OAAAQ,EAAS,cACT,UAAAC,CApCN,EAsCQH,EADCI,EAAAC,EACDL,EADC,CALH,WACA,UACA,OACA,SACA,cAIF,OACEd,EAAA,cAACE,EAAAkB,EAAAV,EAAA,CACC,GAAG,MACH,OAAQM,EACR,QAAQ,eACR,UAAWf,EAAGQ,EAAe,CAAE,QAAAH,EAAS,KAAAE,CAAK,CAAC,EAAGS,CAAS,GACtDC,GALL,CAMC,IAAKL,IAEJE,CACH,CAEJ,CACF,EAEAJ,EAAM,YAAc,QEvDpB,OAAOX,MAAW,QAMlB,IAAMqB,EAAqD,CACzD,UAAW,WACX,MAAO,UACP,SAAU,WACV,QAAS,UACT,QAAS,WACT,IAAK,gBACP,EAQA,SAASC,EACPV,EACAC,EACA,CACA,IAAwCC,EAAAF,EAAhC,cAAAW,CAzBV,EAyB0CT,EAAfI,EAAAC,EAAeL,EAAf,CAAjB,iBACFR,EAAUe,EAAUE,GAC1B,OACEvB,EAAA,cAACW,EAAAS,EAAAV,EAAA,GAAUQ,GAAV,CAAsB,QAASZ,EAAS,IAAKO,IAC3CU,CACH,CAEJ,CAEAD,EAAkB,YAAc,oBAEhC,IAAME,EAAqBxB,EAAM,WAG/BsB,CAAiB","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\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, 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"]}
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-badge",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.19.0",
|
|
4
4
|
"description": "Forma 36: Badge React Component",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
|
-
"main": "dist/
|
|
10
|
-
"module": "dist/
|
|
11
|
-
"types": "dist/
|
|
9
|
+
"main": "dist/index.js",
|
|
10
|
+
"module": "dist/index.mjs",
|
|
11
|
+
"types": "dist/index.d.ts",
|
|
12
12
|
"source": "src/index.ts",
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"browserslist": "extends @contentful/browserslist-config",
|
|
@@ -17,16 +17,16 @@
|
|
|
17
17
|
"url": "https://github.com/contentful/forma-36"
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"build": "
|
|
20
|
+
"build": "tsup"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@babel/runtime": "^7.6.2",
|
|
24
|
-
"@contentful/f36-core": "^4.
|
|
24
|
+
"@contentful/f36-core": "^4.19.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.19.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=16.8"
|
package/dist/main.js
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
var $2TfL1$emotion = require("emotion");
|
|
2
|
-
var $2TfL1$react = require("react");
|
|
3
|
-
var $2TfL1$contentfulf36core = require("@contentful/f36-core");
|
|
4
|
-
var $2TfL1$contentfulf36tokens = require("@contentful/f36-tokens");
|
|
5
|
-
|
|
6
|
-
function $parcel$export(e, n, v, s) {
|
|
7
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
|
-
}
|
|
9
|
-
function $parcel$interopDefault(a) {
|
|
10
|
-
return a && a.__esModule ? a.default : a;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
$parcel$export(module.exports, "Badge", () => $0b9eb5cb77360f1e$export$37acb3580601e69a);
|
|
14
|
-
$parcel$export(module.exports, "EntityStatusBadge", () => $db994f281dc286ac$export$ab4ed1b313ef6d98);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const $2a438b1691bd83eb$var$variantToStyles = ({ variant: variant })=>{
|
|
21
|
-
switch(variant){
|
|
22
|
-
case "positive":
|
|
23
|
-
return {
|
|
24
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).green600,
|
|
25
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).green200
|
|
26
|
-
};
|
|
27
|
-
case "primary":
|
|
28
|
-
return {
|
|
29
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).blue600,
|
|
30
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).blue200
|
|
31
|
-
};
|
|
32
|
-
case "negative":
|
|
33
|
-
return {
|
|
34
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).red600,
|
|
35
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).red200
|
|
36
|
-
};
|
|
37
|
-
case "warning":
|
|
38
|
-
return {
|
|
39
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).orange600,
|
|
40
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).orange200
|
|
41
|
-
};
|
|
42
|
-
case "secondary":
|
|
43
|
-
return {
|
|
44
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).gray700,
|
|
45
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).gray200
|
|
46
|
-
};
|
|
47
|
-
case "primary-filled":
|
|
48
|
-
return {
|
|
49
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).colorWhite,
|
|
50
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).blue600
|
|
51
|
-
};
|
|
52
|
-
case "featured":
|
|
53
|
-
return {
|
|
54
|
-
color: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).purple600,
|
|
55
|
-
backgroundColor: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).purple200
|
|
56
|
-
};
|
|
57
|
-
default:
|
|
58
|
-
return {};
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const $2a438b1691bd83eb$var$sizeToStyles = ({ size: size })=>{
|
|
62
|
-
switch(size){
|
|
63
|
-
case "small":
|
|
64
|
-
return {
|
|
65
|
-
padding: `3px ${(0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).spacing2Xs}`,
|
|
66
|
-
fontSize: "0.625rem",
|
|
67
|
-
lineHeight: "0.625rem",
|
|
68
|
-
maxHeight: "16px"
|
|
69
|
-
};
|
|
70
|
-
default:
|
|
71
|
-
return {
|
|
72
|
-
padding: `0 ${(0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).spacingXs}`,
|
|
73
|
-
fontSize: `calc(1rem * (12 / ${(0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).fontBaseDefault}))`,
|
|
74
|
-
lineHeight: "20px",
|
|
75
|
-
maxHeight: "20px"
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
const $2a438b1691bd83eb$export$c9d43b5c20560398 = ({ variant: variant , size: size })=>{
|
|
80
|
-
return /*#__PURE__*/ (0, $2TfL1$emotion.css)({
|
|
81
|
-
fontFamily: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).fontStackPrimary,
|
|
82
|
-
fontWeight: (0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).fontWeightDemiBold,
|
|
83
|
-
textTransform: "uppercase",
|
|
84
|
-
letterSpacing: "0.06rem",
|
|
85
|
-
borderRadius: `${(0, ($parcel$interopDefault($2TfL1$contentfulf36tokens))).borderRadiusSmall}`,
|
|
86
|
-
whiteSpace: "nowrap",
|
|
87
|
-
overflow: "hidden",
|
|
88
|
-
textOverflow: "ellipsis",
|
|
89
|
-
verticalAlign: "middle",
|
|
90
|
-
...$2a438b1691bd83eb$var$variantToStyles({
|
|
91
|
-
variant: variant
|
|
92
|
-
}),
|
|
93
|
-
...$2a438b1691bd83eb$var$sizeToStyles({
|
|
94
|
-
size: size
|
|
95
|
-
})
|
|
96
|
-
});
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
const $0b9eb5cb77360f1e$export$37acb3580601e69a = /*#__PURE__*/ (0, ($parcel$interopDefault($2TfL1$react))).forwardRef((props, ref)=>{
|
|
101
|
-
const { children: children , variant: variant = "primary" , size: size = "default" , testId: testId = "cf-ui-badge" , className: className , ...otherProps } = props;
|
|
102
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($2TfL1$react))).createElement((0, $2TfL1$contentfulf36core.Box), {
|
|
103
|
-
as: "div",
|
|
104
|
-
testId: testId,
|
|
105
|
-
display: "inline-block",
|
|
106
|
-
className: (0, $2TfL1$emotion.cx)((0, $2a438b1691bd83eb$export$c9d43b5c20560398)({
|
|
107
|
-
variant: variant,
|
|
108
|
-
size: size
|
|
109
|
-
}), className),
|
|
110
|
-
...otherProps,
|
|
111
|
-
ref: ref
|
|
112
|
-
}, children);
|
|
113
|
-
});
|
|
114
|
-
$0b9eb5cb77360f1e$export$37acb3580601e69a.displayName = "Badge";
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const $db994f281dc286ac$var$statusMap = {
|
|
120
|
-
published: "positive",
|
|
121
|
-
draft: "warning",
|
|
122
|
-
archived: "negative",
|
|
123
|
-
changed: "primary",
|
|
124
|
-
deleted: "negative",
|
|
125
|
-
new: "primary-filled"
|
|
126
|
-
};
|
|
127
|
-
function $db994f281dc286ac$var$EntityStatusBadge(props, ref) {
|
|
128
|
-
const { entityStatus: entityStatus , ...otherProps } = props;
|
|
129
|
-
const variant = $db994f281dc286ac$var$statusMap[entityStatus];
|
|
130
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($2TfL1$react))).createElement((0, $0b9eb5cb77360f1e$export$37acb3580601e69a), {
|
|
131
|
-
...otherProps,
|
|
132
|
-
variant: variant,
|
|
133
|
-
ref: ref
|
|
134
|
-
}, entityStatus);
|
|
135
|
-
}
|
|
136
|
-
$db994f281dc286ac$var$EntityStatusBadge.displayName = "EntityStatusBadge";
|
|
137
|
-
const $db994f281dc286ac$export$ab4ed1b313ef6d98 = /*#__PURE__*/ (0, ($parcel$interopDefault($2TfL1$react))).forwardRef($db994f281dc286ac$var$EntityStatusBadge);
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\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, 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
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import {cx as $6t5Db$cx, css as $6t5Db$css} from "emotion";
|
|
2
|
-
import $6t5Db$react from "react";
|
|
3
|
-
import {Box as $6t5Db$Box} from "@contentful/f36-core";
|
|
4
|
-
import $6t5Db$contentfulf36tokens from "@contentful/f36-tokens";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const $8a1e33ed71d0ddeb$var$variantToStyles = ({ variant: variant })=>{
|
|
12
|
-
switch(variant){
|
|
13
|
-
case "positive":
|
|
14
|
-
return {
|
|
15
|
-
color: (0, $6t5Db$contentfulf36tokens).green600,
|
|
16
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).green200
|
|
17
|
-
};
|
|
18
|
-
case "primary":
|
|
19
|
-
return {
|
|
20
|
-
color: (0, $6t5Db$contentfulf36tokens).blue600,
|
|
21
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).blue200
|
|
22
|
-
};
|
|
23
|
-
case "negative":
|
|
24
|
-
return {
|
|
25
|
-
color: (0, $6t5Db$contentfulf36tokens).red600,
|
|
26
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).red200
|
|
27
|
-
};
|
|
28
|
-
case "warning":
|
|
29
|
-
return {
|
|
30
|
-
color: (0, $6t5Db$contentfulf36tokens).orange600,
|
|
31
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).orange200
|
|
32
|
-
};
|
|
33
|
-
case "secondary":
|
|
34
|
-
return {
|
|
35
|
-
color: (0, $6t5Db$contentfulf36tokens).gray700,
|
|
36
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).gray200
|
|
37
|
-
};
|
|
38
|
-
case "primary-filled":
|
|
39
|
-
return {
|
|
40
|
-
color: (0, $6t5Db$contentfulf36tokens).colorWhite,
|
|
41
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).blue600
|
|
42
|
-
};
|
|
43
|
-
case "featured":
|
|
44
|
-
return {
|
|
45
|
-
color: (0, $6t5Db$contentfulf36tokens).purple600,
|
|
46
|
-
backgroundColor: (0, $6t5Db$contentfulf36tokens).purple200
|
|
47
|
-
};
|
|
48
|
-
default:
|
|
49
|
-
return {};
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const $8a1e33ed71d0ddeb$var$sizeToStyles = ({ size: size })=>{
|
|
53
|
-
switch(size){
|
|
54
|
-
case "small":
|
|
55
|
-
return {
|
|
56
|
-
padding: `3px ${(0, $6t5Db$contentfulf36tokens).spacing2Xs}`,
|
|
57
|
-
fontSize: "0.625rem",
|
|
58
|
-
lineHeight: "0.625rem",
|
|
59
|
-
maxHeight: "16px"
|
|
60
|
-
};
|
|
61
|
-
default:
|
|
62
|
-
return {
|
|
63
|
-
padding: `0 ${(0, $6t5Db$contentfulf36tokens).spacingXs}`,
|
|
64
|
-
fontSize: `calc(1rem * (12 / ${(0, $6t5Db$contentfulf36tokens).fontBaseDefault}))`,
|
|
65
|
-
lineHeight: "20px",
|
|
66
|
-
maxHeight: "20px"
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
const $8a1e33ed71d0ddeb$export$c9d43b5c20560398 = ({ variant: variant , size: size })=>{
|
|
71
|
-
return /*#__PURE__*/ (0, $6t5Db$css)({
|
|
72
|
-
fontFamily: (0, $6t5Db$contentfulf36tokens).fontStackPrimary,
|
|
73
|
-
fontWeight: (0, $6t5Db$contentfulf36tokens).fontWeightDemiBold,
|
|
74
|
-
textTransform: "uppercase",
|
|
75
|
-
letterSpacing: "0.06rem",
|
|
76
|
-
borderRadius: `${(0, $6t5Db$contentfulf36tokens).borderRadiusSmall}`,
|
|
77
|
-
whiteSpace: "nowrap",
|
|
78
|
-
overflow: "hidden",
|
|
79
|
-
textOverflow: "ellipsis",
|
|
80
|
-
verticalAlign: "middle",
|
|
81
|
-
...$8a1e33ed71d0ddeb$var$variantToStyles({
|
|
82
|
-
variant: variant
|
|
83
|
-
}),
|
|
84
|
-
...$8a1e33ed71d0ddeb$var$sizeToStyles({
|
|
85
|
-
size: size
|
|
86
|
-
})
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
const $23fe874050de62bc$export$37acb3580601e69a = /*#__PURE__*/ (0, $6t5Db$react).forwardRef((props, ref)=>{
|
|
92
|
-
const { children: children , variant: variant = "primary" , size: size = "default" , testId: testId = "cf-ui-badge" , className: className , ...otherProps } = props;
|
|
93
|
-
return /*#__PURE__*/ (0, $6t5Db$react).createElement((0, $6t5Db$Box), {
|
|
94
|
-
as: "div",
|
|
95
|
-
testId: testId,
|
|
96
|
-
display: "inline-block",
|
|
97
|
-
className: (0, $6t5Db$cx)((0, $8a1e33ed71d0ddeb$export$c9d43b5c20560398)({
|
|
98
|
-
variant: variant,
|
|
99
|
-
size: size
|
|
100
|
-
}), className),
|
|
101
|
-
...otherProps,
|
|
102
|
-
ref: ref
|
|
103
|
-
}, children);
|
|
104
|
-
});
|
|
105
|
-
$23fe874050de62bc$export$37acb3580601e69a.displayName = "Badge";
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
const $a23f6dc8cefcf8e1$var$statusMap = {
|
|
111
|
-
published: "positive",
|
|
112
|
-
draft: "warning",
|
|
113
|
-
archived: "negative",
|
|
114
|
-
changed: "primary",
|
|
115
|
-
deleted: "negative",
|
|
116
|
-
new: "primary-filled"
|
|
117
|
-
};
|
|
118
|
-
function $a23f6dc8cefcf8e1$var$EntityStatusBadge(props, ref) {
|
|
119
|
-
const { entityStatus: entityStatus , ...otherProps } = props;
|
|
120
|
-
const variant = $a23f6dc8cefcf8e1$var$statusMap[entityStatus];
|
|
121
|
-
return /*#__PURE__*/ (0, $6t5Db$react).createElement((0, $23fe874050de62bc$export$37acb3580601e69a), {
|
|
122
|
-
...otherProps,
|
|
123
|
-
variant: variant,
|
|
124
|
-
ref: ref
|
|
125
|
-
}, entityStatus);
|
|
126
|
-
}
|
|
127
|
-
$a23f6dc8cefcf8e1$var$EntityStatusBadge.displayName = "EntityStatusBadge";
|
|
128
|
-
const $a23f6dc8cefcf8e1$export$ab4ed1b313ef6d98 = /*#__PURE__*/ (0, $6t5Db$react).forwardRef($a23f6dc8cefcf8e1$var$EntityStatusBadge);
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
export {$23fe874050de62bc$export$37acb3580601e69a as Badge, $a23f6dc8cefcf8e1$export$ab4ed1b313ef6d98 as EntityStatusBadge};
|
|
134
|
-
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 {\n Box,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { BadgeSize, BadgeVariant } from '../types';\nimport { getBadgeStyles } from './Badge.styles';\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, 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/dist/types.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { CommonProps, PropsWithHTMLElement, EntityStatus } from "@contentful/f36-core";
|
|
3
|
-
type BadgeSize = 'default' | 'small';
|
|
4
|
-
export type BadgeVariant = 'negative' | 'positive' | 'primary' | 'secondary' | 'warning' | 'primary-filled' | 'featured';
|
|
5
|
-
interface BadgeInternalProps extends CommonProps {
|
|
6
|
-
/**
|
|
7
|
-
* Sets the size of the component
|
|
8
|
-
* @default default
|
|
9
|
-
*/
|
|
10
|
-
size?: BadgeSize;
|
|
11
|
-
/**
|
|
12
|
-
* Determines the variation of the component
|
|
13
|
-
* @default primary
|
|
14
|
-
*/
|
|
15
|
-
variant?: BadgeVariant;
|
|
16
|
-
children: React.ReactNode;
|
|
17
|
-
}
|
|
18
|
-
export type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
|
|
19
|
-
export const Badge: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof BadgeInternalProps> & BadgeInternalProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
-
export interface EntityStatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children'> {
|
|
21
|
-
size?: BadgeSize;
|
|
22
|
-
entityStatus: EntityStatus;
|
|
23
|
-
}
|
|
24
|
-
export const EntityStatusBadge: React.ForwardRefExoticComponent<EntityStatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
-
|
|
26
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;AAAA,iBAAwB,SAAS,GAAG,OAAO,CAAC;AAE5C,2BACI,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,GACX,SAAS,GACT,gBAAgB,GAChB,UAAU,CAAC;AEGf,4BAAoC,SAAQ,WAAW;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED,yBAAyB,qBAAqB,kBAAkB,EAAE,KAAK,CAAC,CAAC;AAEzE,OAAO,MAAM,uRAwBZ,CAAC;ACtCF,uCACE,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAiBD,OAAA,MAAM,gHAGc,CAAC","sources":["packages/components/badge/src/src/types.ts","packages/components/badge/src/src/Badge/Badge.styles.ts","packages/components/badge/src/src/Badge/Badge.tsx","packages/components/badge/src/src/EntityStatusBadge/EntityStatusBadge.tsx","packages/components/badge/src/src/index.ts","packages/components/badge/src/index.ts"],"sourcesContent":[null,null,null,null,null,"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"],"names":[],"version":3,"file":"types.d.ts.map"}
|