@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,373 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { Fragment, useEffect, useState } from 'react';
4
- import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
5
- const pageData = {
6
- "id": "Clipboard copy",
7
- "section": "components",
8
- "subsection": "",
9
- "deprecated": false,
10
- "template": false,
11
- "beta": false,
12
- "demo": false,
13
- "newImplementationLink": false,
14
- "source": "react",
15
- "tabName": null,
16
- "slug": "/components/clipboard-copy/react",
17
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md",
18
- "relPath": "packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md",
19
- "propComponents": [
20
- {
21
- "name": "ClipboardCopy",
22
- "description": "",
23
- "props": [
24
- {
25
- "name": "additionalActions",
26
- "type": "React.ReactNode",
27
- "description": "Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction.",
28
- "defaultValue": "null"
29
- },
30
- {
31
- "name": "children",
32
- "type": "string | string[]",
33
- "description": "The text which is copied.",
34
- "required": true
35
- },
36
- {
37
- "name": "className",
38
- "type": "string",
39
- "description": "Additional classes added to the clipboard copy container."
40
- },
41
- {
42
- "name": "clickTip",
43
- "type": "string",
44
- "description": "Tooltip message to display when clicking the copy button",
45
- "defaultValue": "'Successfully copied to clipboard!'"
46
- },
47
- {
48
- "name": "copyAriaLabel",
49
- "type": "string",
50
- "description": "Aria-label to use on the copy button"
51
- },
52
- {
53
- "name": "entryDelay",
54
- "type": "number",
55
- "description": "Delay in ms before the tooltip appears.",
56
- "defaultValue": "300"
57
- },
58
- {
59
- "name": "exitDelay",
60
- "type": "number",
61
- "description": "Delay in ms before the tooltip disappears.",
62
- "defaultValue": "1500"
63
- },
64
- {
65
- "name": "hoverTip",
66
- "type": "string",
67
- "description": "Tooltip message to display when hover the copy button",
68
- "defaultValue": "'Copy to clipboard'"
69
- },
70
- {
71
- "name": "inputId",
72
- "type": "string",
73
- "description": "ID to use on the TextInput."
74
- },
75
- {
76
- "name": "inputName",
77
- "type": "string",
78
- "description": "Name attribute to use on the TextInput."
79
- },
80
- {
81
- "name": "isBlock",
82
- "type": "boolean",
83
- "description": "Flag to determine if inline clipboard copy should be block styling"
84
- },
85
- {
86
- "name": "isCode",
87
- "type": "boolean",
88
- "description": "Flag to determine if clipboard copy content includes code",
89
- "defaultValue": "false"
90
- },
91
- {
92
- "name": "isExpanded",
93
- "type": "boolean",
94
- "description": "Flag to determine if clipboard copy is in the expanded state initially",
95
- "defaultValue": "false"
96
- },
97
- {
98
- "name": "isReadOnly",
99
- "type": "boolean",
100
- "description": "Flag to show if the input is read only.",
101
- "defaultValue": "false"
102
- },
103
- {
104
- "name": "maxWidth",
105
- "type": "string",
106
- "description": "Maximum width of the tooltip (default 150px).",
107
- "defaultValue": "'150px'"
108
- },
109
- {
110
- "name": "onChange",
111
- "type": "(event: React.FormEvent, text?: string) => void",
112
- "description": "A function that is triggered on changing the text.",
113
- "defaultValue": "(): any => undefined"
114
- },
115
- {
116
- "name": "onCopy",
117
- "type": "(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void",
118
- "description": "A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely.",
119
- "defaultValue": "(_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {\n try {\n navigator.clipboard.writeText(text.toString());\n } catch (error) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Clipboard API not found, this copy function will not work. This is likely because you're using an\",\n \"unsupported browser or you're not using HTTPS. \\n\\nIf you're a developer building an application which needs\",\n \"to support copying to the clipboard without the clipboard API, you'll have to create your own copy\",\n 'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',\n 'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'\n );\n\n // eslint-disable-next-line no-console\n console.error(error);\n }\n}"
120
- },
121
- {
122
- "name": "onInputBlur",
123
- "type": "(event?: any) => void",
124
- "description": "Callback function when text input is blurred (focus leaves)"
125
- },
126
- {
127
- "name": "onInputFocus",
128
- "type": "(event?: any) => void",
129
- "description": "Callback function when text input is focused"
130
- },
131
- {
132
- "name": "ouiaId",
133
- "type": "number | string",
134
- "description": "Value to overwrite the randomly generated data-ouia-component-id."
135
- },
136
- {
137
- "name": "ouiaSafe",
138
- "type": "boolean",
139
- "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
140
- "defaultValue": "true"
141
- },
142
- {
143
- "name": "position",
144
- "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
145
- "description": "Copy button tooltip position.",
146
- "defaultValue": "TooltipPosition.top"
147
- },
148
- {
149
- "name": "textAriaLabel",
150
- "type": "string",
151
- "description": "Aria-label to use on the TextInput.",
152
- "defaultValue": "'Copyable input'"
153
- },
154
- {
155
- "name": "toggleAriaLabel",
156
- "type": "string",
157
- "description": "Aria-label to use on the ClipboardCopyToggle.",
158
- "defaultValue": "'Show content'"
159
- },
160
- {
161
- "name": "truncation",
162
- "type": "boolean | Omit<TruncateProps, 'content'>",
163
- "description": "Enables and customizes truncation for an inline-compact ClipboardCopy.",
164
- "defaultValue": "false"
165
- },
166
- {
167
- "name": "variant",
168
- "type": "typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact'",
169
- "description": "Adds Clipboard Copy variant styles.",
170
- "defaultValue": "'inline'"
171
- }
172
- ]
173
- },
174
- {
175
- "name": "ClipboardCopyButton",
176
- "description": "",
177
- "props": [
178
- {
179
- "name": "aria-label",
180
- "type": "string",
181
- "description": "Aria-label for the copy button",
182
- "defaultValue": "'Copyable input'"
183
- },
184
- {
185
- "name": "children",
186
- "type": "React.ReactNode",
187
- "description": "Content of the copy button",
188
- "required": true
189
- },
190
- {
191
- "name": "className",
192
- "type": "string",
193
- "description": "Additional classes added to the copy button"
194
- },
195
- {
196
- "name": "entryDelay",
197
- "type": "number",
198
- "description": "Entry delay on the copy button tooltip",
199
- "defaultValue": "300"
200
- },
201
- {
202
- "name": "exitDelay",
203
- "type": "number",
204
- "description": "Exit delay on the copy button tooltip",
205
- "defaultValue": "0"
206
- },
207
- {
208
- "name": "hasNoPadding",
209
- "type": "boolean",
210
- "description": "Removes padding from clipboard copy button. This is used for inline-compact variant",
211
- "defaultValue": "false"
212
- },
213
- {
214
- "name": "id",
215
- "type": "string",
216
- "description": "ID of the copy button",
217
- "required": true
218
- },
219
- {
220
- "name": "maxWidth",
221
- "type": "string",
222
- "description": "Max width of the copy button tooltip",
223
- "defaultValue": "'100px'"
224
- },
225
- {
226
- "name": "onClick",
227
- "type": "(event: React.MouseEvent) => void",
228
- "description": "Callback for the copy when the button is clicked",
229
- "required": true
230
- },
231
- {
232
- "name": "onTooltipHidden",
233
- "type": "() => void",
234
- "description": "Callback when tooltip's hide transition has finished executing",
235
- "defaultValue": "() => {}"
236
- },
237
- {
238
- "name": "position",
239
- "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
240
- "description": "Position of the copy button tooltip",
241
- "defaultValue": "'top'"
242
- },
243
- {
244
- "name": "textId",
245
- "type": "string",
246
- "description": "ID of the content that is being copied",
247
- "deprecated": true
248
- },
249
- {
250
- "name": "variant",
251
- "type": "'control' | 'plain'",
252
- "description": "Variant of the copy button",
253
- "defaultValue": "'control'"
254
- }
255
- ]
256
- }
257
- ],
258
- "cssPrefix": [
259
- "pf-v6-c-clipboard-copy"
260
- ],
261
- "examples": [
262
- "Basic",
263
- "Read Only",
264
- "Expanded",
265
- "Read only expanded",
266
- "Read only expanded by default",
267
- "Expanded with array",
268
- "JSON object (wrap code with pre)",
269
- "Inline compact",
270
- "Inline compact code",
271
- "Inline compact with additional action",
272
- "Inline compact in sentence",
273
- "Inline compact with truncation"
274
- ]
275
- };
276
- pageData.liveContext = {
277
- Fragment,
278
- useEffect,
279
- useState,
280
- PlayIcon
281
- };
282
- pageData.examples = {
283
- 'Basic': props =>
284
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyBasic: React.FunctionComponent = () => (\n <ClipboardCopy copyAriaLabel=\"Copy basic example\" hoverTip=\"Copy\" clickTip=\"Copied\">\n This is editable\n </ClipboardCopy>\n);\n","title":"Basic","lang":"ts","className":""}}>
285
-
286
- </Example>,
287
- 'Read Only': props =>
288
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnly: React.FunctionComponent = () => (\n <ClipboardCopy copyAriaLabel=\"Copy read-only example\" isReadOnly hoverTip=\"Copy\" clickTip=\"Copied\">\n This is read-only\n </ClipboardCopy>\n);\n","title":"Read Only","lang":"ts","className":""}}>
289
-
290
- </Example>,
291
- 'Expanded': props =>
292
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyExpanded: React.FunctionComponent = () => (\n <ClipboardCopy\n toggleAriaLabel=\"Show content for expanded example\"\n copyAriaLabel=\"Copy expanded example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant={ClipboardCopyVariant.expansion}\n >\n Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n expansion.\n </ClipboardCopy>\n);\n","title":"Expanded","lang":"ts","className":""}}>
293
-
294
- </Example>,
295
- 'Read only expanded': props =>
296
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (\n <ClipboardCopy\n toggleAriaLabel=\"Show content for read-only expanded example\"\n copyAriaLabel=\"Copy read-only expanded example\"\n isReadOnly\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant={ClipboardCopyVariant.expansion}\n >\n Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n expansion.\n </ClipboardCopy>\n);\n","title":"Read only expanded","lang":"ts","className":""}}>
297
-
298
- </Example>,
299
- 'Read only expanded by default': props =>
300
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (\n <ClipboardCopy\n copyAriaLabel=\"Copy read-only expanded by default example\"\n toggleAriaLabel=\"Show content for read-only expanded by default example\"\n isReadOnly\n isExpanded\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant={ClipboardCopyVariant.expansion}\n >\n Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n expansion.\n </ClipboardCopy>\n);\n","title":"Read only expanded by default","lang":"ts","className":""}}>
301
-
302
- </Example>,
303
- 'Expanded with array': props =>
304
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nconst text = [\n 'Got a lot of text here,',\n 'need to see all of it?',\n 'Click that arrow on the left side and check out the resulting expansion.'\n];\n\nexport const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (\n <ClipboardCopy\n copyAriaLabel=\"Copy expanded example with array\"\n toggleAriaLabel=\"Show content for expanded example with array\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant={ClipboardCopyVariant.expansion}\n >\n {text.join(' ')}\n </ClipboardCopy>\n);\n","title":"Expanded with array","lang":"ts","className":""}}>
305
-
306
- </Example>,
307
- 'JSON object (wrap code with pre)': props =>
308
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyJSONObject: React.FunctionComponent = () => (\n <ClipboardCopy\n copyAriaLabel=\"Copy JSON object example\"\n toggleAriaLabel=\"Show content for JSON object example\"\n isCode\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant={ClipboardCopyVariant.expansion}\n >\n {`{ \"menu\": {\n \"id\": \"file\",\n \"value\": \"File\",\n \"popup\": {\n \"menuitem\": [\n {\"value\": \"New\", \"onclick\": \"CreateNewDoc()\"},\n {\"value\": \"Open\", \"onclick\": \"OpenDoc()\"},\n {\"value\": \"Close\", \"onclick\": \"CloseDoc()\"}\n ]\n }\n }} `}\n </ClipboardCopy>\n);\n","title":"JSON object (wrap code with pre)","lang":"ts","className":""}}>
309
-
310
- </Example>,
311
- 'Inline compact': props =>
312
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\nexport const ClipboardCopyInlineCompact: React.FunctionComponent = () => (\n <ClipboardCopy copyAriaLabel=\"Copy inline compact example\" hoverTip=\"Copy\" clickTip=\"Copied\" variant=\"inline-compact\">\n 2.3.4-2-redhat\n </ClipboardCopy>\n);\n","title":"Inline compact","lang":"ts","className":""}}>
313
-
314
- </Example>,
315
- 'Inline compact code': props =>
316
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact code example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n isCode\n >\n 2.3.4-2-redhat\n </ClipboardCopy>\n);\n","title":"Inline compact code","lang":"ts","className":""}}>
317
-
318
- </Example>,
319
- 'Inline compact with additional action': props =>
320
- <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {\n const [isRunning, setisRunning] = useState(false);\n const runText: string = 'Run in web terminal';\n const doneRunText: string = 'Running in web terminal';\n return (\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact with additional action example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n additionalActions={\n <ClipboardCopyAction>\n <Tooltip\n aria=\"none\"\n aria-live=\"polite\"\n content={isRunning ? doneRunText : runText}\n onTooltipHidden={() => setisRunning(false)}\n >\n <Button\n variant=\"plain\"\n hasNoPadding\n aria-label=\"Run in web terminal\"\n icon={<PlayIcon />}\n onClick={() => setisRunning(!isRunning)}\n />\n </Tooltip>\n </ClipboardCopyAction>\n }\n >\n 2.3.4-2-redhat\n </ClipboardCopy>\n );\n};\n","title":"Inline compact with additional action","lang":"ts","className":""}}>
321
-
322
- </Example>,
323
- 'Inline compact in sentence': props =>
324
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = () => (\n <Fragment>\n <b>Basic</b>\n <br />\n Lorem ipsum{' '}\n {\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact basic example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n >\n 2.3.4-2-redhat\n </ClipboardCopy>\n }\n dolor sit amet.\n <br /> <br />\n <b>Long copy string</b>\n <br />\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n {\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact long copy string example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n >\n https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n </ClipboardCopy>\n }{' '}\n Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n <br /> <br />\n <b>Long copy string in block</b>\n <br />\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n {\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact long copy string in block example\"\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n isBlock\n >\n https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n </ClipboardCopy>\n }{' '}\n Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n </Fragment>\n);\n","title":"Inline compact in sentence","lang":"ts","className":""}}>
325
-
326
- </Example>,
327
- 'Inline compact with truncation': props =>
328
- <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\nexport const ClipboardCopyInlineCompactTruncation: React.FunctionComponent = () => (\n <>\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact with truncation at end example\"\n truncation\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n >\n This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to\n true. This is useful for quickly applying truncation without needing to worry about any other properties to set.\n </ClipboardCopy>\n <br />\n <br />\n <ClipboardCopy\n copyAriaLabel=\"Copy inline compact with truncation at start example\"\n truncation={{ position: 'start' }}\n hoverTip=\"Copy\"\n clickTip=\"Copied\"\n variant=\"inline-compact\"\n >\n This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an\n object containing Truncate props. This is useful for finetuning truncation for your particular use-case.\n </ClipboardCopy>\n </>\n);\n","title":"Inline compact with truncation","lang":"ts","className":""}}>
329
-
330
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
331
- {`You can control the truncation for an `}
332
-
333
- <code {...{"className":"ws-code "}}>
334
- {`inline-compact`}
335
- </code>
336
- {` variant by passing the `}
337
-
338
- <code {...{"className":"ws-code "}}>
339
- {`truncation`}
340
- </code>
341
- {` property. The following example shows the different ways to use the property: passing a boolean will apply default truncation, while passing an object of `}
342
-
343
- <code {...{"className":"ws-code "}}>
344
- {`TruncateProps`}
345
- </code>
346
- {` offers more fine-tuned control over the truncation behavior.`}
347
- </p>
348
- </Example>
349
- };
350
-
351
- const Component = () => (
352
- <React.Fragment>
353
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
354
- {`Examples`}
355
- </AutoLinkHeader>
356
- {React.createElement(pageData.examples["Basic"])}
357
- {React.createElement(pageData.examples["Read Only"])}
358
- {React.createElement(pageData.examples["Expanded"])}
359
- {React.createElement(pageData.examples["Read only expanded"])}
360
- {React.createElement(pageData.examples["Read only expanded by default"])}
361
- {React.createElement(pageData.examples["Expanded with array"])}
362
- {React.createElement(pageData.examples["JSON object (wrap code with pre)"])}
363
- {React.createElement(pageData.examples["Inline compact"])}
364
- {React.createElement(pageData.examples["Inline compact code"])}
365
- {React.createElement(pageData.examples["Inline compact with additional action"])}
366
- {React.createElement(pageData.examples["Inline compact in sentence"])}
367
- {React.createElement(pageData.examples["Inline compact with truncation"])}
368
- </React.Fragment>
369
- );
370
- Component.displayName = 'ComponentsClipboardCopyReactDocs';
371
- Component.pageData = pageData;
372
-
373
- export default Component;
@@ -1,148 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { Fragment, useState } from 'react';
4
- import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
5
- import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
6
- const pageData = {
7
- "id": "Code block",
8
- "section": "components",
9
- "subsection": "",
10
- "deprecated": false,
11
- "template": false,
12
- "beta": false,
13
- "demo": false,
14
- "newImplementationLink": false,
15
- "source": "react",
16
- "tabName": null,
17
- "slug": "/components/code-block/react",
18
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md",
19
- "relPath": "packages/react-core/src/components/CodeBlock/examples/CodeBlock.md",
20
- "propComponents": [
21
- {
22
- "name": "CodeBlock",
23
- "description": "",
24
- "props": [
25
- {
26
- "name": "actions",
27
- "type": "React.ReactNode",
28
- "description": "Actions in the code block header. Should be wrapped with CodeBlockAction.",
29
- "defaultValue": "null"
30
- },
31
- {
32
- "name": "children",
33
- "type": "React.ReactNode",
34
- "description": "Content rendered inside the code block",
35
- "defaultValue": "null"
36
- },
37
- {
38
- "name": "className",
39
- "type": "string",
40
- "description": "Additional classes passed to the code block wrapper"
41
- }
42
- ]
43
- },
44
- {
45
- "name": "CodeBlockAction",
46
- "description": "",
47
- "props": [
48
- {
49
- "name": "children",
50
- "type": "React.ReactNode",
51
- "description": "Content rendered inside the code block action",
52
- "defaultValue": "null"
53
- },
54
- {
55
- "name": "className",
56
- "type": "string",
57
- "description": "Additional classes passed to the code block action"
58
- }
59
- ]
60
- },
61
- {
62
- "name": "CodeBlockCode",
63
- "description": "",
64
- "props": [
65
- {
66
- "name": "children",
67
- "type": "React.ReactNode",
68
- "description": "Code rendered inside the code block",
69
- "defaultValue": "null"
70
- },
71
- {
72
- "name": "className",
73
- "type": "string",
74
- "description": "Additional classes passed to the code block pre wrapper"
75
- },
76
- {
77
- "name": "codeClassName",
78
- "type": "string",
79
- "description": "Additional classes passed to the code block code"
80
- }
81
- ]
82
- }
83
- ],
84
- "cssPrefix": [
85
- "pf-v6-c-code-block"
86
- ],
87
- "examples": [
88
- "Basic",
89
- "Expandable"
90
- ]
91
- };
92
- pageData.liveContext = {
93
- Fragment,
94
- useState,
95
- RhUiCopyFillIcon,
96
- PlayIcon
97
- };
98
- pageData.examples = {
99
- 'Basic': props =>
100
- <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n CodeBlock,\n CodeBlockAction,\n CodeBlockCode,\n ClipboardCopyButton,\n Button,\n Tooltip\n} from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const BasicCodeBlock: React.FunctionComponent = () => {\n const [copied, setCopied] = useState(false);\n const [isRunning, setisRunning] = useState(false);\n const runText: string = 'Run in web terminal';\n const doneRunText: string = 'Running in web terminal';\n\n const clipboardCopyFunc = (event, text) => {\n navigator.clipboard.writeText(text.toString());\n };\n\n const onClick = (event, text) => {\n clipboardCopyFunc(event, text);\n setCopied(true);\n };\n\n const code = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo0oooo00ooo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const actions = (\n <Fragment>\n <CodeBlockAction>\n <ClipboardCopyButton\n id=\"basic-copy-button\"\n aria-label=\"Copy to clipboard basic example code block\"\n onClick={(e) => onClick(e, code)}\n exitDelay={copied ? 1500 : 600}\n maxWidth=\"110px\"\n variant=\"plain\"\n onTooltipHidden={() => setCopied(false)}\n >\n {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n </ClipboardCopyButton>\n </CodeBlockAction>\n <CodeBlockAction>\n <Tooltip\n aria=\"none\"\n aria-live=\"polite\"\n content={isRunning ? doneRunText : runText}\n onTooltipHidden={() => setisRunning(false)}\n >\n <Button\n variant=\"plain\"\n aria-label=\"Run in web terminal\"\n icon={<PlayIcon />}\n onClick={() => setisRunning(!isRunning)}\n />\n </Tooltip>\n </CodeBlockAction>\n </Fragment>\n );\n\n return (\n <CodeBlock actions={actions}>\n <CodeBlockCode id=\"code-content\">{code}</CodeBlockCode>\n </CodeBlock>\n );\n};\n","title":"Basic","lang":"ts","className":""}}>
101
-
102
- </Example>,
103
- 'Expandable': props =>
104
- <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n CodeBlock,\n CodeBlockAction,\n CodeBlockCode,\n ClipboardCopyButton,\n ExpandableSection,\n ExpandableSectionToggle,\n Button,\n Tooltip\n} from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const ExpandableCodeBlock: React.FunctionComponent = () => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [copied, setCopied] = useState(false);\n const [isRunning, setisRunning] = useState(false);\n const runText: string = 'Run in web terminal';\n const doneRunText: string = 'Running in web terminal';\n const toggleId: string = 'expandable-code-toggle';\n\n const onToggle = (isExpanded) => {\n setIsExpanded(isExpanded);\n };\n\n const clipboardCopyFunc = (event, text) => {\n navigator.clipboard.writeText(text.toString());\n };\n\n const onClick = (event, text) => {\n clipboardCopyFunc(event, text);\n setCopied(true);\n };\n\n const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const code = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo`;\n const expandedCode = String.raw`spec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n const actions = (\n <Fragment>\n <CodeBlockAction>\n <ClipboardCopyButton\n id=\"expandable-copy-button\"\n aria-label=\"Copy to clipboard\"\n onClick={(e) => onClick(e, copyBlock)}\n exitDelay={copied ? 1500 : 600}\n maxWidth=\"110px\"\n variant=\"plain\"\n onTooltipHidden={() => setCopied(false)}\n >\n {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n </ClipboardCopyButton>\n </CodeBlockAction>\n <CodeBlockAction>\n <Tooltip\n aria=\"none\"\n aria-live=\"polite\"\n content={isRunning ? doneRunText : runText}\n onTooltipHidden={() => setisRunning(false)}\n >\n <Button\n variant=\"plain\"\n aria-label=\"Run in web terminal\"\n icon={<PlayIcon />}\n onClick={() => setisRunning(!isRunning)}\n />\n </Tooltip>\n </CodeBlockAction>\n </Fragment>\n );\n\n return (\n <CodeBlock actions={actions}>\n <CodeBlockCode>\n {code}\n <ExpandableSection isExpanded={isExpanded} isDetached contentId=\"code-block-expand\" toggleId={toggleId}>\n {expandedCode}\n </ExpandableSection>\n </CodeBlockCode>\n <ExpandableSectionToggle\n isExpanded={isExpanded}\n onToggle={onToggle}\n contentId=\"code-block-expand\"\n direction=\"up\"\n toggleId={toggleId}\n >\n {isExpanded ? 'Show less expandable example content' : 'Show more expandable example content'}\n </ExpandableSectionToggle>\n </CodeBlock>\n );\n};\n","title":"Expandable","lang":"ts","className":""}}>
105
-
106
- </Example>
107
- };
108
-
109
- const Component = () => (
110
- <React.Fragment>
111
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
112
- <strong {...{"className":""}}>
113
- {`Important note:`}
114
- </strong>
115
- {` to format code exactly as it is, you should use String.raw`}
116
- {`\``}
117
- {`your code here`}
118
- {`\``}
119
- {`.`}
120
- </p>
121
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
122
- {`Using `}
123
- <strong {...{"className":""}}>
124
- {`String.raw`}
125
- {`\``}
126
- {`\``}
127
- </strong>
128
- {` will keep all the special characters like `}
129
- <code {...{"className":"ws-code "}}>
130
- {`\\n`}
131
- </code>
132
- {` or `}
133
- <code {...{"className":"ws-code "}}>
134
- {`\\t`}
135
- </code>
136
- {`.`}
137
- </p>
138
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
139
- {`Examples`}
140
- </AutoLinkHeader>
141
- {React.createElement(pageData.examples["Basic"])}
142
- {React.createElement(pageData.examples["Expandable"])}
143
- </React.Fragment>
144
- );
145
- Component.displayName = 'ComponentsCodeBlockReactDocs';
146
- Component.pageData = pageData;
147
-
148
- export default Component;