@patternfly/react-docs 5.22.2 → 5.22.6
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.22.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.5...@patternfly/react-docs@5.22.6) (2021-10-05)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [5.22.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.4...@patternfly/react-docs@5.22.5) (2021-10-04)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [5.22.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.3...@patternfly/react-docs@5.22.4) (2021-10-01)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [5.22.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.2...@patternfly/react-docs@5.22.3) (2021-10-01)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [5.22.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.1...@patternfly/react-docs@5.22.2) (2021-10-01)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "5.22.
|
|
4
|
+
"version": "5.22.6",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease-v4"
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@patternfly/patternfly": "4.139.2",
|
|
26
|
-
"@patternfly/react-catalog-view-extension": "^4.13.
|
|
26
|
+
"@patternfly/react-catalog-view-extension": "^4.13.4",
|
|
27
27
|
"@patternfly/react-charts": "^6.15.26",
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.158.
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.71",
|
|
29
|
+
"@patternfly/react-core": "^4.158.4",
|
|
30
30
|
"@patternfly/react-icons": "^4.12.1",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.7.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.95",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.7.7",
|
|
33
33
|
"@patternfly/react-styles": "^4.12.1",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.14",
|
|
35
35
|
"@patternfly/react-tokens": "^4.13.1",
|
|
36
|
-
"@patternfly/react-topology": "^4.9.
|
|
37
|
-
"@patternfly/react-virtualized-extension": "^4.9.
|
|
36
|
+
"@patternfly/react-topology": "^4.9.90",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.60"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^17.0.0",
|
|
45
45
|
"rimraf": "^2.6.3",
|
|
46
46
|
"shx": "^0.3.2",
|
|
47
|
-
"theme-patternfly-org": "0.7.
|
|
47
|
+
"theme-patternfly-org": "0.7.6"
|
|
48
48
|
},
|
|
49
49
|
"keywords": [
|
|
50
50
|
"gatsby"
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d9a788888b436fb8a85bed6042ae4bd056b78c53"
|
|
57
57
|
}
|
|
@@ -5,6 +5,11 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-ic
|
|
|
5
5
|
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
|
|
6
6
|
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
|
|
7
7
|
import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
|
|
8
|
+
import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
|
|
9
|
+
import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
|
|
10
|
+
import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
|
|
11
|
+
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
|
|
12
|
+
import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
|
|
8
13
|
import srcImportcardview from './react-demos/card-view.png';
|
|
9
14
|
const pageData = {
|
|
10
15
|
"id": "Card",
|
|
@@ -19,6 +24,10 @@ const pageData = {
|
|
|
19
24
|
"Aggregate status card",
|
|
20
25
|
"Status",
|
|
21
26
|
"Status Tabbed",
|
|
27
|
+
"Utilization card 1",
|
|
28
|
+
"Utilization card 2",
|
|
29
|
+
"Utilization card 3",
|
|
30
|
+
"Utilization card 4",
|
|
22
31
|
"Log view",
|
|
23
32
|
"Event view"
|
|
24
33
|
]
|
|
@@ -38,7 +47,23 @@ pageData.liveContext = {
|
|
|
38
47
|
Tr,
|
|
39
48
|
Th,
|
|
40
49
|
Td,
|
|
41
|
-
ExpandableRowContent
|
|
50
|
+
ExpandableRowContent,
|
|
51
|
+
Chart,
|
|
52
|
+
ChartAxis,
|
|
53
|
+
ChartGroup,
|
|
54
|
+
ChartVoronoiContainer,
|
|
55
|
+
ChartStack,
|
|
56
|
+
ChartBar,
|
|
57
|
+
ChartTooltip,
|
|
58
|
+
ChartDonutThreshold,
|
|
59
|
+
ChartDonutUtilization,
|
|
60
|
+
ChartArea,
|
|
61
|
+
ChartContainer,
|
|
62
|
+
ChartLabel,
|
|
63
|
+
chart_color_gold_100,
|
|
64
|
+
chart_color_gold_300,
|
|
65
|
+
chart_color_orange_300,
|
|
66
|
+
chart_color_red_100
|
|
42
67
|
};
|
|
43
68
|
pageData.examples = {
|
|
44
69
|
'Horizontal card grid': props =>
|
|
@@ -64,6 +89,22 @@ pageData.examples = {
|
|
|
64
89
|
'Status Tabbed': props =>
|
|
65
90
|
<Example {...pageData} {...props} {...{"code":"import * as React from 'react';\nimport {\n Card,\n CardBody,\n CardHeader,\n DescriptionList,\n DescriptionListDescription,\n DescriptionListGroup,\n DescriptionListTerm,\n Flex,\n FlexItem,\n Grid,\n GridItem,\n Spinner,\n Tab,\n TabContent,\n Tabs,\n TabTitleText,\n Title\n} from '@patternfly/react-core';\nimport CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\n\nconst descriptionListData = [\n {\n status: 'Running',\n resourceName: 'Resource name that is long and can wrap',\n detail: '121 Systems',\n icon: <CheckCircleIcon />\n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '123 Systems',\n icon: <ExclamationCircleIcon />\n },\n {\n status: 'Running',\n resourceName: 'Resource name that is long and can wrap',\n detail: '122 Systems',\n icon: <CheckCircleIcon />\n },\n {\n status: 'Ready',\n resourceName: 'Resource name that is long and can wrap',\n detail: '124 Systems',\n icon: <ExclamationCircleIcon />\n }\n];\n\nconst Status: React.FunctionComponent = () => {\n const [activeTabKey, setActiveTabKey] = React.useState(0);\n const handleTabClick = (event: React.MouseEvent, tabIndex: number) => {\n setActiveTabKey(tabIndex);\n };\n\n const tabContent = (\n <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>\n {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (\n <DescriptionListGroup key={index}>\n <DescriptionListTerm>\n <Flex>\n <FlexItem>{icon}</FlexItem>\n <FlexItem>\n <Title headingLevel=\"h3\" size=\"md\">\n {status}\n </Title>\n </FlexItem>\n </Flex>\n </DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">{resourceName}</a>\n <div>{detail}</div>\n </DescriptionListDescription>\n </DescriptionListGroup>\n ))}\n </DescriptionList>\n );\n\n return (\n <>\n <Card>\n <CardHeader>\n <Title headingLevel=\"h2\" size=\"lg\">\n Status\n </Title>\n </CardHeader>\n <CardBody>\n <Tabs isFilled id=\"status-tabs\" activeKey={activeTabKey} onSelect={handleTabClick}>\n {[1, 2, 3].map((tab, tabIndex) => (\n <Tab\n key={tabIndex}\n eventKey={tabIndex}\n title={<TabTitleText>{`Object ${tabIndex + 1}`}</TabTitleText>}\n tabContentId={`tabContent${tabIndex}`}\n />\n ))}\n </Tabs>\n </CardBody>\n <CardBody>\n {[1, 2, 3].map((tab, tabIndex) => (\n <TabContent\n key={tabIndex}\n eventKey={tabIndex}\n id={`tabContent${tabIndex}`}\n activeKey={activeTabKey}\n hidden={tabIndex !== activeTabKey}\n >\n {tabContent}\n </TabContent>\n ))}\n </CardBody>\n </Card>\n </>\n );\n};","title":"Status Tabbed","lang":"ts"}}>
|
|
66
91
|
|
|
92
|
+
</Example>,
|
|
93
|
+
'Utilization card 1': props =>
|
|
94
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard1 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Top Utilized Clusters\n </Title>\n </CardTitle>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <b>Cluster-1204</b>\n <span>27.3 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n <FlexItem>\n <a href=\"#\">View details</a>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <b>Abcdef-1204</b>\n <span>50.6 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n <FlexItem>\n <a href=\"#\">View details</a>\n </FlexItem>\n </Flex>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all clusters</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 1","lang":"ts"}}>
|
|
95
|
+
|
|
96
|
+
</Example>,
|
|
97
|
+
'Utilization card 2': props =>
|
|
98
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider\n} from '@patternfly/react-core';\nimport { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';\n\nconst UtilizationCard2 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-2\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Top Utilized Clusters\n </Title>\n </CardTitle>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <a href=\"#\">Cluster-1204</a>\n <span>27.3 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <Stack>\n <a href=\"#\">Abcdef-1204</a>\n <span>50.6 cores available</span>\n </Stack>\n </FlexItem>\n <FlexItem>\n <ChartGroup\n ariaDesc=\"Mock average cluster utilization\"\n ariaTitle=\"Mock cluster sparkline chart\"\n containerComponent={\n <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n }\n height={100}\n maxDomain={{ y: 9 }}\n padding={0}\n width={400}\n >\n <ChartArea\n data={[\n { name: 'Cluster', x: '2015', y: 7 },\n { name: 'Cluster', x: '2016', y: 6 },\n { name: 'Cluster', x: '2017', y: 8 },\n { name: 'Cluster', x: '2018', y: 3 },\n { name: 'Cluster', x: '2019', y: 4 },\n { name: 'Cluster', x: '2020', y: 1 },\n { name: 'Cluster', x: '2021', y: 0 }\n ]}\n />\n </ChartGroup>\n </FlexItem>\n </Flex>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all clusters</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 2","lang":"ts"}}>
|
|
99
|
+
|
|
100
|
+
</Example>,
|
|
101
|
+
'Utilization card 3': props =>
|
|
102
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardTitle,\n CardHeader,\n CardActions,\n CardBody,\n CardFooter,\n Title,\n Gallery,\n GalleryItem,\n Flex,\n FlexItem,\n Stack,\n StackItem,\n Divider,\n Dropdown,\n DropdownItem,\n DropdownToggle,\n DropdownSeparator\n} from '@patternfly/react-core';\nimport ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';\nimport { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';\nimport chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';\nimport chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';\nimport chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';\nimport chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';\n\nconst UtilizationCard3: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const dropdownItems = [\n <DropdownItem key=\"link\">Link</DropdownItem>,\n <DropdownItem key=\"action\" component=\"button\">\n Action\n </DropdownItem>,\n <DropdownItem key=\"disabled link\" isDisabled href=\"www.google.com\">\n Disabled link\n </DropdownItem>,\n <DropdownSeparator key=\"separator\" />,\n <DropdownItem key=\"separated link\">Separated link</DropdownItem>\n ];\n\n return (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardHeader>\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n Recommendations\n </Title>\n </CardTitle>\n <CardActions>\n <Dropdown\n onSelect={() => setIsOpen(!isOpen)}\n toggle={<DropdownToggle onToggle={() => setIsOpen(!isOpen)}>Filter</DropdownToggle>}\n isOpen={isOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n </CardActions>\n </CardHeader>\n <CardBody>\n <Flex direction={{ default: 'column' }}>\n <FlexItem>\n <span>System</span>\n </FlexItem>\n <Flex>\n <ExclamationCircleIcon className=\"pf-u-danger-color-100\" aria-hidden />\n <a href=\"#\">25 incidents detected</a>\n </Flex>\n <FlexItem>\n <Chart\n ariaDesc=\"Mock incidents chart\"\n ariaTitle=\"Mock stack chart\"\n domainPadding={{ x: [30, 25] }}\n legendData={[\n { name: 'Low', symbol: { fill: chart_color_gold_100.value } },\n { name: 'Important', symbol: { fill: chart_color_gold_300.value } },\n { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },\n { name: 'Critical', symbol: { fill: chart_color_red_100.value } }\n ]}\n legendPosition=\"bottom-left\"\n height={50}\n padding={{\n bottom: 40,\n left: 0,\n right: 0,\n top: 0\n }}\n width={350}\n showAxis={false}\n >\n <ChartStack\n horizontal\n colorScale={[\n chart_color_gold_100.value,\n chart_color_gold_300.value,\n chart_color_orange_300.value,\n chart_color_red_100.value\n ]}\n >\n <ChartBar\n data={[\n {\n name: 'Low',\n x: 'Cluster A',\n y: 6,\n label: 'Low: 6'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Important',\n x: 'Cluster A',\n y: 2,\n label: 'Important: 2'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Moderate',\n x: 'Cluster A',\n y: 4,\n label: 'Moderate: 4'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n <ChartBar\n data={[\n {\n name: 'Critical',\n x: 'Cluster A',\n y: 2,\n label: 'Critical: 2'\n }\n ]}\n labelComponent={<ChartTooltip constrainToVisibleArea />}\n />\n </ChartStack>\n </Chart>\n </FlexItem>\n </Flex>\n </CardBody>\n <CardFooter>\n <a href=\"#\">See details</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n );\n};","title":"Utilization card 3","lang":"ts"}}>
|
|
103
|
+
|
|
104
|
+
</Example>,
|
|
105
|
+
'Utilization card 4': props =>
|
|
106
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';\nimport { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';\n\nconst UtilizationCard4 = () => (\n <Gallery hasGutter minWidths={{ default: '360px' }}>\n <GalleryItem>\n <Card id=\"utilization-card-1\" component=\"div\">\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"lg\">\n CPU Usage\n </Title>\n </CardTitle>\n <CardBody>\n <ChartDonutThreshold\n ariaDesc=\"Mock storage capacity\"\n ariaTitle=\"Mock donut utilization chart\"\n constrainToVisibleArea={true}\n data={[\n { x: 'Warning at 60%', y: 60 },\n { x: 'Danger at 90%', y: 90 }\n ]}\n height={200}\n labels={({ datum }) => (datum.x ? datum.x : null)}\n padding={{\n bottom: 0,\n left: 10,\n right: 150,\n top: 0\n }}\n width={350}\n >\n <ChartDonutUtilization\n data={{ x: 'Storage capacity', y: 80 }}\n labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}\n legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}\n legendOrientation=\"vertical\"\n title=\"80%\"\n subTitle=\"of 100 GBps\"\n thresholds={[{ value: 60 }, { value: 90 }]}\n />\n </ChartDonutThreshold>{' '}\n </CardBody>\n <CardFooter>\n <a href=\"#\">See details</a>\n </CardFooter>\n </Card>\n </GalleryItem>\n </Gallery>\n)","title":"Utilization card 4","lang":"ts"}}>
|
|
107
|
+
|
|
67
108
|
</Example>,
|
|
68
109
|
'Log view': props =>
|
|
69
110
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Card,\n CardHeader,\n CardActions,\n CardTitle,\n CardBody,\n CardFooter,\n Gallery,\n Title,\n DescriptionList,\n DescriptionListGroup,\n DescriptionListTerm,\n DescriptionListDescription,\n Dropdown,\n DropdownItem,\n DropdownToggle,\n Divider\n} from '@patternfly/react-core';\n\nCardLogViewDemo = () => {\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n\n const onActionSelect = event => {\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n const onActionToggle = isOpen => {\n setIsDropdownOpen(isOpen);\n };\n\n const dropdownItems = [\n <DropdownItem key=\"action1\" component=\"a\">\n Link\n </DropdownItem>,\n <DropdownItem key=\"action2\" component=\"button\">\n Action\n </DropdownItem>,\n <DropdownItem key=\"disabled action3\" isDisabled component=\"a\">\n Disabled link\n </DropdownItem>,\n <DropdownItem key=\"action4\" component=\"button\">\n Disabled action\n </DropdownItem>,\n <DropdownItem key=\"action5\" component=\"a\">\n Separated link\n </DropdownItem>\n ];\n\n return (\n <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>\n <Card id=\"card-log-view-example\">\n <CardHeader>\n <CardActions>\n <Dropdown\n onSelect={onActionSelect}\n toggle={<DropdownToggle onToggle={onActionToggle}>Most recent</DropdownToggle>}\n isOpen={isDropdownOpen}\n dropdownItems={dropdownItems}\n position=\"right\"\n />\n </CardActions>\n <CardTitle>\n <Title headingLevel=\"h2\" size=\"xl\">\n Activity\n </Title>\n </CardTitle>\n </CardHeader>\n <CardBody>\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>\n <DescriptionListDescription>\n Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect:\n connection refused\n </DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:02 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Successful assignment</DescriptionListTerm>\n <DescriptionListDescription>\n Successfully assigned default/example to ip-10-0-130-149.ec2.internal\n </DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 11:13 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pulling image</DescriptionListTerm>\n <DescriptionListDescription>Pulling image \"openshift/hello-openshift\"</DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:59 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Created container</DescriptionListTerm>\n <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>\n <DescriptionListDescription>\n <date className=\"pf-u-color-200 pf-u-font-size-sm\">Jun 17, 10:45 am</date>\n </DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n </CardBody>\n <Divider />\n <CardFooter>\n <a href=\"#\">View all activity</a>\n </CardFooter>\n </Card>\n </Gallery>\n );\n};","title":"Log view","lang":"js"}}>
|
|
@@ -86,6 +127,10 @@ const Component = () => (
|
|
|
86
127
|
{React.createElement(pageData.examples["Aggregate status card"])}
|
|
87
128
|
{React.createElement(pageData.examples["Status"])}
|
|
88
129
|
{React.createElement(pageData.examples["Status Tabbed"])}
|
|
130
|
+
{React.createElement(pageData.examples["Utilization card 1"])}
|
|
131
|
+
{React.createElement(pageData.examples["Utilization card 2"])}
|
|
132
|
+
{React.createElement(pageData.examples["Utilization card 3"])}
|
|
133
|
+
{React.createElement(pageData.examples["Utilization card 4"])}
|
|
89
134
|
{React.createElement(pageData.examples["Log view"])}
|
|
90
135
|
{React.createElement(pageData.examples["Event view"])}
|
|
91
136
|
</React.Fragment>
|
|
@@ -113,16 +113,55 @@ pageData.examples = {
|
|
|
113
113
|
|
|
114
114
|
</Example>,
|
|
115
115
|
'Sticky panel': props =>
|
|
116
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst StickyPanel = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }}>\n <SidebarPanel variant=\"sticky\">\n Sticky sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Sticky panel","lang":"js"}}>
|
|
116
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst StickyPanel = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabindex={0}>\n <SidebarPanel variant=\"sticky\">\n Sticky sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Sticky panel","lang":"js"}}>
|
|
117
117
|
|
|
118
|
+
<p {...{"className":"ws-p"}}>
|
|
119
|
+
{`A `}
|
|
120
|
+
|
|
121
|
+
<code {...{"className":"ws-code"}}>
|
|
122
|
+
{`tabindex`}
|
|
123
|
+
</code>
|
|
124
|
+
{` should be added to the `}
|
|
125
|
+
|
|
126
|
+
<code {...{"className":"ws-code"}}>
|
|
127
|
+
{`Sidebar`}
|
|
128
|
+
</code>
|
|
129
|
+
{` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
|
|
130
|
+
</p>
|
|
118
131
|
</Example>,
|
|
119
132
|
'Static panel': props =>
|
|
120
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst StaticPanel = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }}>\n <SidebarPanel variant=\"static\">\n Static sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Static panel","lang":"js"}}>
|
|
133
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst StaticPanel = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabindex={0}>\n <SidebarPanel variant=\"static\">\n Static sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Static panel","lang":"js"}}>
|
|
121
134
|
|
|
135
|
+
<p {...{"className":"ws-p"}}>
|
|
136
|
+
{`A `}
|
|
137
|
+
|
|
138
|
+
<code {...{"className":"ws-code"}}>
|
|
139
|
+
{`tabindex`}
|
|
140
|
+
</code>
|
|
141
|
+
{` should be added to the `}
|
|
142
|
+
|
|
143
|
+
<code {...{"className":"ws-code"}}>
|
|
144
|
+
{`Sidebar`}
|
|
145
|
+
</code>
|
|
146
|
+
{` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
|
|
147
|
+
</p>
|
|
122
148
|
</Example>,
|
|
123
149
|
'Responsive panel width': props =>
|
|
124
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst ResponsivePanelWidth = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }}>\n <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>\n Sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Resize me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Responsive panel width","lang":"js"}}>
|
|
150
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst ResponsivePanelWidth = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabindex={0}>\n <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>\n Sidebar panel\n </SidebarPanel>\n <SidebarContent>\n <p>Resize me!</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Responsive panel width","lang":"js"}}>
|
|
125
151
|
|
|
152
|
+
<p {...{"className":"ws-p"}}>
|
|
153
|
+
{`A `}
|
|
154
|
+
|
|
155
|
+
<code {...{"className":"ws-code"}}>
|
|
156
|
+
{`tabindex`}
|
|
157
|
+
</code>
|
|
158
|
+
{` should be added to the `}
|
|
159
|
+
|
|
160
|
+
<code {...{"className":"ws-code"}}>
|
|
161
|
+
{`Sidebar`}
|
|
162
|
+
</code>
|
|
163
|
+
{` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
|
|
164
|
+
</p>
|
|
126
165
|
</Example>
|
|
127
166
|
};
|
|
128
167
|
|
package/src/generated/index.js
CHANGED
|
@@ -812,8 +812,8 @@ module.exports = {
|
|
|
812
812
|
'/components/card/react-demos': {
|
|
813
813
|
id: "Card",
|
|
814
814
|
title: "Card",
|
|
815
|
-
toc: [{"text":"Demos"},[{"text":"Horizontal card grid"},{"text":"Horizontal split"},{"text":"Details card"},{"text":"Aggregate status card"},{"text":"Status"},{"text":"Status Tabbed"},{"text":"Log view"},{"text":"Event view"}]],
|
|
816
|
-
examples: ["Horizontal card grid","Horizontal split","Details card","Aggregate status card","Status","Status Tabbed","Log view","Event view"],
|
|
815
|
+
toc: [{"text":"Demos"},[{"text":"Horizontal card grid"},{"text":"Horizontal split"},{"text":"Details card"},{"text":"Aggregate status card"},{"text":"Status"},{"text":"Status Tabbed"},{"text":"Utilization card 1"},{"text":"Utilization card 2"},{"text":"Utilization card 3"},{"text":"Utilization card 4"},{"text":"Log view"},{"text":"Event view"}]],
|
|
816
|
+
examples: ["Horizontal card grid","Horizontal split","Details card","Aggregate status card","Status","Status Tabbed","Utilization card 1","Utilization card 2","Utilization card 3","Utilization card 4","Log view","Event view"],
|
|
817
817
|
section: "components",
|
|
818
818
|
source: "react-demos",
|
|
819
819
|
Component: () => import(/* webpackChunkName: "components/card/react-demos/index" */ './components/card/react-demos')
|