@contentful/f36-usage-card 5.1.1 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
package/dist/esm/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Tooltip } from '@contentful/f36-tooltip';
|
|
|
7
7
|
import { Subheading, Caption } from '@contentful/f36-typography';
|
|
8
8
|
import { InfoIcon } from '@contentful/f36-icons';
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var E=Object.defineProperty,I=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?E(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,a=(e,r)=>{for(var t in r||(r={}))P.call(r,t)&&H(e,t,r[t]);if(f)for(var t of f(r))h.call(r,t)&&H(e,t,r[t]);return e},n=(e,r)=>I(e,S(r));var d=(e,r)=>{var t={};for(var o in e)P.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&f)for(var o of f(e))r.indexOf(o)<0&&h.call(e,o)&&(t[o]=e[o]);return t};var w=e=>{switch(e){case"info":return {backgroundColor:l.gray100,border:`2px solid ${l.gray100}`};default:return {border:`2px solid ${l.gray200}`}}},R=()=>({usageCard:e=>css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},w(e)))}),T=()=>({usageCardDescription:css({color:l.gray500})});function B(e,r){let x=e,{children:t,className:o,header:s,description:i,variant:m="usage",testId:p="cf-ui-usage-card"}=x,c=d(x,["children","className","header","description","variant","testId"]),g=R();return C.createElement(Card,n(a({},c),{className:cx(g.usageCard(m),o),ref:r,"data-test-id":p,padding:"large"}),C.createElement(Box,{style:{flex:1}},s,t),i&&C.createElement(Box,null,i))}var b=C.forwardRef(B);var L=()=>({usageCardHeader:e=>css(a({width:"100%"},e&&{display:"flex",alignItems:"center",gap:l.spacing2Xs})),tooltip:css({minWidth:"max-content"}),infoIcon:css`
|
|
11
11
|
span & {
|
|
12
12
|
display: flex;
|
|
13
13
|
alignitems: center;
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/UsageCard.tsx","../../src/UsageCard.styles.ts","../../src/UsageCardHeader/UsageCardHeader.tsx","../../src/UsageCardHeader/UsageCardHeader.styles.ts","../../src/UsageCardDescription.tsx","../../src/CompoundUsageCard.ts"],"names":["React","Box","css","tokens","variantToStyles","variant","getUsageCardStyles","__spreadValues","getUsageCardDescriptionStyles","Card","cx","_UsageCard","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","__spreadProps","UsageCard","forwardRef","Tooltip","Subheading","getUsageCardHeaderStyles","tooltip","InfoIcon","_UsageCardHeader","title","UsageCardHeader","Caption","_UsageCardDescription","UsageCardDescription"],"mappings":"+kBAAA,OAAOA,MAA+B,QACtC,OAAS,OAAAC,MAA+C,uBCDxD,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAGnB,IAAMC,EAAmBC,GAAuC,CAC9D,OAAQA,EAAS,CACf,IAAK,OACH,MAAO,CACL,gBAAiBF,EAAO,QACxB,OAAQ,aAAaA,EAAO,OAAO,EACrC,EACF,QACE,MAAO,CACL,OAAQ,aAAaA,EAAO,OAAO,EACrC,CACJ,CACF,EAEaG,EAAqB,KAAO,CACvC,UAAYD,GACVH,EAAIK,EAAA,CACF,cAAe,SACf,OAAQ,OACR,eAAgB,iBACbH,EAAgBC,CAAO,EAC3B,CACL,GAEaG,EAAgC,KACpC,CACL,qBAAsBN,EAAI,CACxB,MAAOC,EAAO,OAChB,CAAC,CACH,GD9BF,OAAS,QAAAM,MAAY,uBACrB,OAAS,MAAAC,MAAU,UAcnB,SAASC,EACPC,EACAC,EACA,CACA,IAQIC,EAAAF,EAPF,UAAAG,EACA,UAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAb,EAAU,QACV,OAAAc,EAAS,kBA5Bb,EA8BML,EADCM,EAAAC,EACDP,EADC,CANH,WACA,YACA,SACA,cACA,UACA,WAGIQ,EAAShB,EAAmB,EAElC,OACEN,EAAA,cAACS,EAAAc,EAAAhB,EAAA,GACKa,GADL,CAEC,UAAWV,EAAGY,EAAO,UAAUjB,CAAO,EAAGW,CAAS,EAClD,IAAKH,EACL,eAAcM,EACd,QAAQ,UAERnB,EAAA,cAACC,EAAA,CAAI,MAAO,CAAE,KAAM,CAAE,GACnBgB,EACAF,CACH,EACCG,GAAelB,EAAA,cAACC,EAAA,KAAKiB,CAAY,CACpC,CAEJ,CAEO,IAAMM,EAAYxB,EAAM,WAAWW,CAAU,EElDpD,OAAOX,GAAS,cAAAyB,MAAiD,QACjE,OAAS,MAAAf,MAAU,UACnB,OAAS,WAAAgB,MAAe,0BAExB,OAAS,cAAAC,MAAkB,6BCJ3B,OAAOxB,MAAY,yBACnB,OAAS,OAAAD,MAAW,UAEb,IAAM0B,EAA2B,KAAO,CAC7C,gBAAkBC,GAChB3B,EAAIK,EAAA,CACF,MAAO,QACHsB,GAAW,CACb,QAAS,OACT,WAAY,SACZ,IAAK1B,EAAO,UACd,EACD,EACH,QAASD,EAAI,CACX,SAAU,aACZ,CAAC,EACD,SAAUA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMZ,GDhBA,OAAS,YAAA4B,MAAgB,wBASzB,SAASC,EACPnB,EACAC,EACA,CACA,IAOIC,EAAAF,EANF,UAAAG,EACA,MAAAiB,EACA,QAAAH,EACA,UAAAb,EACA,OAAAG,EAAS,yBAxBb,EA0BML,EADCM,EAAAC,EACDP,EADC,CALH,WACA,QACA,UACA,YACA,WAGIQ,EAASM,EAAyB,EAExC,OACE5B,EAAA,cAAC2B,EAAAJ,EAAAhB,EAAA,GACKa,GADL,CAEC,IAAKP,EACL,UAAWH,EAAGY,EAAO,gBAAgBO,CAAO,EAAGb,CAAS,EACxD,OAAQG,IAEPa,EACAH,GACC7B,EAAA,cAAC0B,EAAA,CAAQ,QAASG,EAAS,UAAWP,EAAO,QAAS,UAAU,OAC9DtB,EAAA,cAAC8B,EAAA,CAAS,UAAWR,EAAO,SAAU,KAAK,SAAS,CACtD,EAGDP,CACH,CAEJ,CAEO,IAAMkB,EAAkBR,EAAWM,CAAgB,EEhD1D,OAAO/B,GAAS,cAAAyB,MAAiD,QACjE,OAAS,MAAAf,MAAU,UAEnB,OAAS,WAAAwB,MAAe,6BAQxB,IAAMC,EAAwB,CAC5BvB,EACAC,IACG,CACH,IAKIC,EAAAF,EAJF,UAAAG,EACA,UAAAC,EACA,OAAAG,EAAS,8BAlBb,EAoBML,EADCM,EAAAC,EACDP,EADC,CAHH,WACA,YACA,WAGIQ,EAASd,EAA8B,EAE7C,OACER,EAAA,cAACkC,EAAAX,EAAAhB,EAAA,GACKa,GADL,CAEC,IAAKP,EACL,UAAWH,EAAGY,EAAO,qBAAsBN,CAAS,EACpD,OAAQG,IAEPJ,CACH,CAEJ,EAEaqB,EAAuBX,EAAWU,CAAqB,EC1B7D,IAAMX,EAAYA,EACzBA,EAAU,OAASS,EACnBT,EAAU,YAAcY","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport { getUsageCardStyles } from './UsageCard.styles';\nimport { Card } from '@contentful/f36-card';\nimport { cx } from 'emotion';\n\nexport type UsageCardProps = CommonProps &\n HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n description?: React.ReactNode;\n /**\n * The type of the card.\n * @default 'usage'\n */\n variant?: 'usage' | 'info';\n };\n\nfunction _UsageCard(\n props: ExpandProps<UsageCardProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n children,\n className,\n header,\n description,\n variant = 'usage',\n testId = 'cf-ui-usage-card',\n ...otherProps\n } = props;\n const styles = getUsageCardStyles();\n\n return (\n <Card\n {...otherProps}\n className={cx(styles.usageCard(variant), className)}\n ref={ref}\n data-test-id={testId}\n padding=\"large\"\n >\n <Box style={{ flex: 1 }}>\n {header}\n {children}\n </Box>\n {description && <Box>{description}</Box>}\n </Card>\n );\n}\n\nexport const UsageCard = React.forwardRef(_UsageCard);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { UsageCardProps } from './UsageCard';\n\nconst variantToStyles = (variant: UsageCardProps['variant']) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: tokens.gray100,\n border: `2px solid ${tokens.gray100}`,\n };\n default:\n return {\n border: `2px solid ${tokens.gray200}`,\n };\n }\n};\n\nexport const getUsageCardStyles = () => ({\n usageCard: (variant: UsageCardProps['variant']) =>\n css({\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'space-between',\n ...variantToStyles(variant),\n }),\n});\n\nexport const getUsageCardDescriptionStyles = () => {\n return {\n usageCardDescription: css({\n color: tokens.gray500,\n }),\n };\n};\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Subheading } from '@contentful/f36-typography';\nimport { getUsageCardHeaderStyles } from './UsageCardHeader.styles';\nimport { InfoIcon } from '@contentful/f36-icons';\n\nexport type UsageCardHeaderProps = {\n children?: React.ReactNode;\n title?: string;\n tooltip?: string;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nfunction _UsageCardHeader(\n props: UsageCardHeaderProps,\n ref: Ref<HTMLDivElement>,\n) {\n const {\n children,\n title,\n tooltip,\n className,\n testId = 'cf-ui-usage-card-header',\n ...otherProps\n } = props;\n const styles = getUsageCardHeaderStyles();\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(tooltip), className)}\n testId={testId}\n >\n {title}\n {tooltip && (\n <Tooltip content={tooltip} className={styles.tooltip} placement=\"top\">\n <InfoIcon className={styles.infoIcon} size=\"medium\" />\n </Tooltip>\n )}\n\n {children}\n </Subheading>\n );\n}\n\nexport const UsageCardHeader = forwardRef(_UsageCardHeader);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (tooltip?: string) =>\n css({\n width: '100%',\n ...(tooltip && {\n display: 'flex',\n alignItems: 'center',\n gap: tokens.spacing2Xs,\n }),\n }),\n tooltip: css({\n minWidth: 'max-content',\n }),\n infoIcon: css`\n span & {\n display: flex;\n alignitems: center;\n }\n `,\n});\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport { getUsageCardDescriptionStyles } from './UsageCard.styles';\n\nexport type UsageCardDescriptionProps = {\n children: React.ReactNode;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nconst _UsageCardDescription = (\n props: UsageCardDescriptionProps,\n ref: Ref<HTMLDivElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-usage-card-description',\n ...otherProps\n } = props;\n const styles = getUsageCardDescriptionStyles();\n\n return (\n <Caption\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardDescription, className)}\n testId={testId}\n >\n {children}\n </Caption>\n );\n};\n\nexport const UsageCardDescription = forwardRef(_UsageCardDescription);\n","import { UsageCard as OriginalUsageCard } from './UsageCard';\nimport { UsageCardHeader } from './UsageCardHeader/UsageCardHeader';\nimport { UsageCardDescription } from './UsageCardDescription';\n\ntype CompoundUsageCard = typeof OriginalUsageCard & {\n Header: typeof UsageCardHeader;\n Description: typeof UsageCardDescription;\n};\n\nexport const UsageCard = OriginalUsageCard as CompoundUsageCard;\nUsageCard.Header = UsageCardHeader;\nUsageCard.Description = UsageCardDescription;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/UsageCard.tsx","../../src/UsageCard.styles.ts","../../src/UsageCardHeader/UsageCardHeader.tsx","../../src/UsageCardHeader/UsageCardHeader.styles.ts","../../src/UsageCardDescription.tsx","../../src/CompoundUsageCard.ts"],"names":["React","Box","css","tokens","variantToStyles","variant","getUsageCardStyles","__spreadValues","getUsageCardDescriptionStyles","Card","cx","_UsageCard","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","__spreadProps","UsageCard","forwardRef","Tooltip","Subheading","getUsageCardHeaderStyles","tooltip","InfoIcon","_UsageCardHeader","title","UsageCardHeader","Caption","_UsageCardDescription","UsageCardDescription"],"mappings":"+kBAAA,OAAOA,MAA+B,QACtC,OAAS,OAAAC,MAA+C,uBCDxD,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAGnB,IAAMC,EAAmBC,GAAuC,CAC9D,OAAQA,EAAS,CACf,IAAK,OACH,MAAO,CACL,gBAAiBF,EAAO,QACxB,OAAQ,aAAaA,EAAO,OAAO,EACrC,EACF,QACE,MAAO,CACL,OAAQ,aAAaA,EAAO,OAAO,EACrC,CACJ,CACF,EAEaG,EAAqB,KAAO,CACvC,UAAYD,GACVH,EAAIK,EAAA,CACF,cAAe,SACf,OAAQ,OACR,eAAgB,iBACbH,EAAgBC,CAAO,EAC3B,CACL,GAEaG,EAAgC,KACpC,CACL,qBAAsBN,EAAI,CACxB,MAAOC,EAAO,OAChB,CAAC,CACH,GD9BF,OAAS,QAAAM,MAAY,uBACrB,OAAS,MAAAC,MAAU,UAcnB,SAASC,EACPC,EACAC,EACA,CACA,IAQIC,EAAAF,EAPF,UAAAG,EACA,UAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAb,EAAU,QACV,OAAAc,EAAS,kBA5Bb,EA8BML,EADCM,EAAAC,EACDP,EADC,CANH,WACA,YACA,SACA,cACA,UACA,WAGIQ,EAAShB,EAAmB,EAElC,OACEN,EAAA,cAACS,EAAAc,EAAAhB,EAAA,GACKa,GADL,CAEC,UAAWV,EAAGY,EAAO,UAAUjB,CAAO,EAAGW,CAAS,EAClD,IAAKH,EACL,eAAcM,EACd,QAAQ,UAERnB,EAAA,cAACC,EAAA,CAAI,MAAO,CAAE,KAAM,CAAE,GACnBgB,EACAF,CACH,EACCG,GAAelB,EAAA,cAACC,EAAA,KAAKiB,CAAY,CACpC,CAEJ,CAEO,IAAMM,EAAYxB,EAAM,WAAWW,CAAU,EElDpD,OAAOX,GAAS,cAAAyB,MAAiD,QACjE,OAAS,MAAAf,MAAU,UACnB,OAAS,WAAAgB,MAAe,0BAExB,OAAS,cAAAC,MAAkB,6BCJ3B,OAAOxB,MAAY,yBACnB,OAAS,OAAAD,MAAW,UAEb,IAAM0B,EAA2B,KAAO,CAC7C,gBAAkBC,GAChB3B,EAAIK,EAAA,CACF,MAAO,QACHsB,GAAW,CACb,QAAS,OACT,WAAY,SACZ,IAAK1B,EAAO,UACd,EACD,EACH,QAASD,EAAI,CACX,SAAU,aACZ,CAAC,EACD,SAAUA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMZ,GDhBA,OAAS,YAAA4B,MAAgB,wBASzB,SAASC,EACPnB,EACAC,EACA,CACA,IAOIC,EAAAF,EANF,UAAAG,EACA,MAAAiB,EACA,QAAAH,EACA,UAAAb,EACA,OAAAG,EAAS,yBAxBb,EA0BML,EADCM,EAAAC,EACDP,EADC,CALH,WACA,QACA,UACA,YACA,WAGIQ,EAASM,EAAyB,EAExC,OACE5B,EAAA,cAAC2B,EAAAJ,EAAAhB,EAAA,GACKa,GADL,CAEC,IAAKP,EACL,UAAWH,EAAGY,EAAO,gBAAgBO,CAAO,EAAGb,CAAS,EACxD,OAAQG,IAEPa,EACAH,GACC7B,EAAA,cAAC0B,EAAA,CAAQ,QAASG,EAAS,UAAWP,EAAO,QAAS,UAAU,OAC9DtB,EAAA,cAAC8B,EAAA,CAAS,UAAWR,EAAO,SAAU,KAAK,SAAS,CACtD,EAGDP,CACH,CAEJ,CAEO,IAAMkB,EAAkBR,EAAWM,CAAgB,EEhD1D,OAAO/B,GAAS,cAAAyB,MAAiD,QACjE,OAAS,MAAAf,MAAU,UAEnB,OAAS,WAAAwB,MAAe,6BAQxB,IAAMC,EAAwB,CAC5BvB,EACAC,IACG,CACH,IAKIC,EAAAF,EAJF,UAAAG,EACA,UAAAC,EACA,OAAAG,EAAS,8BAlBb,EAoBML,EADCM,EAAAC,EACDP,EADC,CAHH,WACA,YACA,WAGIQ,EAASd,EAA8B,EAE7C,OACER,EAAA,cAACkC,EAAAX,EAAAhB,EAAA,GACKa,GADL,CAEC,IAAKP,EACL,UAAWH,EAAGY,EAAO,qBAAsBN,CAAS,EACpD,OAAQG,IAEPJ,CACH,CAEJ,EAEaqB,EAAuBX,EAAWU,CAAqB,EC1B7D,IAAMX,EAAYA,EACzBA,EAAU,OAASS,EACnBT,EAAU,YAAcY","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport { getUsageCardStyles } from './UsageCard.styles';\nimport { Card } from '@contentful/f36-card';\nimport { cx } from 'emotion';\n\nexport type UsageCardProps = CommonProps &\n HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n description?: React.ReactNode;\n /**\n * The type of the card.\n * @default 'usage'\n */\n variant?: 'usage' | 'info';\n };\n\nfunction _UsageCard(\n props: ExpandProps<UsageCardProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n children,\n className,\n header,\n description,\n variant = 'usage',\n testId = 'cf-ui-usage-card',\n ...otherProps\n } = props;\n const styles = getUsageCardStyles();\n\n return (\n <Card\n {...otherProps}\n className={cx(styles.usageCard(variant), className)}\n ref={ref}\n data-test-id={testId}\n padding=\"large\"\n >\n <Box style={{ flex: 1 }}>\n {header}\n {children}\n </Box>\n {description && <Box>{description}</Box>}\n </Card>\n );\n}\n\nexport const UsageCard = React.forwardRef(_UsageCard);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { UsageCardProps } from './UsageCard';\n\nconst variantToStyles = (variant: UsageCardProps['variant']) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: tokens.gray100,\n border: `2px solid ${tokens.gray100}`,\n };\n default:\n return {\n border: `2px solid ${tokens.gray200}`,\n };\n }\n};\n\nexport const getUsageCardStyles = () => ({\n usageCard: (variant: UsageCardProps['variant']) =>\n css({\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'space-between',\n ...variantToStyles(variant),\n }),\n});\n\nexport const getUsageCardDescriptionStyles = () => {\n return {\n usageCardDescription: css({\n color: tokens.gray500,\n }),\n };\n};\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Subheading } from '@contentful/f36-typography';\nimport { getUsageCardHeaderStyles } from './UsageCardHeader.styles';\nimport { InfoIcon } from '@contentful/f36-icons';\n\nexport type UsageCardHeaderProps = {\n children?: React.ReactNode;\n title?: string;\n tooltip?: string | React.ReactElement;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nfunction _UsageCardHeader(\n props: UsageCardHeaderProps,\n ref: Ref<HTMLDivElement>,\n) {\n const {\n children,\n title,\n tooltip,\n className,\n testId = 'cf-ui-usage-card-header',\n ...otherProps\n } = props;\n const styles = getUsageCardHeaderStyles();\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(tooltip), className)}\n testId={testId}\n >\n {title}\n {tooltip && (\n <Tooltip content={tooltip} className={styles.tooltip} placement=\"top\">\n <InfoIcon className={styles.infoIcon} size=\"medium\" />\n </Tooltip>\n )}\n\n {children}\n </Subheading>\n );\n}\n\nexport const UsageCardHeader = forwardRef(_UsageCardHeader);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (tooltip?: string | React.ReactElement) =>\n css({\n width: '100%',\n ...(tooltip && {\n display: 'flex',\n alignItems: 'center',\n gap: tokens.spacing2Xs,\n }),\n }),\n tooltip: css({\n minWidth: 'max-content',\n }),\n infoIcon: css`\n span & {\n display: flex;\n alignitems: center;\n }\n `,\n});\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport { getUsageCardDescriptionStyles } from './UsageCard.styles';\n\nexport type UsageCardDescriptionProps = {\n children: React.ReactNode;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nconst _UsageCardDescription = (\n props: UsageCardDescriptionProps,\n ref: Ref<HTMLDivElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-usage-card-description',\n ...otherProps\n } = props;\n const styles = getUsageCardDescriptionStyles();\n\n return (\n <Caption\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardDescription, className)}\n testId={testId}\n >\n {children}\n </Caption>\n );\n};\n\nexport const UsageCardDescription = forwardRef(_UsageCardDescription);\n","import { UsageCard as OriginalUsageCard } from './UsageCard';\nimport { UsageCardHeader } from './UsageCardHeader/UsageCardHeader';\nimport { UsageCardDescription } from './UsageCardDescription';\n\ntype CompoundUsageCard = typeof OriginalUsageCard & {\n Header: typeof UsageCardHeader;\n Description: typeof UsageCardDescription;\n};\n\nexport const UsageCard = OriginalUsageCard as CompoundUsageCard;\nUsageCard.Header = UsageCardHeader;\nUsageCard.Description = UsageCardDescription;\n"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -25,7 +25,7 @@ declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.H
|
|
|
25
25
|
declare const UsageCardHeader: React.ForwardRefExoticComponent<{
|
|
26
26
|
children?: React.ReactNode;
|
|
27
27
|
title?: string;
|
|
28
|
-
tooltip?: string;
|
|
28
|
+
tooltip?: string | React.ReactElement;
|
|
29
29
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
31
|
declare const UsageCardDescription: React.ForwardRefExoticComponent<{
|
package/dist/index.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.H
|
|
|
25
25
|
declare const UsageCardHeader: React.ForwardRefExoticComponent<{
|
|
26
26
|
children?: React.ReactNode;
|
|
27
27
|
title?: string;
|
|
28
|
-
tooltip?: string;
|
|
28
|
+
tooltip?: string | React.ReactElement;
|
|
29
29
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
31
|
declare const UsageCardDescription: React.ForwardRefExoticComponent<{
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
14
14
|
var C__default = /*#__PURE__*/_interopDefault(C);
|
|
15
15
|
var l__default = /*#__PURE__*/_interopDefault(l);
|
|
16
16
|
|
|
17
|
-
var
|
|
17
|
+
var E=Object.defineProperty,I=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?E(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,a=(e,r)=>{for(var t in r||(r={}))P.call(r,t)&&H(e,t,r[t]);if(f)for(var t of f(r))h.call(r,t)&&H(e,t,r[t]);return e},n=(e,r)=>I(e,S(r));var d=(e,r)=>{var t={};for(var o in e)P.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&f)for(var o of f(e))r.indexOf(o)<0&&h.call(e,o)&&(t[o]=e[o]);return t};var w=e=>{switch(e){case"info":return {backgroundColor:l__default.default.gray100,border:`2px solid ${l__default.default.gray100}`};default:return {border:`2px solid ${l__default.default.gray200}`}}},R=()=>({usageCard:e=>emotion.css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},w(e)))}),T=()=>({usageCardDescription:emotion.css({color:l__default.default.gray500})});function B(e,r){let x=e,{children:t,className:o,header:s,description:i,variant:m="usage",testId:p="cf-ui-usage-card"}=x,c=d(x,["children","className","header","description","variant","testId"]),g=R();return C__default.default.createElement(f36Card.Card,n(a({},c),{className:emotion.cx(g.usageCard(m),o),ref:r,"data-test-id":p,padding:"large"}),C__default.default.createElement(f36Core.Box,{style:{flex:1}},s,t),i&&C__default.default.createElement(f36Core.Box,null,i))}var b=C__default.default.forwardRef(B);var L=()=>({usageCardHeader:e=>emotion.css(a({width:"100%"},e&&{display:"flex",alignItems:"center",gap:l__default.default.spacing2Xs})),tooltip:emotion.css({minWidth:"max-content"}),infoIcon:emotion.css`
|
|
18
18
|
span & {
|
|
19
19
|
display: flex;
|
|
20
20
|
alignitems: center;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/UsageCard.tsx","../src/UsageCard.styles.ts","../src/UsageCardHeader/UsageCardHeader.tsx","../src/UsageCardHeader/UsageCardHeader.styles.ts","../src/UsageCardDescription.tsx","../src/CompoundUsageCard.ts"],"names":["React","Box","css","tokens","variantToStyles","variant","getUsageCardStyles","__spreadValues","getUsageCardDescriptionStyles","Card","cx","_UsageCard","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","__spreadProps","UsageCard","forwardRef","Tooltip","Subheading","getUsageCardHeaderStyles","tooltip","InfoIcon","_UsageCardHeader","title","UsageCardHeader","Caption","_UsageCardDescription","UsageCardDescription"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport { getUsageCardStyles } from './UsageCard.styles';\nimport { Card } from '@contentful/f36-card';\nimport { cx } from 'emotion';\n\nexport type UsageCardProps = CommonProps &\n HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n description?: React.ReactNode;\n /**\n * The type of the card.\n * @default 'usage'\n */\n variant?: 'usage' | 'info';\n };\n\nfunction _UsageCard(\n props: ExpandProps<UsageCardProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n children,\n className,\n header,\n description,\n variant = 'usage',\n testId = 'cf-ui-usage-card',\n ...otherProps\n } = props;\n const styles = getUsageCardStyles();\n\n return (\n <Card\n {...otherProps}\n className={cx(styles.usageCard(variant), className)}\n ref={ref}\n data-test-id={testId}\n padding=\"large\"\n >\n <Box style={{ flex: 1 }}>\n {header}\n {children}\n </Box>\n {description && <Box>{description}</Box>}\n </Card>\n );\n}\n\nexport const UsageCard = React.forwardRef(_UsageCard);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { UsageCardProps } from './UsageCard';\n\nconst variantToStyles = (variant: UsageCardProps['variant']) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: tokens.gray100,\n border: `2px solid ${tokens.gray100}`,\n };\n default:\n return {\n border: `2px solid ${tokens.gray200}`,\n };\n }\n};\n\nexport const getUsageCardStyles = () => ({\n usageCard: (variant: UsageCardProps['variant']) =>\n css({\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'space-between',\n ...variantToStyles(variant),\n }),\n});\n\nexport const getUsageCardDescriptionStyles = () => {\n return {\n usageCardDescription: css({\n color: tokens.gray500,\n }),\n };\n};\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Subheading } from '@contentful/f36-typography';\nimport { getUsageCardHeaderStyles } from './UsageCardHeader.styles';\nimport { InfoIcon } from '@contentful/f36-icons';\n\nexport type UsageCardHeaderProps = {\n children?: React.ReactNode;\n title?: string;\n tooltip?: string;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nfunction _UsageCardHeader(\n props: UsageCardHeaderProps,\n ref: Ref<HTMLDivElement>,\n) {\n const {\n children,\n title,\n tooltip,\n className,\n testId = 'cf-ui-usage-card-header',\n ...otherProps\n } = props;\n const styles = getUsageCardHeaderStyles();\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(tooltip), className)}\n testId={testId}\n >\n {title}\n {tooltip && (\n <Tooltip content={tooltip} className={styles.tooltip} placement=\"top\">\n <InfoIcon className={styles.infoIcon} size=\"medium\" />\n </Tooltip>\n )}\n\n {children}\n </Subheading>\n );\n}\n\nexport const UsageCardHeader = forwardRef(_UsageCardHeader);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (tooltip?: string) =>\n css({\n width: '100%',\n ...(tooltip && {\n display: 'flex',\n alignItems: 'center',\n gap: tokens.spacing2Xs,\n }),\n }),\n tooltip: css({\n minWidth: 'max-content',\n }),\n infoIcon: css`\n span & {\n display: flex;\n alignitems: center;\n }\n `,\n});\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport { getUsageCardDescriptionStyles } from './UsageCard.styles';\n\nexport type UsageCardDescriptionProps = {\n children: React.ReactNode;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nconst _UsageCardDescription = (\n props: UsageCardDescriptionProps,\n ref: Ref<HTMLDivElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-usage-card-description',\n ...otherProps\n } = props;\n const styles = getUsageCardDescriptionStyles();\n\n return (\n <Caption\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardDescription, className)}\n testId={testId}\n >\n {children}\n </Caption>\n );\n};\n\nexport const UsageCardDescription = forwardRef(_UsageCardDescription);\n","import { UsageCard as OriginalUsageCard } from './UsageCard';\nimport { UsageCardHeader } from './UsageCardHeader/UsageCardHeader';\nimport { UsageCardDescription } from './UsageCardDescription';\n\ntype CompoundUsageCard = typeof OriginalUsageCard & {\n Header: typeof UsageCardHeader;\n Description: typeof UsageCardDescription;\n};\n\nexport const UsageCard = OriginalUsageCard as CompoundUsageCard;\nUsageCard.Header = UsageCardHeader;\nUsageCard.Description = UsageCardDescription;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/UsageCard.tsx","../src/UsageCard.styles.ts","../src/UsageCardHeader/UsageCardHeader.tsx","../src/UsageCardHeader/UsageCardHeader.styles.ts","../src/UsageCardDescription.tsx","../src/CompoundUsageCard.ts"],"names":["React","Box","css","tokens","variantToStyles","variant","getUsageCardStyles","__spreadValues","getUsageCardDescriptionStyles","Card","cx","_UsageCard","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","__spreadProps","UsageCard","forwardRef","Tooltip","Subheading","getUsageCardHeaderStyles","tooltip","InfoIcon","_UsageCardHeader","title","UsageCardHeader","Caption","_UsageCardDescription","UsageCardDescription"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport { getUsageCardStyles } from './UsageCard.styles';\nimport { Card } from '@contentful/f36-card';\nimport { cx } from 'emotion';\n\nexport type UsageCardProps = CommonProps &\n HTMLAttributes<HTMLDivElement> & {\n children?: React.ReactNode;\n header?: React.ReactNode;\n description?: React.ReactNode;\n /**\n * The type of the card.\n * @default 'usage'\n */\n variant?: 'usage' | 'info';\n };\n\nfunction _UsageCard(\n props: ExpandProps<UsageCardProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n children,\n className,\n header,\n description,\n variant = 'usage',\n testId = 'cf-ui-usage-card',\n ...otherProps\n } = props;\n const styles = getUsageCardStyles();\n\n return (\n <Card\n {...otherProps}\n className={cx(styles.usageCard(variant), className)}\n ref={ref}\n data-test-id={testId}\n padding=\"large\"\n >\n <Box style={{ flex: 1 }}>\n {header}\n {children}\n </Box>\n {description && <Box>{description}</Box>}\n </Card>\n );\n}\n\nexport const UsageCard = React.forwardRef(_UsageCard);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { UsageCardProps } from './UsageCard';\n\nconst variantToStyles = (variant: UsageCardProps['variant']) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: tokens.gray100,\n border: `2px solid ${tokens.gray100}`,\n };\n default:\n return {\n border: `2px solid ${tokens.gray200}`,\n };\n }\n};\n\nexport const getUsageCardStyles = () => ({\n usageCard: (variant: UsageCardProps['variant']) =>\n css({\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'space-between',\n ...variantToStyles(variant),\n }),\n});\n\nexport const getUsageCardDescriptionStyles = () => {\n return {\n usageCardDescription: css({\n color: tokens.gray500,\n }),\n };\n};\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Subheading } from '@contentful/f36-typography';\nimport { getUsageCardHeaderStyles } from './UsageCardHeader.styles';\nimport { InfoIcon } from '@contentful/f36-icons';\n\nexport type UsageCardHeaderProps = {\n children?: React.ReactNode;\n title?: string;\n tooltip?: string | React.ReactElement;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nfunction _UsageCardHeader(\n props: UsageCardHeaderProps,\n ref: Ref<HTMLDivElement>,\n) {\n const {\n children,\n title,\n tooltip,\n className,\n testId = 'cf-ui-usage-card-header',\n ...otherProps\n } = props;\n const styles = getUsageCardHeaderStyles();\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(tooltip), className)}\n testId={testId}\n >\n {title}\n {tooltip && (\n <Tooltip content={tooltip} className={styles.tooltip} placement=\"top\">\n <InfoIcon className={styles.infoIcon} size=\"medium\" />\n </Tooltip>\n )}\n\n {children}\n </Subheading>\n );\n}\n\nexport const UsageCardHeader = forwardRef(_UsageCardHeader);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (tooltip?: string | React.ReactElement) =>\n css({\n width: '100%',\n ...(tooltip && {\n display: 'flex',\n alignItems: 'center',\n gap: tokens.spacing2Xs,\n }),\n }),\n tooltip: css({\n minWidth: 'max-content',\n }),\n infoIcon: css`\n span & {\n display: flex;\n alignitems: center;\n }\n `,\n});\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from 'emotion';\nimport { type CommonProps } from '@contentful/f36-core';\nimport { Caption } from '@contentful/f36-typography';\nimport { getUsageCardDescriptionStyles } from './UsageCard.styles';\n\nexport type UsageCardDescriptionProps = {\n children: React.ReactNode;\n} & CommonProps &\n HTMLAttributes<HTMLDivElement>;\n\nconst _UsageCardDescription = (\n props: UsageCardDescriptionProps,\n ref: Ref<HTMLDivElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-usage-card-description',\n ...otherProps\n } = props;\n const styles = getUsageCardDescriptionStyles();\n\n return (\n <Caption\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardDescription, className)}\n testId={testId}\n >\n {children}\n </Caption>\n );\n};\n\nexport const UsageCardDescription = forwardRef(_UsageCardDescription);\n","import { UsageCard as OriginalUsageCard } from './UsageCard';\nimport { UsageCardHeader } from './UsageCardHeader/UsageCardHeader';\nimport { UsageCardDescription } from './UsageCardDescription';\n\ntype CompoundUsageCard = typeof OriginalUsageCard & {\n Header: typeof UsageCardHeader;\n Description: typeof UsageCardDescription;\n};\n\nexport const UsageCard = OriginalUsageCard as CompoundUsageCard;\nUsageCard.Header = UsageCardHeader;\nUsageCard.Description = UsageCardDescription;\n"]}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-usage-card",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"description": "Forma 36: UsageCard component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-card": "^5.
|
|
10
|
-
"@contentful/f36-core": "^5.
|
|
11
|
-
"@contentful/f36-icons": "^5.
|
|
12
|
-
"@contentful/f36-text-link": "^5.
|
|
9
|
+
"@contentful/f36-card": "^5.3.0",
|
|
10
|
+
"@contentful/f36-core": "^5.3.0",
|
|
11
|
+
"@contentful/f36-icons": "^5.3.0",
|
|
12
|
+
"@contentful/f36-text-link": "^5.3.0",
|
|
13
13
|
"@contentful/f36-tokens": "^5.1.0",
|
|
14
|
-
"@contentful/f36-tooltip": "^5.
|
|
15
|
-
"@contentful/f36-typography": "^5.
|
|
14
|
+
"@contentful/f36-tooltip": "^5.3.0",
|
|
15
|
+
"@contentful/f36-typography": "^5.3.0",
|
|
16
16
|
"emotion": "^10.0.17"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|