fix: set the avatar sizes for different mgt-person types with a single CSS prop (#2457)

set the avatar sizes for different avatar types without introducing a new variable for each type.
add a story for setting person avatar size

---------

Signed-off-by: Martin Musale <[email protected]>

Author: musale

packages/mgt-components/src/components/mgt-person/mgt-person.scss

@@ -13,6 +13,9 @@ $person-background-border-radius: var(--person-border-radius, 4px);
 
 // avatar sizes: 16,20,24,28,32,36,40,48,56,64,72,96,120,128
 $person-avatar-size: var(--person-avatar-size, 24px);
+$person-avatar-size-40: var(--person-avatar-size, 40px);
+$person-avatar-size-56: var(--person-avatar-size, 56px);
+$person-avatar-size-72: var(--person-avatar-size, 72px);
 $person-avatar-border: var(--person-avatar-border, none);
 $person-avatar-border-radius: var(--person-avatar-border-radius, 50%);
 $person-details-left-spacing: var(--person-details-left-spacing, 12px);
@@ -63,7 +66,10 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
     border-radius: $person-background-border-radius;
 
     &.small {
-      --person-avatar-size: 24px;
+      .avatar-wrapper {
+        min-width: $person-avatar-size;
+        height: $person-avatar-size;
+      }
     }
 
     &.noline,
@@ -76,24 +82,84 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
     }
 
     &.twolines {
-      --person-avatar-size: 40px;
+      .avatar-wrapper {
+        min-width: $person-avatar-size-40;
+        height: $person-avatar-size-40;
+
+        .initials,
+        .contact-icon {
+          font-size: calc(#{$person-avatar-size-40} * 0.4);
+        }
+
+        .presence-wrapper {
+          svg {
+            width: calc(#{$person-avatar-size-40} * 0.28);
+            height: calc(#{$person-avatar-size-40} * 0.28);
+          }
+        }
+      }
     }
 
     &.threelines,
     &.large {
-      --person-avatar-size: var(--person-avatar-size-3-lines, 56px);
+      .avatar-wrapper {
+        min-width: $person-avatar-size-56;
+        height: $person-avatar-size-56;
+
+        .initials,
+        .contact-icon {
+          font-size: calc(#{$person-avatar-size-56} * 0.4);
+        }
+
+        .presence-wrapper {
+          svg {
+            width: calc(#{$person-avatar-size-56} * 0.28);
+            height: calc(#{$person-avatar-size-56} * 0.28);
+          }
+        }
+      }
     }
 
     &.fourlines {
-      --person-avatar-size: 72px;
+      .avatar-wrapper {
+        width: $person-avatar-size-72;
+        height: $person-avatar-size-72;
+
+        .initials,
+        .contact-icon {
+          font-size: calc(#{$person-avatar-size-72} * 0.4);
+        }
+
+        .presence-wrapper {
+          svg {
+            width: calc(#{$person-avatar-size-72} * 0.28);
+            height: calc(#{$person-avatar-size-72} * 0.28);
+          }
+        }
+      }
     }
 
     &.vertical {
       flex-direction: column;
       justify-content: center;
       align-items: center;
 
-      --person-avatar-size: 72px;
+      .avatar-wrapper {
+        min-width: $person-avatar-size-72;
+        height: $person-avatar-size-72;
+
+        .initials,
+        .contact-icon {
+          font-size: calc(#{$person-avatar-size-72} * 0.4);
+        }
+
+        .presence-wrapper {
+          svg {
+            width: calc(#{$person-avatar-size-72} * 0.28);
+            height: calc(#{$person-avatar-size-72} * 0.28);
+          }
+        }
+      }
     }
 
     .avatar-wrapper {

stories/components/person/person.style.js

@@ -28,31 +28,35 @@ export const customCSSProperties = () => html`
 
       --person-line1-font-size: 20px;
       --person-line1-font-weight: 600;
-      --person-line1-text-color: red;
+      --person-line1-text-color: #f9b1b1;
       --person-line1-text-transform: capitalize;
       --person-line1-text-line-height: 22px;
 
       --person-line2-font-size: 18px;
       --person-line2-font-weight: 500;
-      --person-line2-text-color: orange;
+      --person-line2-text-color: #ffeac4;
       --person-line2-text-transform: full-width;
       --person-line2-text-line-height: 20px;
 
       --person-line3-font-size: 16px;
       --person-line3-font-weight: 400;
-      --person-line3-text-color: blue;
+      --person-line3-text-color: #e4e4e6;
       --person-line3-text-transform: uppercase;
       --person-line3-text-line-height: 18px;
 
       --person-line4-font-size: 14px;
       --person-line4-font-weight: 300;
-      --person-line4-text-color: black;
+      --person-line4-text-color: #ffd6d6;
       --person-line4-text-transform: lowercase;
       --person-line4-text-line-height: 16px;
 
       --person-details-spacing: 30px;
       --person-details-bottom-spacing: 20px;
     }
+
+    .vertical {
+      --person-avatar-size: 80px;
+    }
   </style>
 
   <script>
@@ -75,5 +79,5 @@ export const customCSSProperties = () => html`
 
   <mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>
   <br>
-  <mgt-person class="person" person-query="me" view="fourlines" avatar-type="initials" id="dnd" show-presence vertical-layout></mgt-person>
+  <mgt-person class="person vertical" person-query="me" view="fourlines" avatar-type="initials" id="dnd" show-presence vertical-layout></mgt-person>
 `;