add person card with presence sample to mgt.dev (#498)

Co-authored-by: Elise Yang <[email protected]>

Author: elisenyang

stories/components/personCard.stories.js

@@ -61,3 +61,29 @@ export const personCardInheritDetails = () => html`
     (Hover on person to view Person Card)
   </div>
 `;
+
+export const personCardWithPresence = () => html`
+<script>
+  const available = {
+    activity: 'Available',
+    availability: 'Available',
+    id: null
+  }; 
+  
+  document.getElementById('with-presence').personPresence = available;
+</script>
+<style>
+  .note {
+    margin: 2em 0 0 1em;
+    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
+      'Helvetica Neue', sans-serif;
+    color: #323130;
+    font-size: 12px;
+  }
+</style>
+<mgt-person id="with-presence" person-query="me" person-card="hover" view="twoLines" show-presence></mgt-person>
+
+<div class="note">
+  (Hover on person to view Person Card)
+</div>
+`;