From 0e1b08e6e75f1143204c75d4c2a9f3ae9844d069 Mon Sep 17 00:00:00 2001
From: IB002 <132930816+IB002@users.noreply.github.com>
Date: Fri, 14 Jul 2023 12:20:33 -0400
Subject: [PATCH] docs(styles): quick view styles & examples [ci visual]
 (#4685)

* fix(styles): added margin bot to improve clarity

* chore: moved margin to separate div element [ci visual]
---
 .../quick-view/no-header.example.html         |  61 +++++-----
 .../quick-view/popover.example.html           | 111 +++++++++---------
 2 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/packages/styles/stories/Components/quick-view/no-header.example.html b/packages/styles/stories/Components/quick-view/no-header.example.html
index 4f96281bab..73bff4633e 100644
--- a/packages/styles/stories/Components/quick-view/no-header.example.html
+++ b/packages/styles/stories/Components/quick-view/no-header.example.html
@@ -1,38 +1,41 @@
-<div class="fd-popover">
-    <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
-        <div class="fd-quick-view">
-            <div class="fd-quick-view__content">
-                <div class="fd-bar fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <span class="fd-avatar fd-avatar--s" role="presentation">
-                            <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
-                        </span>
 
-                        <div class="fd-quick-view__subheader-text">
-                            <h5 class="fd-title fd-title--h5">Company B</h5>
-
-                            <div class="fd-quick-view__subtitle">
-                                Michael Adams
+<div style="margin-bottom: 300px;">
+    <div class="fd-popover" >
+        <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
+            <div class="fd-quick-view">
+                <div class="fd-quick-view__content">
+                    <div class="fd-bar fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <span class="fd-avatar fd-avatar--s" role="presentation">
+                                <i role="presentation" class="fd-avatar__icon sap-icon--camera"></i>
+                            </span>
+    
+                            <div class="fd-quick-view__subheader-text">
+                                <h5 class="fd-title fd-title--h5">Company B</h5>
+    
+                                <div class="fd-quick-view__subtitle">
+                                    Michael Adams
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Start Date:</label>
-                        <span class="fd-text">01/01/2015</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">End Date:</label>
-                        <span class="fd-text">31/12/2015</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Occurrence:</label>
-                        <span class="fd-text">Weekly</span>
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Start Date:</label>
+                            <span class="fd-text">01/01/2015</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">End Date:</label>
+                            <span class="fd-text">31/12/2015</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Occurrence:</label>
+                            <span class="fd-text">Weekly</span>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </div>    
 </div>
diff --git a/packages/styles/stories/Components/quick-view/popover.example.html b/packages/styles/stories/Components/quick-view/popover.example.html
index e22adcdd2a..7fc1a3f551 100644
--- a/packages/styles/stories/Components/quick-view/popover.example.html
+++ b/packages/styles/stories/Components/quick-view/popover.example.html
@@ -1,65 +1,68 @@
-<div class="fd-popover">
-    <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
-        <div class="fd-quick-view">
-            <div class="fd-bar fd-bar--header">
-                <div class="fd-bar__middle">
-                    <div class="fd-bar__element">Company</div>
+<div style="margin-bottom: 500px;">
+    <div class="fd-popover" >
+        <div class="fd-popover__body" aria-hidden="false" id="popoverA1">
+            <div class="fd-quick-view">
+                <div class="fd-bar fd-bar--header">
+                    <div class="fd-bar__middle">
+                        <div class="fd-bar__element">Company</div>
+                    </div>
                 </div>
-            </div>
-
-            <div class="fd-quick-view__content">
-                <div class="fd-bar fd-bar--header-with-subheader">
-                    <div class="fd-bar__left">
-                        <span class="fd-avatar fd-avatar--s" role="presentation">
-                            <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
-                        </span>
-
-                        <div class="fd-quick-view__subheader-text">
-                            <h5 class="fd-title fd-title--h5">Company B</h5>
-
-                            <div class="fd-quick-view__subtitle">
-                                Michael Adams
+    
+                <div class="fd-quick-view__content">
+                    <div class="fd-bar fd-bar--header-with-subheader">
+                        <div class="fd-bar__left">
+                            <span class="fd-avatar fd-avatar--s" role="presentation">
+                                <i role="presentation" class="fd-avatar__icon sap-icon--building"></i>
+                            </span>
+    
+                            <div class="fd-quick-view__subheader-text">
+                                <h5 class="fd-title fd-title--h5">Company B</h5>
+    
+                                <div class="fd-quick-view__subtitle">
+                                    Michael Adams
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-group__header" aria-labelledby="contactDetails">
-                        <h1 class="fd-form-group__header-text" id="contactDetails">Contact Details</h1>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Phone</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Address</label>
-                        <span class="fd-text">
-                            781 Main Street <br>
-                            Anytown, SD 57401, USA
-                        </span>
-                    </div>
-                </div>
-
-                <div class="fd-form-group" role="group">
-                    <div class="fd-form-group__header" aria-labelledby="mainContact">
-                        <h1 class="fd-form-group__header-text" id="mainContact">Main Contact</h1>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Name</label>
-                        <span class="fd-text">Michael Adams</span>
-                    </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Mobile</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+    
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-group__header" aria-labelledby="contactDetails">
+                            <h1 class="fd-form-group__header-text" id="contactDetails">Contact Details</h1>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Phone</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Address</label>
+                            <span class="fd-text">
+                                781 Main Street <br>
+                                Anytown, SD 57401, USA
+                            </span>
+                        </div>
                     </div>
-                    <div class="fd-form-item">
-                        <label class="fd-form-label">Mobile</label>
-                        <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+    
+                    <div class="fd-form-group" role="group">
+                        <div class="fd-form-group__header" aria-labelledby="mainContact">
+                            <h1 class="fd-form-group__header-text" id="mainContact">Main Contact</h1>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Name</label>
+                            <span class="fd-text">Michael Adams</span>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Mobile</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
+                        <div class="fd-form-item">
+                            <label class="fd-form-label">Mobile</label>
+                            <a class="fd-link" href="tel:+1 605 555 5555"><span class="fd-link__content">+1 605 555 5555</span></a>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    
 </div>