@contentful/f36-usage-card 4.1.0 → 5.1.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/README.mdx +1 -0
- package/dist/esm/index.js +2 -2
- 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/README.mdx
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
title: 'UsageCard'
|
|
3
3
|
type: 'component'
|
|
4
4
|
status: 'stable'
|
|
5
|
+
isNew: true
|
|
5
6
|
slug: /components/usage-card/
|
|
6
7
|
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/usage-card'
|
|
7
8
|
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-usagecard--default'
|
package/dist/esm/index.js
CHANGED
|
@@ -5,14 +5,14 @@ import l from '@contentful/f36-tokens';
|
|
|
5
5
|
import { Card } from '@contentful/f36-card';
|
|
6
6
|
import { Tooltip } from '@contentful/f36-tooltip';
|
|
7
7
|
import { Subheading, Caption } from '@contentful/f36-typography';
|
|
8
|
-
import {
|
|
8
|
+
import { InfoIcon } from '@contentful/f36-icons';
|
|
9
9
|
|
|
10
10
|
var I=Object.defineProperty,S=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var H=(e,r,t)=>r in e?I(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)=>S(e,E(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;
|
|
14
14
|
}
|
|
15
|
-
`});function X(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=d(g,["children","title","tooltip","className","testId"]),c=L();return C.createElement(Subheading,n(a({},p),{ref:r,className:cx(c.usageCardHeader(s),i),testId:m}),o,s&&C.createElement(Tooltip,{content:s,className:c.tooltip,placement:"top"},C.createElement(
|
|
15
|
+
`});function X(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=d(g,["children","title","tooltip","className","testId"]),c=L();return C.createElement(Subheading,n(a({},p),{ref:r,className:cx(c.usageCardHeader(s),i),testId:m}),o,s&&C.createElement(Tooltip,{content:s,className:c.tooltip,placement:"top"},C.createElement(InfoIcon,{className:c.infoIcon,size:"medium"})),t)}var M=forwardRef(X);var K=(e,r)=>{let p=e,{children:t,className:o,testId:s="cf-ui-usage-card-description"}=p,i=d(p,["children","className","testId"]),m=T();return C.createElement(Caption,n(a({},i),{ref:r,className:cx(m.usageCardDescription,o),testId:s}),t)},v=forwardRef(K);var U=b;U.Header=M;U.Description=v;
|
|
16
16
|
|
|
17
17
|
export { U as UsageCard };
|
|
18
18
|
//# sourceMappingURL=out.js.map
|
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","
|
|
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"]}
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var I=Object.defineProperty,S=Object.defineProperties;var E=Object.getOwnPropert
|
|
|
19
19
|
display: flex;
|
|
20
20
|
alignitems: center;
|
|
21
21
|
}
|
|
22
|
-
`});function X(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=d(g,["children","title","tooltip","className","testId"]),c=L();return C__default.default.createElement(f36Typography.Subheading,n(a({},p),{ref:r,className:emotion.cx(c.usageCardHeader(s),i),testId:m}),o,s&&C__default.default.createElement(f36Tooltip.Tooltip,{content:s,className:c.tooltip,placement:"top"},C__default.default.createElement(f36Icons.
|
|
22
|
+
`});function X(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=d(g,["children","title","tooltip","className","testId"]),c=L();return C__default.default.createElement(f36Typography.Subheading,n(a({},p),{ref:r,className:emotion.cx(c.usageCardHeader(s),i),testId:m}),o,s&&C__default.default.createElement(f36Tooltip.Tooltip,{content:s,className:c.tooltip,placement:"top"},C__default.default.createElement(f36Icons.InfoIcon,{className:c.infoIcon,size:"medium"})),t)}var M=C.forwardRef(X);var K=(e,r)=>{let p=e,{children:t,className:o,testId:s="cf-ui-usage-card-description"}=p,i=d(p,["children","className","testId"]),m=T();return C__default.default.createElement(f36Typography.Caption,n(a({},i),{ref:r,className:emotion.cx(m.usageCardDescription,o),testId:s}),t)},v=C.forwardRef(K);var U=b;U.Header=M;U.Description=v;
|
|
23
23
|
|
|
24
24
|
exports.UsageCard = U;
|
|
25
25
|
//# sourceMappingURL=out.js.map
|
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","
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-usage-card",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"description": "Forma 36: UsageCard component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-card": "^
|
|
10
|
-
"@contentful/f36-core": "^
|
|
11
|
-
"@contentful/f36-icons": "^
|
|
12
|
-
"@contentful/f36-text-link": "^
|
|
13
|
-
"@contentful/f36-tokens": "^
|
|
14
|
-
"@contentful/f36-tooltip": "^
|
|
15
|
-
"@contentful/f36-typography": "^
|
|
9
|
+
"@contentful/f36-card": "^5.1.0",
|
|
10
|
+
"@contentful/f36-core": "^5.1.0",
|
|
11
|
+
"@contentful/f36-icons": "^5.1.0",
|
|
12
|
+
"@contentful/f36-text-link": "^5.1.0",
|
|
13
|
+
"@contentful/f36-tokens": "^5.1.0",
|
|
14
|
+
"@contentful/f36-tooltip": "^5.1.0",
|
|
15
|
+
"@contentful/f36-typography": "^5.1.0",
|
|
16
16
|
"emotion": "^10.0.17"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|