@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,166 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import '../../../../../react-core/src/components/Avatar/examples/./avatar.css';
4
- import { Fragment } from 'react';
5
- import avatarImg from '../../../../../react-core/src/components/Avatar/examples/../../assets/img_avatar-light.svg';
6
- import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';
7
- const pageData = {
8
- "id": "Avatar",
9
- "section": "components",
10
- "subsection": "",
11
- "deprecated": false,
12
- "template": false,
13
- "beta": false,
14
- "demo": false,
15
- "newImplementationLink": false,
16
- "source": "react",
17
- "tabName": null,
18
- "slug": "/components/avatar/react",
19
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Avatar/examples/Avatar.md",
20
- "relPath": "packages/react-core/src/components/Avatar/examples/Avatar.md",
21
- "propComponents": [
22
- {
23
- "name": "Avatar",
24
- "description": "",
25
- "props": [
26
- {
27
- "name": "alt",
28
- "type": "string",
29
- "description": "Specifies the alternate text of the image for the avatar. Will instead set the aria-label when using children or initials; to hide the avatar\nfrom assistive technologies when passing children or initials, pass an empty string to the alt prop.",
30
- "required": true
31
- },
32
- {
33
- "name": "children",
34
- "type": "React.ReactNode",
35
- "description": "Content rendered inside the avatar, such as custom svgs or icons."
36
- },
37
- {
38
- "name": "className",
39
- "type": "string",
40
- "description": "Additional classes added to the avatar."
41
- },
42
- {
43
- "name": "color",
44
- "type": "'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'gray'",
45
- "description": "Color of the avatar."
46
- },
47
- {
48
- "name": "initials",
49
- "type": "string",
50
- "description": "Initials of the avatar."
51
- },
52
- {
53
- "name": "isBordered",
54
- "type": "boolean",
55
- "description": "Flag to indicate the avatar should have a border."
56
- },
57
- {
58
- "name": "size",
59
- "type": "'sm' | 'md' | 'lg' | 'xl'",
60
- "description": "Size variant of avatar."
61
- },
62
- {
63
- "name": "src",
64
- "type": "string",
65
- "description": "Specifies the URL of the image for the avatar.",
66
- "defaultValue": "''"
67
- }
68
- ]
69
- }
70
- ],
71
- "cssPrefix": [
72
- "pf-v6-c-avatar"
73
- ],
74
- "examples": [
75
- "Basic usage",
76
- "Color modifiers",
77
- "With initials",
78
- "Bordered",
79
- "Size variations"
80
- ]
81
- };
82
- pageData.liveContext = {
83
- Fragment,
84
- avatarImg,
85
- RhUiAiChatbotIcon
86
- };
87
- pageData.relativeImports = "import 'react-core/src/components/Avatar/examples/./avatar.css';"
88
- pageData.examples = {
89
- 'Basic usage': props =>
90
- <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\nimport avatarImg from '../../assets/img_avatar-light.svg';\n\nconst rhdsLogo = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\n <g>\n <rect width=\"48\" height=\"48\" fill=\"#147878\"></rect>\n <rect x=\"36\" y=\"42\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"6\" y=\"42\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"12\" y=\"36\" width=\"24\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"18\" y=\"30\" width=\"12\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"24\" transform=\"matrix(-1 0 0 1 48 12)\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 30)\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 36 24)\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 18)\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 36 12)\" fill=\"#004D4D\"></rect>\n <rect width=\"6\" height=\"6\" transform=\"matrix(-1 0 0 1 42 6)\" fill=\"#004D4D\"></rect>\n <rect x=\"18\" width=\"12\" height=\"12\" fill=\"#004D4D\"></rect>\n <rect x=\"6\" y=\"30\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"12\" y=\"24\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"6\" y=\"18\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"12\" y=\"12\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect x=\"6\" y=\"6\" width=\"6\" height=\"6\" fill=\"#004D4D\"></rect>\n <rect y=\"12\" width=\"6\" height=\"24\" fill=\"#004D4D\"></rect>\n </g>\n </svg>\n);\n\nexport const AvatarBasic: React.FunctionComponent = () => (\n <>\n <Avatar src={avatarImg} alt=\"Basic avatar with image\" />\n <Avatar alt=\"Basic avatar with children\">{rhdsLogo}</Avatar>\n </>\n);\n","title":"Basic usage","lang":"ts","className":""}}>
91
-
92
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
93
- {`Pass in the `}
94
-
95
- <code {...{"className":"ws-code "}}>
96
- {`src`}
97
- </code>
98
- {` property to apply an image for the avatar, or pass `}
99
-
100
- <code {...{"className":"ws-code "}}>
101
- {`children`}
102
- </code>
103
- {` for custom content such as icons or svg elements.`}
104
- </p>
105
- </Example>,
106
- 'Color modifiers': props =>
107
- <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nconst profileSvg = (\n <svg aria-hidden=\"true\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 36 36\">\n <path fill=\"currentColor\" d=\"M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z\" />\n <path\n fill=\"currentColor\"\n d=\"M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z\"\n />\n </svg>\n);\n\nexport const AvatarColorModifiers: React.FunctionComponent = () => (\n <>\n <Avatar color=\"red\" alt=\"red avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"orangered\" alt=\"orangered avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"orange\" alt=\"orange avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"yellow\" alt=\"yellow avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"green\" alt=\"green avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"teal\" alt=\"teal avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"blue\" alt=\"blue avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"purple\" alt=\"purple avatar\">\n {profileSvg}\n </Avatar>\n <Avatar color=\"gray\" alt=\"gray avatar\">\n {profileSvg}\n </Avatar>\n </>\n);\n","title":"Color modifiers","lang":"ts","className":""}}>
108
-
109
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
110
- {`Color modifiers add visual interest and automatically include a border. The available colors are: "red," "orangered," "orange," "yellow," "green," "teal," "blue," "purple," and "gray".`}
111
- </p>
112
- </Example>,
113
- 'With initials': props =>
114
- <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nexport const AvatarInitials: React.FunctionComponent = () => (\n <>\n <Avatar alt=\"non-color avatar with initial C\" isBordered initials=\"C\" />\n <Avatar color=\"red\" alt=\"red avatar with initial C\" initials=\"C\" />\n <Avatar color=\"orangered\" alt=\"orangered avatar with initial C\" initials=\"C\" />\n <Avatar color=\"orange\" alt=\"orange avatar with initial C\" initials=\"C\" />\n <Avatar color=\"yellow\" alt=\"yellow avatar with initial C\" initials=\"C\" />\n <Avatar color=\"green\" alt=\"green avatar with initial C\" initials=\"C\" />\n <Avatar color=\"teal\" alt=\"teal avatar with initial C\" initials=\"C\" />\n <Avatar color=\"blue\" alt=\"blue avatar with initial C\" initials=\"C\" />\n <Avatar color=\"purple\" alt=\"purple avatar with initial C\" initials=\"C\" />\n <Avatar color=\"gray\" alt=\"gray avatar with initial C\" initials=\"C\" />\n </>\n);\n","title":"With initials","lang":"ts","className":""}}>
115
-
116
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
117
- {`An avatar can display initials by using the `}
118
-
119
- <code {...{"className":"ws-code "}}>
120
- {`initials`}
121
- </code>
122
- {` property. It's recommended to pass only a single initial to ensure the text fits inside of the avatar.`}
123
- </p>
124
- </Example>,
125
- 'Bordered': props =>
126
- <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\nimport RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon';\n\nexport const AvatarBordered: React.FunctionComponent = () => (\n <Avatar alt=\"Avatar with border\" isBordered>\n <RhUiAiChatbotIcon />\n </Avatar>\n);\n","title":"Bordered","lang":"ts","className":""}}>
127
-
128
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
129
- {`A border can be applied by passing the `}
130
-
131
- <code {...{"className":"ws-code "}}>
132
- {`isBordered`}
133
- </code>
134
- {` property to a non-colorful avatar.`}
135
- </p>
136
- </Example>,
137
- 'Size variations': props =>
138
- <Example {...pageData} {...props} {...{"code":"import { Avatar } from '@patternfly/react-core';\n\nexport const AvatarSizeVariations: React.FunctionComponent = () => (\n <>\n <Avatar alt=\"small red avatar with initial C\" initials=\"C\" color=\"red\" size=\"sm\" />\n <Avatar alt=\"medium red avatar with initial C\" initials=\"C\" color=\"red\" size=\"md\" />\n <Avatar alt=\"large red avatar with initial C\" initials=\"C\" color=\"red\" size=\"lg\" />\n <Avatar alt=\"extra large red avatar with initial C\" initials=\"C\" color=\"red\" size=\"xl\" />\n </>\n);\n","title":"Size variations","lang":"ts","className":""}}>
139
-
140
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
141
- {`An avatar can be rendered at different sizes by passing the `}
142
-
143
- <code {...{"className":"ws-code "}}>
144
- {`size`}
145
- </code>
146
- {` property. The available sizes are: "sm," "md" (the default size), "lg," and "xl".`}
147
- </p>
148
- </Example>
149
- };
150
-
151
- const Component = () => (
152
- <React.Fragment>
153
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
154
- {`Examples`}
155
- </AutoLinkHeader>
156
- {React.createElement(pageData.examples["Basic usage"])}
157
- {React.createElement(pageData.examples["Color modifiers"])}
158
- {React.createElement(pageData.examples["With initials"])}
159
- {React.createElement(pageData.examples["Bordered"])}
160
- {React.createElement(pageData.examples["Size variations"])}
161
- </React.Fragment>
162
- );
163
- Component.displayName = 'ComponentsAvatarReactDocs';
164
- Component.pageData = pageData;
165
-
166
- export default Component;
@@ -1,60 +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
- import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
5
- import srcImportdefaulttoscrollwindow from './react-demos/default-to-scroll-window.png';
6
- import srcImportusingnameselector from './react-demos/using-name-selector.png';
7
- const pageData = {
8
- "id": "Back to top",
9
- "section": "components",
10
- "subsection": "",
11
- "deprecated": false,
12
- "template": false,
13
- "beta": false,
14
- "demo": false,
15
- "newImplementationLink": false,
16
- "source": "react-demos",
17
- "tabName": null,
18
- "slug": "/components/back-to-top/react-demos",
19
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/BackToTop.md",
20
- "relPath": "packages/react-core/src/demos/BackToTop.md",
21
- "fullscreenExamples": [
22
- "Using name selector"
23
- ]
24
- };
25
- pageData.liveContext = {
26
- useState,
27
- DashboardWrapper
28
- };
29
- pageData.examples = {
30
- 'Using name selector': props =>
31
- <Example {...pageData} {...props} thumbnail={srcImportusingnameselector} {...{"code":"import { useState } from 'react';\nimport { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Switch } from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const BacktoTopNameDemo: React.FunctionComponent = () => {\n const [isAlwaysVisible, setIsAlwaysVisible] = useState(false);\n\n const handleChange = (_event, isChecked) => {\n setIsAlwaysVisible(isChecked);\n };\n\n return (\n <DashboardWrapper breadcrumb={null}>\n <PageSection aria-labelledby=\"main-title\">\n <Content>\n <h1 id=\"main-title\">Main title</h1>\n <p>\n Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n of it’s relative line height of 1.5.\n </p>\n <Switch label=\"Always show BackToTopButton\" onChange={handleChange} isChecked={isAlwaysVisible} />\n </Content>\n </PageSection>\n <PageSection\n hasOverflowScroll\n tabIndex={0}\n aria-label=\"Scrollable container of demonstration cards with a back to top element\"\n >\n <Gallery hasGutter>\n {Array.from({ length: 60 }).map((_value, index) => (\n <GalleryItem key={index}>\n <Card key={index}>\n <CardBody>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed\n tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium\n finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor condimentum\n varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper. Duis tincidunt\n gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur erat. Nulla\n accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada quam enim vel\n odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a pulvinar ut, commodo\n at risus.\n </CardBody>\n </Card>\n </GalleryItem>\n ))}\n </Gallery>\n </PageSection>\n <BackToTop scrollableSelector=\".pf-v6-c-page__main-container\" isAlwaysVisible={isAlwaysVisible} />\n </DashboardWrapper>\n );\n};\n","title":"Using name selector","lang":"ts","isFullscreen":true,"className":""}}>
32
-
33
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
34
- {`Note that `}
35
-
36
- <code {...{"className":"ws-code "}}>
37
- {`tabIndex={0}`}
38
- </code>
39
- {` is added to the scrolling `}
40
-
41
- <code {...{"className":"ws-code "}}>
42
- {`PageSection`}
43
- </code>
44
- {` of the page to allow keyboard users the ability to focus and scroll.`}
45
- </p>
46
- </Example>
47
- };
48
-
49
- const Component = () => (
50
- <React.Fragment>
51
- <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
52
- {`Demos`}
53
- </AutoLinkHeader>
54
- {React.createElement(pageData.examples["Using name selector"])}
55
- </React.Fragment>
56
- );
57
- Component.displayName = 'ComponentsBackToTopReactDemosDocs';
58
- Component.pageData = pageData;
59
-
60
- export default Component;
@@ -1,77 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import '../../../../../react-core/src/components/BackToTop/examples/./BackToTop.css'
4
- const pageData = {
5
- "id": "Back to top",
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/back-to-top/react",
16
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackToTop/examples/BackToTop.md",
17
- "relPath": "packages/react-core/src/components/BackToTop/examples/BackToTop.md",
18
- "propComponents": [
19
- {
20
- "name": "BackToTop",
21
- "description": "",
22
- "props": [
23
- {
24
- "name": "className",
25
- "type": "string",
26
- "description": "Additional classes added to the back to top."
27
- },
28
- {
29
- "name": "isAlwaysVisible",
30
- "type": "boolean",
31
- "description": "Flag to always show back to top button, defaults to false."
32
- },
33
- {
34
- "name": "scrollableSelector",
35
- "type": "string",
36
- "description": "Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events."
37
- },
38
- {
39
- "name": "title",
40
- "type": "string",
41
- "description": "Title to appear in back to top button."
42
- }
43
- ]
44
- }
45
- ],
46
- "cssPrefix": [
47
- "pf-v6-c-back-to-top"
48
- ],
49
- "examples": [
50
- "Basic"
51
- ]
52
- };
53
- pageData.examples = {
54
- 'Basic': props =>
55
- <Example {...pageData} {...props} {...{"code":"import { BackToTop } from '@patternfly/react-core';\n\nexport const BackToTopBasic: React.FunctionComponent = () => <BackToTop isAlwaysVisible />;\n","title":"Basic","lang":"ts","className":""}}>
56
-
57
- </Example>
58
- };
59
-
60
- const Component = () => (
61
- <React.Fragment>
62
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
63
- {`Below example does not demonstrate functionality see React demos for a full demonstration.`}
64
- </p>
65
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
66
- {`Back to top only shows after overflowing element has been scrolled 400px.`}
67
- </p>
68
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
69
- {`Examples`}
70
- </AutoLinkHeader>
71
- {React.createElement(pageData.examples["Basic"])}
72
- </React.Fragment>
73
- );
74
- Component.displayName = 'ComponentsBackToTopReactDocs';
75
- Component.pageData = pageData;
76
-
77
- export default Component;
@@ -1,64 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import srcImportbasic from './react/basic.png';
4
- import srcImportwithspinner from './react/with-spinner.png';
5
- const pageData = {
6
- "id": "Backdrop",
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/backdrop/react",
17
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Backdrop/examples/Backdrop.md",
18
- "relPath": "packages/react-core/src/components/Backdrop/examples/Backdrop.md",
19
- "propComponents": [
20
- {
21
- "name": "Backdrop",
22
- "description": "",
23
- "props": [
24
- {
25
- "name": "children",
26
- "type": "React.ReactNode",
27
- "description": "Content rendered inside the backdrop",
28
- "defaultValue": "null"
29
- },
30
- {
31
- "name": "className",
32
- "type": "string",
33
- "description": "Additional classes added to the backdrop",
34
- "defaultValue": "''"
35
- }
36
- ]
37
- }
38
- ],
39
- "cssPrefix": [
40
- "pf-v6-c-backdrop"
41
- ],
42
- "fullscreenExamples": [
43
- "Basic"
44
- ]
45
- };
46
- pageData.examples = {
47
- 'Basic': props =>
48
- <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { Backdrop } from '@patternfly/react-core';\n\nexport const BackdropBasic: React.FunctionComponent = () => <Backdrop />;\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
49
-
50
- </Example>
51
- };
52
-
53
- const Component = () => (
54
- <React.Fragment>
55
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
56
- {`Examples`}
57
- </AutoLinkHeader>
58
- {React.createElement(pageData.examples["Basic"])}
59
- </React.Fragment>
60
- );
61
- Component.displayName = 'ComponentsBackdropReactDocs';
62
- Component.pageData = pageData;
63
-
64
- export default Component;
@@ -1,62 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import srcImportbasic from './react/basic.png';
4
- const pageData = {
5
- "id": "Background image",
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/background-image/react",
16
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md",
17
- "relPath": "packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md",
18
- "propComponents": [
19
- {
20
- "name": "BackgroundImage",
21
- "description": "",
22
- "props": [
23
- {
24
- "name": "className",
25
- "type": "string",
26
- "description": "Additional classes added to the background image."
27
- },
28
- {
29
- "name": "src",
30
- "type": "string",
31
- "description": "The URL or file path of the image for the background",
32
- "required": true
33
- }
34
- ]
35
- }
36
- ],
37
- "cssPrefix": [
38
- "pf-v6-c-background-image"
39
- ],
40
- "fullscreenExamples": [
41
- "Basic"
42
- ]
43
- };
44
- pageData.examples = {
45
- 'Basic': props =>
46
- <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { BackgroundImage } from '@patternfly/react-core';\n\nexport const BackgroundImageBasic: React.FunctionComponent = () => (\n <BackgroundImage src=\"/assets/images/pf-background.svg\" />\n);\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
47
-
48
- </Example>
49
- };
50
-
51
- const Component = () => (
52
- <React.Fragment>
53
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
54
- {`Examples`}
55
- </AutoLinkHeader>
56
- {React.createElement(pageData.examples["Basic"])}
57
- </React.Fragment>
58
- );
59
- Component.displayName = 'ComponentsBackgroundImageReactDocs';
60
- Component.pageData = pageData;
61
-
62
- export default Component;
@@ -1,97 +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 '../../../../../react-core/src/components/Badge/examples/./Badge.css';
5
- const pageData = {
6
- "id": "Badge",
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/badge/react",
17
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Badge/examples/Badge.md",
18
- "relPath": "packages/react-core/src/components/Badge/examples/Badge.md",
19
- "propComponents": [
20
- {
21
- "name": "Badge",
22
- "description": "",
23
- "props": [
24
- {
25
- "name": "children",
26
- "type": "React.ReactNode",
27
- "description": "content rendered inside the Badge",
28
- "defaultValue": "''"
29
- },
30
- {
31
- "name": "className",
32
- "type": "string",
33
- "description": "additional classes added to the Badge",
34
- "defaultValue": "''"
35
- },
36
- {
37
- "name": "isDisabled",
38
- "type": "boolean",
39
- "description": "Adds styling to the badge to indicate it is disabled",
40
- "defaultValue": "false"
41
- },
42
- {
43
- "name": "isRead",
44
- "type": "boolean",
45
- "description": "Adds styling to the badge to indicate it has been read",
46
- "defaultValue": "false"
47
- },
48
- {
49
- "name": "screenReaderText",
50
- "type": "string",
51
- "description": "Text announced by screen readers to indicate the current content/status of the badge."
52
- }
53
- ]
54
- }
55
- ],
56
- "cssPrefix": [
57
- "pf-v6-c-badge"
58
- ],
59
- "examples": [
60
- "Read",
61
- "Unread",
62
- "Disabled"
63
- ]
64
- };
65
- pageData.liveContext = {
66
- Fragment
67
- };
68
- pageData.relativeImports = "import 'react-core/src/components/Badge/examples/./Badge.css';"
69
- pageData.examples = {
70
- 'Read': props =>
71
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeRead: React.FunctionComponent = () => (\n <Fragment>\n <Badge key={1} isRead>\n 7\n </Badge>\n <Badge key={2} isRead>\n 24\n </Badge>\n <Badge key={3} isRead>\n 240\n </Badge>\n <Badge key={4} isRead>\n 999+\n </Badge>\n </Fragment>\n);\n","title":"Read","lang":"ts","className":""}}>
72
-
73
- </Example>,
74
- 'Unread': props =>
75
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeUnread: React.FunctionComponent = () => (\n <Fragment>\n <Badge key={1} screenReaderText=\"Unread Messages\">\n 7\n </Badge>\n <Badge key={2} screenReaderText=\"Unread Messages\">\n 24\n </Badge>\n <Badge key={3} screenReaderText=\"Unread Messages\">\n 240\n </Badge>\n <Badge key={4} screenReaderText=\"Unread Messages\">\n 999+\n </Badge>\n </Fragment>\n);\n","title":"Unread","lang":"ts","className":""}}>
76
-
77
- </Example>,
78
- 'Disabled': props =>
79
- <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Badge } from '@patternfly/react-core';\n\nexport const BadgeRead: React.FunctionComponent = () => (\n <Fragment>\n <Badge key={1} isDisabled isRead>\n 7\n </Badge>\n <Badge key={2} isDisabled isRead>\n 24\n </Badge>\n <Badge key={3} isDisabled>\n 240\n </Badge>\n <Badge key={4} isDisabled>\n 999+\n </Badge>\n </Fragment>\n);\n","title":"Disabled","lang":"ts","className":""}}>
80
-
81
- </Example>
82
- };
83
-
84
- const Component = () => (
85
- <React.Fragment>
86
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
87
- {`Examples`}
88
- </AutoLinkHeader>
89
- {React.createElement(pageData.examples["Read"])}
90
- {React.createElement(pageData.examples["Unread"])}
91
- {React.createElement(pageData.examples["Disabled"])}
92
- </React.Fragment>
93
- );
94
- Component.displayName = 'ComponentsBadgeReactDocs';
95
- Component.pageData = pageData;
96
-
97
- export default Component;
@@ -1,57 +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 { css } from '@patternfly/react-styles';
5
- import display from '@patternfly/react-styles/css/utilities/Display/display';
6
- import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
7
- import srcImportbasicstickybanner from './react-demos/basic-sticky-banner.png';
8
- import srcImporttopandbottombanner from './react-demos/top-and-bottom-banner.png';
9
- const pageData = {
10
- "id": "Banner",
11
- "section": "components",
12
- "subsection": "",
13
- "deprecated": false,
14
- "template": false,
15
- "beta": false,
16
- "demo": false,
17
- "newImplementationLink": false,
18
- "source": "react-demos",
19
- "tabName": null,
20
- "slug": "/components/banner/react-demos",
21
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Banner.md",
22
- "relPath": "packages/react-core/src/demos/Banner.md",
23
- "fullscreenExamples": [
24
- "Basic sticky banner",
25
- "Top and bottom banner"
26
- ]
27
- };
28
- pageData.liveContext = {
29
- Fragment,
30
- css,
31
- display,
32
- DashboardWrapper
33
- };
34
- pageData.examples = {
35
- 'Basic sticky banner': props =>
36
- <Example {...pageData} {...props} thumbnail={srcImportbasicstickybanner} {...{"code":"import { Fragment } from 'react';\nimport { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';\n\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport { css } from '@patternfly/react-styles';\nimport display from '@patternfly/react-styles/css/utilities/Display/display';\n\nexport const BannerBasicSticky: React.FunctionComponent = () => {\n const banner = (\n <Banner isSticky>\n <Flex\n justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n flexWrap={{ default: 'nowrap' }}\n >\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n\n <div className={css(display.displayNone, display.displayBlockOnLg)}>\n This message is sticky to the top of the page.\n </div>\n\n <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n </Flex>\n </Banner>\n );\n\n return (\n <Fragment>\n <DashboardWrapper banner={banner} breadcrumb={null}>\n <PageSection aria-labelledby=\"main-title\">\n <Content>\n <h1 id=\"main-title\">Main title</h1>\n <p>\n Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem (24px) because <br />\n of its relative line height of 1.5.\n </p>\n </Content>\n </PageSection>\n\n <PageSection aria-label=\"Cards gallery\">\n <Gallery hasGutter>\n {Array.from({ length: 30 }).map((_value, index) => (\n <GalleryItem key={index}>\n <Card>\n <CardBody>This is a card</CardBody>\n </Card>\n </GalleryItem>\n ))}\n </Gallery>\n </PageSection>\n </DashboardWrapper>\n </Fragment>\n );\n};\n","title":"Basic sticky banner","lang":"ts","isFullscreen":true,"className":""}}>
37
-
38
- </Example>,
39
- 'Top and bottom banner': props =>
40
- <Example {...pageData} {...props} thumbnail={srcImporttopandbottombanner} {...{"code":"import { Fragment } from 'react';\nimport {\n Banner,\n Card,\n CardBody,\n Flex,\n FlexItem,\n Gallery,\n GalleryItem,\n PageSection,\n Content\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport { css } from '@patternfly/react-styles';\nimport display from '@patternfly/react-styles/css/utilities/Display/display';\n\nexport const BannerTopBottom: React.FunctionComponent = () => (\n <Fragment>\n <Flex\n direction={{ default: 'column' }}\n flexWrap={{ default: 'nowrap' }}\n spaceItems={{ default: 'spaceItemsNone' }}\n style={{ height: '100%' }}\n >\n <FlexItem>\n <Banner isSticky>\n <Flex\n justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n flexWrap={{ default: 'nowrap' }}\n >\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n <div className={css(display.displayNone, display.displayBlockOnLg)}>\n This message is sticky to the top of the page.\n </div>\n <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n </Flex>\n </Banner>\n </FlexItem>\n <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>\n <DashboardWrapper breadcrumb={null}>\n <PageSection aria-labelledby=\"main-title\">\n <Content>\n <h1 id=\"main-title\">Main title</h1>\n <p>\n Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because <br />\n of it's relative line height of 1.5.\n </p>\n </Content>\n </PageSection>\n <PageSection aria-label=\"Cards gallery\">\n <Gallery hasGutter>\n {Array.from({ length: 30 }).map((_value, index) => (\n <GalleryItem key={index}>\n <Card key={index}>\n <CardBody>This is a card</CardBody>\n </Card>\n </GalleryItem>\n ))}\n </Gallery>\n </PageSection>\n </DashboardWrapper>\n </FlexItem>\n <FlexItem>\n <Banner isSticky>\n <Flex\n justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}\n flexWrap={{ default: 'nowrap' }}\n >\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>\n <div className={css(display.displayNone, display.displayBlockOnLg)}>\n This message is sticky to the bottom of the page.\n </div>\n <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>\n <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>\n </Flex>\n </Banner>\n </FlexItem>\n </Flex>\n </Fragment>\n);\n","title":"Top and bottom banner","lang":"ts","isFullscreen":true,"className":""}}>
41
-
42
- </Example>
43
- };
44
-
45
- const Component = () => (
46
- <React.Fragment>
47
- <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
48
- {`Demos`}
49
- </AutoLinkHeader>
50
- {React.createElement(pageData.examples["Basic sticky banner"])}
51
- {React.createElement(pageData.examples["Top and bottom banner"])}
52
- </React.Fragment>
53
- );
54
- Component.displayName = 'ComponentsBannerReactDemosDocs';
55
- Component.pageData = pageData;
56
-
57
- export default Component;