@contentful/f36-usage-card 6.0.0-alpha.6 → 6.0.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.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import C,{forwardRef}from'react';import {Box}from'@contentful/f36-core';import {cx,css}from'@emotion/css';import U from'@contentful/f36-tokens';import {Card}from'@contentful/f36-card';import {Tooltip}from'@contentful/f36-tooltip';import {Subheading,Caption}from'@contentful/f36-typography';import {InfoIcon}from'@contentful/f36-icons';var w=Object.defineProperty,A=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?w(e,r,{enumerable:true,configurable:true,writable:true,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)=>A(e,B(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 k=e=>{
|
|
1
|
+
import C,{forwardRef}from'react';import {Box}from'@contentful/f36-core';import {cx,css}from'@emotion/css';import U from'@contentful/f36-tokens';import {Card}from'@contentful/f36-card';import {Tooltip}from'@contentful/f36-tooltip';import {Subheading,Caption}from'@contentful/f36-typography';import {InfoIcon}from'@contentful/f36-icons';var w=Object.defineProperty,A=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?w(e,r,{enumerable:true,configurable:true,writable:true,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)=>A(e,B(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 k=e=>{if(e==="info")return {backgroundColor:U.gray100,borderColor:U.gray100}},R=()=>({usageCard:e=>css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},k(e)))}),N=()=>({usageCardDescription:css({color:U.gray500})});function b(e,r){let g=e,{children:t,className:o,header:s,description:i,variant:m="usage",testId:p="cf-ui-usage-card"}=g,c=d(g,["children","className","header","description","variant","testId"]),l=R();return C.createElement(Card,n(a({},c),{className:cx(l.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))}b.displayName="UsageCard";var L=C.forwardRef(b);var M=()=>({usageCardHeader:e=>css(a({width:"100%"},e&&{display:"flex",alignItems:"center",gap:U.spacing2Xs})),tooltip:css({minWidth:"max-content"}),infoIcon:css`
|
|
2
2
|
span & {
|
|
3
3
|
display: flex;
|
|
4
4
|
alignitems: center;
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/UsageCard.styles.ts","../../src/UsageCard.tsx","../../src/UsageCardHeader/UsageCardHeader.styles.ts","../../src/UsageCardHeader/UsageCardHeader.tsx","../../src/UsageCardDescription.tsx","../../src/CompoundUsageCard.ts"],"names":["variantToStyles","variant","tokens","getUsageCardStyles","css","__spreadValues","getUsageCardDescriptionStyles","UsageCardBase","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","React","Card","__spreadProps","cx","Box","UsageCard","getUsageCardHeaderStyles","hasTooltip","UsageCardHeaderBase","title","tooltip","Subheading","Tooltip","InfoIcon","UsageCardHeader","forwardRef","UsageCardDescriptionBase","Caption","UsageCardDescription"],"mappings":"o6BAIA,IAAMA,CAAAA,CAAmBC,CAAAA,EAAuC,CAC9D,
|
|
1
|
+
{"version":3,"sources":["../../src/UsageCard.styles.ts","../../src/UsageCard.tsx","../../src/UsageCardHeader/UsageCardHeader.styles.ts","../../src/UsageCardHeader/UsageCardHeader.tsx","../../src/UsageCardDescription.tsx","../../src/CompoundUsageCard.ts"],"names":["variantToStyles","variant","tokens","getUsageCardStyles","css","__spreadValues","getUsageCardDescriptionStyles","UsageCardBase","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","React","Card","__spreadProps","cx","Box","UsageCard","getUsageCardHeaderStyles","hasTooltip","UsageCardHeaderBase","title","tooltip","Subheading","Tooltip","InfoIcon","UsageCardHeader","forwardRef","UsageCardDescriptionBase","Caption","UsageCardDescription"],"mappings":"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","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\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 borderColor: tokens.gray100,\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, { 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/css';\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 UsageCardBase(\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\nUsageCardBase.displayName = 'UsageCard';\n\nexport const UsageCard = React.forwardRef(UsageCardBase);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (hasTooltip?: boolean) =>\n css({\n width: '100%',\n ...(hasTooltip && {\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/css';\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 UsageCardHeaderBase(\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 const hasTooltip = tooltip !== undefined;\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(hasTooltip), className)}\n testId={testId}\n >\n {title}\n {hasTooltip && (\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\nUsageCardHeaderBase.displayName = 'UsageCardHeader';\n\nexport const UsageCardHeader = forwardRef(UsageCardHeaderBase);\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from '@emotion/css';\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 UsageCardDescriptionBase = (\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\nUsageCardDescriptionBase.displayName = 'UsageCardDescription';\n\nexport const UsageCardDescription = forwardRef(UsageCardDescriptionBase);\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.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var C=require('react'),f36Core=require('@contentful/f36-core'),css=require('@emotion/css'),U=require('@contentful/f36-tokens'),f36Card=require('@contentful/f36-card'),f36Tooltip=require('@contentful/f36-tooltip'),f36Typography=require('@contentful/f36-typography'),f36Icons=require('@contentful/f36-icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var C__default=/*#__PURE__*/_interopDefault(C);var U__default=/*#__PURE__*/_interopDefault(U);var w=Object.defineProperty,A=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?w(e,r,{enumerable:true,configurable:true,writable:true,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)=>A(e,B(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 k=e=>{
|
|
1
|
+
'use strict';var C=require('react'),f36Core=require('@contentful/f36-core'),css=require('@emotion/css'),U=require('@contentful/f36-tokens'),f36Card=require('@contentful/f36-card'),f36Tooltip=require('@contentful/f36-tooltip'),f36Typography=require('@contentful/f36-typography'),f36Icons=require('@contentful/f36-icons');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var C__default=/*#__PURE__*/_interopDefault(C);var U__default=/*#__PURE__*/_interopDefault(U);var w=Object.defineProperty,A=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?w(e,r,{enumerable:true,configurable:true,writable:true,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)=>A(e,B(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 k=e=>{if(e==="info")return {backgroundColor:U__default.default.gray100,borderColor:U__default.default.gray100}},R=()=>({usageCard:e=>css.css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},k(e)))}),N=()=>({usageCardDescription:css.css({color:U__default.default.gray500})});function b(e,r){let g=e,{children:t,className:o,header:s,description:i,variant:m="usage",testId:p="cf-ui-usage-card"}=g,c=d(g,["children","className","header","description","variant","testId"]),l=R();return C__default.default.createElement(f36Card.Card,n(a({},c),{className:css.cx(l.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))}b.displayName="UsageCard";var L=C__default.default.forwardRef(b);var M=()=>({usageCardHeader:e=>css.css(a({width:"100%"},e&&{display:"flex",alignItems:"center",gap:U__default.default.spacing2Xs})),tooltip:css.css({minWidth:"max-content"}),infoIcon:css.css`
|
|
2
2
|
span & {
|
|
3
3
|
display: flex;
|
|
4
4
|
alignitems: center;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/UsageCard.styles.ts","../src/UsageCard.tsx","../src/UsageCardHeader/UsageCardHeader.styles.ts","../src/UsageCardHeader/UsageCardHeader.tsx","../src/UsageCardDescription.tsx","../src/CompoundUsageCard.ts"],"names":["variantToStyles","variant","tokens","getUsageCardStyles","css","__spreadValues","getUsageCardDescriptionStyles","UsageCardBase","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","React","Card","__spreadProps","cx","Box","UsageCard","getUsageCardHeaderStyles","hasTooltip","UsageCardHeaderBase","title","tooltip","Subheading","Tooltip","InfoIcon","UsageCardHeader","forwardRef","UsageCardDescriptionBase","Caption","UsageCardDescription"],"mappings":"ojCAIA,IAAMA,CAAAA,CAAmBC,CAAAA,EAAuC,CAC9D,
|
|
1
|
+
{"version":3,"sources":["../src/UsageCard.styles.ts","../src/UsageCard.tsx","../src/UsageCardHeader/UsageCardHeader.styles.ts","../src/UsageCardHeader/UsageCardHeader.tsx","../src/UsageCardDescription.tsx","../src/CompoundUsageCard.ts"],"names":["variantToStyles","variant","tokens","getUsageCardStyles","css","__spreadValues","getUsageCardDescriptionStyles","UsageCardBase","props","ref","_a","children","className","header","description","testId","otherProps","__objRest","styles","React","Card","__spreadProps","cx","Box","UsageCard","getUsageCardHeaderStyles","hasTooltip","UsageCardHeaderBase","title","tooltip","Subheading","Tooltip","InfoIcon","UsageCardHeader","forwardRef","UsageCardDescriptionBase","Caption","UsageCardDescription"],"mappings":"ojCAIA,IAAMA,CAAAA,CAAmBC,CAAAA,EAAuC,CAC9D,GAAQA,IACD,MAAA,CACH,OAAO,CACL,eAAA,CAAiBC,kBAAAA,CAAO,OAAA,CACxB,YAAaA,kBAAAA,CAAO,OACtB,CAEN,CAAA,CAEaC,CAAAA,CAAqB,KAAO,CACvC,SAAA,CAAYF,CAAAA,EACVG,OAAAA,CAAIC,CAAAA,CAAA,CACF,cAAe,QAAA,CACf,MAAA,CAAQ,MAAA,CACR,cAAA,CAAgB,eAAA,CAAA,CACbL,CAAAA,CAAgBC,CAAO,CAAA,CAC3B,CACL,CAAA,CAAA,CAEaK,CAAAA,CAAgC,KACpC,CACL,qBAAsBF,OAAAA,CAAI,CACxB,MAAOF,kBAAAA,CAAO,OAChB,CAAC,CACH,CAAA,CAAA,CCXF,SAASK,CAAAA,CACPC,CAAAA,CACAC,EACA,CACA,IAQIC,CAAAA,CAAAF,CAAAA,CAPF,CAAA,QAAA,CAAAG,CAAAA,CACA,UAAAC,CAAAA,CACA,MAAA,CAAAC,EACA,WAAA,CAAAC,CAAAA,CACA,QAAAb,CAAAA,CAAU,OAAA,CACV,MAAA,CAAAc,CAAAA,CAAS,kBA5Bb,CAAA,CA8BML,EADCM,CAAAA,CAAAC,CAAAA,CACDP,CAAAA,CADC,CANH,UAAA,CACA,WAAA,CACA,SACA,aAAA,CACA,SAAA,CACA,QAAA,CAAA,CAAA,CAGIQ,CAAAA,CAASf,CAAAA,EAAmB,CAElC,OACEgB,kBAAAA,CAAA,aAAA,CAACC,aAAAC,CAAAA,CAAAhB,CAAAA,CAAA,GACKW,CAAAA,CAAAA,CADL,CAEC,SAAA,CAAWM,MAAAA,CAAGJ,CAAAA,CAAO,SAAA,CAAUjB,CAAO,CAAA,CAAGW,CAAS,CAAA,CAClD,GAAA,CAAKH,CAAAA,CACL,cAAA,CAAcM,EACd,OAAA,CAAQ,OAAA,CAAA,CAAA,CAERI,kBAAAA,CAAA,aAAA,CAACI,WAAAA,CAAA,CAAI,MAAO,CAAE,IAAA,CAAM,CAAE,CAAA,CAAA,CACnBV,CAAAA,CACAF,CACH,CAAA,CACCG,CAAAA,EAAeK,kBAAAA,CAAA,aAAA,CAACI,WAAAA,CAAA,IAAA,CAAKT,CAAY,CACpC,CAEJ,CAEAP,CAAAA,CAAc,WAAA,CAAc,WAAA,CAErB,IAAMiB,CAAAA,CAAYL,kBAAAA,CAAM,UAAA,CAAWZ,CAAa,CAAA,CCjDhD,IAAMkB,CAAAA,CAA2B,KAAO,CAC7C,gBAAkBC,CAAAA,EAChBtB,OAAAA,CAAIC,EAAA,CACF,KAAA,CAAO,QACHqB,CAAAA,EAAc,CAChB,OAAA,CAAS,MAAA,CACT,UAAA,CAAY,QAAA,CACZ,IAAKxB,kBAAAA,CAAO,UACd,CAAA,CACD,CAAA,CACH,OAAA,CAASE,OAAAA,CAAI,CACX,QAAA,CAAU,aACZ,CAAC,CAAA,CACD,QAAA,CAAUA,OAAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAMZ,GCPA,SAASuB,EACPnB,CAAAA,CACAC,CAAAA,CACA,CACA,IAOIC,EAAAF,CAAAA,CANF,CAAA,QAAA,CAAAG,EACA,KAAA,CAAAiB,CAAAA,CACA,QAAAC,CAAAA,CACA,SAAA,CAAAjB,CAAAA,CACA,MAAA,CAAAG,EAAS,yBAxBb,CAAA,CA0BML,EADCM,CAAAA,CAAAC,CAAAA,CACDP,EADC,CALH,UAAA,CACA,OAAA,CACA,SAAA,CACA,YACA,QAAA,CAAA,CAAA,CAGIQ,CAAAA,CAASO,GAAyB,CAElCC,CAAAA,CAAaG,IAAY,MAAA,CAE/B,OACEV,kBAAAA,CAAA,aAAA,CAACW,yBAAAT,CAAAA,CAAAhB,CAAAA,CAAA,GACKW,CAAAA,CAAAA,CADL,CAEC,IAAKP,CAAAA,CACL,SAAA,CAAWa,MAAAA,CAAGJ,CAAAA,CAAO,gBAAgBQ,CAAU,CAAA,CAAGd,CAAS,CAAA,CAC3D,MAAA,CAAQG,IAEPa,CAAAA,CACAF,CAAAA,EACCP,kBAAAA,CAAA,aAAA,CAACY,mBAAA,CAAQ,OAAA,CAASF,EAAS,SAAA,CAAWX,CAAAA,CAAO,QAAS,SAAA,CAAU,KAAA,CAAA,CAC9DC,mBAAA,aAAA,CAACa,iBAAAA,CAAA,CAAS,SAAA,CAAWd,CAAAA,CAAO,SAAU,IAAA,CAAK,QAAA,CAAS,CACtD,CAAA,CAGDP,CACH,CAEJ,CAEAgB,EAAoB,WAAA,CAAc,iBAAA,CAE3B,IAAMM,CAAAA,CAAkBC,YAAAA,CAAWP,CAAmB,CAAA,CCzC7D,IAAMQ,EAA2B,CAC/B3B,CAAAA,CACAC,IACG,CACH,IAKIC,EAAAF,CAAAA,CAJF,CAAA,QAAA,CAAAG,EACA,SAAA,CAAAC,CAAAA,CACA,OAAAG,CAAAA,CAAS,8BAlBb,EAoBML,CAAAA,CADCM,CAAAA,CAAAC,EACDP,CAAAA,CADC,CAHH,UAAA,CACA,WAAA,CACA,WAGIQ,CAAAA,CAASZ,CAAAA,GAEf,OACEa,kBAAAA,CAAA,cAACiB,qBAAAA,CAAAf,CAAAA,CAAAhB,CAAAA,CAAA,EAAA,CACKW,GADL,CAEC,GAAA,CAAKP,EACL,SAAA,CAAWa,MAAAA,CAAGJ,EAAO,oBAAA,CAAsBN,CAAS,CAAA,CACpD,MAAA,CAAQG,IAEPJ,CACH,CAEJ,EAEAwB,CAAAA,CAAyB,WAAA,CAAc,uBAEhC,IAAME,CAAAA,CAAuBH,aAAWC,CAAwB,CAAA,KC5B1DX,CAAAA,CAAYA,EACzBA,EAAU,MAAA,CAASS,CAAAA,CACnBT,EAAU,WAAA,CAAca,CAAAA","file":"index.js","sourcesContent":["import { css } from '@emotion/css';\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 borderColor: tokens.gray100,\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, { 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/css';\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 UsageCardBase(\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\nUsageCardBase.displayName = 'UsageCard';\n\nexport const UsageCard = React.forwardRef(UsageCardBase);\n","import tokens from '@contentful/f36-tokens';\nimport { css } from '@emotion/css';\n\nexport const getUsageCardHeaderStyles = () => ({\n usageCardHeader: (hasTooltip?: boolean) =>\n css({\n width: '100%',\n ...(hasTooltip && {\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/css';\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 UsageCardHeaderBase(\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 const hasTooltip = tooltip !== undefined;\n\n return (\n <Subheading\n {...otherProps}\n ref={ref}\n className={cx(styles.usageCardHeader(hasTooltip), className)}\n testId={testId}\n >\n {title}\n {hasTooltip && (\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\nUsageCardHeaderBase.displayName = 'UsageCardHeader';\n\nexport const UsageCardHeader = forwardRef(UsageCardHeaderBase);\n","import React, { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cx } from '@emotion/css';\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 UsageCardDescriptionBase = (\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\nUsageCardDescriptionBase.displayName = 'UsageCardDescription';\n\nexport const UsageCardDescription = forwardRef(UsageCardDescriptionBase);\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": "6.0.0
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "Forma 36: UsageCard component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-card": "^6.0.0
|
|
10
|
-
"@contentful/f36-core": "^6.0.0
|
|
11
|
-
"@contentful/f36-icons": "^6.0.0
|
|
12
|
-
"@contentful/f36-text-link": "^6.0.0
|
|
13
|
-
"@contentful/f36-tokens": "^6.0.0
|
|
14
|
-
"@contentful/f36-tooltip": "^6.0.0
|
|
15
|
-
"@contentful/f36-typography": "^6.0.0
|
|
9
|
+
"@contentful/f36-card": "^6.0.0",
|
|
10
|
+
"@contentful/f36-core": "^6.0.0",
|
|
11
|
+
"@contentful/f36-icons": "^6.0.0",
|
|
12
|
+
"@contentful/f36-text-link": "^6.0.0",
|
|
13
|
+
"@contentful/f36-tokens": "^6.0.0",
|
|
14
|
+
"@contentful/f36-tooltip": "^6.0.0",
|
|
15
|
+
"@contentful/f36-typography": "^6.0.0",
|
|
16
16
|
"@emotion/css": "^11.13.5"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|