@contentful/f36-usage-card 4.1.0

package/README.mdx

@@ -0,0 +1,48 @@
+---
+title: 'UsageCard'
+type: 'component'
+status: 'stable'
+slug: /components/usage-card/
+github: 'https://github.com/contentful/forma-36/tree/main/packages/components/usage-card'
+storybook: 'https://f36-storybook.contentful.com/?path=/story/components-usagecard--default'
+typescript: ./src/UsageCard.tsx
+---
+
+UsageCard is a generic component used for rendering usage data.
+
+## Import
+
+```jsx static=true
+import { UsageCard } from '@contentful/f36-components';
+// or
+import { UsageCard } from '@contentful/f36-usage-card';
+```
+
+## Examples
+
+### Basic UsageCard of `usage` variant
+
+```jsx file=./examples/UsageCardUsageExample.tsx
+
+```
+
+### Basic UsageCard of `info` variant
+
+```jsx file=./examples/UsageCardInfoExample.tsx
+
+```
+
+## UsageCard areas
+
+The `UsageCard` component offers 4 individually setable areas, three of them can be set via the props `header`, `description` and `variant`.
+
+| Prop          | Description                                                                                                                                                                                                                             | Recommended child components                      |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `children`    | Elements handed over as children to the UsageCard component will be rendered as the UsageCard body. The common case is using `UsageCount` component for rendering usage value.                                                          | `UsageCount`                                      |
+| `header`      | `header` prop expects compound component `UsageCard.Header`. `UsageCard.Header` can take `children`, `title` and `tooltip` as props. Title value will be rendered as `Subheading`, tooltip will be rendered inside `Tooltip` with icon. | `UsageCard.Header`                                |
+| `description` | `description` prop expects compound component `UsageCard.Description`. Child-Components should be wraped in `UsageCard.Description`. Common use case is using `Text` or `TextLink` with as child-components.                            | `UsageCard.Description` with `Text` or `TextLink` |
+| `variant`     | `variant` prop expects `usage` or `info`. It's responsible for look and feel of the `UsageCard`, with `info` set the `backgroundColor` is `gray100` and border is invisible.                                                            | N/A                                               |
+
+## Props (API reference)
+
+<PropsTable of="UsageCard" />

package/dist/esm/index.js

@@ -0,0 +1,19 @@
+import C, { forwardRef } from 'react';
+import { Box } from '@contentful/f36-core';
+import { cx, css } from 'emotion';
+import l from '@contentful/f36-tokens';
+import { Card } from '@contentful/f36-card';
+import { Tooltip } from '@contentful/f36-tooltip';
+import { Subheading, Caption } from '@contentful/f36-typography';
+import { InfoCircleIcon } from '@contentful/f36-icons';
+
+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`
+    span & {
+      display: flex;
+      alignitems: center;
+    }
+  `});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(InfoCircleIcon,{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;
+
+export { U as UsageCard };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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","InfoCircleIcon","_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 { InfoCircleIcon } 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          <InfoCircleIcon 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.d.mts

@@ -0,0 +1,41 @@
+import React, { HTMLAttributes } from 'react';
+import { CommonProps } from '@contentful/f36-core';
+
+declare type UsageCardProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * The type of the card.
+     * @default 'usage'
+     */
+    variant?: 'usage' | 'info';
+};
+declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * The type of the card.
+     * @default 'usage'
+     */
+    variant?: 'usage' | 'info';
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const UsageCardHeader: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    title?: string;
+    tooltip?: string;
+} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const UsageCardDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare type CompoundUsageCard = typeof UsageCard$1 & {
+    Header: typeof UsageCardHeader;
+    Description: typeof UsageCardDescription;
+};
+declare const UsageCard: CompoundUsageCard;
+
+export { UsageCard, UsageCardProps };

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import React, { HTMLAttributes } from 'react';
+import { CommonProps } from '@contentful/f36-core';
+
+declare type UsageCardProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * The type of the card.
+     * @default 'usage'
+     */
+    variant?: 'usage' | 'info';
+};
+declare const UsageCard$1: React.ForwardRefExoticComponent<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * The type of the card.
+     * @default 'usage'
+     */
+    variant?: 'usage' | 'info';
+} & React.RefAttributes<HTMLDivElement>>;
+
+declare const UsageCardHeader: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    title?: string;
+    tooltip?: string;
+} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const UsageCardDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare type CompoundUsageCard = typeof UsageCard$1 & {
+    Header: typeof UsageCardHeader;
+    Description: typeof UsageCardDescription;
+};
+declare const UsageCard: CompoundUsageCard;
+
+export { UsageCard, UsageCardProps };

package/dist/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var C = require('react');
+var f36Core = require('@contentful/f36-core');
+var emotion = require('emotion');
+var l = require('@contentful/f36-tokens');
+var f36Card = require('@contentful/f36-card');
+var f36Tooltip = require('@contentful/f36-tooltip');
+var f36Typography = require('@contentful/f36-typography');
+var f36Icons = require('@contentful/f36-icons');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var C__default = /*#__PURE__*/_interopDefault(C);
+var l__default = /*#__PURE__*/_interopDefault(l);
+
+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__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`
+    span & {
+      display: flex;
+      alignitems: center;
+    }
+  `});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.InfoCircleIcon,{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;
+
+exports.UsageCard = U;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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","InfoCircleIcon","_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 { InfoCircleIcon } 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          <InfoCircleIcon 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

@@ -0,0 +1,40 @@
+{
+  "name": "@contentful/f36-usage-card",
+  "version": "4.1.0",
+  "description": "Forma 36: UsageCard component",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@contentful/f36-card": "^4.80.4",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-icons": "^4.29.1",
+    "@contentful/f36-text-link": "^4.80.4",
+    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-tooltip": "^4.80.4",
+    "@contentful/f36-typography": "^4.80.4",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/contentful/forma-36.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
+    "access": "public"
+  }
+}