@contentful/f36-usage-card 6.7.1 → 6.7.2
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 +54 -7
- package/package.json +7 -7
package/README.mdx
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
title: 'UsageCard'
|
|
3
3
|
type: 'component'
|
|
4
4
|
status: 'stable'
|
|
5
|
-
isNew: true
|
|
6
5
|
slug: /components/usage-card/
|
|
7
6
|
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/usage-card'
|
|
8
7
|
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-usagecard--default'
|
|
@@ -37,12 +36,60 @@ import { UsageCard } from '@contentful/f36-usage-card';
|
|
|
37
36
|
|
|
38
37
|
The `UsageCard` component offers 4 individually setable areas, three of them can be set via the props `header`, `description` and `variant`.
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
<Table>
|
|
40
|
+
<Table.Head>
|
|
41
|
+
<Table.Row>
|
|
42
|
+
<Table.Cell>
|
|
43
|
+
<Subheading>Prop</Subheading>
|
|
44
|
+
</Table.Cell>
|
|
45
|
+
<Table.Cell>
|
|
46
|
+
<Subheading>Description</Subheading>
|
|
47
|
+
</Table.Cell>
|
|
48
|
+
<Table.Cell>
|
|
49
|
+
<Subheading>Recommended child components</Subheading>
|
|
50
|
+
</Table.Cell>
|
|
51
|
+
</Table.Row>
|
|
52
|
+
</Table.Head>
|
|
53
|
+
<Table.Body>
|
|
54
|
+
<Table.Row>
|
|
55
|
+
<Table.Cell>`children`</Table.Cell>
|
|
56
|
+
<Table.Cell>
|
|
57
|
+
Elements handed over as children to the UsageCard component will be
|
|
58
|
+
rendered as the UsageCard body. The common case is using `UsageCount`
|
|
59
|
+
component for rendering usage value.
|
|
60
|
+
</Table.Cell>
|
|
61
|
+
<Table.Cell>`UsageCount`</Table.Cell>
|
|
62
|
+
</Table.Row>
|
|
63
|
+
<Table.Row>
|
|
64
|
+
<Table.Cell>`header`</Table.Cell>
|
|
65
|
+
<Table.Cell>
|
|
66
|
+
`header` prop expects compound component `UsageCard.Header`.
|
|
67
|
+
`UsageCard.Header` can take `children`, `title` and `tooltip` as props.
|
|
68
|
+
Title value will be rendered as `Subheading`, tooltip will be rendered
|
|
69
|
+
inside `Tooltip` with icon.
|
|
70
|
+
</Table.Cell>
|
|
71
|
+
<Table.Cell>`UsageCard.Header`</Table.Cell>
|
|
72
|
+
</Table.Row>
|
|
73
|
+
<Table.Row>
|
|
74
|
+
<Table.Cell>`description`</Table.Cell>
|
|
75
|
+
<Table.Cell>
|
|
76
|
+
`description` prop expects compound component `UsageCard.Description`.
|
|
77
|
+
Child-Components should be wraped in `UsageCard.Description`. Common use
|
|
78
|
+
case is using `Text` or `TextLink` with as child-components.
|
|
79
|
+
</Table.Cell>
|
|
80
|
+
<Table.Cell>`UsageCard.Description` with `Text` or `TextLink`</Table.Cell>
|
|
81
|
+
</Table.Row>
|
|
82
|
+
<Table.Row>
|
|
83
|
+
<Table.Cell>`variant`</Table.Cell>
|
|
84
|
+
<Table.Cell>
|
|
85
|
+
`variant` prop expects `usage` or `info`. It's responsible for look and
|
|
86
|
+
feel of the `UsageCard`, with `info` set the `backgroundColor` is
|
|
87
|
+
`gray100` and border is invisible.
|
|
88
|
+
</Table.Cell>
|
|
89
|
+
<Table.Cell>N/A</Table.Cell>
|
|
90
|
+
</Table.Row>
|
|
91
|
+
</Table.Body>
|
|
92
|
+
</Table>
|
|
46
93
|
|
|
47
94
|
## Props (API reference)
|
|
48
95
|
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-usage-card",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.2",
|
|
4
4
|
"description": "Forma 36: UsageCard component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-card": "^6.7.
|
|
10
|
-
"@contentful/f36-core": "^6.7.
|
|
11
|
-
"@contentful/f36-icons": "^6.7.
|
|
12
|
-
"@contentful/f36-text-link": "^6.7.
|
|
9
|
+
"@contentful/f36-card": "^6.7.2",
|
|
10
|
+
"@contentful/f36-core": "^6.7.2",
|
|
11
|
+
"@contentful/f36-icons": "^6.7.2",
|
|
12
|
+
"@contentful/f36-text-link": "^6.7.2",
|
|
13
13
|
"@contentful/f36-tokens": "^6.1.0",
|
|
14
|
-
"@contentful/f36-tooltip": "^6.7.
|
|
15
|
-
"@contentful/f36-typography": "^6.7.
|
|
14
|
+
"@contentful/f36-tooltip": "^6.7.2",
|
|
15
|
+
"@contentful/f36-typography": "^6.7.2",
|
|
16
16
|
"@emotion/css": "^11.13.5"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|