@contentful/f36-usage-card 5.5.0 → 6.0.0-alpha.3
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 +2 -14
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +2 -21
- package/dist/index.js.map +1 -1
- package/package.json +11 -11
package/dist/esm/index.js
CHANGED
|
@@ -1,19 +1,7 @@
|
|
|
1
|
-
import C, {
|
|
2
|
-
import { Box } from '@contentful/f36-core';
|
|
3
|
-
import { cx, css } from 'emotion';
|
|
4
|
-
import l from '@contentful/f36-tokens';
|
|
5
|
-
import { Card } from '@contentful/f36-card';
|
|
6
|
-
import { Tooltip } from '@contentful/f36-tooltip';
|
|
7
|
-
import { Subheading, Caption } from '@contentful/f36-typography';
|
|
8
|
-
import { InfoIcon } from '@contentful/f36-icons';
|
|
9
|
-
|
|
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`
|
|
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 l=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(l)for(var t of l(r))h.call(r,t)&&H(e,t,r[t]);return e},d=(e,r)=>A(e,B(r));var n=(e,r)=>{var t={};for(var o in e)P.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))r.indexOf(o)<0&&h.call(e,o)&&(t[o]=e[o]);return t};var k=e=>{switch(e){case "info":return {backgroundColor:U.gray100,borderColor:U.gray100}}},N=()=>({usageCard:e=>css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},k(e)))}),T=()=>({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=n(g,["children","className","header","description","variant","testId"]),f=N();return C.createElement(Card,d(a({},c),{className:cx(f.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`
|
|
11
2
|
span & {
|
|
12
3
|
display: flex;
|
|
13
4
|
alignitems: center;
|
|
14
5
|
}
|
|
15
|
-
`});function
|
|
16
|
-
|
|
17
|
-
export { U as UsageCard };
|
|
18
|
-
//# sourceMappingURL=out.js.map
|
|
6
|
+
`});function v(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=n(g,["children","title","tooltip","className","testId"]),c=M(),f=s!==void 0;return C.createElement(Subheading,d(a({},p),{ref:r,className:cx(c.usageCardHeader(f),i),testId:m}),o,f&&C.createElement(Tooltip,{content:s,className:c.tooltip,placement:"top"},C.createElement(InfoIcon,{className:c.infoIcon,size:"medium"})),t)}v.displayName="UsageCardHeader";var I=forwardRef(v);var S=(e,r)=>{let p=e,{children:t,className:o,testId:s="cf-ui-usage-card-description"}=p,i=n(p,["children","className","testId"]),m=T();return C.createElement(Caption,d(a({},i),{ref:r,className:cx(m.usageCardDescription,o),testId:s}),t)};S.displayName="UsageCardDescription";var E=forwardRef(S);var x=L;x.Header=I;x.Description=E;export{x as UsageCard};//# sourceMappingURL=index.js.map
|
|
19
7
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/UsageCard.
|
|
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;\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.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
2
|
import { CommonProps } from '@contentful/f36-core';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
type UsageCardProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
header?: React.ReactNode;
|
|
7
7
|
description?: React.ReactNode;
|
|
@@ -19,23 +19,23 @@ declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.H
|
|
|
19
19
|
* The type of the card.
|
|
20
20
|
* @default 'usage'
|
|
21
21
|
*/
|
|
22
|
-
variant?:
|
|
22
|
+
variant?: "usage" | "info";
|
|
23
23
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
24
24
|
|
|
25
25
|
declare const UsageCardHeader: React.ForwardRefExoticComponent<{
|
|
26
26
|
children?: React.ReactNode;
|
|
27
27
|
title?: string;
|
|
28
|
-
tooltip?: string
|
|
28
|
+
tooltip?: string;
|
|
29
29
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
31
|
declare const UsageCardDescription: React.ForwardRefExoticComponent<{
|
|
32
32
|
children: React.ReactNode;
|
|
33
33
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
type CompoundUsageCard = typeof UsageCard$1 & {
|
|
36
36
|
Header: typeof UsageCardHeader;
|
|
37
37
|
Description: typeof UsageCardDescription;
|
|
38
38
|
};
|
|
39
39
|
declare const UsageCard: CompoundUsageCard;
|
|
40
40
|
|
|
41
|
-
export { UsageCard, UsageCardProps };
|
|
41
|
+
export { UsageCard, type UsageCardProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
2
|
import { CommonProps } from '@contentful/f36-core';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
type UsageCardProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
header?: React.ReactNode;
|
|
7
7
|
description?: React.ReactNode;
|
|
@@ -19,23 +19,23 @@ declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.H
|
|
|
19
19
|
* The type of the card.
|
|
20
20
|
* @default 'usage'
|
|
21
21
|
*/
|
|
22
|
-
variant?:
|
|
22
|
+
variant?: "usage" | "info";
|
|
23
23
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
24
24
|
|
|
25
25
|
declare const UsageCardHeader: React.ForwardRefExoticComponent<{
|
|
26
26
|
children?: React.ReactNode;
|
|
27
27
|
title?: string;
|
|
28
|
-
tooltip?: string
|
|
28
|
+
tooltip?: string;
|
|
29
29
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
31
|
declare const UsageCardDescription: React.ForwardRefExoticComponent<{
|
|
32
32
|
children: React.ReactNode;
|
|
33
33
|
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
type CompoundUsageCard = typeof UsageCard$1 & {
|
|
36
36
|
Header: typeof UsageCardHeader;
|
|
37
37
|
Description: typeof UsageCardDescription;
|
|
38
38
|
};
|
|
39
39
|
declare const UsageCard: CompoundUsageCard;
|
|
40
40
|
|
|
41
|
-
export { UsageCard, UsageCardProps };
|
|
41
|
+
export { UsageCard, type UsageCardProps };
|
package/dist/index.js
CHANGED
|
@@ -1,26 +1,7 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var C = require('react');
|
|
4
|
-
var f36Core = require('@contentful/f36-core');
|
|
5
|
-
var emotion = require('emotion');
|
|
6
|
-
var l = require('@contentful/f36-tokens');
|
|
7
|
-
var f36Card = require('@contentful/f36-card');
|
|
8
|
-
var f36Tooltip = require('@contentful/f36-tooltip');
|
|
9
|
-
var f36Typography = require('@contentful/f36-typography');
|
|
10
|
-
var f36Icons = require('@contentful/f36-icons');
|
|
11
|
-
|
|
12
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
|
|
14
|
-
var C__default = /*#__PURE__*/_interopDefault(C);
|
|
15
|
-
var l__default = /*#__PURE__*/_interopDefault(l);
|
|
16
|
-
|
|
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`
|
|
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 l=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(l)for(var t of l(r))h.call(r,t)&&H(e,t,r[t]);return e},d=(e,r)=>A(e,B(r));var n=(e,r)=>{var t={};for(var o in e)P.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&l)for(var o of l(e))r.indexOf(o)<0&&h.call(e,o)&&(t[o]=e[o]);return t};var k=e=>{switch(e){case "info":return {backgroundColor:U__default.default.gray100,borderColor:U__default.default.gray100}}},N=()=>({usageCard:e=>css.css(a({flexDirection:"column",height:"100%",justifyContent:"space-between"},k(e)))}),T=()=>({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=n(g,["children","className","header","description","variant","testId"]),f=N();return C__default.default.createElement(f36Card.Card,d(a({},c),{className:css.cx(f.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`
|
|
18
2
|
span & {
|
|
19
3
|
display: flex;
|
|
20
4
|
alignitems: center;
|
|
21
5
|
}
|
|
22
|
-
`});function
|
|
23
|
-
|
|
24
|
-
exports.UsageCard = U;
|
|
25
|
-
//# sourceMappingURL=out.js.map
|
|
6
|
+
`});function v(e,r){let g=e,{children:t,title:o,tooltip:s,className:i,testId:m="cf-ui-usage-card-header"}=g,p=n(g,["children","title","tooltip","className","testId"]),c=M(),f=s!==void 0;return C__default.default.createElement(f36Typography.Subheading,d(a({},p),{ref:r,className:css.cx(c.usageCardHeader(f),i),testId:m}),o,f&&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)}v.displayName="UsageCardHeader";var I=C.forwardRef(v);var S=(e,r)=>{let p=e,{children:t,className:o,testId:s="cf-ui-usage-card-description"}=p,i=n(p,["children","className","testId"]),m=T();return C__default.default.createElement(f36Typography.Caption,d(a({},i),{ref:r,className:css.cx(m.usageCardDescription,o),testId:s}),t)};S.displayName="UsageCardDescription";var E=C.forwardRef(S);var x=L;x.Header=I;x.Description=E;exports.UsageCard=x;//# sourceMappingURL=index.js.map
|
|
26
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/UsageCard.
|
|
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;\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,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-usage-card",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-alpha.3",
|
|
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": "^
|
|
16
|
-
"emotion": "^
|
|
9
|
+
"@contentful/f36-card": "^6.0.0-alpha.0",
|
|
10
|
+
"@contentful/f36-core": "^6.0.0-alpha.0",
|
|
11
|
+
"@contentful/f36-icons": "^6.0.0-alpha.0",
|
|
12
|
+
"@contentful/f36-text-link": "^6.0.0-alpha.0",
|
|
13
|
+
"@contentful/f36-tokens": "^6.0.0-alpha.0",
|
|
14
|
+
"@contentful/f36-tooltip": "^6.0.0-alpha.0",
|
|
15
|
+
"@contentful/f36-typography": "^6.0.0-alpha.0",
|
|
16
|
+
"@emotion/css": "^11.13.5"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"react": ">=
|
|
20
|
-
"react-dom": ">=
|
|
19
|
+
"react": ">=19.1.0",
|
|
20
|
+
"react-dom": ">=19.1.0"
|
|
21
21
|
},
|
|
22
22
|
"license": "MIT",
|
|
23
23
|
"files": [
|