@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

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.
Files changed (163) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/LICENSE +21 -0
  3. package/package.json +12 -11
  4. package/patternfly-docs/generated/components/about-modal/react.js +0 -149
  5. package/patternfly-docs/generated/components/accordion/react.js +0 -262
  6. package/patternfly-docs/generated/components/action-list/react.js +0 -144
  7. package/patternfly-docs/generated/components/alert/react-demos.js +0 -56
  8. package/patternfly-docs/generated/components/alert/react.js +0 -1433
  9. package/patternfly-docs/generated/components/avatar/react.js +0 -166
  10. package/patternfly-docs/generated/components/back-to-top/react-demos.js +0 -60
  11. package/patternfly-docs/generated/components/back-to-top/react.js +0 -77
  12. package/patternfly-docs/generated/components/backdrop/react.js +0 -64
  13. package/patternfly-docs/generated/components/background-image/react.js +0 -62
  14. package/patternfly-docs/generated/components/badge/react.js +0 -97
  15. package/patternfly-docs/generated/components/banner/react-demos.js +0 -57
  16. package/patternfly-docs/generated/components/banner/react.js +0 -148
  17. package/patternfly-docs/generated/components/brand/react.js +0 -142
  18. package/patternfly-docs/generated/components/breadcrumb/react.js +0 -206
  19. package/patternfly-docs/generated/components/button/react-demos.js +0 -57
  20. package/patternfly-docs/generated/components/button/react.js +0 -826
  21. package/patternfly-docs/generated/components/card/react-demos.js +0 -201
  22. package/patternfly-docs/generated/components/card/react.js +0 -1015
  23. package/patternfly-docs/generated/components/charts/area-chart/-Victory.js +0 -1350
  24. package/patternfly-docs/generated/components/charts/bar-chart/-Victory.js +0 -1334
  25. package/patternfly-docs/generated/components/charts/box-plot-chart/-Victory.js +0 -1282
  26. package/patternfly-docs/generated/components/charts/bullet-chart/-Victory.js +0 -848
  27. package/patternfly-docs/generated/components/charts/colors-for-charts/-Victory.js +0 -192
  28. package/patternfly-docs/generated/components/charts/donut-chart/-Victory.js +0 -426
  29. package/patternfly-docs/generated/components/charts/donut-utilization-chart/-Victory.js +0 -804
  30. package/patternfly-docs/generated/components/charts/legends/-Victory.js +0 -3230
  31. package/patternfly-docs/generated/components/charts/line-chart/-Victory.js +0 -1178
  32. package/patternfly-docs/generated/components/charts/line-chart/ECharts.js +0 -525
  33. package/patternfly-docs/generated/components/charts/patterns/-Victory.js +0 -3382
  34. package/patternfly-docs/generated/components/charts/pie-chart/-Victory.js +0 -377
  35. package/patternfly-docs/generated/components/charts/resize-observer/-Victory.js +0 -2475
  36. package/patternfly-docs/generated/components/charts/sankey-chart/ECharts.js +0 -538
  37. package/patternfly-docs/generated/components/charts/scatter-chart/-Victory.js +0 -1551
  38. package/patternfly-docs/generated/components/charts/skeletons/-Victory.js +0 -4115
  39. package/patternfly-docs/generated/components/charts/sparkline-chart/-Victory.js +0 -955
  40. package/patternfly-docs/generated/components/charts/stack-chart/-Victory.js +0 -1173
  41. package/patternfly-docs/generated/components/charts/threshold-chart/-Victory.js +0 -1166
  42. package/patternfly-docs/generated/components/charts/tooltips/-Victory.js +0 -413
  43. package/patternfly-docs/generated/components/chip/react-deprecated.js +0 -323
  44. package/patternfly-docs/generated/components/clipboard-copy/react.js +0 -373
  45. package/patternfly-docs/generated/components/code-block/react.js +0 -148
  46. package/patternfly-docs/generated/components/code-editor/react.js +0 -659
  47. package/patternfly-docs/generated/components/compass/react-demos.js +0 -147
  48. package/patternfly-docs/generated/components/compass/react.js +0 -440
  49. package/patternfly-docs/generated/components/content/react.js +0 -248
  50. package/patternfly-docs/generated/components/data-list/react-demos.js +0 -90
  51. package/patternfly-docs/generated/components/data-list/react.js +0 -709
  52. package/patternfly-docs/generated/components/date-and-time/calendar-month/react.js +0 -283
  53. package/patternfly-docs/generated/components/date-and-time/date-and-time-picker/react-demos.js +0 -64
  54. package/patternfly-docs/generated/components/date-and-time/date-picker/react-demos.js +0 -83
  55. package/patternfly-docs/generated/components/date-and-time/date-picker/react.js +0 -395
  56. package/patternfly-docs/generated/components/date-and-time/time-picker/react.js +0 -241
  57. package/patternfly-docs/generated/components/description-list/react-demos.js +0 -58
  58. package/patternfly-docs/generated/components/description-list/react.js +0 -743
  59. package/patternfly-docs/generated/components/divider/react.js +0 -126
  60. package/patternfly-docs/generated/components/drag-and-drop/react-demos.js +0 -351
  61. package/patternfly-docs/generated/components/drag-and-drop/react-deprecated.js +0 -184
  62. package/patternfly-docs/generated/components/drag-and-drop/react.js +0 -137
  63. package/patternfly-docs/generated/components/drawer/react.js +0 -598
  64. package/patternfly-docs/generated/components/dual-list-selector/react-deprecated.js +0 -772
  65. package/patternfly-docs/generated/components/dual-list-selector/react.js +0 -594
  66. package/patternfly-docs/generated/components/empty-state/react.js +0 -199
  67. package/patternfly-docs/generated/components/expandable-section/react-demos.js +0 -65
  68. package/patternfly-docs/generated/components/expandable-section/react.js +0 -408
  69. package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react-demos.js +0 -52
  70. package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react.js +0 -398
  71. package/patternfly-docs/generated/components/file-upload/simple-file-upload/react.js +0 -749
  72. package/patternfly-docs/generated/components/forms/checkbox/react.js +0 -222
  73. package/patternfly-docs/generated/components/forms/form/react.js +0 -1106
  74. package/patternfly-docs/generated/components/forms/form-select/react.js +0 -208
  75. package/patternfly-docs/generated/components/forms/radio/react.js +0 -212
  76. package/patternfly-docs/generated/components/forms/text-area/react.js +0 -160
  77. package/patternfly-docs/generated/components/forms/text-input/react.js +0 -216
  78. package/patternfly-docs/generated/components/helper-text/react-demos.js +0 -180
  79. package/patternfly-docs/generated/components/helper-text/react.js +0 -164
  80. package/patternfly-docs/generated/components/hero/react.js +0 -88
  81. package/patternfly-docs/generated/components/hint/react.js +0 -169
  82. package/patternfly-docs/generated/components/icon/react.js +0 -215
  83. package/patternfly-docs/generated/components/input-group/react.js +0 -182
  84. package/patternfly-docs/generated/components/jump-links/react-demos.js +0 -154
  85. package/patternfly-docs/generated/components/jump-links/react.js +0 -212
  86. package/patternfly-docs/generated/components/label/react-demos.js +0 -57
  87. package/patternfly-docs/generated/components/label/react.js +0 -417
  88. package/patternfly-docs/generated/components/list/react.js +0 -175
  89. package/patternfly-docs/generated/components/login-page/react.js +0 -587
  90. package/patternfly-docs/generated/components/masthead/react-demos.js +0 -79
  91. package/patternfly-docs/generated/components/masthead/react.js +0 -291
  92. package/patternfly-docs/generated/components/menus/application-launcher/react-demos.js +0 -769
  93. package/patternfly-docs/generated/components/menus/context-selector/react-demos.js +0 -665
  94. package/patternfly-docs/generated/components/menus/custom-menus/react-demos.js +0 -187
  95. package/patternfly-docs/generated/components/menus/dropdown/react-templates.js +0 -163
  96. package/patternfly-docs/generated/components/menus/dropdown/react.js +0 -998
  97. package/patternfly-docs/generated/components/menus/menu/react.js +0 -1540
  98. package/patternfly-docs/generated/components/menus/menu-toggle/react.js +0 -747
  99. package/patternfly-docs/generated/components/menus/options-menu/react-demos.js +0 -508
  100. package/patternfly-docs/generated/components/menus/select/react-templates.js +0 -257
  101. package/patternfly-docs/generated/components/menus/select/react.js +0 -998
  102. package/patternfly-docs/generated/components/modal/react-deprecated.js +0 -554
  103. package/patternfly-docs/generated/components/modal/react.js +0 -597
  104. package/patternfly-docs/generated/components/navigation/react-demos.js +0 -356
  105. package/patternfly-docs/generated/components/navigation/react.js +0 -409
  106. package/patternfly-docs/generated/components/notification-badge/react.js +0 -196
  107. package/patternfly-docs/generated/components/notification-drawer/react-demos.js +0 -107
  108. package/patternfly-docs/generated/components/notification-drawer/react.js +0 -394
  109. package/patternfly-docs/generated/components/number-input/react.js +0 -210
  110. package/patternfly-docs/generated/components/overflow-menu/react.js +0 -274
  111. package/patternfly-docs/generated/components/page/react-demos.js +0 -149
  112. package/patternfly-docs/generated/components/page/react.js +0 -1352
  113. package/patternfly-docs/generated/components/pagination/react.js +0 -492
  114. package/patternfly-docs/generated/components/panel/react.js +0 -236
  115. package/patternfly-docs/generated/components/popover/react.js +0 -390
  116. package/patternfly-docs/generated/components/progress/react-demos.js +0 -59
  117. package/patternfly-docs/generated/components/progress/react.js +0 -283
  118. package/patternfly-docs/generated/components/progress-stepper/react-demos.js +0 -45
  119. package/patternfly-docs/generated/components/progress-stepper/react.js +0 -219
  120. package/patternfly-docs/generated/components/search-input/react-demos.js +0 -113
  121. package/patternfly-docs/generated/components/search-input/react.js +0 -263
  122. package/patternfly-docs/generated/components/sidebar/react.js +0 -236
  123. package/patternfly-docs/generated/components/simple-list/react.js +0 -200
  124. package/patternfly-docs/generated/components/skeleton/react-demos.js +0 -44
  125. package/patternfly-docs/generated/components/skeleton/react.js +0 -122
  126. package/patternfly-docs/generated/components/skip-to-content/react.js +0 -73
  127. package/patternfly-docs/generated/components/slider/react.js +0 -309
  128. package/patternfly-docs/generated/components/spinner/react.js +0 -111
  129. package/patternfly-docs/generated/components/switch/react.js +0 -163
  130. package/patternfly-docs/generated/components/table/react-demos.js +0 -355
  131. package/patternfly-docs/generated/components/table/react-deprecated.js +0 -1350
  132. package/patternfly-docs/generated/components/table/react.js +0 -3241
  133. package/patternfly-docs/generated/components/tabs/react-demos.js +0 -108
  134. package/patternfly-docs/generated/components/tabs/react.js +0 -1359
  135. package/patternfly-docs/generated/components/text-input-group/react-demos.js +0 -152
  136. package/patternfly-docs/generated/components/text-input-group/react.js +0 -278
  137. package/patternfly-docs/generated/components/tile/react-deprecated.js +0 -242
  138. package/patternfly-docs/generated/components/timestamp/react.js +0 -283
  139. package/patternfly-docs/generated/components/title/react.js +0 -94
  140. package/patternfly-docs/generated/components/toggle-group/react.js +0 -299
  141. package/patternfly-docs/generated/components/toolbar/react-demos.js +0 -66
  142. package/patternfly-docs/generated/components/toolbar/react.js +0 -932
  143. package/patternfly-docs/generated/components/tooltip/react.js +0 -241
  144. package/patternfly-docs/generated/components/tree-view/react.js +0 -429
  145. package/patternfly-docs/generated/components/truncate/react.js +0 -211
  146. package/patternfly-docs/generated/components/wizard/react-demos.js +0 -87
  147. package/patternfly-docs/generated/components/wizard/react-deprecated.js +0 -788
  148. package/patternfly-docs/generated/components/wizard/react.js +0 -986
  149. package/patternfly-docs/generated/developer-guides/open-ui-automation/react.js +0 -285
  150. package/patternfly-docs/generated/foundations-and-styles/layouts/bullseye/react.js +0 -70
  151. package/patternfly-docs/generated/foundations-and-styles/layouts/flex/react.js +0 -506
  152. package/patternfly-docs/generated/foundations-and-styles/layouts/gallery/react.js +0 -94
  153. package/patternfly-docs/generated/foundations-and-styles/layouts/grid/react.js +0 -272
  154. package/patternfly-docs/generated/foundations-and-styles/layouts/level/react.js +0 -87
  155. package/patternfly-docs/generated/foundations-and-styles/layouts/split/react.js +0 -124
  156. package/patternfly-docs/generated/foundations-and-styles/layouts/stack/react.js +0 -112
  157. package/patternfly-docs/generated/index.js +0 -1769
  158. package/patternfly-docs/generated/patterns/card-view/react-demos.js +0 -78
  159. package/patternfly-docs/generated/patterns/filters/react-demos.js +0 -141
  160. package/patternfly-docs/generated/patterns/password-generator/react-demos.js +0 -51
  161. package/patternfly-docs/generated/patterns/password-strength/react-demos.js +0 -61
  162. package/patternfly-docs/generated/patterns/primary-detail/react-demos.js +0 -124
  163. package/patternfly-docs/generated/patterns/right-to-left/react-demos.js +0 -81
