@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

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 (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/popover-quick-view.md ADDED
@@ -0,0 +1,385 @@
1
+ ---
2
+ component: fd-popover
3
+ title: Components/Quick View
4
+ category: Components
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/Components/quick-view/quick-view.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","bar","button","dialog","form-group","form-item","form-label","form-layout-grid","icon","input","link","popover","quick-view","text","title"]
10
+ relatedComponents: ["avatar","bar","button","dialog","form-group","form-item","form-label","form-layout-grid","icon","input","link","popover","quick-view","text","title"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.502Z
13
+ ---
14
+
15
+ # Components/Quick View
16
+
17
+ The quick view is similar to a popover but has a predefined structure, a fixed set of UI elements, and automatic UI rendering. Should be used in combination with the popover or dialog components
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `avatar.css`
24
+ - `bar.css`
25
+ - `button.css`
26
+ - `dialog.css`
27
+ - `form-group.css`
28
+ - `form-item.css`
29
+ - `form-label.css`
30
+ - `form-layout-grid.css`
31
+ - `icon.css`
32
+ - `input.css`
33
+ - `link.css`
34
+ - `popover.css`
35
+ - `quick-view.css`
36
+ - `text.css`
37
+ - `title.css`
38
+
39
+ ## Installation
40
+
41
+ ```bash
42
+ npm install fundamental-styles
43
+ ```
44
+
45
+ ```html
46
+ <!-- Include theme -->
47
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
48
+
49
+ <!-- Include component CSS -->
50
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
51
+
52
+ <!-- Include dependencies -->
53
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
54
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
55
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
56
+ <link href="node_modules/fundamental-styles/dist/dialog.css" rel="stylesheet">
57
+ <link href="node_modules/fundamental-styles/dist/form-group.css" rel="stylesheet">
58
+ <link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
59
+ <link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
60
+ <link href="node_modules/fundamental-styles/dist/form-layout-grid.css" rel="stylesheet">
61
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
62
+ <link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
63
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
64
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
65
+ <link href="node_modules/fundamental-styles/dist/quick-view.css" rel="stylesheet">
66
+ <link href="node_modules/fundamental-styles/dist/text.css" rel="stylesheet">
67
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
68
+ ```
69
+
70
+ ## Basic Usage
71
+
72
+ ```html
73
+ <div class="fd-popover" >
74
+ <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
75
+ <div class="fd-quick-view">
76
+ <div class="fd-bar fd-bar--header">
77
+ <div class="fd-bar__middle">
78
+ <div class="fd-bar__element">Company</div>
79
+ </div>
80
+
81
+ <div class="fd-quick-view__content">
82
+ <div class="fd-bar fd-bar--header-with-subheader">
83
+ <div class="fd-bar__left">
84
+ <span class="fd-avatar fd-avatar--s" role="presentation">
85
+ <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
86
+ </span>
87
+
88
+ <div class="fd-quick-view__subheader-text">
89
+ <h5 class="fd-title fd-title--h5">Company B</h5>
90
+
91
+ <div class="fd-quick-view__subtitle">
92
+ Michael Adams
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="fd-form-group" role="group">
99
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails">
100
+ <h4 class="fd-form-group__header-text" id="contactDetails">Contact Details</h4>
101
+ </div>
102
+ <div class="fd-form-item">
103
+ <label class="fd-form-label">Phone</label>
104
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
105
+ </div>
106
+ <div class="fd-form-item">
107
+ <label class="fd-form-label">Address</label>
108
+ <span class="fd-text">
109
+ 781 Main Street Anytown, SD 57401, USA
110
+ </span>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="fd-form-group" role="group">
115
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="mainContact">
116
+ <h4 class="fd-form-group__header-text" id="mainContact">Main Contact</h4>
117
+ </div>
118
+ <div class="fd-form-item">
119
+ <label class="fd-form-label">Name</label>
120
+ <span class="fd-text">Michael Adams</span>
121
+ </div>
122
+ <div class="fd-form-item">
123
+ <label class="fd-form-label">Mobile</label>
124
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
125
+ </div>
126
+ <div class="fd-form-item">
127
+ <label class="fd-form-label">Mobile</label>
128
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ </div>
137
+ ```
138
+
139
+ ## BEM Elements
140
+
141
+ This component uses the following BEM elements:
142
+
143
+ - `fd-popover__body`
144
+
145
+ ## Related Components
146
+
147
+ This component works with or depends on:
148
+
149
+ - `avatar`
150
+ - `bar`
151
+ - `button`
152
+ - `dialog`
153
+ - `form-group`
154
+ - `form-item`
155
+ - `form-label`
156
+ - `form-layout-grid`
157
+ - `icon`
158
+ - `input`
159
+ - `link`
160
+ - `popover`
161
+ - `quick-view`
162
+ - `text`
163
+ - `title`
164
+
165
+ ## Design Tokens
166
+
167
+ Key CSS variables used by this component:
168
+
169
+ - `--above`
170
+ - `--after`
171
+ - `--arrow`
172
+ - `--arrow-x-end`
173
+ - `--before`
174
+ - `--bottom`
175
+ - `--btp`
176
+ - `--center`
177
+ - `--display`
178
+ - `--dropdown`
179
+ - `--fdIcon_Button_Height`
180
+ - `--fdIcon_Button_Width`
181
+ - `--fdModal_BackgroundColor`
182
+ - `--fdPopover_Arrow_Size`
183
+ - `--fdPopover_Body_Border_Radius`
184
+
185
+ *...and 5 more*
186
+
187
+ ## Examples
188
+
189
+ ### Popover
190
+
191
+ QuickView component as popover
192
+
193
+ ```html
194
+ <div class="fd-popover" >
195
+ <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
196
+ <div class="fd-quick-view">
197
+ <div class="fd-bar fd-bar--header">
198
+ <div class="fd-bar__middle">
199
+ <div class="fd-bar__element">Company</div>
200
+ </div>
201
+
202
+ <div class="fd-quick-view__content">
203
+ <div class="fd-bar fd-bar--header-with-subheader">
204
+ <div class="fd-bar__left">
205
+ <span class="fd-avatar fd-avatar--s" role="presentation">
206
+ <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
207
+ </span>
208
+
209
+ <div class="fd-quick-view__subheader-text">
210
+ <h5 class="fd-title fd-title--h5">Company B</h5>
211
+
212
+ <div class="fd-quick-view__subtitle">
213
+ Michael Adams
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="fd-form-group" role="group">
220
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="contactDetails">
221
+ <h4 class="fd-form-group__header-text" id="contactDetails">Contact Details</h4>
222
+ </div>
223
+ <div class="fd-form-item">
224
+ <label class="fd-form-label">Phone</label>
225
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
226
+ </div>
227
+ <div class="fd-form-item">
228
+ <label class="fd-form-label">Address</label>
229
+ <span class="fd-text">
230
+ 781 Main Street Anytown, SD 57401, USA
231
+ </span>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="fd-form-group" role="group">
236
+ <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding" aria-labelledby="mainContact">
237
+ <h4 class="fd-form-group__header-text" id="mainContact">Main Contact</h4>
238
+ </div>
239
+ <div class="fd-form-item">
240
+ <label class="fd-form-label">Name</label>
241
+ <span class="fd-text">Michael Adams</span>
242
+ </div>
243
+ <div class="fd-form-item">
244
+ <label class="fd-form-label">Mobile</label>
245
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
246
+ </div>
247
+ <div class="fd-form-item">
248
+ <label class="fd-form-label">Mobile</label>
249
+ <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ </div>
258
+ ```
259
+
260
+ ### Dialog
261
+
262
+ QuickView component as dialog. Because of the dialog structure quick view title should be set within the dialog header but not in the quick view header
263
+
264
+ ```html
265
+ <section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
266
+ <div class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
267
+ <span class="fd-dialog__resize-handle"></span>
268
+ <header class="fd-dialog__header fd-bar fd-bar--header">
269
+ <div class="fd-bar__middle">
270
+ <div class="fd-bar__element" id="dialog-title">Company B</div>
271
+ </div>
272
+ </header>
273
+
274
+ <div class="fd-dialog__body">
275
+ <div class="fd-quick-view">
276
+ <div class="fd-quick-view__content">
277
+ <div class="fd-bar fd-bar--header-with-subheader">
278
+ <div class="fd-bar__left">
279
+ <span class="fd-avatar fd-avatar--s" role="presentation">
280
+ <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
281
+ </span>
282
+
283
+ <div class="fd-quick-view__subheader-text">
284
+ <h5 class="fd-title fd-title--h5">Company B</h5>
285
+
286
+ <div class="fd-quick-view__subtitle">
287
+ Michael Adams
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="fd-form-group" role="group">
294
+ <div class="fd-form-item">
295
+ <label class="fd-form-label">Start Date:</label>
296
+ <span class="fd-text">01/01/2015</span>
297
+ </div>
298
+ <div class="fd-form-item">
299
+ <label class="fd-form-label">End Date:</label>
300
+ <span class="fd-text">31/12/2015</span>
301
+ </div>
302
+ <div class="fd-form-item">
303
+ <label class="fd-form-label">Occurrence:</label>
304
+ <span class="fd-text">Weekly</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <footer class="fd-dialog__footer fd-bar fd-bar--footer">
312
+ <div class="fd-bar__right">
313
+ <div class="fd-bar__element">
314
+ <button class="fd-dialog__decisive-button fd-button fd-button--emphasized">
315
+ Send reminder
316
+ </button>
317
+ </div>
318
+ <div class="fd-bar__element">
319
+ <button class="fd-dialog__decisive-button fd-button">
320
+ Cancel
321
+ </button>
322
+ </div>
323
+ </div>
324
+ </footer>
325
+ </div>
326
+ </section>
327
+ ```
328
+
329
+ ### Without the header
330
+
331
+ QuickView without the header
332
+
333
+ ```html
334
+ <div class="fd-popover" >
335
+ <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
336
+ <div class="fd-quick-view">
337
+ <div class="fd-quick-view__content">
338
+ <div class="fd-bar fd-bar--header-with-subheader">
339
+ <div class="fd-bar__left">
340
+ <span class="fd-avatar fd-avatar--s" role="presentation">
341
+ <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
342
+ </span>
343
+
344
+ <div class="fd-quick-view__subheader-text">
345
+ <h5 class="fd-title fd-title--h5">Company B</h5>
346
+
347
+ <div class="fd-quick-view__subtitle">
348
+ Michael Adams
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="fd-form-group" role="group">
354
+ <div class="fd-form-item">
355
+ <label class="fd-form-label">Start Date:</label>
356
+ <span class="fd-text">01/01/2015</span>
357
+ </div>
358
+ <div class="fd-form-item">
359
+ <label class="fd-form-label">End Date:</label>
360
+ <span class="fd-text">31/12/2015</span>
361
+ </div>
362
+ <div class="fd-form-item">
363
+ <label class="fd-form-label">Occurrence:</label>
364
+ <span class="fd-text">Weekly</span>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ ```
373
+
374
+ ## Accessibility
375
+
376
+ - Use semantic HTML elements where appropriate
377
+ - Include proper ARIA attributes for interactive elements
378
+ - Ensure keyboard navigation support
379
+ - Provide adequate color contrast
380
+
381
+ ## Source
382
+
383
+ This documentation was automatically generated from: `packages/styles/stories/Components/quick-view/quick-view.stories.js`
384
+
385
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).