feat: add dedicated icon for business phone (#1988)

Add title and aria attributes for contact parts.
Code formatting as required by prettier.

Co-authored-by: Gavin Barron <[email protected]>

Author: nmtoblum

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts

@@ -92,7 +92,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
       title: this.strings.chatTitle
     },
     businessPhone: {
-      icon: getSvg(SvgIcon.CellPhone, '#929292'),
+      icon: getSvg(SvgIcon.Phone, '#929292'),
       onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
       showCompact: true,
       title: this.strings.businessPhoneTitle
@@ -263,13 +263,15 @@ export class MgtPersonCardContact extends BasePersonCardSection {
         `;
 
     return html`
-      <div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)}  tabindex="0">
-        <div class="part__icon">${part.icon}</div>
+      <div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)} tabindex="0">
+        <div class="part__icon" aria-label=${part.title} title=${part.title}>${part.icon}</div>
         <div class="part__details">
           <div class="part__title">${part.title}</div>
-          <div class="part__value">${valueTemplate}</div>
+          <div class="part__value" title=${part.title}>${valueTemplate}</div>
         </div>
-        <div class="part__copy">
+        <div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
+      this.strings.copyToClipboardButton
+    }>
           ${getSvg(SvgIcon.Copy)}
         </div>
       </div>

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts

@@ -13,5 +13,6 @@ export const strings = {
   cellPhoneTitle: 'Mobile Phone',
   departmentTitle: 'Department',
   titleTitle: 'Title',
-  officeLocationTitle: 'Office Location'
+  officeLocationTitle: 'Office Location',
+  copyToClipboardButton: 'Copy to clipboard'
 };

packages/mgt-components/src/utils/SvgHelper.ts

@@ -72,6 +72,11 @@ export enum SvgIcon {
    */
   Copy,
 
+  /**
+   * A phone handset
+   */
+  Phone,
+
   /**
    * A cellphone
    */
@@ -305,6 +310,13 @@ export function getSvg(svgIcon: SvgIcon, color?: string) {
         </svg>
       `;
 
+    case SvgIcon.Phone:
+      return html`
+        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" fill="none">
+            <path d="M1607 1213q44 0 84 16t72 48l220 220q31 31 47 71t17 85q0 44-16 84t-48 72l-14 14q-54 54-99 96t-94 70-109 44-143 15q-125 0-257-39t-262-108-256-164-237-207-206-238-162-256T38 775 0 523q0-83 14-142t43-108 70-93 96-99l16-16q31-31 71-48t85-17q44 0 84 17t72 48l220 220q31 31 47 71t17 85q0 44-15 78t-37 63-48 51-49 45-37 44-15 49q0 38 27 65l551 551q27 27 65 27 26 0 48-15t45-37 45-48 51-49 62-37 79-15zm-83 707q72 0 120-13t88-39 76-64 85-86q27-27 27-65 0-18-14-42t-38-52-51-55-56-54-51-47-37-35q-27-27-66-27-26 0-48 15t-44 37-45 48-52 49-62 37-79 15q-44 0-84-16t-72-48L570 927q-31-31-47-71t-17-85q0-44 15-78t37-63 48-51 49-46 37-44 15-48q0-39-27-66-13-13-34-36t-47-51-54-56-56-52-51-37-43-15q-38 0-65 27l-85 85q-37 37-64 76t-40 87-14 120q0 112 36 231t101 238 153 234 192 219 219 190 234 150 236 99 226 36z" fill="${color}"></path>
+        </svg>
+      `;
+
     case SvgIcon.CellPhone:
       return html`
         <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -480,17 +492,17 @@ export function getSvg(svgIcon: SvgIcon, color?: string) {
     case SvgIcon.DragFile:
       return html`
     <svg width="13" height="16" xmlns="http://www.w3.org/2000/svg">
-      <path 
-        d="m0,1.00189c0,-0.8451 0.983,-1.3091 1.636,-0.772l11.006,9.0622c0.724,0.5964 0.302,1.772 -0.636,1.772l-5.592,0c-0.435,0 -0.849,0.1892 -1.134,0.5185l-3.524,4.0725c-0.606,0.7003 -1.756,0.2717 -1.756,-0.6544l0,-13.9988zm12.006,9.0622l-11.006,-9.0622l0,13.9988l3.524,-4.0724c0.475,-0.5488 1.164,-0.8642 1.89,-0.8642l5.592,0z" 
+      <path
+        d="m0,1.00189c0,-0.8451 0.983,-1.3091 1.636,-0.772l11.006,9.0622c0.724,0.5964 0.302,1.772 -0.636,1.772l-5.592,0c-0.435,0 -0.849,0.1892 -1.134,0.5185l-3.524,4.0725c-0.606,0.7003 -1.756,0.2717 -1.756,-0.6544l0,-13.9988zm12.006,9.0622l-11.006,-9.0622l0,13.9988l3.524,-4.0724c0.475,-0.5488 1.164,-0.8642 1.89,-0.8642l5.592,0z"
       />
     </svg>
   `;
 
     case SvgIcon.Cancel:
       return html`
     <svg class="cancel-icon" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
-      <path 
-      d="m5.52795,4.92946l4.37418,4.36141l-0.57055,0.56806l-4.38052,-4.35509l-4.38052,4.35509l-0.57055,-0.56806l4.37418,-4.36141l-4.37418,-4.36141l0.57055,-0.56806l4.38052,4.35509l4.38052,-4.35509l0.57055,0.56806l-4.37418,4.36141z"
+      <path
+        d="m5.52795,4.92946l4.37418,4.36141l-0.57055,0.56806l-4.38052,-4.35509l-4.38052,4.35509l-0.57055,-0.56806l4.37418,-4.36141l-4.37418,-4.36141l0.57055,-0.56806l4.38052,4.35509l4.38052,-4.35509l0.57055,0.56806l-4.37418,4.36141z"
       />
     </svg>
   `;