@@ -1,236 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
-
4
- const pageData = {
5
- "id": "Sidebar",
6
- "section": "components",
7
- "subsection": "",
8
- "deprecated": false,
9
- "template": false,
10
- "beta": false,
11
- "demo": false,
12
- "newImplementationLink": false,
13
- "source": "react",
14
- "tabName": null,
15
- "slug": "/components/sidebar/react",
16
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Sidebar/examples/Sidebar.md",
17
- "relPath": "packages/react-core/src/components/Sidebar/examples/Sidebar.md",
18
- "propComponents": [
19
- {
20
- "name": "Sidebar",
21
- "description": "",
22
- "props": [
23
- {
24
- "name": "children",
25
- "type": "React.ReactNode",
26
- "description": ""
27
- },
28
- {
29
- "name": "hasBorder",
30
- "type": "boolean",
31
- "description": "Adds a border between the panel and content."
32
- },
33
- {
34
- "name": "hasGutter",
35
- "type": "boolean",
36
- "description": "Adds space between the panel and content."
37
- },
38
- {
39
- "name": "hasNoBackground",
40
- "type": "boolean",
41
- "description": "Removes the background color."
42
- },
43
- {
44
- "name": "isPanelRight",
45
- "type": "boolean",
46
- "description": "Indicates that the panel is displayed to the right of the content when the oritentation is split.",
47
- "defaultValue": "false"
48
- },
49
- {
50
- "name": "orientation",
51
- "type": "'stack' | 'split'",
52
- "description": "Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above."
53
- }
54
- ]
55
- },
56
- {
57
- "name": "SidebarContent",
58
- "description": "",
59
- "props": [
60
- {
61
- "name": "backgroundVariant",
62
- "type": "'default' | 'secondary'",
63
- "description": "Variant of the sidebar content background.",
64
- "defaultValue": "'default'"
65
- },
66
- {
67
- "name": "children",
68
- "type": "React.ReactNode",
69
- "description": "",
70
- "required": true
71
- },
72
- {
73
- "name": "hasNoBackground",
74
- "type": "boolean",
75
- "description": "Removes the background color."
76
- },
77
- {
78
- "name": "hasPadding",
79
- "type": "boolean",
80
- "description": "Adds padding to the content."
81
- }
82
- ]
83
- },
84
- {
85
- "name": "SidebarPanel",
86
- "description": "",
87
- "props": [
88
- {
89
- "name": "backgroundVariant",
90
- "type": "'default' | 'secondary'",
91
- "description": "Variant of the sidebar panel background.",
92
- "defaultValue": "'default'"
93
- },
94
- {
95
- "name": "children",
96
- "type": "React.ReactNode",
97
- "description": "",
98
- "required": true
99
- },
100
- {
101
- "name": "hasNoBackground",
102
- "type": "boolean",
103
- "description": "Removes the background color."
104
- },
105
- {
106
- "name": "hasPadding",
107
- "type": "boolean",
108
- "description": "Adds padding to the panel."
109
- },
110
- {
111
- "name": "variant",
112
- "type": "'default' | 'sticky' | 'static'",
113
- "description": "Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split.",
114
- "defaultValue": "'default'"
115
- },
116
- {
117
- "name": "width",
118
- "type": "{\n default?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n sm?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n md?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n lg?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n xl?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n '2xl'?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n}",
119
- "description": "Sets the panel width at various breakpoints. Default is 250px when the orientation is split."
120
- }
121
- ]
122
- }
123
- ],
124
- "cssPrefix": [
125
- "pf-v6-c-sidebar"
126
- ],
127
- "examples": [
128
- "Basic",
129
- "Stack",
130
- "Panel right with gutter",
131
- "Sticky panel",
132
- "Static panel",
133
- "Responsive panel width",
134
- "Border",
135
- "Padding on panel",
136
- "Padding on content"
137
- ]
138
- };
139
- pageData.examples = {
140
- 'Basic': props =>
141
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarBasic: React.FunctionComponent = () => (\n <Sidebar>\n <SidebarPanel>Sidebar panel</SidebarPanel>\n <SidebarContent>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Basic","lang":"ts","className":""}}>
142
-
143
- </Example>,
144
- 'Stack': props =>
145
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStack: React.FunctionComponent = () => (\n <Sidebar orientation=\"stack\">\n <SidebarPanel>Sidebar panel stacked on top</SidebarPanel>\n <SidebarContent>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Stack","lang":"ts","className":""}}>
146
-
147
- </Example>,
148
- 'Panel right with gutter': props =>
149
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPanelRightGutter: React.FunctionComponent = () => (\n <Sidebar isPanelRight hasGutter>\n <SidebarPanel>Sidebar panel on the right</SidebarPanel>\n <SidebarContent>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Panel right with gutter","lang":"ts","className":""}}>
150
-
151
- </Example>,
152
- 'Sticky panel': props =>
153
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStickyPanel: React.FunctionComponent = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n <SidebarPanel variant=\"sticky\">Sticky sidebar panel</SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Sticky panel","lang":"ts","className":""}}>
154
-
155
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
156
- {`A `}
157
-
158
- <code {...{"className":"ws-code "}}>
159
- {`tabIndex`}
160
- </code>
161
- {` should be added to the `}
162
-
163
- <code {...{"className":"ws-code "}}>
164
- {`Sidebar`}
165
- </code>
166
- {` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
167
- </p>
168
- </Example>,
169
- 'Static panel': props =>
170
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarStaticPanel: React.FunctionComponent = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n <SidebarPanel variant=\"static\">Static sidebar panel</SidebarPanel>\n <SidebarContent>\n <p>Scroll me!</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Static panel","lang":"ts","className":""}}>
171
-
172
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
173
- {`A `}
174
-
175
- <code {...{"className":"ws-code "}}>
176
- {`tabIndex`}
177
- </code>
178
- {` should be added to the `}
179
-
180
- <code {...{"className":"ws-code "}}>
181
- {`Sidebar`}
182
- </code>
183
- {` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
184
- </p>
185
- </Example>,
186
- 'Responsive panel width': props =>
187
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarResponsivePanel: React.FunctionComponent = () => (\n <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>\n <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>Sidebar panel</SidebarPanel>\n <SidebarContent>\n <p>Resize me!</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Responsive panel width","lang":"ts","className":""}}>
188
-
189
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
190
- {`A `}
191
-
192
- <code {...{"className":"ws-code "}}>
193
- {`tabIndex`}
194
- </code>
195
- {` should be added to the `}
196
-
197
- <code {...{"className":"ws-code "}}>
198
- {`Sidebar`}
199
- </code>
200
- {` when there is scrollable content in order for the overflow content to be accessible by keyboard.`}
201
- </p>
202
- </Example>,
203
- 'Border': props =>
204
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarBorder: React.FunctionComponent = () => (\n <Sidebar hasBorder hasGutter>\n <SidebarPanel>Sidebar panel</SidebarPanel>\n <SidebarContent>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Border","lang":"ts","className":""}}>
205
-
206
- </Example>,
207
- 'Padding on panel': props =>
208
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPaddingPanel: React.FunctionComponent = () => (\n <Sidebar>\n <SidebarPanel hasPadding>Sidebar panel, with padding</SidebarPanel>\n <SidebarContent>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Padding on panel","lang":"ts","className":""}}>
209
-
210
- </Example>,
211
- 'Padding on content': props =>
212
- <Example {...pageData} {...props} {...{"code":"import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nexport const SidebarPaddingContent: React.FunctionComponent = () => (\n <Sidebar>\n <SidebarPanel>Sidebar panel</SidebarPanel>\n <SidebarContent hasPadding>\n <p>Sidebar content, with padding.</p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.\n Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac\n pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit\n amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo\n vulputate.\n </p>\n <p>\n Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis\n parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.\n Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.\n Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat\n vulputate bibendum a ut magna.\n </p>\n </SidebarContent>\n </Sidebar>\n);\n","title":"Padding on content","lang":"ts","className":""}}>
213
-
214
- </Example>
215
- };
216
-
217
- const Component = () => (
218
- <React.Fragment>
219
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
220
- {`Examples`}
221
- </AutoLinkHeader>
222
- {React.createElement(pageData.examples["Basic"])}
223
- {React.createElement(pageData.examples["Stack"])}
224
- {React.createElement(pageData.examples["Panel right with gutter"])}
225
- {React.createElement(pageData.examples["Sticky panel"])}
226
- {React.createElement(pageData.examples["Static panel"])}
227
- {React.createElement(pageData.examples["Responsive panel width"])}
228
- {React.createElement(pageData.examples["Border"])}
229
- {React.createElement(pageData.examples["Padding on panel"])}
230
- {React.createElement(pageData.examples["Padding on content"])}
231
- </React.Fragment>
232
- );
233
- Component.displayName = 'ComponentsSidebarReactDocs';
234
- Component.pageData = pageData;
235
-
236
- export default Component;
@@ -1,200 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { useState } from 'react';
4
- const pageData = {
5
- "id": "Simple list",
6
- "section": "components",
7
- "subsection": "",
8
- "deprecated": false,
9
- "template": false,
10
- "beta": false,
11
- "demo": false,
12
- "newImplementationLink": false,
13
- "source": "react",
14
- "tabName": null,
15
- "slug": "/components/simple-list/react",
16
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/SimpleList/examples/SimpleList.md",
17
- "relPath": "packages/react-core/src/components/SimpleList/examples/SimpleList.md",
18
- "propComponents": [
19
- {
20
- "name": "SimpleList",
21
- "description": "",
22
- "props": [
23
- {
24
- "name": "aria-label",
25
- "type": "string",
26
- "description": "aria-label for the <ul> element that wraps the SimpleList items."
27
- },
28
- {
29
- "name": "children",
30
- "type": "React.ReactNode",
31
- "description": "Content rendered inside the SimpleList",
32
- "defaultValue": "null"
33
- },
34
- {
35
- "name": "className",
36
- "type": "string",
37
- "description": "Additional classes added to the SimpleList container",
38
- "defaultValue": "''"
39
- },
40
- {
41
- "name": "isControlled",
42
- "type": "boolean",
43
- "description": "Indicates whether component is controlled by its internal state",
44
- "defaultValue": "true"
45
- },
46
- {
47
- "name": "onSelect",
48
- "type": "(\n ref: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,\n props: SimpleListItemProps\n) => void",
49
- "description": "Callback when an item is selected"
50
- }
51
- ]
52
- },
53
- {
54
- "name": "SimpleListGroup",
55
- "description": "",
56
- "props": [
57
- {
58
- "name": "children",
59
- "type": "React.ReactNode",
60
- "description": "Content rendered inside the SimpleList group",
61
- "defaultValue": "null"
62
- },
63
- {
64
- "name": "className",
65
- "type": "string",
66
- "description": "Additional classes added to the SimpleList <ul>",
67
- "defaultValue": "''"
68
- },
69
- {
70
- "name": "id",
71
- "type": "string",
72
- "description": "ID of SimpleList group",
73
- "defaultValue": "''"
74
- },
75
- {
76
- "name": "title",
77
- "type": "React.ReactNode",
78
- "description": "Title of the SimpleList group",
79
- "defaultValue": "''"
80
- },
81
- {
82
- "name": "titleClassName",
83
- "type": "string",
84
- "description": "Additional classes added to the SimpleList group title",
85
- "defaultValue": "''"
86
- }
87
- ]
88
- },
89
- {
90
- "name": "SimpleListItem",
91
- "description": "",
92
- "props": [
93
- {
94
- "name": "children",
95
- "type": "React.ReactNode",
96
- "description": "Content rendered inside the SimpleList item",
97
- "defaultValue": "null"
98
- },
99
- {
100
- "name": "className",
101
- "type": "string",
102
- "description": "Additional classes added to the SimpleList <li>",
103
- "defaultValue": "''"
104
- },
105
- {
106
- "name": "component",
107
- "type": "'button' | 'a'",
108
- "description": "Component type of the SimpleList item",
109
- "defaultValue": "'button'"
110
- },
111
- {
112
- "name": "componentClassName",
113
- "type": "string",
114
- "description": "Additional classes added to the SimpleList <a> or <button>",
115
- "defaultValue": "''"
116
- },
117
- {
118
- "name": "componentProps",
119
- "type": "any",
120
- "description": "Additional props added to the SimpleList <a> or <button>"
121
- },
122
- {
123
- "name": "href",
124
- "type": "string",
125
- "description": "Default hyperlink location",
126
- "defaultValue": "''"
127
- },
128
- {
129
- "name": "isActive",
130
- "type": "boolean",
131
- "description": "Indicates if the link is current/highlighted",
132
- "defaultValue": "false"
133
- },
134
- {
135
- "name": "itemId",
136
- "type": "number | string",
137
- "description": "id for the item."
138
- },
139
- {
140
- "name": "onClick",
141
- "type": "(event: React.MouseEvent | React.ChangeEvent) => void",
142
- "description": "OnClick callback for the SimpleList item",
143
- "defaultValue": "() => {}"
144
- },
145
- {
146
- "name": "type",
147
- "type": "'button' | 'submit' | 'reset'",
148
- "description": "Type of button SimpleList item",
149
- "defaultValue": "'button'"
150
- }
151
- ]
152
- }
153
- ],
154
- "cssPrefix": [
155
- "pf-v6-c-simple-list"
156
- ],
157
- "examples": [
158
- "Simple list",
159
- "Simple list with links",
160
- "Grouped list",
161
- "Uncontrolled simple list"
162
- ]
163
- };
164
- pageData.liveContext = {
165
- useState
166
- };
167
- pageData.examples = {
168
- 'Simple list': props =>
169
- <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem } from '@patternfly/react-core';\n\nexport const SimpleListBasic: React.FunctionComponent = () => {\n const items = [\n <SimpleListItem key=\"item1\" isActive>\n List item 1\n </SimpleListItem>,\n <SimpleListItem key=\"item2\">List item 2</SimpleListItem>,\n <SimpleListItem key=\"item3\">List item 3</SimpleListItem>\n ];\n\n return <SimpleList aria-label=\"Simple List Example\">{items}</SimpleList>;\n};\n","title":"Simple list","lang":"ts","className":""}}>
170
-
171
- </Example>,
172
- 'Simple list with links': props =>
173
- <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem } from '@patternfly/react-core';\n\nexport const SimpleListLinks: React.FunctionComponent = () => {\n const items = [\n <SimpleListItem key=\"item1\" component=\"a\" href=\"#\" isActive>\n List item 1\n </SimpleListItem>,\n <SimpleListItem key=\"item2\" component=\"a\" href=\"#\">\n List item 2\n </SimpleListItem>,\n <SimpleListItem key=\"item3\" component=\"a\" href=\"#\">\n List item 3\n </SimpleListItem>\n ];\n\n return <SimpleList aria-label=\"Simple List Links Example\">{items}</SimpleList>;\n};\n","title":"Simple list with links","lang":"ts","className":""}}>
174
-
175
- </Example>,
176
- 'Grouped list': props =>
177
- <Example {...pageData} {...props} {...{"code":"import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';\n\nexport const SimpleListGrouped: React.FunctionComponent = () => {\n const group1Items = [\n <SimpleListItem key=\"item1\" isActive>\n List item 1\n </SimpleListItem>,\n <SimpleListItem key=\"item2\">List item 2</SimpleListItem>,\n <SimpleListItem key=\"item3\">List item 3</SimpleListItem>,\n <SimpleListItem key=\"item4\">List item 4</SimpleListItem>\n ];\n\n const group2Items = [\n <SimpleListItem key=\"item5\">List item 1</SimpleListItem>,\n <SimpleListItem key=\"item6\" component=\"a\" href=\"#\">\n List item 2\n </SimpleListItem>,\n <SimpleListItem key=\"item7\" component=\"a\" href=\"#\">\n List item 3\n </SimpleListItem>,\n <SimpleListItem key=\"item8\">List item 4</SimpleListItem>\n ];\n\n return (\n <SimpleList aria-label=\"Grouped simple list example\">\n <SimpleListGroup title=\"Group 1\" id=\"group-1\">\n {group1Items}\n </SimpleListGroup>\n <SimpleListGroup title=\"Group 2\" id=\"group-2\">\n {group2Items}\n </SimpleListGroup>\n </SimpleList>\n );\n};\n","title":"Grouped list","lang":"ts","className":""}}>
178
-
179
- </Example>,
180
- 'Uncontrolled simple list': props =>
181
- <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';\n\nexport const SimpleListUncontrolled: React.FunctionComponent = () => {\n const [activeItem, setActiveItem] = useState(0);\n\n const onSelect = (\n selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,\n selectedItemProps: SimpleListItemProps\n ) => {\n setActiveItem(selectedItemProps.itemId as number);\n };\n\n const items = [\n <SimpleListItem key=\"item1\" itemId={0} isActive={activeItem === 0}>\n List item 1\n </SimpleListItem>,\n <SimpleListItem key=\"item2\" itemId={1} isActive={activeItem === 1}>\n List item 2\n </SimpleListItem>,\n <SimpleListItem key=\"item3\" itemId={2} isActive={activeItem === 2}>\n List item 3\n </SimpleListItem>\n ];\n\n return (\n <SimpleList onSelect={onSelect} isControlled={false} aria-label=\"Uncontrolled Simple List Example\">\n {items}\n </SimpleList>\n );\n};\n","title":"Uncontrolled simple list","lang":"ts","className":""}}>
182
-
183
- </Example>
184
- };
185
-
186
- const Component = () => (
187
- <React.Fragment>
188
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
189
- {`Examples`}
190
- </AutoLinkHeader>
191
- {React.createElement(pageData.examples["Simple list"])}
192
- {React.createElement(pageData.examples["Simple list with links"])}
193
- {React.createElement(pageData.examples["Grouped list"])}
194
- {React.createElement(pageData.examples["Uncontrolled simple list"])}
195
- </React.Fragment>
196
- );
197
- Component.displayName = 'ComponentsSimpleListReactDocs';
198
- Component.pageData = pageData;
199
-
200
- export default Component;
@@ -1,44 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
4
- import srcImportskeletoncard from './react-demos/skeleton-card.png';
5
- const pageData = {
6
- "id": "Skeleton",
7
- "section": "components",
8
- "subsection": "",
9
- "deprecated": false,
10
- "template": false,
11
- "beta": false,
12
- "demo": false,
13
- "newImplementationLink": false,
14
- "source": "react-demos",
15
- "tabName": null,
16
- "slug": "/components/skeleton/react-demos",
17
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Skeleton.md",
18
- "relPath": "packages/react-core/src/demos/Skeleton.md",
19
- "fullscreenExamples": [
20
- "Skeleton card"
21
- ]
22
- };
23
- pageData.liveContext = {
24
- DashboardWrapper
25
- };
26
- pageData.examples = {
27
- 'Skeleton card': props =>
28
- <Example {...pageData} {...props} thumbnail={srcImportskeletoncard} {...{"code":"import { Gallery, Flex, PageSection, Content, Card, CardBody, Skeleton } from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nexport const SkeletonCard: React.FunctionComponent = () => {\n const card = (index: number) => (\n <Card key={index} isCompact>\n <CardBody>\n <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>\n <Skeleton screenreaderText=\"Loading content\" />\n <Skeleton width=\"66%\" />\n <Skeleton width=\"25%\" />\n <Skeleton width=\"50%\" />\n </Flex>\n </CardBody>\n <CardBody>\n <Skeleton shape=\"square\" width=\"75%\" screenreaderText=\"Loading medium square contents\" />\n </CardBody>\n <CardBody>\n <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>\n <Skeleton screenreaderText=\"Loading content\" />\n <Skeleton width=\"25%\" />\n <Skeleton width=\"75%\" />\n <Skeleton width=\"50%\" />\n </Flex>\n </CardBody>\n </Card>\n );\n return (\n <DashboardWrapper isBreadcrumbWidthLimited>\n <PageSection isWidthLimited aria-label=\"main-title\">\n <Content component=\"h1\" id=\"main-title\">\n Main title\n </Content>\n <Content component=\"p\">This is a full page demo.</Content>\n </PageSection>\n <PageSection aria-label=\"Card gallery\">\n <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>\n </PageSection>\n </DashboardWrapper>\n );\n};\n","title":"Skeleton card","lang":"ts","isFullscreen":true,"className":""}}>
29
-
30
- </Example>
31
- };
32
-
33
- const Component = () => (
34
- <React.Fragment>
35
- <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
36
- {`Demos`}
37
- </AutoLinkHeader>
38
- {React.createElement(pageData.examples["Skeleton card"])}
39
- </React.Fragment>
40
- );
41
- Component.displayName = 'ComponentsSkeletonReactDemosDocs';
42
- Component.pageData = pageData;
43
-
44
- export default Component;
@@ -1,122 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { Fragment } from 'react';
4
- import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
5
- import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
6
- import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';
7
- import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';
8
- import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';
9
- import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';
10
- import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
11
- const pageData = {
12
- "id": "Skeleton",
13
- "section": "components",
14
- "subsection": "",
15
- "deprecated": false,
16
- "template": false,
17
- "beta": false,
18
- "demo": false,
19
- "newImplementationLink": false,
20
- "source": "react",
21
- "tabName": null,
22
- "slug": "/components/skeleton/react",
23
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Skeleton/examples/Skeleton.md",
24
- "relPath": "packages/react-core/src/components/Skeleton/examples/Skeleton.md",
25
- "propComponents": [
26
- {
27
- "name": "Skeleton",
28
- "description": "",
29
- "props": [
30
- {
31
- "name": "className",
32
- "type": "string",
33
- "description": "Additional classes added to the Skeleton"
34
- },
35
- {
36
- "name": "fontSize",
37
- "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'",
38
- "description": "The font size height of the Skeleton"
39
- },
40
- {
41
- "name": "height",
42
- "type": "string",
43
- "description": "The height of the Skeleton. Must specify pixels or percentage."
44
- },
45
- {
46
- "name": "screenreaderText",
47
- "type": "string",
48
- "description": "Text read just to screen reader users"
49
- },
50
- {
51
- "name": "shape",
52
- "type": "'circle' | 'square'",
53
- "description": "The shape of the Skeleton"
54
- },
55
- {
56
- "name": "width",
57
- "type": "string",
58
- "description": "The width of the Skeleton. Must specify pixels or percentage."
59
- }
60
- ]
61
- }
62
- ],
63
- "cssPrefix": [
64
- "pf-v6-c-skeleton"
65
- ],
66
- "examples": [
67
- "Default",
68
- "Percentage widths",
69
- "Percentage heights",
70
- "Text modifiers",
71
- "Shapes"
72
- ]
73
- };
74
- pageData.liveContext = {
75
- Fragment,
76
- t_global_font_size_4xl,
77
- t_global_font_size_3xl,
78
- t_global_font_size_2xl,
79
- t_global_font_size_xl,
80
- t_global_font_size_lg,
81
- t_global_font_size_md,
82
- t_global_font_size_sm
83
- };
84
- pageData.examples = {
85
- 'Default': props =>
86
- <Example {...pageData} {...props} {...{"code":"import { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText=\"Loading default content\" />;\n","title":"Default","lang":"ts","className":""}}>
87
-
88
- </Example>,
89
- 'Percentage widths': props =>
90
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonPercentageWidth: React.FunctionComponent = () => (\n <Fragment>\n <Skeleton width=\"25%\" screenreaderText=\"Loading percentage width content\" />\n <br />\n <Skeleton width=\"33%\" />\n <br />\n <Skeleton width=\"50%\" />\n <br />\n <Skeleton width=\"66%\" />\n <br />\n <Skeleton width=\"75%\" />\n <br />\n <Skeleton />\n </Fragment>\n);\n","title":"Percentage widths","lang":"ts","className":""}}>
91
-
92
- </Example>,
93
- 'Percentage heights': props =>
94
- <Example {...pageData} {...props} {...{"code":"import { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonPercentageHeight: React.FunctionComponent = () => (\n <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n <Skeleton height=\"25%\" width=\"15%\" screenreaderText=\"Loading percentage height content\" />\n <Skeleton height=\"33%\" width=\"15%\" />\n <Skeleton height=\"50%\" width=\"15%\" />\n <Skeleton height=\"66%\" width=\"15%\" />\n <Skeleton height=\"75%\" width=\"15%\" />\n <Skeleton height=\"100%\" width=\"15%\" />\n </div>\n);\n","title":"Percentage heights","lang":"ts","className":""}}>
95
-
96
- </Example>,
97
- 'Text modifiers': props =>
98
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\nimport t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';\nimport t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';\nimport t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';\nimport t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl';\nimport t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg';\nimport t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md';\nimport t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';\n\nexport const SkeletonText: React.FunctionComponent = () => (\n <Fragment>\n {t_global_font_size_4xl.name}\n <Skeleton fontSize=\"4xl\" screenreaderText=\"Loading text content\" />\n <br />\n {t_global_font_size_3xl.name}\n <Skeleton fontSize=\"3xl\" />\n <br />\n {t_global_font_size_2xl.name}\n <Skeleton fontSize=\"2xl\" />\n <br />\n {t_global_font_size_xl.name}\n <Skeleton fontSize=\"xl\" />\n <br />\n {t_global_font_size_lg.name}\n <Skeleton fontSize=\"lg\" />\n <br />\n {t_global_font_size_md.name}\n <Skeleton fontSize=\"md\" />\n <br />\n {t_global_font_size_sm.name}\n <Skeleton fontSize=\"sm\" />\n </Fragment>\n);\n","title":"Text modifiers","lang":"ts","className":""}}>
99
-
100
- </Example>,
101
- 'Shapes': props =>
102
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Skeleton } from '@patternfly/react-core';\n\nexport const SkeletonShapes: React.FunctionComponent = () => (\n <Fragment>\n Small circle\n <Skeleton shape=\"circle\" width=\"15%\" screenreaderText=\"Loading circle content\" />\n <br />\n Medium circle\n <Skeleton shape=\"circle\" width=\"30%\" />\n <br />\n Large circle\n <Skeleton shape=\"circle\" width=\"50%\" />\n <br />\n Small square\n <Skeleton shape=\"square\" width=\"15%\" screenreaderText=\"Loading square content\" />\n <br />\n Medium square\n <Skeleton shape=\"square\" width=\"30%\" />\n <br />\n Large square\n <Skeleton shape=\"square\" width=\"50%\" />\n <br />\n Small rectangle\n <div style={{ height: '200px' }}>\n <Skeleton height=\"50%\" width=\"50%\" screenreaderText=\"Loading rectangle content\" />\n </div>\n <br />\n Medium rectangle\n <div style={{ height: '200px' }}>\n <Skeleton height=\"75%\" width=\"75%\" />\n </div>\n <br />\n Large rectangle\n <div style={{ height: '200px' }}>\n <Skeleton height=\"100%\" />\n </div>\n </Fragment>\n);\n","title":"Shapes","lang":"ts","className":""}}>
103
-
104
- </Example>
105
- };
106
-
107
- const Component = () => (
108
- <React.Fragment>
109
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
110
- {`Examples`}
111
- </AutoLinkHeader>
112
- {React.createElement(pageData.examples["Default"])}
113
- {React.createElement(pageData.examples["Percentage widths"])}
114
- {React.createElement(pageData.examples["Percentage heights"])}
115
- {React.createElement(pageData.examples["Text modifiers"])}
116
- {React.createElement(pageData.examples["Shapes"])}
117
- </React.Fragment>
118
- );
119
- Component.displayName = 'ComponentsSkeletonReactDocs';
120
- Component.pageData = pageData;
121
-
122
- export default Component;