@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8
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 +4 -0
- package/package.json +12 -13
- package/patternfly-docs/generated/components/about-modal/react.js +149 -0
- package/patternfly-docs/generated/components/accordion/react.js +262 -0
- package/patternfly-docs/generated/components/action-list/react.js +144 -0
- package/patternfly-docs/generated/components/alert/react-demos.js +56 -0
- package/patternfly-docs/generated/components/alert/react.js +1433 -0
- package/patternfly-docs/generated/components/avatar/react.js +166 -0
- package/patternfly-docs/generated/components/back-to-top/react-demos.js +60 -0
- package/patternfly-docs/generated/components/back-to-top/react.js +77 -0
- package/patternfly-docs/generated/components/backdrop/react.js +64 -0
- package/patternfly-docs/generated/components/background-image/react.js +62 -0
- package/patternfly-docs/generated/components/badge/react.js +97 -0
- package/patternfly-docs/generated/components/banner/react-demos.js +57 -0
- package/patternfly-docs/generated/components/banner/react.js +148 -0
- package/patternfly-docs/generated/components/brand/react.js +142 -0
- package/patternfly-docs/generated/components/breadcrumb/react.js +206 -0
- package/patternfly-docs/generated/components/button/react-demos.js +57 -0
- package/patternfly-docs/generated/components/button/react.js +826 -0
- package/patternfly-docs/generated/components/card/react-demos.js +201 -0
- package/patternfly-docs/generated/components/card/react.js +1015 -0
- package/patternfly-docs/generated/components/charts/area-chart/-Victory.js +1350 -0
- package/patternfly-docs/generated/components/charts/bar-chart/-Victory.js +1334 -0
- package/patternfly-docs/generated/components/charts/box-plot-chart/-Victory.js +1282 -0
- package/patternfly-docs/generated/components/charts/bullet-chart/-Victory.js +848 -0
- package/patternfly-docs/generated/components/charts/colors-for-charts/-Victory.js +192 -0
- package/patternfly-docs/generated/components/charts/donut-chart/-Victory.js +426 -0
- package/patternfly-docs/generated/components/charts/donut-utilization-chart/-Victory.js +804 -0
- package/patternfly-docs/generated/components/charts/legends/-Victory.js +3230 -0
- package/patternfly-docs/generated/components/charts/line-chart/-Victory.js +1178 -0
- package/patternfly-docs/generated/components/charts/line-chart/ECharts.js +525 -0
- package/patternfly-docs/generated/components/charts/patterns/-Victory.js +3382 -0
- package/patternfly-docs/generated/components/charts/pie-chart/-Victory.js +377 -0
- package/patternfly-docs/generated/components/charts/resize-observer/-Victory.js +2475 -0
- package/patternfly-docs/generated/components/charts/sankey-chart/ECharts.js +538 -0
- package/patternfly-docs/generated/components/charts/scatter-chart/-Victory.js +1551 -0
- package/patternfly-docs/generated/components/charts/skeletons/-Victory.js +4115 -0
- package/patternfly-docs/generated/components/charts/sparkline-chart/-Victory.js +955 -0
- package/patternfly-docs/generated/components/charts/stack-chart/-Victory.js +1173 -0
- package/patternfly-docs/generated/components/charts/threshold-chart/-Victory.js +1166 -0
- package/patternfly-docs/generated/components/charts/tooltips/-Victory.js +413 -0
- package/patternfly-docs/generated/components/chip/react-deprecated.js +323 -0
- package/patternfly-docs/generated/components/clipboard-copy/react.js +373 -0
- package/patternfly-docs/generated/components/code-block/react.js +148 -0
- package/patternfly-docs/generated/components/code-editor/react.js +659 -0
- package/patternfly-docs/generated/components/compass/react-demos.js +147 -0
- package/patternfly-docs/generated/components/compass/react.js +440 -0
- package/patternfly-docs/generated/components/content/react.js +248 -0
- package/patternfly-docs/generated/components/data-list/react-demos.js +90 -0
- package/patternfly-docs/generated/components/data-list/react.js +709 -0
- package/patternfly-docs/generated/components/date-and-time/calendar-month/react.js +283 -0
- package/patternfly-docs/generated/components/date-and-time/date-and-time-picker/react-demos.js +64 -0
- package/patternfly-docs/generated/components/date-and-time/date-picker/react-demos.js +83 -0
- package/patternfly-docs/generated/components/date-and-time/date-picker/react.js +395 -0
- package/patternfly-docs/generated/components/date-and-time/time-picker/react.js +241 -0
- package/patternfly-docs/generated/components/description-list/react-demos.js +58 -0
- package/patternfly-docs/generated/components/description-list/react.js +743 -0
- package/patternfly-docs/generated/components/divider/react.js +126 -0
- package/patternfly-docs/generated/components/drag-and-drop/react-demos.js +351 -0
- package/patternfly-docs/generated/components/drag-and-drop/react-deprecated.js +184 -0
- package/patternfly-docs/generated/components/drag-and-drop/react.js +137 -0
- package/patternfly-docs/generated/components/drawer/react.js +598 -0
- package/patternfly-docs/generated/components/dual-list-selector/react-deprecated.js +772 -0
- package/patternfly-docs/generated/components/dual-list-selector/react.js +594 -0
- package/patternfly-docs/generated/components/empty-state/react.js +199 -0
- package/patternfly-docs/generated/components/expandable-section/react-demos.js +65 -0
- package/patternfly-docs/generated/components/expandable-section/react.js +408 -0
- package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react-demos.js +52 -0
- package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react.js +398 -0
- package/patternfly-docs/generated/components/file-upload/simple-file-upload/react.js +749 -0
- package/patternfly-docs/generated/components/forms/checkbox/react.js +222 -0
- package/patternfly-docs/generated/components/forms/form/react.js +1106 -0
- package/patternfly-docs/generated/components/forms/form-select/react.js +208 -0
- package/patternfly-docs/generated/components/forms/radio/react.js +212 -0
- package/patternfly-docs/generated/components/forms/text-area/react.js +160 -0
- package/patternfly-docs/generated/components/forms/text-input/react.js +216 -0
- package/patternfly-docs/generated/components/helper-text/react-demos.js +180 -0
- package/patternfly-docs/generated/components/helper-text/react.js +164 -0
- package/patternfly-docs/generated/components/hero/react.js +88 -0
- package/patternfly-docs/generated/components/hint/react.js +169 -0
- package/patternfly-docs/generated/components/icon/react.js +215 -0
- package/patternfly-docs/generated/components/input-group/react.js +182 -0
- package/patternfly-docs/generated/components/jump-links/react-demos.js +154 -0
- package/patternfly-docs/generated/components/jump-links/react.js +212 -0
- package/patternfly-docs/generated/components/label/react-demos.js +57 -0
- package/patternfly-docs/generated/components/label/react.js +417 -0
- package/patternfly-docs/generated/components/list/react.js +175 -0
- package/patternfly-docs/generated/components/login-page/react.js +587 -0
- package/patternfly-docs/generated/components/masthead/react-demos.js +79 -0
- package/patternfly-docs/generated/components/masthead/react.js +291 -0
- package/patternfly-docs/generated/components/menus/application-launcher/react-demos.js +769 -0
- package/patternfly-docs/generated/components/menus/context-selector/react-demos.js +665 -0
- package/patternfly-docs/generated/components/menus/custom-menus/react-demos.js +187 -0
- package/patternfly-docs/generated/components/menus/dropdown/react-templates.js +163 -0
- package/patternfly-docs/generated/components/menus/dropdown/react.js +998 -0
- package/patternfly-docs/generated/components/menus/menu/react.js +1540 -0
- package/patternfly-docs/generated/components/menus/menu-toggle/react.js +747 -0
- package/patternfly-docs/generated/components/menus/options-menu/react-demos.js +508 -0
- package/patternfly-docs/generated/components/menus/select/react-templates.js +257 -0
- package/patternfly-docs/generated/components/menus/select/react.js +998 -0
- package/patternfly-docs/generated/components/modal/react-deprecated.js +554 -0
- package/patternfly-docs/generated/components/modal/react.js +597 -0
- package/patternfly-docs/generated/components/navigation/react-demos.js +356 -0
- package/patternfly-docs/generated/components/navigation/react.js +409 -0
- package/patternfly-docs/generated/components/notification-badge/react.js +196 -0
- package/patternfly-docs/generated/components/notification-drawer/react-demos.js +107 -0
- package/patternfly-docs/generated/components/notification-drawer/react.js +394 -0
- package/patternfly-docs/generated/components/number-input/react.js +210 -0
- package/patternfly-docs/generated/components/overflow-menu/react.js +274 -0
- package/patternfly-docs/generated/components/page/react-demos.js +149 -0
- package/patternfly-docs/generated/components/page/react.js +1352 -0
- package/patternfly-docs/generated/components/pagination/react.js +492 -0
- package/patternfly-docs/generated/components/panel/react.js +236 -0
- package/patternfly-docs/generated/components/popover/react.js +390 -0
- package/patternfly-docs/generated/components/progress/react-demos.js +59 -0
- package/patternfly-docs/generated/components/progress/react.js +283 -0
- package/patternfly-docs/generated/components/progress-stepper/react-demos.js +45 -0
- package/patternfly-docs/generated/components/progress-stepper/react.js +219 -0
- package/patternfly-docs/generated/components/search-input/react-demos.js +113 -0
- package/patternfly-docs/generated/components/search-input/react.js +263 -0
- package/patternfly-docs/generated/components/sidebar/react.js +236 -0
- package/patternfly-docs/generated/components/simple-list/react.js +200 -0
- package/patternfly-docs/generated/components/skeleton/react-demos.js +44 -0
- package/patternfly-docs/generated/components/skeleton/react.js +122 -0
- package/patternfly-docs/generated/components/skip-to-content/react.js +73 -0
- package/patternfly-docs/generated/components/slider/react.js +309 -0
- package/patternfly-docs/generated/components/spinner/react.js +111 -0
- package/patternfly-docs/generated/components/switch/react.js +163 -0
- package/patternfly-docs/generated/components/table/react-demos.js +355 -0
- package/patternfly-docs/generated/components/table/react-deprecated.js +1350 -0
- package/patternfly-docs/generated/components/table/react.js +3241 -0
- package/patternfly-docs/generated/components/tabs/react-demos.js +108 -0
- package/patternfly-docs/generated/components/tabs/react.js +1359 -0
- package/patternfly-docs/generated/components/text-input-group/react-demos.js +152 -0
- package/patternfly-docs/generated/components/text-input-group/react.js +278 -0
- package/patternfly-docs/generated/components/tile/react-deprecated.js +242 -0
- package/patternfly-docs/generated/components/timestamp/react.js +283 -0
- package/patternfly-docs/generated/components/title/react.js +94 -0
- package/patternfly-docs/generated/components/toggle-group/react.js +299 -0
- package/patternfly-docs/generated/components/toolbar/react-demos.js +66 -0
- package/patternfly-docs/generated/components/toolbar/react.js +932 -0
- package/patternfly-docs/generated/components/tooltip/react.js +241 -0
- package/patternfly-docs/generated/components/tree-view/react.js +429 -0
- package/patternfly-docs/generated/components/truncate/react.js +211 -0
- package/patternfly-docs/generated/components/wizard/react-demos.js +87 -0
- package/patternfly-docs/generated/components/wizard/react-deprecated.js +788 -0
- package/patternfly-docs/generated/components/wizard/react.js +986 -0
- package/patternfly-docs/generated/developer-guides/open-ui-automation/react.js +285 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/bullseye/react.js +70 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/flex/react.js +506 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/gallery/react.js +94 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/grid/react.js +272 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/level/react.js +87 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/split/react.js +124 -0
- package/patternfly-docs/generated/foundations-and-styles/layouts/stack/react.js +112 -0
- package/patternfly-docs/generated/index.js +1769 -0
- package/patternfly-docs/generated/patterns/card-view/react-demos.js +78 -0
- package/patternfly-docs/generated/patterns/filters/react-demos.js +141 -0
- package/patternfly-docs/generated/patterns/password-generator/react-demos.js +51 -0
- package/patternfly-docs/generated/patterns/password-strength/react-demos.js +61 -0
- package/patternfly-docs/generated/patterns/primary-detail/react-demos.js +124 -0
- package/patternfly-docs/generated/patterns/right-to-left/react-demos.js +81 -0
- package/LICENSE +0 -21
|
@@ -0,0 +1,1769 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
'/components/wizard/react': {
|
|
3
|
+
id: "Wizard",
|
|
4
|
+
title: "Wizard",
|
|
5
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Plain"},{"text":"Focus content on next/back"},{"text":"Basic with disabled steps"},{"text":"Anchors for nav items"},{"text":"Incrementally enabled steps"},{"text":"Expandable steps"},{"text":"Progress after submission"},{"text":"Enabled on form validation"},{"text":"Validate on button press"},{"text":"Progressive steps"},{"text":"Get current step"},{"text":"Within modal"},{"text":"Step drawer content"},{"text":"Custom navigation"},{"text":"Header"},{"text":"Custom footer"},{"text":"Custom navigation item"},{"text":"Toggle step visibility"},{"text":"Step status"}],{"text":"Hooks"},[{"text":"useWizardContext"},{"text":"useWizardFooter"}]],
|
|
6
|
+
examples: ["Basic","Plain","Focus content on next/back","Basic with disabled steps","Anchors for nav items","Incrementally enabled steps","Expandable steps","Progress after submission","Enabled on form validation","Validate on button press","Progressive steps","Get current step","Within modal","Step drawer content","Custom navigation","Header","Custom footer","Custom navigation item","Toggle step visibility","Step status"],
|
|
7
|
+
section: "components",
|
|
8
|
+
subsection: "",
|
|
9
|
+
source: "react",
|
|
10
|
+
tabName: null,
|
|
11
|
+
Component: () => import(/* webpackChunkName: "components/wizard/react/index" */ './components/wizard/react')
|
|
12
|
+
},
|
|
13
|
+
'/components/truncate/react': {
|
|
14
|
+
id: "Truncate",
|
|
15
|
+
title: "Truncate",
|
|
16
|
+
toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Middle"},{"text":"Start"},{"text":"With custom tooltip position"},{"text":"Based on max characters"},{"text":"With links"}]],
|
|
17
|
+
examples: ["Default","Middle","Start","With custom tooltip position","Based on max characters","With links"],
|
|
18
|
+
section: "components",
|
|
19
|
+
subsection: "",
|
|
20
|
+
source: "react",
|
|
21
|
+
tabName: null,
|
|
22
|
+
Component: () => import(/* webpackChunkName: "components/truncate/react/index" */ './components/truncate/react')
|
|
23
|
+
},
|
|
24
|
+
'/components/tree-view/react': {
|
|
25
|
+
id: "Tree view",
|
|
26
|
+
title: "Tree view",
|
|
27
|
+
toc: [{"text":"Examples"},[{"text":"Single selectable"},{"text":"Multiselectable"},{"text":"With separate selection and expansion"},{"text":"With search"},{"text":"With checkboxes"},{"text":"With icons"},{"text":"With unique icon per item"},{"text":"With badges"},{"text":"With custom badges"},{"text":"With action items"},{"text":"Guides"},{"text":"Compact"},{"text":"Compact, no background"},{"text":"With memoization"}]],
|
|
28
|
+
examples: ["Single selectable","Multiselectable","With separate selection and expansion","With search","With checkboxes","With icons","With unique icon per item","With badges","With custom badges","With action items","Guides","Compact","Compact, no background","With memoization"],
|
|
29
|
+
section: "components",
|
|
30
|
+
subsection: "",
|
|
31
|
+
source: "react",
|
|
32
|
+
tabName: null,
|
|
33
|
+
Component: () => import(/* webpackChunkName: "components/tree-view/react/index" */ './components/tree-view/react')
|
|
34
|
+
},
|
|
35
|
+
'/components/tooltip/react': {
|
|
36
|
+
id: "Tooltip",
|
|
37
|
+
title: "Tooltip",
|
|
38
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Tooltip react ref"},{"text":"Tooltip selector ref"},{"text":"On icon with dynamic content"},{"text":"Options"}]],
|
|
39
|
+
examples: ["Basic","Tooltip react ref","Tooltip selector ref","On icon with dynamic content","Options"],
|
|
40
|
+
section: "components",
|
|
41
|
+
subsection: "",
|
|
42
|
+
source: "react",
|
|
43
|
+
tabName: null,
|
|
44
|
+
Component: () => import(/* webpackChunkName: "components/tooltip/react/index" */ './components/tooltip/react')
|
|
45
|
+
},
|
|
46
|
+
'/components/toolbar/react': {
|
|
47
|
+
id: "Toolbar",
|
|
48
|
+
title: "Toolbar",
|
|
49
|
+
toc: [{"text":"Examples"},[{"text":"Toolbar items"},{"text":"With adjusted inset"},{"text":"Vertical toolbar"},{"text":"Sticky toolbar"},{"text":"Dynamic sticky toolbar"},{"text":"With groups of items"},{"text":"Background color variants"}],{"text":"Examples with toggle groups and filters"},[{"text":"Component managed toggle groups"},{"text":"Consumer managed toggle groups"},{"text":"With filters"},{"text":"With custom label group content"},{"text":"Stacked example"}],{"text":"Examples with spacers and wrapping"},[{"text":"Toolbar content wrapping"},{"text":"Toolbar group spacers"},{"text":"Toolbar item spacers"}]],
|
|
50
|
+
examples: ["Toolbar items","With adjusted inset","Vertical toolbar","Sticky toolbar","Dynamic sticky toolbar","With groups of items","Background color variants","Component managed toggle groups","Consumer managed toggle groups","With filters","With custom label group content","Stacked example","Toolbar content wrapping","Toolbar group spacers","Toolbar item spacers"],
|
|
51
|
+
section: "components",
|
|
52
|
+
subsection: "",
|
|
53
|
+
source: "react",
|
|
54
|
+
tabName: null,
|
|
55
|
+
Component: () => import(/* webpackChunkName: "components/toolbar/react/index" */ './components/toolbar/react')
|
|
56
|
+
},
|
|
57
|
+
'/components/toggle-group/react': {
|
|
58
|
+
id: "Toggle group",
|
|
59
|
+
title: "Toggle group",
|
|
60
|
+
toc: [{"text":"Examples"},[{"text":"Single select toggle group"},{"text":"Multi select toggle group"},{"text":"With icons"},{"text":"With text and icons"},{"text":"Compact toggle group"},{"text":"Full-width toggle group"}]],
|
|
61
|
+
examples: ["Single select toggle group","Multi select toggle group","With icons","With text and icons","Compact toggle group","Full-width toggle group"],
|
|
62
|
+
section: "components",
|
|
63
|
+
subsection: "",
|
|
64
|
+
source: "react",
|
|
65
|
+
tabName: null,
|
|
66
|
+
Component: () => import(/* webpackChunkName: "components/toggle-group/react/index" */ './components/toggle-group/react')
|
|
67
|
+
},
|
|
68
|
+
'/components/title/react': {
|
|
69
|
+
id: "Title",
|
|
70
|
+
title: "Title",
|
|
71
|
+
toc: [{"text":"Examples"},[{"text":"Default Sizes"},{"text":"Custom Sizes"}]],
|
|
72
|
+
examples: ["Default Sizes","Custom Sizes"],
|
|
73
|
+
section: "components",
|
|
74
|
+
subsection: "",
|
|
75
|
+
source: "react",
|
|
76
|
+
tabName: null,
|
|
77
|
+
Component: () => import(/* webpackChunkName: "components/title/react/index" */ './components/title/react')
|
|
78
|
+
},
|
|
79
|
+
'/components/timestamp/react': {
|
|
80
|
+
id: "Timestamp",
|
|
81
|
+
title: "Timestamp",
|
|
82
|
+
toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Basic formats"},{"text":"Custom format"},{"text":"Default tooltip"},{"text":"Custom content"},{"text":"Custom tooltip"}]],
|
|
83
|
+
examples: ["Default","Basic formats","Custom format","Default tooltip","Custom content","Custom tooltip"],
|
|
84
|
+
section: "components",
|
|
85
|
+
subsection: "",
|
|
86
|
+
source: "react",
|
|
87
|
+
tabName: null,
|
|
88
|
+
Component: () => import(/* webpackChunkName: "components/timestamp/react/index" */ './components/timestamp/react')
|
|
89
|
+
},
|
|
90
|
+
'/components/date-and-time/time-picker/react': {
|
|
91
|
+
id: "Time picker",
|
|
92
|
+
title: "Time picker",
|
|
93
|
+
toc: [{"text":"Examples"},[{"text":"Basic 12 hour"},{"text":"Basic 24 hour"},{"text":"Custom delimiter"},{"text":"Minimum/maximum times"},{"text":"With seconds"},{"text":"Basic 24 hours with seconds"}]],
|
|
94
|
+
examples: ["Basic 12 hour","Basic 24 hour","Custom delimiter","Minimum/maximum times","With seconds","Basic 24 hours with seconds"],
|
|
95
|
+
section: "components",
|
|
96
|
+
subsection: "date-and-time",
|
|
97
|
+
source: "react",
|
|
98
|
+
tabName: null,
|
|
99
|
+
Component: () => import(/* webpackChunkName: "components/date-and-time/time-picker/react/index" */ './components/date-and-time/time-picker/react')
|
|
100
|
+
},
|
|
101
|
+
'/components/text-input-group/react': {
|
|
102
|
+
id: "Text input group",
|
|
103
|
+
title: "Text input group",
|
|
104
|
+
toc: [{"text":"Examples"},[{"text":"Basic text input group"},{"text":"Disabled text input group"},{"text":"With icon and utilities"},{"text":"With validation"},{"text":"With filters"}]],
|
|
105
|
+
examples: ["Basic text input group","Disabled text input group","With icon and utilities","With validation","With filters"],
|
|
106
|
+
section: "components",
|
|
107
|
+
subsection: "",
|
|
108
|
+
source: "react",
|
|
109
|
+
tabName: null,
|
|
110
|
+
Component: () => import(/* webpackChunkName: "components/text-input-group/react/index" */ './components/text-input-group/react')
|
|
111
|
+
},
|
|
112
|
+
'/components/forms/text-input/react': {
|
|
113
|
+
id: "Text input",
|
|
114
|
+
title: "Text input",
|
|
115
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Disabled"},{"text":"Truncated at start"},{"text":"Read only"},{"text":"Invalid"},{"text":"Select text using ref"},{"text":"Custom icon"},{"text":"Custom icon and invalid"}]],
|
|
116
|
+
examples: ["Basic","Disabled","Truncated at start","Read only","Invalid","Select text using ref","Custom icon","Custom icon and invalid"],
|
|
117
|
+
section: "components",
|
|
118
|
+
subsection: "forms",
|
|
119
|
+
source: "react",
|
|
120
|
+
tabName: null,
|
|
121
|
+
Component: () => import(/* webpackChunkName: "components/forms/text-input/react/index" */ './components/forms/text-input/react')
|
|
122
|
+
},
|
|
123
|
+
'/components/forms/text-area/react': {
|
|
124
|
+
id: "Text area",
|
|
125
|
+
title: "Text area",
|
|
126
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Invalid"},{"text":"Validated"},{"text":"Vertically resizable"},{"text":"Horizontally resizable"},{"text":"Not resizable"},{"text":"Uncontrolled"},{"text":"Disabled"},{"text":"Read only"},{"text":"Auto resizing"}]],
|
|
127
|
+
examples: ["Basic","Invalid","Validated","Vertically resizable","Horizontally resizable","Not resizable","Uncontrolled","Disabled","Read only","Auto resizing"],
|
|
128
|
+
section: "components",
|
|
129
|
+
subsection: "forms",
|
|
130
|
+
source: "react",
|
|
131
|
+
tabName: null,
|
|
132
|
+
Component: () => import(/* webpackChunkName: "components/forms/text-area/react/index" */ './components/forms/text-area/react')
|
|
133
|
+
},
|
|
134
|
+
'/components/tabs/react': {
|
|
135
|
+
id: "Tabs",
|
|
136
|
+
title: "Tabs",
|
|
137
|
+
toc: [{"text":"Examples"},[{"text":"Default tabs"},{"text":"Boxed secondary tabs"},{"text":"Vertical tabs"},{"text":"Vertical expandable tabs"},{"text":"Vertical expandable uncontrolled"},{"text":"Default overflow tabs"},{"text":"Horizontal overflow tabs"},{"text":"With tooltip react ref"},{"text":"Uncontrolled tabs"},{"text":"With adjusted inset"},{"text":"With page insets"},{"text":"With icons and text"},{"text":"Subtabs"},{"text":"Filled tabs with icons"},{"text":"Tabs linked to nav elements"},{"text":"Subtabs linked to nav elements"},{"text":"Tabs used for site navigation"},{"text":"With separate content"},{"text":"With tab content with body and padding"},{"text":"Children mounting on click"},{"text":"Unmounting invisible children"},{"text":"Toggled tab content"},{"text":"Dynamic tabs"},{"text":"With help action popover"},{"text":"With help and close actions"}]],
|
|
138
|
+
examples: ["Default tabs","Boxed secondary tabs","Vertical tabs","Vertical expandable tabs","Vertical expandable uncontrolled","Default overflow tabs","Horizontal overflow tabs","With tooltip react ref","Uncontrolled tabs","With adjusted inset","With page insets","With icons and text","Subtabs","Filled tabs with icons","Tabs linked to nav elements","Subtabs linked to nav elements","Tabs used for site navigation","With separate content","With tab content with body and padding","Children mounting on click","Unmounting invisible children","Toggled tab content","Dynamic tabs","With help action popover","With help and close actions"],
|
|
139
|
+
section: "components",
|
|
140
|
+
subsection: "",
|
|
141
|
+
source: "react",
|
|
142
|
+
tabName: null,
|
|
143
|
+
Component: () => import(/* webpackChunkName: "components/tabs/react/index" */ './components/tabs/react')
|
|
144
|
+
},
|
|
145
|
+
'/components/switch/react': {
|
|
146
|
+
id: "Switch",
|
|
147
|
+
title: "Switch",
|
|
148
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Reversed Layout"},{"text":"Without label"},{"text":"Checked with label"},{"text":"Disabled"},{"text":"Uncontrolled"}]],
|
|
149
|
+
examples: ["Basic","Reversed Layout","Without label","Checked with label","Disabled","Uncontrolled"],
|
|
150
|
+
section: "components",
|
|
151
|
+
subsection: "",
|
|
152
|
+
source: "react",
|
|
153
|
+
tabName: null,
|
|
154
|
+
Component: () => import(/* webpackChunkName: "components/switch/react/index" */ './components/switch/react')
|
|
155
|
+
},
|
|
156
|
+
'/components/spinner/react': {
|
|
157
|
+
id: "Spinner",
|
|
158
|
+
title: "Spinner",
|
|
159
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Size variations"},{"text":"Custom size"},{"text":"Inline size"}]],
|
|
160
|
+
examples: ["Basic","Size variations","Custom size","Inline size"],
|
|
161
|
+
section: "components",
|
|
162
|
+
subsection: "",
|
|
163
|
+
source: "react",
|
|
164
|
+
tabName: null,
|
|
165
|
+
Component: () => import(/* webpackChunkName: "components/spinner/react/index" */ './components/spinner/react')
|
|
166
|
+
},
|
|
167
|
+
'/components/slider/react': {
|
|
168
|
+
id: "Slider",
|
|
169
|
+
title: "Slider",
|
|
170
|
+
toc: [{"text":"Examples"},[{"text":"Discrete"},{"text":"Continuous"},{"text":"Value input"},{"text":"Thumb value input"},{"text":"Actions"},{"text":"Disabled"}],{"text":"Types"},[{"text":"SliderOnChangeEvent"}]],
|
|
171
|
+
examples: ["Discrete","Continuous","Value input","Thumb value input","Actions","Disabled"],
|
|
172
|
+
section: "components",
|
|
173
|
+
subsection: "",
|
|
174
|
+
source: "react",
|
|
175
|
+
tabName: null,
|
|
176
|
+
Component: () => import(/* webpackChunkName: "components/slider/react/index" */ './components/slider/react')
|
|
177
|
+
},
|
|
178
|
+
'/components/skip-to-content/react': {
|
|
179
|
+
id: "Skip to content",
|
|
180
|
+
title: "Skip to content",
|
|
181
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
182
|
+
fullscreenExamples: ["Basic"],
|
|
183
|
+
section: "components",
|
|
184
|
+
subsection: "",
|
|
185
|
+
source: "react",
|
|
186
|
+
tabName: null,
|
|
187
|
+
Component: () => import(/* webpackChunkName: "components/skip-to-content/react/index" */ './components/skip-to-content/react')
|
|
188
|
+
},
|
|
189
|
+
'/components/skeleton/react': {
|
|
190
|
+
id: "Skeleton",
|
|
191
|
+
title: "Skeleton",
|
|
192
|
+
toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Percentage widths"},{"text":"Percentage heights"},{"text":"Text modifiers"},{"text":"Shapes"}]],
|
|
193
|
+
examples: ["Default","Percentage widths","Percentage heights","Text modifiers","Shapes"],
|
|
194
|
+
section: "components",
|
|
195
|
+
subsection: "",
|
|
196
|
+
source: "react",
|
|
197
|
+
tabName: null,
|
|
198
|
+
Component: () => import(/* webpackChunkName: "components/skeleton/react/index" */ './components/skeleton/react')
|
|
199
|
+
},
|
|
200
|
+
'/components/simple-list/react': {
|
|
201
|
+
id: "Simple list",
|
|
202
|
+
title: "Simple list",
|
|
203
|
+
toc: [{"text":"Examples"},[{"text":"Simple list"},{"text":"Simple list with links"},{"text":"Grouped list"},{"text":"Uncontrolled simple list"}]],
|
|
204
|
+
examples: ["Simple list","Simple list with links","Grouped list","Uncontrolled simple list"],
|
|
205
|
+
section: "components",
|
|
206
|
+
subsection: "",
|
|
207
|
+
source: "react",
|
|
208
|
+
tabName: null,
|
|
209
|
+
Component: () => import(/* webpackChunkName: "components/simple-list/react/index" */ './components/simple-list/react')
|
|
210
|
+
},
|
|
211
|
+
'/components/sidebar/react': {
|
|
212
|
+
id: "Sidebar",
|
|
213
|
+
title: "Sidebar",
|
|
214
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Stack"},{"text":"Panel right with gutter"},{"text":"Sticky panel"},{"text":"Static panel"},{"text":"Responsive panel width"},{"text":"Border"},{"text":"Padding on panel"},{"text":"Padding on content"}]],
|
|
215
|
+
examples: ["Basic","Stack","Panel right with gutter","Sticky panel","Static panel","Responsive panel width","Border","Padding on panel","Padding on content"],
|
|
216
|
+
section: "components",
|
|
217
|
+
subsection: "",
|
|
218
|
+
source: "react",
|
|
219
|
+
tabName: null,
|
|
220
|
+
Component: () => import(/* webpackChunkName: "components/sidebar/react/index" */ './components/sidebar/react')
|
|
221
|
+
},
|
|
222
|
+
'/components/menus/select/react': {
|
|
223
|
+
id: "Select",
|
|
224
|
+
title: "Select",
|
|
225
|
+
toc: [{"text":"Examples"},[{"text":"Single select"},{"text":"Select option variants"},{"text":"With grouped items"},{"text":"With validation"},{"text":"Checkbox select"},{"text":"Typeahead"},{"text":"Typeahead with create option"},{"text":"Multiple typeahead with labels"},{"text":"Multiple typeahead with create option"},{"text":"Multiple typeahead with checkboxes"},{"text":"With view more"},{"text":"With a footer"}]],
|
|
226
|
+
examples: ["Single select","Select option variants","With grouped items","With validation","Checkbox select","Typeahead","Typeahead with create option","Multiple typeahead with labels","Multiple typeahead with create option","Multiple typeahead with checkboxes","With view more","With a footer"],
|
|
227
|
+
section: "components",
|
|
228
|
+
subsection: "menus",
|
|
229
|
+
source: "react",
|
|
230
|
+
tabName: null,
|
|
231
|
+
Component: () => import(/* webpackChunkName: "components/menus/select/react/index" */ './components/menus/select/react')
|
|
232
|
+
},
|
|
233
|
+
'/components/search-input/react': {
|
|
234
|
+
id: "Search input",
|
|
235
|
+
title: "Search input",
|
|
236
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Match with result count"},{"text":"Match with navigable options"},{"text":"With submit button"},{"text":"Focus search input using ref"},{"text":"With expandable button"},{"text":"Advanced"}]],
|
|
237
|
+
examples: ["Basic","Match with result count","Match with navigable options","With submit button","Focus search input using ref","With expandable button","Advanced"],
|
|
238
|
+
section: "components",
|
|
239
|
+
subsection: "",
|
|
240
|
+
source: "react",
|
|
241
|
+
tabName: null,
|
|
242
|
+
Component: () => import(/* webpackChunkName: "components/search-input/react/index" */ './components/search-input/react')
|
|
243
|
+
},
|
|
244
|
+
'/components/forms/radio/react': {
|
|
245
|
+
id: "Radio",
|
|
246
|
+
title: "Radio",
|
|
247
|
+
toc: [{"text":"Examples"},[{"text":"Controlled"},{"text":"Uncontrolled"},{"text":"Reversed"},{"text":"Label wraps"},{"text":"Disabled"},{"text":"With description"},{"text":"With body"},{"text":"With description and body"},{"text":"Standalone input"}]],
|
|
248
|
+
examples: ["Controlled","Uncontrolled","Reversed","Label wraps","Disabled","With description","With body","With description and body","Standalone input"],
|
|
249
|
+
section: "components",
|
|
250
|
+
subsection: "forms",
|
|
251
|
+
source: "react",
|
|
252
|
+
tabName: null,
|
|
253
|
+
Component: () => import(/* webpackChunkName: "components/forms/radio/react/index" */ './components/forms/radio/react')
|
|
254
|
+
},
|
|
255
|
+
'/components/progress-stepper/react': {
|
|
256
|
+
id: "Progress stepper",
|
|
257
|
+
title: "Progress stepper",
|
|
258
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With step descriptions"},{"text":"With alignment"},{"text":"Compact"},{"text":"With an issue"},{"text":"With a failure"},{"text":"With custom icons"},{"text":"With help popover"}]],
|
|
259
|
+
examples: ["Basic","With step descriptions","With alignment","Compact","With an issue","With a failure","With custom icons","With help popover"],
|
|
260
|
+
section: "components",
|
|
261
|
+
subsection: "",
|
|
262
|
+
source: "react",
|
|
263
|
+
tabName: null,
|
|
264
|
+
Component: () => import(/* webpackChunkName: "components/progress-stepper/react/index" */ './components/progress-stepper/react')
|
|
265
|
+
},
|
|
266
|
+
'/components/progress/react': {
|
|
267
|
+
id: "Progress",
|
|
268
|
+
title: "Progress",
|
|
269
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Small"},{"text":"Large"},{"text":"Outside"},{"text":"Inside"},{"text":"Single line"},{"text":"Without measure"},{"text":"Finite step"},{"text":"Progress with step instructions"},{"text":"Truncate title"},{"text":"Title outside of progress bar"},{"text":"Helper text"}],{"text":"Status examples"},[{"text":"Success"},{"text":"Failure"},{"text":"Warning"},{"text":"Interactive status icon and measure location"}]],
|
|
270
|
+
examples: ["Basic","Small","Large","Outside","Inside","Single line","Without measure","Finite step","Progress with step instructions","Truncate title","Title outside of progress bar","Helper text","Success","Failure","Warning","Interactive status icon and measure location"],
|
|
271
|
+
section: "components",
|
|
272
|
+
subsection: "",
|
|
273
|
+
source: "react",
|
|
274
|
+
tabName: null,
|
|
275
|
+
Component: () => import(/* webpackChunkName: "components/progress/react/index" */ './components/progress/react')
|
|
276
|
+
},
|
|
277
|
+
'/components/popover/react': {
|
|
278
|
+
id: "Popover",
|
|
279
|
+
title: "Popover",
|
|
280
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Hoverable"},{"text":"Close popover from content (controlled)"},{"text":"Close popover from content (uncontrolled)"},{"text":"Without header/footer/close and no padding"},{"text":"Width auto"},{"text":"Popover react ref"},{"text":"Popover selector ref"},{"text":"Advanced"},{"text":"Popover with icon in the title"},{"text":"Alert popover"},{"text":"Custom focus"}]],
|
|
281
|
+
examples: ["Basic","Hoverable","Close popover from content (controlled)","Close popover from content (uncontrolled)","Without header/footer/close and no padding","Width auto","Popover react ref","Popover selector ref","Advanced","Popover with icon in the title","Alert popover","Custom focus"],
|
|
282
|
+
section: "components",
|
|
283
|
+
subsection: "",
|
|
284
|
+
source: "react",
|
|
285
|
+
tabName: null,
|
|
286
|
+
Component: () => import(/* webpackChunkName: "components/popover/react/index" */ './components/popover/react')
|
|
287
|
+
},
|
|
288
|
+
'/components/panel/react': {
|
|
289
|
+
id: "Panel",
|
|
290
|
+
title: "Panel",
|
|
291
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Header"},{"text":"Footer"},{"text":"Header and footer"},{"text":"No body"},{"text":"Raised"},{"text":"Bordered"},{"text":"Secondary variant"},{"text":"Scrollable"},{"text":"Scrollable with auto height"},{"text":"Scrollable with header and footer"},{"text":"Pill"}]],
|
|
292
|
+
examples: ["Basic","Header","Footer","Header and footer","No body","Raised","Bordered","Secondary variant","Scrollable","Scrollable with auto height","Scrollable with header and footer","Pill"],
|
|
293
|
+
section: "components",
|
|
294
|
+
subsection: "",
|
|
295
|
+
source: "react",
|
|
296
|
+
tabName: null,
|
|
297
|
+
Component: () => import(/* webpackChunkName: "components/panel/react/index" */ './components/panel/react')
|
|
298
|
+
},
|
|
299
|
+
'/components/pagination/react': {
|
|
300
|
+
id: "Pagination",
|
|
301
|
+
title: "Pagination",
|
|
302
|
+
toc: [{"text":"Examples"},[{"text":"Top"},{"text":"Bottom"},{"text":"Indeterminate"},{"text":"Disabled"},{"text":"No items"},{"text":"One page"},{"text":"Compact"},{"text":"Offset"},{"text":"Sticky"},{"text":"Dynamic sticky top"},{"text":"Dynamic sticky bottom"},{"text":"Inset"}]],
|
|
303
|
+
examples: ["Top","Bottom","Indeterminate","Disabled","No items","One page","Compact","Offset","Inset"],
|
|
304
|
+
fullscreenExamples: ["Sticky","Dynamic sticky top","Dynamic sticky bottom"],
|
|
305
|
+
section: "components",
|
|
306
|
+
subsection: "",
|
|
307
|
+
source: "react",
|
|
308
|
+
tabName: null,
|
|
309
|
+
Component: () => import(/* webpackChunkName: "components/pagination/react/index" */ './components/pagination/react')
|
|
310
|
+
},
|
|
311
|
+
'/components/page/react': {
|
|
312
|
+
id: "Page",
|
|
313
|
+
title: "Page",
|
|
314
|
+
toc: [{"text":"Examples"},[{"text":"Basic page components"},{"text":"Vertical navigation"},{"text":"Multiple sidebar body"},{"text":"Horizontal navigation"},{"text":"Uncontrolled navigation"},{"text":"Filled page sections"},{"text":"Main section padding"},{"text":"Main section variations"},{"text":"Group section"},{"text":"Centered section"},{"text":"Plain sections and groups"},{"text":"Dynamic sticky section"}]],
|
|
315
|
+
examples: ["Vertical navigation","Multiple sidebar body","Horizontal navigation","Uncontrolled navigation","Filled page sections","Main section padding","Main section variations","Group section","Centered section","Plain sections and groups","Dynamic sticky section"],
|
|
316
|
+
section: "components",
|
|
317
|
+
subsection: "",
|
|
318
|
+
source: "react",
|
|
319
|
+
tabName: null,
|
|
320
|
+
Component: () => import(/* webpackChunkName: "components/page/react/index" */ './components/page/react')
|
|
321
|
+
},
|
|
322
|
+
'/components/overflow-menu/react': {
|
|
323
|
+
id: "Overflow menu",
|
|
324
|
+
title: "Overflow menu",
|
|
325
|
+
toc: [{"text":"Examples"},[{"text":"Simple (responsive)"},{"text":"Vertical"},{"text":"Group types"},{"text":"Multiple groups"},{"text":"Persistent"},{"text":"Breakpoint on container width"},{"text":"Breakpoint on container height"}]],
|
|
326
|
+
examples: ["Simple (responsive)","Vertical","Group types","Multiple groups","Persistent","Breakpoint on container width"],
|
|
327
|
+
fullscreenExamples: ["Breakpoint on container height"],
|
|
328
|
+
section: "components",
|
|
329
|
+
subsection: "",
|
|
330
|
+
source: "react",
|
|
331
|
+
tabName: null,
|
|
332
|
+
Component: () => import(/* webpackChunkName: "components/overflow-menu/react/index" */ './components/overflow-menu/react')
|
|
333
|
+
},
|
|
334
|
+
'/components/number-input/react': {
|
|
335
|
+
id: "Number input",
|
|
336
|
+
title: "Number input",
|
|
337
|
+
toc: [{"text":"Examples"},[{"text":"Default"},{"text":"With unit"},{"text":"With unit and thresholds"},{"text":"Disabled"},{"text":"With status"},{"text":"Varying sizes"},{"text":"Custom increment/decrement"},{"text":"Custom increment/decrement and thresholds"}]],
|
|
338
|
+
examples: ["Default","With unit","With unit and thresholds","Disabled","With status","Varying sizes","Custom increment/decrement","Custom increment/decrement and thresholds"],
|
|
339
|
+
section: "components",
|
|
340
|
+
subsection: "",
|
|
341
|
+
source: "react",
|
|
342
|
+
tabName: null,
|
|
343
|
+
Component: () => import(/* webpackChunkName: "components/number-input/react/index" */ './components/number-input/react')
|
|
344
|
+
},
|
|
345
|
+
'/components/notification-drawer/react': {
|
|
346
|
+
id: "Notification drawer",
|
|
347
|
+
title: "Notification drawer",
|
|
348
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Groups"},{"text":"Lightweight"}]],
|
|
349
|
+
examples: ["Basic","Groups","Lightweight"],
|
|
350
|
+
section: "components",
|
|
351
|
+
subsection: "",
|
|
352
|
+
source: "react",
|
|
353
|
+
tabName: null,
|
|
354
|
+
Component: () => import(/* webpackChunkName: "components/notification-drawer/react/index" */ './components/notification-drawer/react')
|
|
355
|
+
},
|
|
356
|
+
'/components/notification-badge/react': {
|
|
357
|
+
id: "Notification badge",
|
|
358
|
+
title: "Notification badge",
|
|
359
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With count"},{"text":"With animation"}]],
|
|
360
|
+
examples: ["Basic","With count","With animation"],
|
|
361
|
+
section: "components",
|
|
362
|
+
subsection: "",
|
|
363
|
+
source: "react",
|
|
364
|
+
tabName: null,
|
|
365
|
+
Component: () => import(/* webpackChunkName: "components/notification-badge/react/index" */ './components/notification-badge/react')
|
|
366
|
+
},
|
|
367
|
+
'/components/navigation/react': {
|
|
368
|
+
id: "Navigation",
|
|
369
|
+
title: "Navigation",
|
|
370
|
+
toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Grouped"},{"text":"Expandable"},{"text":"Expandable third level"},{"text":"Mixed"},{"text":"Horizontal navigation"},{"text":"Horizontal subnav"},{"text":"Flyout"},{"text":"Drilldown"},{"text":"With icons"}],{"text":"Types"},[{"text":"NavSelectClickHandler"}]],
|
|
371
|
+
examples: ["Default","Grouped","Expandable","Expandable third level","Mixed","Horizontal navigation","Horizontal subnav","Flyout","Drilldown","With icons"],
|
|
372
|
+
section: "components",
|
|
373
|
+
subsection: "",
|
|
374
|
+
source: "react",
|
|
375
|
+
tabName: null,
|
|
376
|
+
Component: () => import(/* webpackChunkName: "components/navigation/react/index" */ './components/navigation/react')
|
|
377
|
+
},
|
|
378
|
+
'/components/file-upload/multiple-file-upload/react': {
|
|
379
|
+
id: "Multiple file upload",
|
|
380
|
+
title: "Multiple file upload",
|
|
381
|
+
toc: [{"text":"Restricting file size and type"},[{"text":"IMPORTANT: A note about security"}],{"text":"Composable structure"},{"text":"Examples"},[{"text":"Basic"}],{"text":"Types"}],
|
|
382
|
+
examples: ["Basic"],
|
|
383
|
+
section: "components",
|
|
384
|
+
subsection: "file-upload",
|
|
385
|
+
source: "react",
|
|
386
|
+
tabName: null,
|
|
387
|
+
Component: () => import(/* webpackChunkName: "components/file-upload/multiple-file-upload/react/index" */ './components/file-upload/multiple-file-upload/react')
|
|
388
|
+
},
|
|
389
|
+
'/components/modal/react': {
|
|
390
|
+
id: "Modal",
|
|
391
|
+
title: "Modal",
|
|
392
|
+
toc: [{"text":"Examples"},[{"text":"Basic modals"},{"text":"Scrollable modals"},{"text":"With a static description"},{"text":"Top aligned"},{"text":"Modal sizes"},{"text":"Custom width"},{"text":"Custom header"},{"text":"No header or footer"},{"text":"Title icon"},{"text":"Custom title icon"},{"text":"With wizard"},{"text":"With dropdown"},{"text":"With help"},{"text":"With form"},{"text":"Custom focus"}]],
|
|
393
|
+
examples: ["Basic modals","Scrollable modals","With a static description","Top aligned","Modal sizes","Custom width","Custom header","No header or footer","Title icon","Custom title icon","With wizard","With dropdown","With help","With form","Custom focus"],
|
|
394
|
+
section: "components",
|
|
395
|
+
subsection: "",
|
|
396
|
+
source: "react",
|
|
397
|
+
tabName: null,
|
|
398
|
+
Component: () => import(/* webpackChunkName: "components/modal/react/index" */ './components/modal/react')
|
|
399
|
+
},
|
|
400
|
+
'/components/menus/menu-toggle/react': {
|
|
401
|
+
id: "Menu toggle",
|
|
402
|
+
title: "Menu toggle",
|
|
403
|
+
toc: [{"text":"Examples"},[{"text":"Collapsed toggle"},{"text":"Expanded toggle"},{"text":"Small toggle"},{"text":"Disabled toggle"},{"text":"With a badge"},{"text":"Settings toggle"},{"text":"Custom icons"},{"text":"With avatar and text"},{"text":"Variant styles"},{"text":"Plain toggle with icon"},{"text":"Plain circle toggle"},{"text":"Plain toggle with text label"},{"text":"Split toggle with checkbox"},{"text":"Split toggle with labeled checkbox"},{"text":"Split toggle with checkbox and toggle text"},{"text":"Split toggle with action"},{"text":"Full height toggle"},{"text":"Full width toggle"},{"text":"Toggle in a form"},{"text":"Typeahead toggle"},{"text":"Status toggle"},{"text":"Placeholder text in toggle"}]],
|
|
404
|
+
examples: ["Collapsed toggle","Expanded toggle","Small toggle","Disabled toggle","With a badge","Settings toggle","Custom icons","With avatar and text","Variant styles","Plain toggle with icon","Plain circle toggle","Plain toggle with text label","Split toggle with checkbox","Split toggle with labeled checkbox","Split toggle with checkbox and toggle text","Split toggle with action","Full height toggle","Full width toggle","Toggle in a form","Typeahead toggle","Status toggle","Placeholder text in toggle"],
|
|
405
|
+
section: "components",
|
|
406
|
+
subsection: "menus",
|
|
407
|
+
source: "react",
|
|
408
|
+
tabName: null,
|
|
409
|
+
Component: () => import(/* webpackChunkName: "components/menus/menu-toggle/react/index" */ './components/menus/menu-toggle/react')
|
|
410
|
+
},
|
|
411
|
+
'/components/menus/menu/react': {
|
|
412
|
+
id: "Menu",
|
|
413
|
+
title: "Menu",
|
|
414
|
+
toc: [{"text":"Examples"},[{"text":"Basic menus"},{"text":"Danger menu item"},{"text":"With icons"},{"text":"With actions"},{"text":"With links"},{"text":"With descriptions"},{"text":"Item checkbox"},{"text":"Menu footer"},{"text":"Separated items"},{"text":"Titled groups of items"},{"text":"With favorites"},{"text":"Filtering with search input"},{"text":"Option single select menu"},{"text":"Option multi select menu"},{"text":"Scrollable menus"},{"text":"Scrollable menu with custom height"},{"text":"With view more"},{"text":"With drilldown"},{"text":"Initially drilled-in menu"},{"text":"With drilldown - submenu functions"},{"text":"With drilldown breadcrumbs"},{"text":"With drilldown and inline filter"}],{"text":"Using router links"}],
|
|
415
|
+
examples: ["Basic menus","Danger menu item","With icons","With actions","With links","With descriptions","Item checkbox","Menu footer","Separated items","Titled groups of items","With favorites","Filtering with search input","Option single select menu","Option multi select menu","Scrollable menus","Scrollable menu with custom height","With view more","With drilldown","Initially drilled-in menu","With drilldown - submenu functions","With drilldown breadcrumbs","With drilldown and inline filter"],
|
|
416
|
+
section: "components",
|
|
417
|
+
subsection: "menus",
|
|
418
|
+
source: "react",
|
|
419
|
+
tabName: null,
|
|
420
|
+
Component: () => import(/* webpackChunkName: "components/menus/menu/react/index" */ './components/menus/menu/react')
|
|
421
|
+
},
|
|
422
|
+
'/components/masthead/react': {
|
|
423
|
+
id: "Masthead",
|
|
424
|
+
title: "Masthead",
|
|
425
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with mixed content"},{"text":"Display inline"},{"text":"Display stack"},{"text":"Display stack, display inline responsive"},{"text":"Inset"},{"text":"Custom logo component"}],{"text":"Using router links"}],
|
|
426
|
+
examples: ["Basic","Basic with mixed content","Display inline","Display stack","Display stack, display inline responsive","Inset","Custom logo component"],
|
|
427
|
+
section: "components",
|
|
428
|
+
subsection: "",
|
|
429
|
+
source: "react",
|
|
430
|
+
tabName: null,
|
|
431
|
+
Component: () => import(/* webpackChunkName: "components/masthead/react/index" */ './components/masthead/react')
|
|
432
|
+
},
|
|
433
|
+
'/components/login-page/react': {
|
|
434
|
+
id: "Login page",
|
|
435
|
+
title: "Login page",
|
|
436
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Show/hide password"},{"text":"Customizing the header utilities"},{"text":"With header utilities"}]],
|
|
437
|
+
fullscreenExamples: ["Basic","Show/hide password","With header utilities"],
|
|
438
|
+
section: "components",
|
|
439
|
+
subsection: "",
|
|
440
|
+
source: "react",
|
|
441
|
+
tabName: null,
|
|
442
|
+
Component: () => import(/* webpackChunkName: "components/login-page/react/index" */ './components/login-page/react')
|
|
443
|
+
},
|
|
444
|
+
'/components/list/react': {
|
|
445
|
+
id: "List",
|
|
446
|
+
title: "List",
|
|
447
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Inline"},{"text":"Ordered"},{"text":"Plain"},{"text":"With horizontal rules"},{"text":"With icons"},{"text":"With large icons"}]],
|
|
448
|
+
examples: ["Basic","Inline","Ordered","Plain","With horizontal rules","With icons","With large icons"],
|
|
449
|
+
section: "components",
|
|
450
|
+
subsection: "",
|
|
451
|
+
source: "react",
|
|
452
|
+
tabName: null,
|
|
453
|
+
Component: () => import(/* webpackChunkName: "components/list/react/index" */ './components/list/react')
|
|
454
|
+
},
|
|
455
|
+
'/components/label/react': {
|
|
456
|
+
id: "Label",
|
|
457
|
+
title: "Label",
|
|
458
|
+
toc: [{"text":"Examples"},[{"text":"Filled labels"},{"text":"Outlined labels"},{"text":"Compact labels"},{"text":"Label with custom render"},{"text":"Editable labels"},{"text":"Basic label group"},{"text":"Label group with overflow"},{"text":"Label group with categories"},{"text":"Label group with removable categories"},{"text":"Vertical label group"},{"text":"Editable label group"},{"text":"Editable label group with add button"}],{"text":"Using router links"}],
|
|
459
|
+
examples: ["Filled labels","Outlined labels","Compact labels","Label with custom render","Editable labels","Basic label group","Label group with overflow","Label group with categories","Label group with removable categories","Vertical label group","Editable label group","Editable label group with add button"],
|
|
460
|
+
section: "components",
|
|
461
|
+
subsection: "",
|
|
462
|
+
source: "react",
|
|
463
|
+
tabName: null,
|
|
464
|
+
Component: () => import(/* webpackChunkName: "components/label/react/index" */ './components/label/react')
|
|
465
|
+
},
|
|
466
|
+
'/components/jump-links/react': {
|
|
467
|
+
id: "Jump links",
|
|
468
|
+
title: "Jump links",
|
|
469
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With centered list"},{"text":"With label"},{"text":"Vertical"},{"text":"Vertical with label"},{"text":"Expandable vertical with subsection"}]],
|
|
470
|
+
examples: ["Basic","With centered list","With label","Vertical","Vertical with label","Expandable vertical with subsection"],
|
|
471
|
+
section: "components",
|
|
472
|
+
subsection: "",
|
|
473
|
+
source: "react",
|
|
474
|
+
tabName: null,
|
|
475
|
+
Component: () => import(/* webpackChunkName: "components/jump-links/react/index" */ './components/jump-links/react')
|
|
476
|
+
},
|
|
477
|
+
'/components/input-group/react': {
|
|
478
|
+
id: "Input group",
|
|
479
|
+
title: "Input group",
|
|
480
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With textarea"},{"text":"With dropdown"},{"text":"With popover"},{"text":"With multiple group siblings"}]],
|
|
481
|
+
examples: ["Basic","With textarea","With dropdown","With popover","With multiple group siblings"],
|
|
482
|
+
section: "components",
|
|
483
|
+
subsection: "",
|
|
484
|
+
source: "react",
|
|
485
|
+
tabName: null,
|
|
486
|
+
Component: () => import(/* webpackChunkName: "components/input-group/react/index" */ './components/input-group/react')
|
|
487
|
+
},
|
|
488
|
+
'/components/icon/react': {
|
|
489
|
+
id: "Icon",
|
|
490
|
+
title: "Icon",
|
|
491
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Standalone icon sizes"},{"text":"Body sizes"},{"text":"Heading sizes"},{"text":"Status colors"},{"text":"Sizing an icon within the icon container"},{"text":"Inline"},{"text":"In progress"},{"text":"Custom in progress icon"}]],
|
|
492
|
+
examples: ["Basic","Standalone icon sizes","Body sizes","Heading sizes","Status colors","Sizing an icon within the icon container","Inline","In progress","Custom in progress icon"],
|
|
493
|
+
section: "components",
|
|
494
|
+
subsection: "",
|
|
495
|
+
source: "react",
|
|
496
|
+
tabName: null,
|
|
497
|
+
Component: () => import(/* webpackChunkName: "components/icon/react/index" */ './components/icon/react')
|
|
498
|
+
},
|
|
499
|
+
'/components/hint/react': {
|
|
500
|
+
id: "Hint",
|
|
501
|
+
title: "Hint",
|
|
502
|
+
toc: [{"text":"Examples"},[{"text":"Basic with title"},{"text":"Basic without title"},{"text":"With actions"}]],
|
|
503
|
+
examples: ["Basic with title","Basic without title","With actions"],
|
|
504
|
+
section: "components",
|
|
505
|
+
subsection: "",
|
|
506
|
+
source: "react",
|
|
507
|
+
tabName: null,
|
|
508
|
+
Component: () => import(/* webpackChunkName: "components/hint/react/index" */ './components/hint/react')
|
|
509
|
+
},
|
|
510
|
+
'/components/hero/react': {
|
|
511
|
+
id: "Hero",
|
|
512
|
+
title: "Hero",
|
|
513
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
514
|
+
examples: ["Basic"],
|
|
515
|
+
section: "components",
|
|
516
|
+
subsection: "",
|
|
517
|
+
source: "react",
|
|
518
|
+
tabName: null,
|
|
519
|
+
beta: true,
|
|
520
|
+
Component: () => import(/* webpackChunkName: "components/hero/react/index" */ './components/hero/react')
|
|
521
|
+
},
|
|
522
|
+
'/components/helper-text/react': {
|
|
523
|
+
id: "Helper text",
|
|
524
|
+
title: "Helper text",
|
|
525
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With custom icons"},{"text":"Multiple items"}]],
|
|
526
|
+
examples: ["Basic","With custom icons","Multiple items"],
|
|
527
|
+
section: "components",
|
|
528
|
+
subsection: "",
|
|
529
|
+
source: "react",
|
|
530
|
+
tabName: null,
|
|
531
|
+
Component: () => import(/* webpackChunkName: "components/helper-text/react/index" */ './components/helper-text/react')
|
|
532
|
+
},
|
|
533
|
+
'/components/forms/form-select/react': {
|
|
534
|
+
id: "Form select",
|
|
535
|
+
title: "Form select",
|
|
536
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Validated"},{"text":"Disabled"},{"text":"Grouped"}]],
|
|
537
|
+
examples: ["Basic","Validated","Disabled","Grouped"],
|
|
538
|
+
section: "components",
|
|
539
|
+
subsection: "forms",
|
|
540
|
+
source: "react",
|
|
541
|
+
tabName: null,
|
|
542
|
+
Component: () => import(/* webpackChunkName: "components/forms/form-select/react/index" */ './components/forms/form-select/react')
|
|
543
|
+
},
|
|
544
|
+
'/components/forms/form/react': {
|
|
545
|
+
id: "Form",
|
|
546
|
+
title: "Form",
|
|
547
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Horizontal"},{"text":"Limit width"},{"text":"Invalid"},{"text":"Invalid with form alert"},{"text":"Validated"},{"text":"Horizontal stacked no padding top"},{"text":"Horizontal stacked helper text on top"},{"text":"Form group with additional label info"},{"text":"Form Sections"},{"text":"Grid form"},{"text":"Field Groups"},{"text":"Form state"}]],
|
|
548
|
+
examples: ["Basic","Horizontal","Limit width","Invalid","Invalid with form alert","Validated","Horizontal stacked no padding top","Horizontal stacked helper text on top","Form group with additional label info","Form Sections","Grid form","Field Groups","Form state"],
|
|
549
|
+
section: "components",
|
|
550
|
+
subsection: "forms",
|
|
551
|
+
source: "react",
|
|
552
|
+
tabName: null,
|
|
553
|
+
Component: () => import(/* webpackChunkName: "components/forms/form/react/index" */ './components/forms/form/react')
|
|
554
|
+
},
|
|
555
|
+
'/components/file-upload/simple-file-upload/react': {
|
|
556
|
+
id: "Simple file upload",
|
|
557
|
+
title: "Simple file upload",
|
|
558
|
+
toc: [{"text":"Examples"},[{"text":"Text files"},{"text":"Simple text file"},{"text":"With helper text"},{"text":"Text file with edits allowed"},{"text":"Restricting file size and type"},{"text":"Text file with restrictions"},{"text":"Other file types"},{"text":"Simple file of any format"},{"text":"Customizing the file preview"},{"text":"Custom file preview"},{"text":"Bringing your own file browse logic"},{"text":"Custom file upload"}],{"text":"Types"}],
|
|
559
|
+
examples: ["Simple text file","With helper text","Text file with edits allowed","Text file with restrictions","Simple file of any format","Custom file preview","Custom file upload"],
|
|
560
|
+
section: "components",
|
|
561
|
+
subsection: "file-upload",
|
|
562
|
+
source: "react",
|
|
563
|
+
tabName: null,
|
|
564
|
+
Component: () => import(/* webpackChunkName: "components/file-upload/simple-file-upload/react/index" */ './components/file-upload/simple-file-upload/react')
|
|
565
|
+
},
|
|
566
|
+
'/components/expandable-section/react': {
|
|
567
|
+
id: "Expandable section",
|
|
568
|
+
title: "Expandable section",
|
|
569
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Uncontrolled"},{"text":"Uncontrolled with dynamic toggle text"},{"text":"Uncontrolled with dynamic toggle content (function)"},{"text":"Detached"},{"text":"Disclosure variation"},{"text":"Indented expandable content"},{"text":"With custom toggle content"},{"text":"With heading semantics"},{"text":"Truncate expansion"}]],
|
|
570
|
+
examples: ["Basic","Uncontrolled","Uncontrolled with dynamic toggle text","Uncontrolled with dynamic toggle content (function)","Detached","Disclosure variation","Indented expandable content","With custom toggle content","With heading semantics","Truncate expansion"],
|
|
571
|
+
section: "components",
|
|
572
|
+
subsection: "",
|
|
573
|
+
source: "react",
|
|
574
|
+
tabName: null,
|
|
575
|
+
Component: () => import(/* webpackChunkName: "components/expandable-section/react/index" */ './components/expandable-section/react')
|
|
576
|
+
},
|
|
577
|
+
'/components/empty-state/react': {
|
|
578
|
+
id: "Empty state",
|
|
579
|
+
title: "Empty state",
|
|
580
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Extra small"},{"text":"Small"},{"text":"Large"},{"text":"Extra large"},{"text":"With status"},{"text":"Spinner"},{"text":"No match found"}]],
|
|
581
|
+
examples: ["Basic","Extra small","Small","Large","Extra large","With status","Spinner","No match found"],
|
|
582
|
+
section: "components",
|
|
583
|
+
subsection: "",
|
|
584
|
+
source: "react",
|
|
585
|
+
tabName: null,
|
|
586
|
+
Component: () => import(/* webpackChunkName: "components/empty-state/react/index" */ './components/empty-state/react')
|
|
587
|
+
},
|
|
588
|
+
'/components/dual-list-selector/react': {
|
|
589
|
+
id: "Dual list selector",
|
|
590
|
+
title: "Dual list selector",
|
|
591
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with tooltips"},{"text":"Basic with search"},{"text":"Using more complex options with actions"},{"text":"With tree"},{"text":"Draggable"},{"text":"Draggable with multiple drop zones"}]],
|
|
592
|
+
examples: ["Basic","Basic with tooltips","Basic with search","Using more complex options with actions","With tree","Draggable","Draggable with multiple drop zones"],
|
|
593
|
+
section: "components",
|
|
594
|
+
subsection: "",
|
|
595
|
+
source: "react",
|
|
596
|
+
tabName: null,
|
|
597
|
+
Component: () => import(/* webpackChunkName: "components/dual-list-selector/react/index" */ './components/dual-list-selector/react')
|
|
598
|
+
},
|
|
599
|
+
'/components/menus/dropdown/react': {
|
|
600
|
+
id: "Dropdown",
|
|
601
|
+
title: "Dropdown",
|
|
602
|
+
toc: [{"text":"Examples"},[{"text":"Basic dropdowns"},{"text":"With kebab toggle"},{"text":"With groups of items"},{"text":"With item descriptions"},{"text":"Split toggle with checkbox"}]],
|
|
603
|
+
examples: ["Basic dropdowns","With kebab toggle","With groups of items","With item descriptions","Split toggle with checkbox"],
|
|
604
|
+
section: "components",
|
|
605
|
+
subsection: "menus",
|
|
606
|
+
source: "react",
|
|
607
|
+
tabName: null,
|
|
608
|
+
Component: () => import(/* webpackChunkName: "components/menus/dropdown/react/index" */ './components/menus/dropdown/react')
|
|
609
|
+
},
|
|
610
|
+
'/components/drawer/react': {
|
|
611
|
+
id: "Drawer",
|
|
612
|
+
title: "Drawer",
|
|
613
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Panel at end"},{"text":"Panel at start"},{"text":"Panel on bottom"},{"text":"Basic inline"},{"text":"Inline panel at end"},{"text":"Inline panel at start"},{"text":"Stacked content body elements"},{"text":"Modified content padding"},{"text":"Modified panel padding"},{"text":"Additional section above drawer content"},{"text":"Static drawer"},{"text":"Breakpoint"},{"text":"Resizable at end"},{"text":"Resizable at start"},{"text":"Resizable on bottom"},{"text":"Resizable on inline"},{"text":"Panel with secondary background"},{"text":"With focus trap"},{"text":"Pill"},{"text":"Pill inline"}]],
|
|
614
|
+
examples: ["Basic","Panel at end","Panel at start","Panel on bottom","Basic inline","Inline panel at end","Inline panel at start","Stacked content body elements","Modified content padding","Modified panel padding","Additional section above drawer content","Static drawer","Breakpoint","Resizable at end","Resizable at start","Resizable on bottom","Resizable on inline","Panel with secondary background","With focus trap","Pill","Pill inline"],
|
|
615
|
+
section: "components",
|
|
616
|
+
subsection: "",
|
|
617
|
+
source: "react",
|
|
618
|
+
tabName: null,
|
|
619
|
+
Component: () => import(/* webpackChunkName: "components/drawer/react/index" */ './components/drawer/react')
|
|
620
|
+
},
|
|
621
|
+
'/components/divider/react': {
|
|
622
|
+
id: "Divider",
|
|
623
|
+
title: "Divider",
|
|
624
|
+
toc: [{"text":"Examples"},[{"text":"Using hr"},{"text":"Using li"},{"text":"Using div"},{"text":"Inset medium"},{"text":"Inset at various breakpoints"},{"text":"Vertical in flex layout"},{"text":"Vertical in flex layout, inset small"},{"text":"Vertical in flex layout, inset at various breakpoints"},{"text":"Switch orientation at various breakpoints"}]],
|
|
625
|
+
examples: ["Using hr","Using li","Using div","Inset medium","Inset at various breakpoints","Vertical in flex layout","Vertical in flex layout, inset small","Vertical in flex layout, inset at various breakpoints","Switch orientation at various breakpoints"],
|
|
626
|
+
section: "components",
|
|
627
|
+
subsection: "",
|
|
628
|
+
source: "react",
|
|
629
|
+
tabName: null,
|
|
630
|
+
Component: () => import(/* webpackChunkName: "components/divider/react/index" */ './components/divider/react')
|
|
631
|
+
},
|
|
632
|
+
'/components/description-list/react': {
|
|
633
|
+
id: "Description list",
|
|
634
|
+
title: "Description list",
|
|
635
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Term help text"},{"text":"Default 2 col"},{"text":"Default 3 col on lg"},{"text":"Horizontal"},{"text":"Horizontal using custom term width modifier"},{"text":"Horizontal 2 col"},{"text":"Horizontal 3 col on lg"},{"text":"Compact"},{"text":"Compact horizontal"},{"text":"Fluid horizontal"},{"text":"Column fill"},{"text":"Large display size"}],{"text":"Responsive column definitions"},[{"text":"Default responsive columns"},{"text":"Horizontal responsive columns"},{"text":"Responsive horizontal, vertical group layout"}],{"text":"Auto-column-width"},[{"text":"Default auto column width"},{"text":"Horizontal auto column width"}],{"text":"Inline grid"},[{"text":"Default inline grid"}],{"text":"Card variants"},[{"text":"Description list with card"},{"text":"Description list with large display size and card"},{"text":"Display size with card, three column on large breakpoint"},{"text":"Display size with card, horizontal, modified term width"}],{"text":"Auto fit"},[{"text":"Auto-fit basic"},{"text":"Auto-fit, min width modified grid template columns"},{"text":"Auto-fit, min width modified, responsive grid template columns"}],{"text":"With icons"},[{"text":"Icons on terms"}]],
|
|
636
|
+
examples: ["Basic","Term help text","Default 2 col","Default 3 col on lg","Horizontal","Horizontal using custom term width modifier","Horizontal 2 col","Horizontal 3 col on lg","Compact","Compact horizontal","Fluid horizontal","Column fill","Large display size","Default responsive columns","Horizontal responsive columns","Responsive horizontal, vertical group layout","Default auto column width","Horizontal auto column width","Default inline grid","Description list with card","Description list with large display size and card","Display size with card, three column on large breakpoint","Display size with card, horizontal, modified term width","Auto-fit basic","Auto-fit, min width modified grid template columns","Auto-fit, min width modified, responsive grid template columns","Icons on terms"],
|
|
637
|
+
section: "components",
|
|
638
|
+
subsection: "",
|
|
639
|
+
source: "react",
|
|
640
|
+
tabName: null,
|
|
641
|
+
Component: () => import(/* webpackChunkName: "components/description-list/react/index" */ './components/description-list/react')
|
|
642
|
+
},
|
|
643
|
+
'/components/date-and-time/date-picker/react': {
|
|
644
|
+
id: "Date picker",
|
|
645
|
+
title: "Date picker",
|
|
646
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Required"},{"text":"American format"},{"text":"Helper text"},{"text":"Min and max date"},{"text":"French"},{"text":"Controlled"},{"text":"Controlled required"},{"text":"Controlling the date picker calendar state"}]],
|
|
647
|
+
examples: ["Basic","Required","American format","Helper text","Min and max date","French","Controlled","Controlled required","Controlling the date picker calendar state"],
|
|
648
|
+
section: "components",
|
|
649
|
+
subsection: "date-and-time",
|
|
650
|
+
source: "react",
|
|
651
|
+
tabName: null,
|
|
652
|
+
Component: () => import(/* webpackChunkName: "components/date-and-time/date-picker/react/index" */ './components/date-and-time/date-picker/react')
|
|
653
|
+
},
|
|
654
|
+
'/components/data-list/react': {
|
|
655
|
+
id: "Data list",
|
|
656
|
+
title: "Data list",
|
|
657
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Compact"},{"text":"Plain"},{"text":"Checkboxes, actions and additional cells"},{"text":"Actions: single and multiple"},{"text":"Expandable"},{"text":"Mixed expandable"},{"text":"Width modifiers"},{"text":"Clickable rows"},{"text":"Controlling text"},{"text":"Draggable"},{"text":"Draggable with multiple drop zones"},{"text":"Small grid breakpoint"}]],
|
|
658
|
+
examples: ["Basic","Compact","Plain","Checkboxes, actions and additional cells","Actions: single and multiple","Expandable","Mixed expandable","Width modifiers","Clickable rows","Controlling text","Draggable","Draggable with multiple drop zones","Small grid breakpoint"],
|
|
659
|
+
section: "components",
|
|
660
|
+
subsection: "",
|
|
661
|
+
source: "react",
|
|
662
|
+
tabName: null,
|
|
663
|
+
Component: () => import(/* webpackChunkName: "components/data-list/react/index" */ './components/data-list/react')
|
|
664
|
+
},
|
|
665
|
+
'/components/content/react': {
|
|
666
|
+
id: "Content",
|
|
667
|
+
title: "Content",
|
|
668
|
+
toc: [{"text":"Examples"},[{"text":"Content as a wrapper"},{"text":"Headings"},{"text":"Body"},{"text":"Unordered list"},{"text":"Ordered list"},{"text":"Plain list"},{"text":"Description list"},{"text":"Link and visited link"},{"text":"Editorial content"}]],
|
|
669
|
+
examples: ["Content as a wrapper","Headings","Body","Unordered list","Ordered list","Plain list","Description list","Link and visited link","Editorial content"],
|
|
670
|
+
section: "components",
|
|
671
|
+
subsection: "",
|
|
672
|
+
source: "react",
|
|
673
|
+
tabName: null,
|
|
674
|
+
Component: () => import(/* webpackChunkName: "components/content/react/index" */ './components/content/react')
|
|
675
|
+
},
|
|
676
|
+
'/components/compass/react': {
|
|
677
|
+
id: "Compass",
|
|
678
|
+
title: "Compass",
|
|
679
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With alternate footer"},{"text":"With docked nav"}],{"text":"Composable structure"},[{"text":"CompassMainHeader structure"}]],
|
|
680
|
+
examples: ["Basic","With alternate footer","With docked nav"],
|
|
681
|
+
section: "components",
|
|
682
|
+
subsection: "",
|
|
683
|
+
source: "react",
|
|
684
|
+
tabName: null,
|
|
685
|
+
beta: true,
|
|
686
|
+
Component: () => import(/* webpackChunkName: "components/compass/react/index" */ './components/compass/react')
|
|
687
|
+
},
|
|
688
|
+
'/components/code-block/react': {
|
|
689
|
+
id: "Code block",
|
|
690
|
+
title: "Code block",
|
|
691
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Expandable"}]],
|
|
692
|
+
examples: ["Basic","Expandable"],
|
|
693
|
+
section: "components",
|
|
694
|
+
subsection: "",
|
|
695
|
+
source: "react",
|
|
696
|
+
tabName: null,
|
|
697
|
+
Component: () => import(/* webpackChunkName: "components/code-block/react/index" */ './components/code-block/react')
|
|
698
|
+
},
|
|
699
|
+
'/components/clipboard-copy/react': {
|
|
700
|
+
id: "Clipboard copy",
|
|
701
|
+
title: "Clipboard copy",
|
|
702
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Read Only"},{"text":"Expanded"},{"text":"Read only expanded"},{"text":"Read only expanded by default"},{"text":"Expanded with array"},{"text":"JSON object (wrap code with pre)"},{"text":"Inline compact"},{"text":"Inline compact code"},{"text":"Inline compact with additional action"},{"text":"Inline compact in sentence"},{"text":"Inline compact with truncation"}]],
|
|
703
|
+
examples: ["Basic","Read Only","Expanded","Read only expanded","Read only expanded by default","Expanded with array","JSON object (wrap code with pre)","Inline compact","Inline compact code","Inline compact with additional action","Inline compact in sentence","Inline compact with truncation"],
|
|
704
|
+
section: "components",
|
|
705
|
+
subsection: "",
|
|
706
|
+
source: "react",
|
|
707
|
+
tabName: null,
|
|
708
|
+
Component: () => import(/* webpackChunkName: "components/clipboard-copy/react/index" */ './components/clipboard-copy/react')
|
|
709
|
+
},
|
|
710
|
+
'/components/forms/checkbox/react': {
|
|
711
|
+
id: "Checkbox",
|
|
712
|
+
title: "Checkbox",
|
|
713
|
+
toc: [{"text":"Examples"},[{"text":"Controlled"},{"text":"Uncontrolled"},{"text":"Reversed"},{"text":"Label wraps"},{"text":"Disabled"},{"text":"Checkbox with description"},{"text":"Checkbox with body"},{"text":"Checkbox with description and body"},{"text":"Standalone input"},{"text":"Required input"}]],
|
|
714
|
+
examples: ["Controlled","Uncontrolled","Reversed","Label wraps","Disabled","Checkbox with description","Checkbox with body","Checkbox with description and body","Standalone input","Required input"],
|
|
715
|
+
section: "components",
|
|
716
|
+
subsection: "forms",
|
|
717
|
+
source: "react",
|
|
718
|
+
tabName: null,
|
|
719
|
+
Component: () => import(/* webpackChunkName: "components/forms/checkbox/react/index" */ './components/forms/checkbox/react')
|
|
720
|
+
},
|
|
721
|
+
'/components/card/react': {
|
|
722
|
+
id: "Card",
|
|
723
|
+
title: "Card",
|
|
724
|
+
toc: [{"text":"Examples"},[{"text":"Basic cards"},{"text":"Card with subtitle"},{"text":"Card with subtitle and Actions"},{"text":"Secondary cards"},{"text":"Modifiers"},{"text":"Header images and actions"},{"text":"Title inline with images and actions"},{"text":"Card header without title"},{"text":"Card with header that wraps"},{"text":"With HTML heading element"},{"text":"With multiple body sections"},{"text":"With a primary body section that fills"},{"text":"Selectable"},{"text":"Single selectable"},{"text":"Actionable"},{"text":"Actionable and selectable"},{"text":"Expandable cards"},{"text":"Expandable with icon"},{"text":"Card with dividers"}],{"text":"Cards as tiles"},[{"text":"Single selectable tiles"},{"text":"Multi selectable tiles"}]],
|
|
725
|
+
examples: ["Basic cards","Card with subtitle","Card with subtitle and Actions","Secondary cards","Modifiers","Header images and actions","Title inline with images and actions","Card header without title","Card with header that wraps","With HTML heading element","With multiple body sections","With a primary body section that fills","Selectable","Single selectable","Actionable","Actionable and selectable","Expandable cards","Expandable with icon","Card with dividers","Single selectable tiles","Multi selectable tiles"],
|
|
726
|
+
section: "components",
|
|
727
|
+
subsection: "",
|
|
728
|
+
source: "react",
|
|
729
|
+
tabName: null,
|
|
730
|
+
Component: () => import(/* webpackChunkName: "components/card/react/index" */ './components/card/react')
|
|
731
|
+
},
|
|
732
|
+
'/components/date-and-time/calendar-month/react': {
|
|
733
|
+
id: "Calendar month",
|
|
734
|
+
title: "Calendar month",
|
|
735
|
+
toc: [{"text":"Examples"},[{"text":"Selectable date"},{"text":"Date range"}]],
|
|
736
|
+
examples: ["Selectable date","Date range"],
|
|
737
|
+
section: "components",
|
|
738
|
+
subsection: "date-and-time",
|
|
739
|
+
source: "react",
|
|
740
|
+
tabName: null,
|
|
741
|
+
Component: () => import(/* webpackChunkName: "components/date-and-time/calendar-month/react/index" */ './components/date-and-time/calendar-month/react')
|
|
742
|
+
},
|
|
743
|
+
'/components/button/react': {
|
|
744
|
+
id: "Button",
|
|
745
|
+
title: "Button",
|
|
746
|
+
toc: [{"text":"Examples"},[{"text":"Variant examples"},{"text":"Disabled buttons"},{"text":"Small buttons"},{"text":"Call to action (CTA) buttons"},{"text":"Block level buttons"},{"text":"Progress indicators"},{"text":"Links as buttons"},{"text":"Inline link as span"},{"text":"Custom component"},{"text":"Aria-disabled examples"},{"text":"Button with count"},{"text":"Plain with no padding"},{"text":"Stateful"},{"text":"Circle buttons"}],{"text":"Animated examples"},[{"text":"Favorite"},{"text":"Settings"},{"text":"Hamburger"}],{"text":"Using router links"}],
|
|
747
|
+
examples: ["Variant examples","Disabled buttons","Small buttons","Call to action (CTA) buttons","Block level buttons","Progress indicators","Links as buttons","Inline link as span","Custom component","Aria-disabled examples","Button with count","Plain with no padding","Stateful","Circle buttons","Favorite","Settings","Hamburger"],
|
|
748
|
+
section: "components",
|
|
749
|
+
subsection: "",
|
|
750
|
+
source: "react",
|
|
751
|
+
tabName: null,
|
|
752
|
+
Component: () => import(/* webpackChunkName: "components/button/react/index" */ './components/button/react')
|
|
753
|
+
},
|
|
754
|
+
'/components/breadcrumb/react': {
|
|
755
|
+
id: "Breadcrumb",
|
|
756
|
+
title: "Breadcrumb",
|
|
757
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Without home link"},{"text":"With heading"},{"text":"With dropdown"}]],
|
|
758
|
+
examples: ["Basic","Without home link","With heading","With dropdown"],
|
|
759
|
+
section: "components",
|
|
760
|
+
subsection: "",
|
|
761
|
+
source: "react",
|
|
762
|
+
tabName: null,
|
|
763
|
+
Component: () => import(/* webpackChunkName: "components/breadcrumb/react/index" */ './components/breadcrumb/react')
|
|
764
|
+
},
|
|
765
|
+
'/components/brand/react': {
|
|
766
|
+
id: "Brand",
|
|
767
|
+
title: "Brand",
|
|
768
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Responsive"}]],
|
|
769
|
+
examples: ["Basic","Responsive"],
|
|
770
|
+
section: "components",
|
|
771
|
+
subsection: "",
|
|
772
|
+
source: "react",
|
|
773
|
+
tabName: null,
|
|
774
|
+
Component: () => import(/* webpackChunkName: "components/brand/react/index" */ './components/brand/react')
|
|
775
|
+
},
|
|
776
|
+
'/components/banner/react': {
|
|
777
|
+
id: "Banner",
|
|
778
|
+
title: "Banner",
|
|
779
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Status"},{"text":"Pill"}]],
|
|
780
|
+
examples: ["Basic","Status","Pill"],
|
|
781
|
+
section: "components",
|
|
782
|
+
subsection: "",
|
|
783
|
+
source: "react",
|
|
784
|
+
tabName: null,
|
|
785
|
+
Component: () => import(/* webpackChunkName: "components/banner/react/index" */ './components/banner/react')
|
|
786
|
+
},
|
|
787
|
+
'/components/badge/react': {
|
|
788
|
+
id: "Badge",
|
|
789
|
+
title: "Badge",
|
|
790
|
+
toc: [{"text":"Examples"},[{"text":"Read"},{"text":"Unread"},{"text":"Disabled"}]],
|
|
791
|
+
examples: ["Read","Unread","Disabled"],
|
|
792
|
+
section: "components",
|
|
793
|
+
subsection: "",
|
|
794
|
+
source: "react",
|
|
795
|
+
tabName: null,
|
|
796
|
+
Component: () => import(/* webpackChunkName: "components/badge/react/index" */ './components/badge/react')
|
|
797
|
+
},
|
|
798
|
+
'/components/background-image/react': {
|
|
799
|
+
id: "Background image",
|
|
800
|
+
title: "Background image",
|
|
801
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
802
|
+
fullscreenExamples: ["Basic"],
|
|
803
|
+
section: "components",
|
|
804
|
+
subsection: "",
|
|
805
|
+
source: "react",
|
|
806
|
+
tabName: null,
|
|
807
|
+
Component: () => import(/* webpackChunkName: "components/background-image/react/index" */ './components/background-image/react')
|
|
808
|
+
},
|
|
809
|
+
'/components/backdrop/react': {
|
|
810
|
+
id: "Backdrop",
|
|
811
|
+
title: "Backdrop",
|
|
812
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
813
|
+
fullscreenExamples: ["Basic"],
|
|
814
|
+
section: "components",
|
|
815
|
+
subsection: "",
|
|
816
|
+
source: "react",
|
|
817
|
+
tabName: null,
|
|
818
|
+
Component: () => import(/* webpackChunkName: "components/backdrop/react/index" */ './components/backdrop/react')
|
|
819
|
+
},
|
|
820
|
+
'/components/back-to-top/react': {
|
|
821
|
+
id: "Back to top",
|
|
822
|
+
title: "Back to top",
|
|
823
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
824
|
+
examples: ["Basic"],
|
|
825
|
+
section: "components",
|
|
826
|
+
subsection: "",
|
|
827
|
+
source: "react",
|
|
828
|
+
tabName: null,
|
|
829
|
+
Component: () => import(/* webpackChunkName: "components/back-to-top/react/index" */ './components/back-to-top/react')
|
|
830
|
+
},
|
|
831
|
+
'/components/avatar/react': {
|
|
832
|
+
id: "Avatar",
|
|
833
|
+
title: "Avatar",
|
|
834
|
+
toc: [{"text":"Examples"},[{"text":"Basic usage"},{"text":"Color modifiers"},{"text":"With initials"},{"text":"Bordered"},{"text":"Size variations"}]],
|
|
835
|
+
examples: ["Basic usage","Color modifiers","With initials","Bordered","Size variations"],
|
|
836
|
+
section: "components",
|
|
837
|
+
subsection: "",
|
|
838
|
+
source: "react",
|
|
839
|
+
tabName: null,
|
|
840
|
+
Component: () => import(/* webpackChunkName: "components/avatar/react/index" */ './components/avatar/react')
|
|
841
|
+
},
|
|
842
|
+
'/components/alert/react': {
|
|
843
|
+
id: "Alert",
|
|
844
|
+
title: "Alert",
|
|
845
|
+
toc: [{"text":"Alert examples"},[{"text":"Alert variants"},{"text":"Alert variations"},{"text":"Alert timeout"},{"text":"Expandable alerts"},{"text":"Truncated alerts"},{"text":"Custom icons"},{"text":"Inline alerts variants"},{"text":"Inline alert variations"},{"text":"Plain inline alert variants"},{"text":"Plain inline alert variations"},{"text":"Static live region alerts"},{"text":"Dynamic live region alerts"},{"text":"Asynchronous live region alerts"}],{"text":"Alert group examples"},[{"text":"Alert group variants"},{"text":"Static inline alert group"},{"text":"Toast alert group"},{"text":"Toast alert group with overflow capture"},{"text":"Asynchronous alert groups"},{"text":"Dynamic alert groups"},{"text":"Dynamic alert group with overflow message"},{"text":"Multiple dynamic alert groups"}]],
|
|
846
|
+
examples: ["Alert variants","Alert variations","Alert timeout","Expandable alerts","Truncated alerts","Custom icons","Inline alerts variants","Inline alert variations","Plain inline alert variants","Plain inline alert variations","Static live region alerts","Dynamic live region alerts","Asynchronous live region alerts","Static inline alert group","Toast alert group","Toast alert group with overflow capture","Asynchronous alert groups","Dynamic alert groups","Dynamic alert group with overflow message","Multiple dynamic alert groups"],
|
|
847
|
+
section: "components",
|
|
848
|
+
subsection: "",
|
|
849
|
+
source: "react",
|
|
850
|
+
tabName: null,
|
|
851
|
+
Component: () => import(/* webpackChunkName: "components/alert/react/index" */ './components/alert/react')
|
|
852
|
+
},
|
|
853
|
+
'/components/action-list/react': {
|
|
854
|
+
id: "Action list",
|
|
855
|
+
title: "Action list",
|
|
856
|
+
toc: [{"text":"Examples"},[{"text":"Action list single group"},{"text":"Action list with icons"},{"text":"Action list multiple groups"},{"text":"Action list with cancel button"},{"text":"Vertical action list"}]],
|
|
857
|
+
examples: ["Action list single group","Action list with icons","Action list multiple groups","Action list with cancel button","Vertical action list"],
|
|
858
|
+
section: "components",
|
|
859
|
+
subsection: "",
|
|
860
|
+
source: "react",
|
|
861
|
+
tabName: null,
|
|
862
|
+
Component: () => import(/* webpackChunkName: "components/action-list/react/index" */ './components/action-list/react')
|
|
863
|
+
},
|
|
864
|
+
'/components/accordion/react': {
|
|
865
|
+
id: "Accordion",
|
|
866
|
+
title: "Accordion",
|
|
867
|
+
toc: [{"text":"Examples"},[{"text":"Definition list"},{"text":"Single expand behavior"},{"text":"Fixed with multiple expand behavior"},{"text":"Bordered"},{"text":"Toggle icon at start"}]],
|
|
868
|
+
examples: ["Definition list","Single expand behavior","Fixed with multiple expand behavior","Bordered","Toggle icon at start"],
|
|
869
|
+
section: "components",
|
|
870
|
+
subsection: "",
|
|
871
|
+
source: "react",
|
|
872
|
+
tabName: null,
|
|
873
|
+
Component: () => import(/* webpackChunkName: "components/accordion/react/index" */ './components/accordion/react')
|
|
874
|
+
},
|
|
875
|
+
'/components/about-modal/react': {
|
|
876
|
+
id: "About modal",
|
|
877
|
+
title: "About modal",
|
|
878
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Without product name"},{"text":"Complex user positioned content"}]],
|
|
879
|
+
examples: ["Basic","Without product name","Complex user positioned content"],
|
|
880
|
+
section: "components",
|
|
881
|
+
subsection: "",
|
|
882
|
+
source: "react",
|
|
883
|
+
tabName: null,
|
|
884
|
+
Component: () => import(/* webpackChunkName: "components/about-modal/react/index" */ './components/about-modal/react')
|
|
885
|
+
},
|
|
886
|
+
'/foundations-and-styles/layouts/stack/react': {
|
|
887
|
+
id: "Stack",
|
|
888
|
+
title: "Stack",
|
|
889
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With gutter"}]],
|
|
890
|
+
examples: ["Basic","With gutter"],
|
|
891
|
+
section: "foundations-and-styles",
|
|
892
|
+
subsection: "layouts",
|
|
893
|
+
source: "react",
|
|
894
|
+
tabName: null,
|
|
895
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/stack/react/index" */ './foundations-and-styles/layouts/stack/react')
|
|
896
|
+
},
|
|
897
|
+
'/foundations-and-styles/layouts/split/react': {
|
|
898
|
+
id: "Split",
|
|
899
|
+
title: "Split",
|
|
900
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With gutter"},{"text":"Wrappable"}]],
|
|
901
|
+
examples: ["Basic","With gutter","Wrappable"],
|
|
902
|
+
section: "foundations-and-styles",
|
|
903
|
+
subsection: "layouts",
|
|
904
|
+
source: "react",
|
|
905
|
+
tabName: null,
|
|
906
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/split/react/index" */ './foundations-and-styles/layouts/split/react')
|
|
907
|
+
},
|
|
908
|
+
'/foundations-and-styles/layouts/level/react': {
|
|
909
|
+
id: "Level",
|
|
910
|
+
title: "Level",
|
|
911
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With gutters"}]],
|
|
912
|
+
examples: ["Basic","With gutters"],
|
|
913
|
+
section: "foundations-and-styles",
|
|
914
|
+
subsection: "layouts",
|
|
915
|
+
source: "react",
|
|
916
|
+
tabName: null,
|
|
917
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/level/react/index" */ './foundations-and-styles/layouts/level/react')
|
|
918
|
+
},
|
|
919
|
+
'/foundations-and-styles/layouts/grid/react': {
|
|
920
|
+
id: "Grid",
|
|
921
|
+
title: "Grid",
|
|
922
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With gutters"},{"text":"With overrides"}],{"text":"Ordering"},[{"text":"Standard ordering"},{"text":"Responsive ordering"},{"text":"Grouped ordering"},{"text":"Alternative components"}]],
|
|
923
|
+
examples: ["Basic","With gutters","With overrides","Standard ordering","Responsive ordering","Grouped ordering","Alternative components"],
|
|
924
|
+
section: "foundations-and-styles",
|
|
925
|
+
subsection: "layouts",
|
|
926
|
+
source: "react",
|
|
927
|
+
tabName: null,
|
|
928
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/grid/react/index" */ './foundations-and-styles/layouts/grid/react')
|
|
929
|
+
},
|
|
930
|
+
'/foundations-and-styles/layouts/gallery/react': {
|
|
931
|
+
id: "Gallery",
|
|
932
|
+
title: "Gallery",
|
|
933
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With gutters"},{"text":"Adjusting min widths"},{"text":"Adjusting max widths"},{"text":"Adjusting min and max widths"},{"text":"Alternative components"}]],
|
|
934
|
+
examples: ["Basic","With gutters","Adjusting min widths","Adjusting max widths","Adjusting min and max widths","Alternative components"],
|
|
935
|
+
section: "foundations-and-styles",
|
|
936
|
+
subsection: "layouts",
|
|
937
|
+
source: "react",
|
|
938
|
+
tabName: null,
|
|
939
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/gallery/react/index" */ './foundations-and-styles/layouts/gallery/react')
|
|
940
|
+
},
|
|
941
|
+
'/foundations-and-styles/layouts/flex/react': {
|
|
942
|
+
id: "Flex",
|
|
943
|
+
title: "Flex",
|
|
944
|
+
toc: [{"text":"Flex basics"},[{"text":"Basic"},{"text":"Nesting"},{"text":"Nested with items"},{"text":"Spacing"},{"text":"Flex spacing"},{"text":"Individually spaced"},{"text":"Spacing xl"},{"text":"Spacing none"},{"text":"Flex gap spacing"},{"text":"Row gap"},{"text":"Column gap"},{"text":"Gap"},{"text":"Flex layout modifiers"},{"text":"Default layout"},{"text":"Inline"},{"text":"Using canGrow"},{"text":"Adjusting width"},{"text":"Specifying column widths"}],{"text":"Column layout modifiers"},[{"text":"Column layout"},{"text":"Stacking elements"},{"text":"Nesting elements in columns"}],{"text":"Responsive layout modifiers"},[{"text":"Switching between direction column and row"},{"text":"Controlling width of text"}],{"text":"Flex alignment"},[{"text":"Aligning right"},{"text":"Align right on single item"},{"text":"Align right on multiple groups"},{"text":"Align adjacent content"},{"text":"Align self flex end"},{"text":"Align self center"},{"text":"Align self baseline"},{"text":"Align self stretch"}],{"text":"Flex justification"},[{"text":"Justify content flex end"},{"text":"Justify content space between"},{"text":"Justify content flex start"}],{"text":"Flex item order"},[{"text":"First last ordering"},{"text":"Responsive first last ordering"},{"text":"Ordering"},{"text":"Responsive ordering"},{"text":"Alternative components"}]],
|
|
945
|
+
examples: ["Basic","Nesting","Nested with items","Individually spaced","Spacing xl","Spacing none","Row gap","Column gap","Gap","Default layout","Inline","Using canGrow","Adjusting width","Specifying column widths","Column layout","Stacking elements","Nesting elements in columns","Switching between direction column and row","Controlling width of text","Aligning right","Align right on single item","Align right on multiple groups","Align adjacent content","Align self flex end","Align self center","Align self baseline","Align self stretch","Justify content flex end","Justify content space between","Justify content flex start","First last ordering","Responsive first last ordering","Ordering","Responsive ordering","Alternative components"],
|
|
946
|
+
section: "foundations-and-styles",
|
|
947
|
+
subsection: "layouts",
|
|
948
|
+
source: "react",
|
|
949
|
+
tabName: null,
|
|
950
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/flex/react/index" */ './foundations-and-styles/layouts/flex/react')
|
|
951
|
+
},
|
|
952
|
+
'/foundations-and-styles/layouts/bullseye/react': {
|
|
953
|
+
id: "Bullseye",
|
|
954
|
+
title: "Bullseye",
|
|
955
|
+
toc: [{"text":"Examples"},[{"text":"Basic"}]],
|
|
956
|
+
examples: ["Basic"],
|
|
957
|
+
section: "foundations-and-styles",
|
|
958
|
+
subsection: "layouts",
|
|
959
|
+
source: "react",
|
|
960
|
+
tabName: null,
|
|
961
|
+
Component: () => import(/* webpackChunkName: "foundations-and-styles/layouts/bullseye/react/index" */ './foundations-and-styles/layouts/bullseye/react')
|
|
962
|
+
},
|
|
963
|
+
'/components/wizard/react-deprecated': {
|
|
964
|
+
id: "Wizard",
|
|
965
|
+
title: "Wizard",
|
|
966
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with disabled steps"},{"text":"Anchors for nav items"},{"text":"Incrementally enabled steps"},{"text":"Expandable steps"},{"text":"Finished"},{"text":"Enabled on form validation"},{"text":"Validate on button press"},{"text":"Progressive steps"},{"text":"Get current step"},{"text":"Wizard in modal"},{"text":"Wizard with drawer"}]],
|
|
967
|
+
examples: ["Basic","Basic with disabled steps","Anchors for nav items","Incrementally enabled steps","Expandable steps","Finished","Enabled on form validation","Validate on button press","Progressive steps","Get current step","Wizard in modal","Wizard with drawer"],
|
|
968
|
+
section: "components",
|
|
969
|
+
subsection: "",
|
|
970
|
+
source: "react-deprecated",
|
|
971
|
+
tabName: null,
|
|
972
|
+
deprecated: true,
|
|
973
|
+
Component: () => import(/* webpackChunkName: "components/wizard/react-deprecated/index" */ './components/wizard/react-deprecated')
|
|
974
|
+
},
|
|
975
|
+
'/components/tile/react-deprecated': {
|
|
976
|
+
id: "Tile",
|
|
977
|
+
title: "Tile",
|
|
978
|
+
toc: [{"text":"Examples"},[{"text":"Basic tile"},{"text":"With subtext"},{"text":"With icon"},{"text":"With stacked icon"},{"text":"With large icons"},{"text":"With long subtext"}],{"text":"Demos"},[{"text":"Tiles with single selection"},{"text":"Tiles with multiple selection"}]],
|
|
979
|
+
examples: ["Basic tile","With subtext","With icon","With stacked icon","With large icons","With long subtext","Tiles with single selection","Tiles with multiple selection"],
|
|
980
|
+
section: "components",
|
|
981
|
+
subsection: "",
|
|
982
|
+
source: "react-deprecated",
|
|
983
|
+
tabName: null,
|
|
984
|
+
deprecated: true,
|
|
985
|
+
Component: () => import(/* webpackChunkName: "components/tile/react-deprecated/index" */ './components/tile/react-deprecated')
|
|
986
|
+
},
|
|
987
|
+
'/components/modal/react-deprecated': {
|
|
988
|
+
id: "Modal",
|
|
989
|
+
title: "Modal",
|
|
990
|
+
toc: [{"text":"Examples"},[{"text":"Basic modals"},{"text":"Scrollable modals"},{"text":"With a static description"},{"text":"Top aligned"},{"text":"Small modal"},{"text":"Medium modal"},{"text":"Large modal"},{"text":"Custom width"},{"text":"Custom header and footer"},{"text":"No header or footer"},{"text":"Title icon"},{"text":"Custom title icon"},{"text":"With wizard"},{"text":"With dropdown"},{"text":"With help"},{"text":"With form"},{"text":"Custom focus"}]],
|
|
991
|
+
examples: ["Basic modals","Scrollable modals","With a static description","Top aligned","Small modal","Medium modal","Large modal","Custom width","Custom header and footer","No header or footer","Title icon","Custom title icon","With wizard","With dropdown","With help","With form","Custom focus"],
|
|
992
|
+
section: "components",
|
|
993
|
+
subsection: "",
|
|
994
|
+
source: "react-deprecated",
|
|
995
|
+
tabName: null,
|
|
996
|
+
deprecated: true,
|
|
997
|
+
Component: () => import(/* webpackChunkName: "components/modal/react-deprecated/index" */ './components/modal/react-deprecated')
|
|
998
|
+
},
|
|
999
|
+
'/components/dual-list-selector/react-deprecated': {
|
|
1000
|
+
id: "Dual list selector",
|
|
1001
|
+
title: "Dual list selector",
|
|
1002
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with tooltips"},{"text":"Basic with search"},{"text":"Using more complex options with actions"},{"text":"With tree"}],{"text":"Composable structure"},[{"text":"Composable dual list selector"},{"text":"Composable with drag and drop"},{"text":"Composable with tree"}]],
|
|
1003
|
+
examples: ["Basic","Basic with tooltips","Basic with search","Using more complex options with actions","With tree","Composable dual list selector","Composable with drag and drop","Composable with tree"],
|
|
1004
|
+
section: "components",
|
|
1005
|
+
subsection: "",
|
|
1006
|
+
source: "react-deprecated",
|
|
1007
|
+
tabName: null,
|
|
1008
|
+
deprecated: true,
|
|
1009
|
+
Component: () => import(/* webpackChunkName: "components/dual-list-selector/react-deprecated/index" */ './components/dual-list-selector/react-deprecated')
|
|
1010
|
+
},
|
|
1011
|
+
'/components/drag-and-drop/react-deprecated': {
|
|
1012
|
+
id: "Drag and drop",
|
|
1013
|
+
title: "Drag and drop",
|
|
1014
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Multiple lists"}]],
|
|
1015
|
+
examples: ["Basic","Multiple lists"],
|
|
1016
|
+
section: "components",
|
|
1017
|
+
subsection: "",
|
|
1018
|
+
source: "react-deprecated",
|
|
1019
|
+
tabName: null,
|
|
1020
|
+
deprecated: true,
|
|
1021
|
+
Component: () => import(/* webpackChunkName: "components/drag-and-drop/react-deprecated/index" */ './components/drag-and-drop/react-deprecated')
|
|
1022
|
+
},
|
|
1023
|
+
'/components/chip/react-deprecated': {
|
|
1024
|
+
id: "Chip",
|
|
1025
|
+
title: "Chip",
|
|
1026
|
+
toc: [{"text":"Examples"},[{"text":"Chip variants"},{"text":"Chip groups"},{"text":"Chip groups with categories"},{"text":"Chip groups with removable categories"}]],
|
|
1027
|
+
examples: ["Chip variants","Chip groups","Chip groups with categories","Chip groups with removable categories"],
|
|
1028
|
+
section: "components",
|
|
1029
|
+
subsection: "",
|
|
1030
|
+
source: "react-deprecated",
|
|
1031
|
+
tabName: null,
|
|
1032
|
+
deprecated: true,
|
|
1033
|
+
Component: () => import(/* webpackChunkName: "components/chip/react-deprecated/index" */ './components/chip/react-deprecated')
|
|
1034
|
+
},
|
|
1035
|
+
'/components/toolbar/react-demos': {
|
|
1036
|
+
id: "Toolbar",
|
|
1037
|
+
title: "Toolbar",
|
|
1038
|
+
toc: [{"text":"Demos"},[{"text":"Console log viewer toolbar demo"}]],
|
|
1039
|
+
fullscreenExamples: ["Console log viewer toolbar demo"],
|
|
1040
|
+
section: "components",
|
|
1041
|
+
subsection: "",
|
|
1042
|
+
source: "react-demos",
|
|
1043
|
+
tabName: null,
|
|
1044
|
+
Component: () => import(/* webpackChunkName: "components/toolbar/react-demos/index" */ './components/toolbar/react-demos')
|
|
1045
|
+
},
|
|
1046
|
+
'/components/text-input-group/react-demos': {
|
|
1047
|
+
id: "Text input group",
|
|
1048
|
+
title: "Text input group",
|
|
1049
|
+
toc: [{"text":"Demos"},[{"text":"Attribute-value filtering"},{"text":"Auto-complete search with typeahead"}]],
|
|
1050
|
+
examples: ["Attribute-value filtering","Auto-complete search with typeahead"],
|
|
1051
|
+
section: "components",
|
|
1052
|
+
subsection: "",
|
|
1053
|
+
source: "react-demos",
|
|
1054
|
+
tabName: null,
|
|
1055
|
+
Component: () => import(/* webpackChunkName: "components/text-input-group/react-demos/index" */ './components/text-input-group/react-demos')
|
|
1056
|
+
},
|
|
1057
|
+
'/components/tabs/react-demos': {
|
|
1058
|
+
id: "Tabs",
|
|
1059
|
+
title: "Tabs",
|
|
1060
|
+
toc: [{"text":"Demos"},[{"text":"Open tabs"},{"text":"Open tabs with secondary tabs"},{"text":"Nested tabs"},{"text":"Nested, unindented tabs"},{"text":"Tables and tabs"},{"text":"Modal tabs"}]],
|
|
1061
|
+
fullscreenExamples: ["Open tabs","Open tabs with secondary tabs","Nested tabs","Nested, unindented tabs","Tables and tabs","Modal tabs"],
|
|
1062
|
+
section: "components",
|
|
1063
|
+
subsection: "",
|
|
1064
|
+
source: "react-demos",
|
|
1065
|
+
tabName: null,
|
|
1066
|
+
Component: () => import(/* webpackChunkName: "components/tabs/react-demos/index" */ './components/tabs/react-demos')
|
|
1067
|
+
},
|
|
1068
|
+
'/components/skeleton/react-demos': {
|
|
1069
|
+
id: "Skeleton",
|
|
1070
|
+
title: "Skeleton",
|
|
1071
|
+
toc: [{"text":"Demos"},[{"text":"Skeleton card"}]],
|
|
1072
|
+
fullscreenExamples: ["Skeleton card"],
|
|
1073
|
+
section: "components",
|
|
1074
|
+
subsection: "",
|
|
1075
|
+
source: "react-demos",
|
|
1076
|
+
tabName: null,
|
|
1077
|
+
Component: () => import(/* webpackChunkName: "components/skeleton/react-demos/index" */ './components/skeleton/react-demos')
|
|
1078
|
+
},
|
|
1079
|
+
'/components/progress-stepper/react-demos': {
|
|
1080
|
+
id: "Progress stepper",
|
|
1081
|
+
title: "Progress stepper",
|
|
1082
|
+
toc: [{"text":"Demos"},[{"text":"Basic"}]],
|
|
1083
|
+
examples: ["Basic"],
|
|
1084
|
+
section: "components",
|
|
1085
|
+
subsection: "",
|
|
1086
|
+
source: "react-demos",
|
|
1087
|
+
tabName: null,
|
|
1088
|
+
Component: () => import(/* webpackChunkName: "components/progress-stepper/react-demos/index" */ './components/progress-stepper/react-demos')
|
|
1089
|
+
},
|
|
1090
|
+
'/components/progress/react-demos': {
|
|
1091
|
+
id: "Progress",
|
|
1092
|
+
title: "Progress",
|
|
1093
|
+
toc: [{"text":"Demos"},[{"text":"Basic"},{"text":"With only increasing progress"}]],
|
|
1094
|
+
examples: ["Basic","With only increasing progress"],
|
|
1095
|
+
section: "components",
|
|
1096
|
+
subsection: "",
|
|
1097
|
+
source: "react-demos",
|
|
1098
|
+
tabName: null,
|
|
1099
|
+
Component: () => import(/* webpackChunkName: "components/progress/react-demos/index" */ './components/progress/react-demos')
|
|
1100
|
+
},
|
|
1101
|
+
'/patterns/primary-detail/react-demos': {
|
|
1102
|
+
id: "Primary-detail",
|
|
1103
|
+
title: "Primary-detail",
|
|
1104
|
+
toc: [{"text":"Demos"},[{"text":"Primary-detail full page"},{"text":"Primary-detail content padding"},{"text":"Primary-detail card view"},{"text":"Primary-detail simple list in card"},{"text":"Primary-detail data list in card"},{"text":"Primary-detail inline modifier"}]],
|
|
1105
|
+
fullscreenExamples: ["Primary-detail full page","Primary-detail content padding","Primary-detail card view","Primary-detail simple list in card","Primary-detail data list in card","Primary-detail inline modifier"],
|
|
1106
|
+
section: "patterns",
|
|
1107
|
+
subsection: "",
|
|
1108
|
+
source: "react-demos",
|
|
1109
|
+
tabName: null,
|
|
1110
|
+
Component: () => import(/* webpackChunkName: "patterns/primary-detail/react-demos/index" */ './patterns/primary-detail/react-demos')
|
|
1111
|
+
},
|
|
1112
|
+
'/patterns/password-strength/react-demos': {
|
|
1113
|
+
id: "Password strength",
|
|
1114
|
+
title: "Password strength",
|
|
1115
|
+
toc: [{"text":"Demos"},[{"text":"Basic validation"}]],
|
|
1116
|
+
examples: ["Basic validation"],
|
|
1117
|
+
section: "patterns",
|
|
1118
|
+
subsection: "",
|
|
1119
|
+
source: "react-demos",
|
|
1120
|
+
tabName: null,
|
|
1121
|
+
Component: () => import(/* webpackChunkName: "patterns/password-strength/react-demos/index" */ './patterns/password-strength/react-demos')
|
|
1122
|
+
},
|
|
1123
|
+
'/components/page/react-demos': {
|
|
1124
|
+
id: "Page",
|
|
1125
|
+
title: "Page",
|
|
1126
|
+
toc: [{"text":"Layouts"},[{"text":"Sticky section group"},{"text":"Sticky section group (alternate syntax)"},{"text":"Sticky section breadcrumb (with breakpoints)"},{"text":"Context selector/perspective switcher in sidebar"}]],
|
|
1127
|
+
fullscreenExamples: ["Sticky section group","Sticky section group (alternate syntax)","Sticky section breadcrumb (with breakpoints)","Context selector/perspective switcher in sidebar"],
|
|
1128
|
+
section: "components",
|
|
1129
|
+
subsection: "",
|
|
1130
|
+
source: "react-demos",
|
|
1131
|
+
tabName: null,
|
|
1132
|
+
Component: () => import(/* webpackChunkName: "components/page/react-demos/index" */ './components/page/react-demos')
|
|
1133
|
+
},
|
|
1134
|
+
'/components/navigation/react-demos': {
|
|
1135
|
+
id: "Navigation",
|
|
1136
|
+
title: "Navigation",
|
|
1137
|
+
toc: [{"text":"Demos"},[{"text":"Default nav"},{"text":"Grouped nav"},{"text":"Expandable nav"},{"text":"Horizontal nav"},{"text":"Horizontal subnav"},{"text":"Horizontal nav with horizontal subnav"},{"text":"Manual nav"},{"text":"Flyout nav"},{"text":"Drilldown nav"},{"text":"Docked nav"}]],
|
|
1138
|
+
fullscreenExamples: ["Default nav","Grouped nav","Expandable nav","Horizontal nav","Horizontal subnav","Horizontal nav with horizontal subnav","Manual nav","Flyout nav","Drilldown nav","Docked nav"],
|
|
1139
|
+
section: "components",
|
|
1140
|
+
subsection: "",
|
|
1141
|
+
source: "react-demos",
|
|
1142
|
+
tabName: null,
|
|
1143
|
+
Component: () => import(/* webpackChunkName: "components/navigation/react-demos/index" */ './components/navigation/react-demos')
|
|
1144
|
+
},
|
|
1145
|
+
'/components/file-upload/multiple-file-upload/react-demos': {
|
|
1146
|
+
id: "Multiple file upload",
|
|
1147
|
+
title: "Multiple file upload",
|
|
1148
|
+
toc: [{"text":"Demos"},[{"text":"Rejected file handling"}]],
|
|
1149
|
+
examples: ["Rejected file handling"],
|
|
1150
|
+
section: "components",
|
|
1151
|
+
subsection: "file-upload",
|
|
1152
|
+
source: "react-demos",
|
|
1153
|
+
tabName: null,
|
|
1154
|
+
Component: () => import(/* webpackChunkName: "components/file-upload/multiple-file-upload/react-demos/index" */ './components/file-upload/multiple-file-upload/react-demos')
|
|
1155
|
+
},
|
|
1156
|
+
'/components/masthead/react-demos': {
|
|
1157
|
+
id: "Masthead",
|
|
1158
|
+
title: "Masthead",
|
|
1159
|
+
toc: [{"text":"Demos"},[{"text":"Utilities and user dropdown menu"},{"text":"Horizontal nav"}]],
|
|
1160
|
+
fullscreenExamples: ["Utilities and user dropdown menu","Horizontal nav"],
|
|
1161
|
+
section: "components",
|
|
1162
|
+
subsection: "",
|
|
1163
|
+
source: "react-demos",
|
|
1164
|
+
tabName: null,
|
|
1165
|
+
Component: () => import(/* webpackChunkName: "components/masthead/react-demos/index" */ './components/masthead/react-demos')
|
|
1166
|
+
},
|
|
1167
|
+
'/components/label/react-demos': {
|
|
1168
|
+
id: "Label",
|
|
1169
|
+
title: "Label",
|
|
1170
|
+
toc: [{"text":"Demos"},[{"text":"Editable labels with add dropdown"},{"text":"Editable labels with add modal"}]],
|
|
1171
|
+
examples: ["Editable labels with add dropdown","Editable labels with add modal"],
|
|
1172
|
+
section: "components",
|
|
1173
|
+
subsection: "",
|
|
1174
|
+
source: "react-demos",
|
|
1175
|
+
tabName: null,
|
|
1176
|
+
Component: () => import(/* webpackChunkName: "components/label/react-demos/index" */ './components/label/react-demos')
|
|
1177
|
+
},
|
|
1178
|
+
'/components/jump-links/react-demos': {
|
|
1179
|
+
id: "Jump links",
|
|
1180
|
+
title: "Jump links",
|
|
1181
|
+
toc: [{"text":"Demos"},[{"text":"Scrollspy with subsections"},{"text":"With drawer"}]],
|
|
1182
|
+
fullscreenExamples: ["Scrollspy with subsections","With drawer"],
|
|
1183
|
+
section: "components",
|
|
1184
|
+
subsection: "",
|
|
1185
|
+
source: "react-demos",
|
|
1186
|
+
tabName: null,
|
|
1187
|
+
Component: () => import(/* webpackChunkName: "components/jump-links/react-demos/index" */ './components/jump-links/react-demos')
|
|
1188
|
+
},
|
|
1189
|
+
'/components/helper-text/react-demos': {
|
|
1190
|
+
id: "Helper text",
|
|
1191
|
+
title: "Helper text",
|
|
1192
|
+
toc: [{"text":"Demos"},[{"text":"Static helper text"},{"text":"Dynamic helper text"},{"text":"Static text and dynamic status"}]],
|
|
1193
|
+
examples: ["Static helper text","Dynamic helper text","Static text and dynamic status"],
|
|
1194
|
+
section: "components",
|
|
1195
|
+
subsection: "",
|
|
1196
|
+
source: "react-demos",
|
|
1197
|
+
tabName: null,
|
|
1198
|
+
Component: () => import(/* webpackChunkName: "components/helper-text/react-demos/index" */ './components/helper-text/react-demos')
|
|
1199
|
+
},
|
|
1200
|
+
'/components/date-and-time/date-and-time-picker/react-demos': {
|
|
1201
|
+
id: "Date and time picker",
|
|
1202
|
+
title: "Date and time picker",
|
|
1203
|
+
toc: [{"text":"Demos"},[{"text":"Date and time picker"},{"text":"Date and time range picker"}]],
|
|
1204
|
+
examples: ["Date and time picker","Date and time range picker"],
|
|
1205
|
+
section: "components",
|
|
1206
|
+
subsection: "date-and-time",
|
|
1207
|
+
source: "react-demos",
|
|
1208
|
+
tabName: null,
|
|
1209
|
+
Component: () => import(/* webpackChunkName: "components/date-and-time/date-and-time-picker/react-demos/index" */ './components/date-and-time/date-and-time-picker/react-demos')
|
|
1210
|
+
},
|
|
1211
|
+
'/components/data-list/react-demos': {
|
|
1212
|
+
id: "Data list",
|
|
1213
|
+
title: "Data list",
|
|
1214
|
+
toc: [{"text":"Demos"},[{"text":"Basic"},{"text":"Expandable control in toolbar"},{"text":"Actionable"},{"text":"Static bottom pagination"}]],
|
|
1215
|
+
fullscreenExamples: ["Basic","Expandable control in toolbar","Actionable","Static bottom pagination"],
|
|
1216
|
+
section: "components",
|
|
1217
|
+
subsection: "",
|
|
1218
|
+
source: "react-demos",
|
|
1219
|
+
tabName: null,
|
|
1220
|
+
Component: () => import(/* webpackChunkName: "components/data-list/react-demos/index" */ './components/data-list/react-demos')
|
|
1221
|
+
},
|
|
1222
|
+
'/components/card/react-demos': {
|
|
1223
|
+
id: "Card",
|
|
1224
|
+
title: "Card",
|
|
1225
|
+
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":"Nested cards"},{"text":"With accordion"},{"text":"Trend card 1"},{"text":"Trend card 2"},{"text":"Log view"},{"text":"Events view"}]],
|
|
1226
|
+
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","Nested cards","With accordion","Trend card 1","Trend card 2","Log view","Events view"],
|
|
1227
|
+
section: "components",
|
|
1228
|
+
subsection: "",
|
|
1229
|
+
source: "react-demos",
|
|
1230
|
+
tabName: null,
|
|
1231
|
+
Component: () => import(/* webpackChunkName: "components/card/react-demos/index" */ './components/card/react-demos')
|
|
1232
|
+
},
|
|
1233
|
+
'/components/banner/react-demos': {
|
|
1234
|
+
id: "Banner",
|
|
1235
|
+
title: "Banner",
|
|
1236
|
+
toc: [{"text":"Demos"},[{"text":"Basic sticky banner"},{"text":"Top and bottom banner"}]],
|
|
1237
|
+
fullscreenExamples: ["Basic sticky banner","Top and bottom banner"],
|
|
1238
|
+
section: "components",
|
|
1239
|
+
subsection: "",
|
|
1240
|
+
source: "react-demos",
|
|
1241
|
+
tabName: null,
|
|
1242
|
+
Component: () => import(/* webpackChunkName: "components/banner/react-demos/index" */ './components/banner/react-demos')
|
|
1243
|
+
},
|
|
1244
|
+
'/components/back-to-top/react-demos': {
|
|
1245
|
+
id: "Back to top",
|
|
1246
|
+
title: "Back to top",
|
|
1247
|
+
toc: [{"text":"Demos"},[{"text":"Using name selector"}]],
|
|
1248
|
+
fullscreenExamples: ["Using name selector"],
|
|
1249
|
+
section: "components",
|
|
1250
|
+
subsection: "",
|
|
1251
|
+
source: "react-demos",
|
|
1252
|
+
tabName: null,
|
|
1253
|
+
Component: () => import(/* webpackChunkName: "components/back-to-top/react-demos/index" */ './components/back-to-top/react-demos')
|
|
1254
|
+
},
|
|
1255
|
+
'/components/alert/react-demos': {
|
|
1256
|
+
id: "Alert",
|
|
1257
|
+
title: "Alert",
|
|
1258
|
+
toc: [{"text":"Demos"},[{"text":"Alert group toast with notification drawer"}]],
|
|
1259
|
+
fullscreenExamples: ["Alert group toast with notification drawer"],
|
|
1260
|
+
section: "components",
|
|
1261
|
+
subsection: "",
|
|
1262
|
+
source: "react-demos",
|
|
1263
|
+
tabName: null,
|
|
1264
|
+
Component: () => import(/* webpackChunkName: "components/alert/react-demos/index" */ './components/alert/react-demos')
|
|
1265
|
+
},
|
|
1266
|
+
'/components/wizard/react-demos': {
|
|
1267
|
+
id: "Wizard",
|
|
1268
|
+
title: "Wizard",
|
|
1269
|
+
toc: [{"text":"Demos"},[{"text":"In modal"},{"text":"In modal, with drawer"},{"text":"In modal, with drawer and informational step"},{"text":"In page"},{"text":"In page, with drawer"},{"text":"In page, with drawer and informational step"}]],
|
|
1270
|
+
fullscreenExamples: ["In modal","In modal, with drawer","In modal, with drawer and informational step","In page","In page, with drawer","In page, with drawer and informational step"],
|
|
1271
|
+
section: "components",
|
|
1272
|
+
subsection: "",
|
|
1273
|
+
source: "react-demos",
|
|
1274
|
+
tabName: null,
|
|
1275
|
+
Component: () => import(/* webpackChunkName: "components/wizard/react-demos/index" */ './components/wizard/react-demos')
|
|
1276
|
+
},
|
|
1277
|
+
'/components/search-input/react-demos': {
|
|
1278
|
+
id: "Search input",
|
|
1279
|
+
title: "Search input",
|
|
1280
|
+
toc: [{"text":"Demos"},[{"text":"Search with autocomplete"},{"text":"Composable advanced search"}]],
|
|
1281
|
+
examples: ["Search with autocomplete","Composable advanced search"],
|
|
1282
|
+
section: "components",
|
|
1283
|
+
subsection: "",
|
|
1284
|
+
source: "react-demos",
|
|
1285
|
+
tabName: null,
|
|
1286
|
+
Component: () => import(/* webpackChunkName: "components/search-input/react-demos/index" */ './components/search-input/react-demos')
|
|
1287
|
+
},
|
|
1288
|
+
'/patterns/right-to-left/react-demos': {
|
|
1289
|
+
id: "Right-to-left",
|
|
1290
|
+
title: "Right-to-left",
|
|
1291
|
+
toc: [{"text":"Demos"},[{"text":"Paginated table"}]],
|
|
1292
|
+
fullscreenExamples: ["Paginated table"],
|
|
1293
|
+
section: "patterns",
|
|
1294
|
+
subsection: "",
|
|
1295
|
+
source: "react-demos",
|
|
1296
|
+
tabName: null,
|
|
1297
|
+
Component: () => import(/* webpackChunkName: "patterns/right-to-left/react-demos/index" */ './patterns/right-to-left/react-demos')
|
|
1298
|
+
},
|
|
1299
|
+
'/patterns/password-generator/react-demos': {
|
|
1300
|
+
id: "Password generator",
|
|
1301
|
+
title: "Password generator",
|
|
1302
|
+
toc: [{"text":"Demos"},[{"text":"Provide a generated password"}]],
|
|
1303
|
+
examples: ["Provide a generated password"],
|
|
1304
|
+
section: "patterns",
|
|
1305
|
+
subsection: "",
|
|
1306
|
+
source: "react-demos",
|
|
1307
|
+
tabName: null,
|
|
1308
|
+
Component: () => import(/* webpackChunkName: "patterns/password-generator/react-demos/index" */ './patterns/password-generator/react-demos')
|
|
1309
|
+
},
|
|
1310
|
+
'/components/notification-drawer/react-demos': {
|
|
1311
|
+
id: "Notification drawer",
|
|
1312
|
+
title: "Notification drawer",
|
|
1313
|
+
toc: [{"text":"Demos"},[{"text":"Basic"},{"text":"Grouped"}]],
|
|
1314
|
+
fullscreenExamples: ["Basic","Grouped"],
|
|
1315
|
+
section: "components",
|
|
1316
|
+
subsection: "",
|
|
1317
|
+
source: "react-demos",
|
|
1318
|
+
tabName: null,
|
|
1319
|
+
Component: () => import(/* webpackChunkName: "components/notification-drawer/react-demos/index" */ './components/notification-drawer/react-demos')
|
|
1320
|
+
},
|
|
1321
|
+
'/patterns/filters/react-demos': {
|
|
1322
|
+
id: "Filters",
|
|
1323
|
+
title: "Filters",
|
|
1324
|
+
toc: [{"text":"Filtering demos"},[{"text":"Search input"},{"text":"Single select"},{"text":"Checkbox select"},{"text":"Attribute search"},{"text":"Mixed select filter group"},{"text":"Single select filter group"},{"text":"Faceted filter"}]],
|
|
1325
|
+
examples: ["Search input","Single select","Checkbox select","Attribute search","Mixed select filter group","Single select filter group","Faceted filter"],
|
|
1326
|
+
section: "patterns",
|
|
1327
|
+
subsection: "",
|
|
1328
|
+
source: "react-demos",
|
|
1329
|
+
tabName: null,
|
|
1330
|
+
Component: () => import(/* webpackChunkName: "patterns/filters/react-demos/index" */ './patterns/filters/react-demos')
|
|
1331
|
+
},
|
|
1332
|
+
'/components/expandable-section/react-demos': {
|
|
1333
|
+
id: "Expandable section",
|
|
1334
|
+
title: "Expandable section",
|
|
1335
|
+
toc: [{"text":"Demos"},[{"text":"Expandable text with character truncation"}]],
|
|
1336
|
+
examples: ["Expandable text with character truncation"],
|
|
1337
|
+
section: "components",
|
|
1338
|
+
subsection: "",
|
|
1339
|
+
source: "react-demos",
|
|
1340
|
+
tabName: null,
|
|
1341
|
+
Component: () => import(/* webpackChunkName: "components/expandable-section/react-demos/index" */ './components/expandable-section/react-demos')
|
|
1342
|
+
},
|
|
1343
|
+
'/components/description-list/react-demos': {
|
|
1344
|
+
id: "Description list",
|
|
1345
|
+
title: "Description list",
|
|
1346
|
+
toc: [{"text":"Demos"},[{"text":"Basic"},{"text":"In drawer"}]],
|
|
1347
|
+
fullscreenExamples: ["Basic","In drawer"],
|
|
1348
|
+
section: "components",
|
|
1349
|
+
subsection: "",
|
|
1350
|
+
source: "react-demos",
|
|
1351
|
+
tabName: null,
|
|
1352
|
+
Component: () => import(/* webpackChunkName: "components/description-list/react-demos/index" */ './components/description-list/react-demos')
|
|
1353
|
+
},
|
|
1354
|
+
'/components/date-and-time/date-picker/react-demos': {
|
|
1355
|
+
id: "Date picker",
|
|
1356
|
+
title: "Date picker",
|
|
1357
|
+
toc: [{"text":"Demos"},[{"text":"Date range picker"},{"text":"Date and time pickers in modal"}]],
|
|
1358
|
+
examples: ["Date range picker","Date and time pickers in modal"],
|
|
1359
|
+
section: "components",
|
|
1360
|
+
subsection: "date-and-time",
|
|
1361
|
+
source: "react-demos",
|
|
1362
|
+
tabName: null,
|
|
1363
|
+
Component: () => import(/* webpackChunkName: "components/date-and-time/date-picker/react-demos/index" */ './components/date-and-time/date-picker/react-demos')
|
|
1364
|
+
},
|
|
1365
|
+
'/components/menus/options-menu/react-demos': {
|
|
1366
|
+
id: "Options menu",
|
|
1367
|
+
title: "Options menu",
|
|
1368
|
+
toc: [[{"text":"Options menu"}]],
|
|
1369
|
+
examples: ["Options menu"],
|
|
1370
|
+
section: "components",
|
|
1371
|
+
subsection: "menus",
|
|
1372
|
+
source: "react-demos",
|
|
1373
|
+
tabName: null,
|
|
1374
|
+
Component: () => import(/* webpackChunkName: "components/menus/options-menu/react-demos/index" */ './components/menus/options-menu/react-demos')
|
|
1375
|
+
},
|
|
1376
|
+
'/components/menus/custom-menus/react-demos': {
|
|
1377
|
+
id: "Custom menus",
|
|
1378
|
+
title: "Custom menus",
|
|
1379
|
+
toc: [{"text":"Examples"},[{"text":"With actions"},{"text":"With favorites"},{"text":"With drilldown"},{"text":"With inline search filter"},{"text":"Tree view menu"},{"text":"Flyout menu"},{"text":"Application launcher menu"},{"text":"Context selector menu"},{"text":"Date select menu"}]],
|
|
1380
|
+
examples: ["With actions","With favorites","With drilldown","With inline search filter","Tree view menu","Flyout menu","Application launcher menu","Context selector menu","Date select menu"],
|
|
1381
|
+
section: "components",
|
|
1382
|
+
subsection: "menus",
|
|
1383
|
+
source: "react-demos",
|
|
1384
|
+
tabName: null,
|
|
1385
|
+
Component: () => import(/* webpackChunkName: "components/menus/custom-menus/react-demos/index" */ './components/menus/custom-menus/react-demos')
|
|
1386
|
+
},
|
|
1387
|
+
'/components/menus/context-selector/react-demos': {
|
|
1388
|
+
id: "Context selector",
|
|
1389
|
+
title: "Context selector",
|
|
1390
|
+
toc: [[{"text":"Context selector menu"}]],
|
|
1391
|
+
examples: ["Context selector menu"],
|
|
1392
|
+
section: "components",
|
|
1393
|
+
subsection: "menus",
|
|
1394
|
+
source: "react-demos",
|
|
1395
|
+
tabName: null,
|
|
1396
|
+
Component: () => import(/* webpackChunkName: "components/menus/context-selector/react-demos/index" */ './components/menus/context-selector/react-demos')
|
|
1397
|
+
},
|
|
1398
|
+
'/components/menus/application-launcher/react-demos': {
|
|
1399
|
+
id: "Application launcher",
|
|
1400
|
+
title: "Application launcher",
|
|
1401
|
+
toc: [[{"text":"Application launcher menu"}]],
|
|
1402
|
+
examples: ["Application launcher menu"],
|
|
1403
|
+
section: "components",
|
|
1404
|
+
subsection: "menus",
|
|
1405
|
+
source: "react-demos",
|
|
1406
|
+
tabName: null,
|
|
1407
|
+
Component: () => import(/* webpackChunkName: "components/menus/application-launcher/react-demos/index" */ './components/menus/application-launcher/react-demos')
|
|
1408
|
+
},
|
|
1409
|
+
'/components/compass/react-demos': {
|
|
1410
|
+
id: "Compass",
|
|
1411
|
+
title: "Compass",
|
|
1412
|
+
toc: [{"text":"Demos"},[{"text":"Compass layout"},{"text":"Docked nav demo"}]],
|
|
1413
|
+
fullscreenExamples: ["Compass layout","Docked nav demo"],
|
|
1414
|
+
section: "components",
|
|
1415
|
+
subsection: "",
|
|
1416
|
+
source: "react-demos",
|
|
1417
|
+
tabName: null,
|
|
1418
|
+
Component: () => import(/* webpackChunkName: "components/compass/react-demos/index" */ './components/compass/react-demos')
|
|
1419
|
+
},
|
|
1420
|
+
'/patterns/card-view/react-demos': {
|
|
1421
|
+
id: "Card view",
|
|
1422
|
+
title: "Card view",
|
|
1423
|
+
toc: [{"text":"Demos"},[{"text":"Card view"}]],
|
|
1424
|
+
fullscreenExamples: ["Card view"],
|
|
1425
|
+
section: "patterns",
|
|
1426
|
+
subsection: "",
|
|
1427
|
+
source: "react-demos",
|
|
1428
|
+
tabName: null,
|
|
1429
|
+
Component: () => import(/* webpackChunkName: "patterns/card-view/react-demos/index" */ './patterns/card-view/react-demos')
|
|
1430
|
+
},
|
|
1431
|
+
'/components/button/react-demos': {
|
|
1432
|
+
id: "Button",
|
|
1433
|
+
title: "Button",
|
|
1434
|
+
toc: [{"text":"Demos"},[{"text":"Progress button"}]],
|
|
1435
|
+
examples: ["Progress button"],
|
|
1436
|
+
section: "components",
|
|
1437
|
+
subsection: "",
|
|
1438
|
+
source: "react-demos",
|
|
1439
|
+
tabName: null,
|
|
1440
|
+
Component: () => import(/* webpackChunkName: "components/button/react-demos/index" */ './components/button/react-demos')
|
|
1441
|
+
},
|
|
1442
|
+
'/components/table/react': {
|
|
1443
|
+
id: "Table",
|
|
1444
|
+
title: "Table",
|
|
1445
|
+
toc: [{"text":"Table examples"},[{"text":"Basic"},{"text":"Plain"},{"text":"Custom row wrapper, header tooltips & popovers"},{"text":"Sortable & wrapping headers"},{"text":"Sortable - custom control"},{"text":"Selectable with checkbox"},{"text":"Selectable with indeterminate state"},{"text":"Selectable radio input"},{"text":"Row click handler, clickable rows"},{"text":"Editable rows"},{"text":"Actions"},{"text":"Actions Overflow"},{"text":"Expandable"},{"text":"Compound expandable"},{"text":"Cell width, breakpoint modifiers"},{"text":"Controlling text"},{"text":"Modifiers with table text"},{"text":"Empty state"},{"text":"Favoritable (implemented with sortable)"},{"text":"Tree table"},{"text":"Flat tree table with no inset"},{"text":"Draggable row table"},{"text":"Sticky table modifiers"},{"text":"Sticky column"},{"text":"Multiple left-aligned sticky columns"},{"text":"Multiple right-aligned sticky columns"},{"text":"Dynamic sticky header"},{"text":"Sticky columns and header"},{"text":"Nested column headers"},{"text":"Nested column headers and expandable rows"},{"text":"Expandable with nested table"},{"text":"Nested sticky header"},{"text":"Striped"},{"text":"Striped expandable"},{"text":"Striped multiple tobdy"},{"text":"Striped tr"}]],
|
|
1446
|
+
examples: ["Basic","Plain","Custom row wrapper, header tooltips & popovers","Sortable & wrapping headers","Sortable - custom control","Selectable with checkbox","Selectable with indeterminate state","Selectable radio input","Row click handler, clickable rows","Editable rows","Actions","Actions Overflow","Expandable","Compound expandable","Cell width, breakpoint modifiers","Controlling text","Modifiers with table text","Empty state","Favoritable (implemented with sortable)","Tree table","Flat tree table with no inset","Draggable row table","Sticky column","Multiple left-aligned sticky columns","Multiple right-aligned sticky columns","Dynamic sticky header","Sticky columns and header","Nested column headers","Nested column headers and expandable rows","Expandable with nested table","Nested sticky header","Striped","Striped expandable","Striped multiple tobdy","Striped tr"],
|
|
1447
|
+
section: "components",
|
|
1448
|
+
subsection: "",
|
|
1449
|
+
source: "react",
|
|
1450
|
+
tabName: null,
|
|
1451
|
+
Component: () => import(/* webpackChunkName: "components/table/react/index" */ './components/table/react')
|
|
1452
|
+
},
|
|
1453
|
+
'/components/table/react-deprecated': {
|
|
1454
|
+
id: "Table",
|
|
1455
|
+
title: "Table",
|
|
1456
|
+
toc: [{"text":"Table Columns"},{"text":"Table Rows"},{"text":"Table examples"},[{"text":"Basic"},{"text":"Custom row wrapper"},{"text":"Sortable & wrapping column headers"},{"text":"Sortable - custom control"},{"text":"Selectable with checkbox"},{"text":"Selectable radio input"},{"text":"Clickable rows, selectable rows, and header cell tooltips/popovers"},{"text":"Actions and first cell in body rows as th"},{"text":"Expandable"},{"text":"Compound expandable"},{"text":"With width and breakpoint visibility modifiers"},{"text":"Controlling text"},{"text":"Modifiers with table text"},{"text":"Empty state"},{"text":"Editable rows"},{"text":"Favoritable (implemented with sortable and selectable)"},{"text":"Tree table"},{"text":"Striped"},{"text":"Striped expandable"},{"text":"Striped custom tr"}]],
|
|
1457
|
+
examples: ["Basic","Custom row wrapper","Sortable & wrapping column headers","Sortable - custom control","Selectable with checkbox","Selectable radio input","Clickable rows, selectable rows, and header cell tooltips/popovers","Actions and first cell in body rows as th","Expandable","Compound expandable","With width and breakpoint visibility modifiers","Controlling text","Modifiers with table text","Empty state","Editable rows","Favoritable (implemented with sortable and selectable)","Tree table","Striped","Striped expandable","Striped custom tr"],
|
|
1458
|
+
section: "components",
|
|
1459
|
+
subsection: "",
|
|
1460
|
+
source: "react-deprecated",
|
|
1461
|
+
tabName: null,
|
|
1462
|
+
deprecated: true,
|
|
1463
|
+
Component: () => import(/* webpackChunkName: "components/table/react-deprecated/index" */ './components/table/react-deprecated')
|
|
1464
|
+
},
|
|
1465
|
+
'/components/table/react-demos': {
|
|
1466
|
+
id: "Table",
|
|
1467
|
+
title: "Table",
|
|
1468
|
+
toc: [{"text":"Demos"},[{"text":"Bulk select"},{"text":"Expand/collapse all"},{"text":"Compact"},{"text":"Compound expansion"},{"text":"Column management"},{"text":"Column management with draggable"},{"text":"Filterable"},{"text":"Sortable - responsive"},{"text":"Automatic pagination"},{"text":"Static bottom pagination on mobile"},{"text":"Sticky header"},{"text":"Sticky first column"},{"text":"Sticky columns and header with toolbar"}],{"text":"Empty states"},[{"text":"Empty"},{"text":"Loading"},{"text":"Error"}]],
|
|
1469
|
+
fullscreenExamples: ["Bulk select","Expand/collapse all","Compact","Compound expansion","Column management","Column management with draggable","Filterable","Sortable - responsive","Automatic pagination","Static bottom pagination on mobile","Sticky header","Sticky first column","Sticky columns and header with toolbar","Empty","Loading","Error"],
|
|
1470
|
+
section: "components",
|
|
1471
|
+
subsection: "",
|
|
1472
|
+
source: "react-demos",
|
|
1473
|
+
tabName: null,
|
|
1474
|
+
Component: () => import(/* webpackChunkName: "components/table/react-demos/index" */ './components/table/react-demos')
|
|
1475
|
+
},
|
|
1476
|
+
'/components/charts/sankey-chart/ECharts': {
|
|
1477
|
+
id: "Sankey chart",
|
|
1478
|
+
title: "Sankey chart",
|
|
1479
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Multi-color (unordered) with responsive container"},{"text":"Teal color with responsive container and toolbox"},{"text":"Custom theme"},{"text":"Skeleton"}]],
|
|
1480
|
+
examples: ["Basic","Multi-color (unordered) with responsive container","Teal color with responsive container and toolbox","Custom theme","Skeleton"],
|
|
1481
|
+
section: "components",
|
|
1482
|
+
subsection: "charts",
|
|
1483
|
+
source: "ECharts",
|
|
1484
|
+
tabName: null,
|
|
1485
|
+
beta: true,
|
|
1486
|
+
Component: () => import(/* webpackChunkName: "components/charts/sankey-chart/ECharts/index" */ './components/charts/sankey-chart/ECharts')
|
|
1487
|
+
},
|
|
1488
|
+
'/components/charts/line-chart/ECharts': {
|
|
1489
|
+
id: "Line chart",
|
|
1490
|
+
title: "Line chart",
|
|
1491
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Green with responsive container and bottom aligned legend"},{"text":"Custom theme"},{"text":"Skeleton"}]],
|
|
1492
|
+
examples: ["Basic with right aligned legend","Green with responsive container and bottom aligned legend","Custom theme","Skeleton"],
|
|
1493
|
+
section: "components",
|
|
1494
|
+
subsection: "charts",
|
|
1495
|
+
source: "ECharts",
|
|
1496
|
+
tabName: null,
|
|
1497
|
+
beta: true,
|
|
1498
|
+
Component: () => import(/* webpackChunkName: "components/charts/line-chart/ECharts/index" */ './components/charts/line-chart/ECharts')
|
|
1499
|
+
},
|
|
1500
|
+
'/components/charts/sparkline-chart/-Victory': {
|
|
1501
|
+
id: "Sparkline chart",
|
|
1502
|
+
title: "Sparkline chart",
|
|
1503
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Green"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1504
|
+
examples: ["Basic","Green"],
|
|
1505
|
+
section: "components",
|
|
1506
|
+
subsection: "charts",
|
|
1507
|
+
source: "-Victory",
|
|
1508
|
+
tabName: null,
|
|
1509
|
+
Component: () => import(/* webpackChunkName: "components/charts/sparkline-chart/-Victory/index" */ './components/charts/sparkline-chart/-Victory')
|
|
1510
|
+
},
|
|
1511
|
+
'/components/charts/skeletons/-Victory': {
|
|
1512
|
+
id: "Skeletons",
|
|
1513
|
+
title: "Skeletons",
|
|
1514
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Area chart"},{"text":"Bar chart"},{"text":"Box plot chart"},{"text":"Bullet chart"},{"text":"Donut chart"},{"text":"Donut utilization chart"},{"text":"Donut utilization threshold"},{"text":"Line chart"},{"text":"Pie chart"},{"text":"Scatter chart"},{"text":"Stack chart"},{"text":"Threshold chart"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1515
|
+
examples: ["Area chart","Bar chart","Box plot chart","Bullet chart","Donut chart","Donut utilization chart","Donut utilization threshold","Line chart","Pie chart","Scatter chart","Stack chart","Threshold chart"],
|
|
1516
|
+
section: "components",
|
|
1517
|
+
subsection: "charts",
|
|
1518
|
+
source: "-Victory",
|
|
1519
|
+
tabName: null,
|
|
1520
|
+
Component: () => import(/* webpackChunkName: "components/charts/skeletons/-Victory/index" */ './components/charts/skeletons/-Victory')
|
|
1521
|
+
},
|
|
1522
|
+
'/components/charts/resize-observer/-Victory': {
|
|
1523
|
+
id: "Resize observer",
|
|
1524
|
+
title: "Resize observer",
|
|
1525
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Responsive bullet chart with wrapping legend"},{"text":"Responsive threshold chart with wrapping legend"},{"text":"Responsive stack chart with reducible axis tick labels"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1526
|
+
examples: ["Responsive bullet chart with wrapping legend","Responsive threshold chart with wrapping legend","Responsive stack chart with reducible axis tick labels"],
|
|
1527
|
+
section: "components",
|
|
1528
|
+
subsection: "charts",
|
|
1529
|
+
source: "-Victory",
|
|
1530
|
+
tabName: null,
|
|
1531
|
+
Component: () => import(/* webpackChunkName: "components/charts/resize-observer/-Victory/index" */ './components/charts/resize-observer/-Victory')
|
|
1532
|
+
},
|
|
1533
|
+
'/components/charts/patterns/-Victory': {
|
|
1534
|
+
id: "Patterns",
|
|
1535
|
+
title: "Patterns",
|
|
1536
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic pie chart"},{"text":"Bar chart"},{"text":"Stack chart"},{"text":"Donut chart"},{"text":"Donut utilization chart"},{"text":"Donut utilization chart with thresholds"},{"text":"Interactive legend with pie chart"},{"text":"Interactive legend with area chart"},{"text":"Custom pattern visibility"},{"text":"Custom color scale"},{"text":"Custom pattern defs"},{"text":"All patterns"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1537
|
+
examples: ["Basic pie chart","Bar chart","Stack chart","Donut chart","Donut utilization chart","Donut utilization chart with thresholds","Interactive legend with pie chart","Interactive legend with area chart","Custom pattern visibility","Custom color scale","Custom pattern defs","All patterns"],
|
|
1538
|
+
section: "components",
|
|
1539
|
+
subsection: "charts",
|
|
1540
|
+
source: "-Victory",
|
|
1541
|
+
tabName: null,
|
|
1542
|
+
Component: () => import(/* webpackChunkName: "components/charts/patterns/-Victory/index" */ './components/charts/patterns/-Victory')
|
|
1543
|
+
},
|
|
1544
|
+
'/components/charts/tooltips/-Victory': {
|
|
1545
|
+
id: "Tooltips",
|
|
1546
|
+
title: "Tooltips",
|
|
1547
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Voronoi container"},{"text":"Combined cursor and voronoi containers"},{"text":"Embedded legend"},{"text":"Embedded HTML"},{"text":"Embedded legend with custom font size"},{"text":"Data label"},{"text":"Fixed tooltip"},{"text":"Legend"},{"text":"Left aligned"},{"text":"CSS overflow"},{"text":"Wrapped chart"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1548
|
+
examples: ["Voronoi container","Combined cursor and voronoi containers","Embedded legend","Embedded HTML","Embedded legend with custom font size","Data label","Fixed tooltip","Legend","Left aligned","CSS overflow","Wrapped chart"],
|
|
1549
|
+
section: "components",
|
|
1550
|
+
subsection: "charts",
|
|
1551
|
+
source: "-Victory",
|
|
1552
|
+
tabName: null,
|
|
1553
|
+
Component: () => import(/* webpackChunkName: "components/charts/tooltips/-Victory/index" */ './components/charts/tooltips/-Victory')
|
|
1554
|
+
},
|
|
1555
|
+
'/components/charts/threshold-chart/-Victory': {
|
|
1556
|
+
id: "Threshold chart",
|
|
1557
|
+
title: "Threshold chart",
|
|
1558
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Multi-color (unordered) with responsive container"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1559
|
+
examples: ["Multi-color (unordered) with responsive container"],
|
|
1560
|
+
section: "components",
|
|
1561
|
+
subsection: "charts",
|
|
1562
|
+
source: "-Victory",
|
|
1563
|
+
tabName: null,
|
|
1564
|
+
Component: () => import(/* webpackChunkName: "components/charts/threshold-chart/-Victory/index" */ './components/charts/threshold-chart/-Victory')
|
|
1565
|
+
},
|
|
1566
|
+
'/components/charts/colors-for-charts/-Victory': {
|
|
1567
|
+
id: "Colors for charts",
|
|
1568
|
+
title: "Colors for charts",
|
|
1569
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Green"},{"text":"Multi-color (ordered)"},{"text":"Multi color (unordered)"},{"text":"Custom color scale"},{"text":"Custom stroke color"},{"text":"Custom theme"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1570
|
+
examples: ["Green","Multi-color (ordered)","Multi color (unordered)","Custom color scale","Custom stroke color","Custom theme"],
|
|
1571
|
+
section: "components",
|
|
1572
|
+
subsection: "charts",
|
|
1573
|
+
source: "-Victory",
|
|
1574
|
+
tabName: null,
|
|
1575
|
+
Component: () => import(/* webpackChunkName: "components/charts/colors-for-charts/-Victory/index" */ './components/charts/colors-for-charts/-Victory')
|
|
1576
|
+
},
|
|
1577
|
+
'/components/charts/stack-chart/-Victory': {
|
|
1578
|
+
id: "Stack chart",
|
|
1579
|
+
title: "Stack chart",
|
|
1580
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Horizontal with bottom aligned legend"},{"text":"Multi-color (ordered) horizontal with bottom aligned legend"},{"text":"Monthly data with responsive container"},{"text":"Multi-color (unordered) responsive container"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1581
|
+
examples: ["Basic with right aligned legend","Horizontal with bottom aligned legend","Multi-color (ordered) horizontal with bottom aligned legend","Monthly data with responsive container","Multi-color (unordered) responsive container"],
|
|
1582
|
+
section: "components",
|
|
1583
|
+
subsection: "charts",
|
|
1584
|
+
source: "-Victory",
|
|
1585
|
+
tabName: null,
|
|
1586
|
+
Component: () => import(/* webpackChunkName: "components/charts/stack-chart/-Victory/index" */ './components/charts/stack-chart/-Victory')
|
|
1587
|
+
},
|
|
1588
|
+
'/components/charts/scatter-chart/-Victory': {
|
|
1589
|
+
id: "Scatter chart",
|
|
1590
|
+
title: "Scatter chart",
|
|
1591
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Line chart"},{"text":"Area chart"}],{"text":"Documentation"},[{"text":"Note"}]],
|
|
1592
|
+
examples: ["Basic","Line chart","Area chart"],
|
|
1593
|
+
section: "components",
|
|
1594
|
+
subsection: "charts",
|
|
1595
|
+
source: "-Victory",
|
|
1596
|
+
tabName: null,
|
|
1597
|
+
Component: () => import(/* webpackChunkName: "components/charts/scatter-chart/-Victory/index" */ './components/charts/scatter-chart/-Victory')
|
|
1598
|
+
},
|
|
1599
|
+
'/components/charts/pie-chart/-Victory': {
|
|
1600
|
+
id: "Pie chart",
|
|
1601
|
+
title: "Pie chart",
|
|
1602
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Multi-color (ordered) with bottom aligned legend"},{"text":"Custom color scale"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1603
|
+
examples: ["Basic with right aligned legend","Multi-color (ordered) with bottom aligned legend","Custom color scale"],
|
|
1604
|
+
section: "components",
|
|
1605
|
+
subsection: "charts",
|
|
1606
|
+
source: "-Victory",
|
|
1607
|
+
tabName: null,
|
|
1608
|
+
Component: () => import(/* webpackChunkName: "components/charts/pie-chart/-Victory/index" */ './components/charts/pie-chart/-Victory')
|
|
1609
|
+
},
|
|
1610
|
+
'/components/charts/line-chart/-Victory': {
|
|
1611
|
+
id: "Line chart",
|
|
1612
|
+
title: "Line chart",
|
|
1613
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Green with bottom aligned legend"},{"text":"Multi-color (unordered) with responsive container"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1614
|
+
examples: ["Basic with right aligned legend","Green with bottom aligned legend","Multi-color (unordered) with responsive container"],
|
|
1615
|
+
section: "components",
|
|
1616
|
+
subsection: "charts",
|
|
1617
|
+
source: "-Victory",
|
|
1618
|
+
tabName: null,
|
|
1619
|
+
Component: () => import(/* webpackChunkName: "components/charts/line-chart/-Victory/index" */ './components/charts/line-chart/-Victory')
|
|
1620
|
+
},
|
|
1621
|
+
'/components/charts/legends/-Victory': {
|
|
1622
|
+
id: "Legends",
|
|
1623
|
+
title: "Legends",
|
|
1624
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Bottom aligned legend"},{"text":"Responsive bottom-left aligned legend"},{"text":"Standalone legend"},{"text":"Interactive legend"},{"text":"Interactive legend with pie chart"},{"text":"Legend tooltips"},{"text":"Legend links"},{"text":"Legend layout"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1625
|
+
examples: ["Basic with right aligned legend","Bottom aligned legend","Responsive bottom-left aligned legend","Standalone legend","Interactive legend","Interactive legend with pie chart","Legend tooltips","Legend links","Legend layout"],
|
|
1626
|
+
section: "components",
|
|
1627
|
+
subsection: "charts",
|
|
1628
|
+
source: "-Victory",
|
|
1629
|
+
tabName: null,
|
|
1630
|
+
Component: () => import(/* webpackChunkName: "components/charts/legends/-Victory/index" */ './components/charts/legends/-Victory')
|
|
1631
|
+
},
|
|
1632
|
+
'/components/charts/donut-utilization-chart/-Victory': {
|
|
1633
|
+
id: "Donut utilization chart",
|
|
1634
|
+
title: "Donut utilization chart",
|
|
1635
|
+
toc: [{"text":"Introduction"},{"text":"Donut utilization examples"},[{"text":"Basic"},{"text":"Right aligned legend"},{"text":"Inverted with right aligned legend"},{"text":"Right aligned vertical legend"},{"text":"Bottom aligned legend"},{"text":"Small"},{"text":"Small with right aligned legend"},{"text":"Small with bottom aligned subtitle"},{"text":"Small with right aligned subtitle"}],{"text":"Donut utilization threshold examples"},[{"text":"Static thresholds"},{"text":"Static thresholds with right aligned legend"},{"text":"Inverted static thresholds with right aligned legend"},{"text":"Static thresholds with custom legend"},{"text":"Static thresholds with bottom aligned legend"},{"text":"Small with static thresholds"},{"text":"Small with static thresholds and right aligned legend"},{"text":"Small with subtitle"},{"text":"Small with thresholds and right aligned subtitle"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1636
|
+
examples: ["Basic","Right aligned legend","Inverted with right aligned legend","Right aligned vertical legend","Bottom aligned legend","Small","Small with right aligned legend","Small with bottom aligned subtitle","Small with right aligned subtitle","Static thresholds","Static thresholds with right aligned legend","Inverted static thresholds with right aligned legend","Static thresholds with custom legend","Static thresholds with bottom aligned legend","Small with static thresholds","Small with static thresholds and right aligned legend","Small with subtitle","Small with thresholds and right aligned subtitle"],
|
|
1637
|
+
section: "components",
|
|
1638
|
+
subsection: "charts",
|
|
1639
|
+
source: "-Victory",
|
|
1640
|
+
tabName: null,
|
|
1641
|
+
Component: () => import(/* webpackChunkName: "components/charts/donut-utilization-chart/-Victory/index" */ './components/charts/donut-utilization-chart/-Victory')
|
|
1642
|
+
},
|
|
1643
|
+
'/components/charts/donut-chart/-Victory': {
|
|
1644
|
+
id: "Donut chart",
|
|
1645
|
+
title: "Donut chart",
|
|
1646
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Right aligned legend"},{"text":"Multi-color (ordered) with right aligned legend"},{"text":"Bottom aligned legend"},{"text":"Small"},{"text":"Small with right aligned legend"},{"text":"Small with bottom aligned subtitle"},{"text":"Small with right aligned subtitle"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1647
|
+
examples: ["Basic","Right aligned legend","Multi-color (ordered) with right aligned legend","Bottom aligned legend","Small","Small with right aligned legend","Small with bottom aligned subtitle","Small with right aligned subtitle"],
|
|
1648
|
+
section: "components",
|
|
1649
|
+
subsection: "charts",
|
|
1650
|
+
source: "-Victory",
|
|
1651
|
+
tabName: null,
|
|
1652
|
+
Component: () => import(/* webpackChunkName: "components/charts/donut-chart/-Victory/index" */ './components/charts/donut-chart/-Victory')
|
|
1653
|
+
},
|
|
1654
|
+
'/components/charts/bullet-chart/-Victory': {
|
|
1655
|
+
id: "Bullet chart",
|
|
1656
|
+
title: "Bullet chart",
|
|
1657
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"Segmented primary measure"},{"text":"Responsive container with bottom aligned legend"},{"text":"Primary measure dot"},{"text":"Error measure and custom axis ticks"},{"text":"Primary measure outside range"},{"text":"Negative primary measure"},{"text":"Reversed with right aligned legend"},{"text":"Negative and positive primary measures"},{"text":"Vertical with segmented primary measure"},{"text":"Vertical primary measure outside max range"},{"text":"Custom labels"},{"text":"Custom size"},{"text":"Horizontal group"},{"text":"Vertical group"},{"text":"Horizontal group with title"},{"text":"Vertical group with title"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1658
|
+
examples: ["Basic","Segmented primary measure","Responsive container with bottom aligned legend","Primary measure dot","Error measure and custom axis ticks","Primary measure outside range","Negative primary measure","Reversed with right aligned legend","Negative and positive primary measures","Vertical with segmented primary measure","Vertical primary measure outside max range","Custom labels","Custom size","Horizontal group","Vertical group","Horizontal group with title","Vertical group with title"],
|
|
1659
|
+
section: "components",
|
|
1660
|
+
subsection: "charts",
|
|
1661
|
+
source: "-Victory",
|
|
1662
|
+
tabName: null,
|
|
1663
|
+
Component: () => import(/* webpackChunkName: "components/charts/bullet-chart/-Victory/index" */ './components/charts/bullet-chart/-Victory')
|
|
1664
|
+
},
|
|
1665
|
+
'/components/charts/box-plot-chart/-Victory': {
|
|
1666
|
+
id: "Box plot chart",
|
|
1667
|
+
title: "Box plot chart",
|
|
1668
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Labels with bottom aligned legend"},{"text":"Embedded legend"},{"text":"Embedded HTML"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1669
|
+
examples: ["Basic with right aligned legend","Labels with bottom aligned legend","Embedded legend","Embedded HTML"],
|
|
1670
|
+
section: "components",
|
|
1671
|
+
subsection: "charts",
|
|
1672
|
+
source: "-Victory",
|
|
1673
|
+
tabName: null,
|
|
1674
|
+
Component: () => import(/* webpackChunkName: "components/charts/box-plot-chart/-Victory/index" */ './components/charts/box-plot-chart/-Victory')
|
|
1675
|
+
},
|
|
1676
|
+
'/components/charts/bar-chart/-Victory': {
|
|
1677
|
+
id: "Bar chart",
|
|
1678
|
+
title: "Bar chart",
|
|
1679
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Purple with bottom aligned legend"},{"text":"Multi-color (ordered) with bottom-left aligned legend"},{"text":"Single with right aligned legend"},{"text":"Alerts timeline"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1680
|
+
examples: ["Basic with right aligned legend","Purple with bottom aligned legend","Multi-color (ordered) with bottom-left aligned legend","Single with right aligned legend","Alerts timeline"],
|
|
1681
|
+
section: "components",
|
|
1682
|
+
subsection: "charts",
|
|
1683
|
+
source: "-Victory",
|
|
1684
|
+
tabName: null,
|
|
1685
|
+
Component: () => import(/* webpackChunkName: "components/charts/bar-chart/-Victory/index" */ './components/charts/bar-chart/-Victory')
|
|
1686
|
+
},
|
|
1687
|
+
'/components/charts/area-chart/-Victory': {
|
|
1688
|
+
id: "Area chart",
|
|
1689
|
+
title: "Area chart",
|
|
1690
|
+
toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic with right aligned legend"},{"text":"Teal with bottom aligned legend and axis label"},{"text":"Multi-color (unordered) bottom-left aligned legend and responsive container"}],{"text":"Documentation"},[{"text":"Tips"},{"text":"Note"}]],
|
|
1691
|
+
examples: ["Basic with right aligned legend","Teal with bottom aligned legend and axis label","Multi-color (unordered) bottom-left aligned legend and responsive container"],
|
|
1692
|
+
section: "components",
|
|
1693
|
+
subsection: "charts",
|
|
1694
|
+
source: "-Victory",
|
|
1695
|
+
tabName: null,
|
|
1696
|
+
Component: () => import(/* webpackChunkName: "components/charts/area-chart/-Victory/index" */ './components/charts/area-chart/-Victory')
|
|
1697
|
+
},
|
|
1698
|
+
'/components/code-editor/react': {
|
|
1699
|
+
id: "Code editor",
|
|
1700
|
+
title: "Code editor",
|
|
1701
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"With sizeToFit height, height will grow/shrink with content"},{"text":"With isFullHeight height, height will match the size of the parent"},{"text":"With shortcut menu and main header content"},{"text":"With actions"},{"text":"With custom control"},{"text":"With configuration modal"}]],
|
|
1702
|
+
examples: ["Basic","With sizeToFit height, height will grow/shrink with content","With isFullHeight height, height will match the size of the parent","With shortcut menu and main header content","With actions","With custom control","With configuration modal"],
|
|
1703
|
+
section: "components",
|
|
1704
|
+
subsection: "",
|
|
1705
|
+
source: "react",
|
|
1706
|
+
tabName: null,
|
|
1707
|
+
Component: () => import(/* webpackChunkName: "components/code-editor/react/index" */ './components/code-editor/react')
|
|
1708
|
+
},
|
|
1709
|
+
'/components/drag-and-drop/react-demos': {
|
|
1710
|
+
id: "Drag and drop",
|
|
1711
|
+
title: "Drag and drop",
|
|
1712
|
+
toc: [{"text":"Sorting demos"},[{"text":"Drag and drop sortable data list"},{"text":"Drag and drop sortable dual list selector"}],{"text":"Multiple drop zone demos"},[{"text":"Data list"},{"text":"Dual list selector"}]],
|
|
1713
|
+
examples: ["Drag and drop sortable data list","Drag and drop sortable dual list selector","Data list","Dual list selector"],
|
|
1714
|
+
section: "components",
|
|
1715
|
+
subsection: "",
|
|
1716
|
+
source: "react-demos",
|
|
1717
|
+
tabName: null,
|
|
1718
|
+
Component: () => import(/* webpackChunkName: "components/drag-and-drop/react-demos/index" */ './components/drag-and-drop/react-demos')
|
|
1719
|
+
},
|
|
1720
|
+
'/components/drag-and-drop/react': {
|
|
1721
|
+
id: "Drag and drop",
|
|
1722
|
+
title: "Drag and drop",
|
|
1723
|
+
toc: [{"text":"Sorting examples"},[{"text":"Basic drag and drop sorting"},{"text":"Multiple drop zones"}]],
|
|
1724
|
+
examples: ["Basic drag and drop sorting","Multiple drop zones"],
|
|
1725
|
+
section: "components",
|
|
1726
|
+
subsection: "",
|
|
1727
|
+
source: "react",
|
|
1728
|
+
tabName: null,
|
|
1729
|
+
hideNavItem: true,
|
|
1730
|
+
Component: () => import(/* webpackChunkName: "components/drag-and-drop/react/index" */ './components/drag-and-drop/react')
|
|
1731
|
+
},
|
|
1732
|
+
'/components/menus/select/react-templates': {
|
|
1733
|
+
id: "Select",
|
|
1734
|
+
title: "Select",
|
|
1735
|
+
toc: [{"text":"Select template examples"},[{"text":"Simple"},{"text":"Checkbox"},{"text":"Typeahead"},{"text":"Multi-Typeahead"}]],
|
|
1736
|
+
examples: ["Simple","Checkbox","Typeahead","Multi-Typeahead"],
|
|
1737
|
+
section: "components",
|
|
1738
|
+
subsection: "menus",
|
|
1739
|
+
source: "react-templates",
|
|
1740
|
+
tabName: null,
|
|
1741
|
+
beta: true,
|
|
1742
|
+
template: true,
|
|
1743
|
+
Component: () => import(/* webpackChunkName: "components/menus/select/react-templates/index" */ './components/menus/select/react-templates')
|
|
1744
|
+
},
|
|
1745
|
+
'/components/menus/dropdown/react-templates': {
|
|
1746
|
+
id: "Dropdown",
|
|
1747
|
+
title: "Dropdown",
|
|
1748
|
+
toc: [{"text":"Examples"},[{"text":"Simple"}]],
|
|
1749
|
+
examples: ["Simple"],
|
|
1750
|
+
section: "components",
|
|
1751
|
+
subsection: "menus",
|
|
1752
|
+
source: "react-templates",
|
|
1753
|
+
tabName: null,
|
|
1754
|
+
beta: true,
|
|
1755
|
+
template: true,
|
|
1756
|
+
Component: () => import(/* webpackChunkName: "components/menus/dropdown/react-templates/index" */ './components/menus/dropdown/react-templates')
|
|
1757
|
+
},
|
|
1758
|
+
'/developer-guides/open-ui-automation/react': {
|
|
1759
|
+
id: "Open UI Automation",
|
|
1760
|
+
title: "Open UI Automation",
|
|
1761
|
+
toc: [{"text":"About Open UI Automation"},[{"text":"Why not use id or ARIA?"},{"text":"Specification parts"},{"text":"Usage"},{"text":"Example"}],{"text":"OUIA-compliant PatternFly 5 components"},[{"text":"react-core package"},{"text":"react-table package"}]],
|
|
1762
|
+
examples: ["Example"],
|
|
1763
|
+
section: "developer-guides",
|
|
1764
|
+
subsection: "",
|
|
1765
|
+
source: "react",
|
|
1766
|
+
tabName: null,
|
|
1767
|
+
Component: () => import(/* webpackChunkName: "developer-guides/open-ui-automation/react/index" */ './developer-guides/open-ui-automation/react')
|
|
1768
|
+
}
|
|
1769
|
+
};
|