Merge pull request #8384 from infor-design/8374-avatar-classes

8374 - Add avatar classes for module nav
infor-design · Jan 25, 2024 · d2b93fd · d2b93fd
2 parents 1dbd221 + 7bad663
commit d2b93fd
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 67 deletions.
diff --git a/app/views/components/images/example-avatar.html b/app/views/components/images/example-avatar.html
@@ -0,0 +1,59 @@
+<div class="row top-padding">
+    <div class="six columns">
+      <div class="avatar round">MN</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large round">MN</div>
+      <br /><br />
+      <div class="avatar">AC</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large">Ac</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <br /><br />
+      <div class="avatar azure05">AC</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large azure05">Ac</div>
+      <br /><br />
+      <div class="avatar three-char">mon</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large three-char">mon</div>
+      <br /><br />
+      <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+      <br/><br/>
+
+      <div class="image-user-status">
+        <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-user-status-available"></use>
+        </svg>
+      </div>
+      <br/><br/>
+
+      <div class="image-user-status">
+        <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-user-status-away"></use>
+        </svg>
+      </div>
+      <br/><br/>
+
+      <div class="image-user-status">
+        <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-user-status-busy"></use>
+        </svg>
+      </div>
+      <br/><br/>
+
+      <div class="image-user-status">
+        <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-user-status-do-not-disturb"></use>
+        </svg>
+      </div>
+      <br/><br/>
+
+      <div class="image-user-status">
+        <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-user-status-unknown"></use>
+        </svg>
+      </div>
+      <br/><br/>
+    </div>
+  </div>
+</div>
diff --git a/app/views/components/images/example-photos.html b/app/views/components/images/example-photos.html
diff --git a/app/views/components/module-nav/example-hide-show-sections.html b/app/views/components/module-nav/example-hide-show-sections.html
@@ -289,12 +289,15 @@
         <!-- Guest area is also separate and permanently "pinned" to the bottom -->
         <div class="module-nav-guest accordion-section">
           <a href="#" class="module-nav-guest-link">
-            <svg class="icon-guest" focusable="false" aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none">
-              <circle cx="16" cy="16" r="15.36" fill="#39A9AA" />
-              <path
-                d="M12.5028 20.9443C11.6221 20.9443 10.8388 20.7395 10.1527 20.3299C9.46662 19.9101 8.92902 19.311 8.5399 18.5328C8.15078 17.7546 7.95622 16.8176 7.95622 15.7219C7.95622 14.6365 8.1559 13.7046 8.55526 12.9264C8.95462 12.1482 9.50246 11.5491 10.1988 11.1293C10.8951 10.7094 11.6887 10.4995 12.5796 10.4995C13.2759 10.4995 13.8596 10.6326 14.3306 10.8989C14.8119 11.1549 15.1959 11.4365 15.4826 11.7437L14.7761 12.5731C14.5201 12.3069 14.2231 12.0816 13.8852 11.8973C13.5473 11.713 13.1223 11.6208 12.6103 11.6208C11.9345 11.6208 11.3457 11.7898 10.8439 12.1277C10.3421 12.4554 9.95302 12.9213 9.67654 13.5254C9.4103 14.1296 9.27718 14.8515 9.27718 15.6912C9.27718 16.961 9.5639 17.9696 10.1373 18.7171C10.721 19.4544 11.5505 19.823 12.6257 19.823C12.9841 19.823 13.3271 19.7718 13.6548 19.6694C13.9825 19.5568 14.2436 19.4083 14.4381 19.224V16.5974H12.3031V15.5376H15.6055V19.777C15.2881 20.1149 14.858 20.3965 14.3153 20.6218C13.7828 20.8368 13.1786 20.9443 12.5028 20.9443ZM20.8154 20.9443C20.1089 20.9443 19.4535 20.8112 18.8493 20.545C18.2452 20.2685 17.7229 19.905 17.2826 19.4544L18.0506 18.5635C18.409 18.9424 18.8289 19.2496 19.3101 19.4851C19.8017 19.7104 20.3085 19.823 20.8308 19.823C21.4964 19.823 22.0135 19.6746 22.3821 19.3776C22.7508 19.0704 22.9351 18.671 22.9351 18.1795C22.9351 17.8314 22.8583 17.5549 22.7047 17.3501C22.5613 17.1453 22.3617 16.9712 22.1057 16.8278C21.8599 16.6845 21.5783 16.5411 21.2609 16.3978L19.817 15.768C19.4996 15.6349 19.1821 15.4608 18.8647 15.2458C18.5575 15.0307 18.2964 14.7542 18.0813 14.4163C17.8765 14.0784 17.7741 13.6637 17.7741 13.1722C17.7741 12.6602 17.9073 12.2045 18.1735 11.8051C18.45 11.3955 18.8289 11.0781 19.3101 10.8528C19.7914 10.6173 20.3341 10.4995 20.9383 10.4995C21.5425 10.4995 22.1005 10.6173 22.6125 10.8528C23.1245 11.0781 23.5597 11.375 23.9181 11.7437L23.2269 12.5731C22.9197 12.2762 22.5767 12.0458 22.1978 11.8819C21.8292 11.7078 21.4093 11.6208 20.9383 11.6208C20.3751 11.6208 19.9194 11.7539 19.5713 12.0202C19.2333 12.2864 19.0644 12.6448 19.0644 13.0954C19.0644 13.4128 19.1463 13.679 19.3101 13.8941C19.4842 14.0989 19.6993 14.2678 19.9553 14.401C20.2113 14.5341 20.4724 14.657 20.7386 14.7696L22.1671 15.384C22.5562 15.5478 22.9044 15.7475 23.2116 15.983C23.529 16.2083 23.7799 16.4899 23.9642 16.8278C24.1485 17.1555 24.2407 17.5702 24.2407 18.072C24.2407 18.6045 24.1025 19.0909 23.826 19.5312C23.5495 19.9613 23.1553 20.3043 22.6433 20.5603C22.1313 20.8163 21.522 20.9443 20.8154 20.9443Z"
-                fill="white" />
-            </svg>
+            <!--
+              <svg class="icon-guest" focusable="false" aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <circle cx="16" cy="16" r="15.36" fill="#39A9AA" />
+                <path
+                  d="M12.5028 20.9443C11.6221 20.9443 10.8388 20.7395 10.1527 20.3299C9.46662 19.9101 8.92902 19.311 8.5399 18.5328C8.15078 17.7546 7.95622 16.8176 7.95622 15.7219C7.95622 14.6365 8.1559 13.7046 8.55526 12.9264C8.95462 12.1482 9.50246 11.5491 10.1988 11.1293C10.8951 10.7094 11.6887 10.4995 12.5796 10.4995C13.2759 10.4995 13.8596 10.6326 14.3306 10.8989C14.8119 11.1549 15.1959 11.4365 15.4826 11.7437L14.7761 12.5731C14.5201 12.3069 14.2231 12.0816 13.8852 11.8973C13.5473 11.713 13.1223 11.6208 12.6103 11.6208C11.9345 11.6208 11.3457 11.7898 10.8439 12.1277C10.3421 12.4554 9.95302 12.9213 9.67654 13.5254C9.4103 14.1296 9.27718 14.8515 9.27718 15.6912C9.27718 16.961 9.5639 17.9696 10.1373 18.7171C10.721 19.4544 11.5505 19.823 12.6257 19.823C12.9841 19.823 13.3271 19.7718 13.6548 19.6694C13.9825 19.5568 14.2436 19.4083 14.4381 19.224V16.5974H12.3031V15.5376H15.6055V19.777C15.2881 20.1149 14.858 20.3965 14.3153 20.6218C13.7828 20.8368 13.1786 20.9443 12.5028 20.9443ZM20.8154 20.9443C20.1089 20.9443 19.4535 20.8112 18.8493 20.545C18.2452 20.2685 17.7229 19.905 17.2826 19.4544L18.0506 18.5635C18.409 18.9424 18.8289 19.2496 19.3101 19.4851C19.8017 19.7104 20.3085 19.823 20.8308 19.823C21.4964 19.823 22.0135 19.6746 22.3821 19.3776C22.7508 19.0704 22.9351 18.671 22.9351 18.1795C22.9351 17.8314 22.8583 17.5549 22.7047 17.3501C22.5613 17.1453 22.3617 16.9712 22.1057 16.8278C21.8599 16.6845 21.5783 16.5411 21.2609 16.3978L19.817 15.768C19.4996 15.6349 19.1821 15.4608 18.8647 15.2458C18.5575 15.0307 18.2964 14.7542 18.0813 14.4163C17.8765 14.0784 17.7741 13.6637 17.7741 13.1722C17.7741 12.6602 17.9073 12.2045 18.1735 11.8051C18.45 11.3955 18.8289 11.0781 19.3101 10.8528C19.7914 10.6173 20.3341 10.4995 20.9383 10.4995C21.5425 10.4995 22.1005 10.6173 22.6125 10.8528C23.1245 11.0781 23.5597 11.375 23.9181 11.7437L23.2269 12.5731C22.9197 12.2762 22.5767 12.0458 22.1978 11.8819C21.8292 11.7078 21.4093 11.6208 20.9383 11.6208C20.3751 11.6208 19.9194 11.7539 19.5713 12.0202C19.2333 12.2864 19.0644 12.6448 19.0644 13.0954C19.0644 13.4128 19.1463 13.679 19.3101 13.8941C19.4842 14.0989 19.6993 14.2678 19.9553 14.401C20.2113 14.5341 20.4724 14.657 20.7386 14.7696L22.1671 15.384C22.5562 15.5478 22.9044 15.7475 23.2116 15.983C23.529 16.2083 23.7799 16.4899 23.9642 16.8278C24.1485 17.1555 24.2407 17.5702 24.2407 18.072C24.2407 18.6045 24.1025 19.0909 23.826 19.5312C23.5495 19.9613 23.1553 20.3043 22.6433 20.5603C22.1313 20.8163 21.522 20.9443 20.8154 20.9443Z"
+                  fill="white" />
+              </svg>
+            -->
+            <div class="avatar round">GS</div>
             <div class="module-nav-guest-text">
               <span class="module-nav-guest-title">Guest</span>
               <span class="module-nav-guest-subtext">Create an account to save your settings.</span>

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ## v4.92.0 Features
 
+- `[Avatar]` Added a new `avatar` class that can show initials and can be used in the module nav guest area. ([#8374](https://github.com/infor-design/enterprise/issues/8374))
 - `[Calendar]` Added feature of updating legends and disabled dates on before render of month. ([#8248](https://github.com/infor-design/enterprise/issues/8248))
 - `[Datagrid]` Added option to disable tooltip in columns. ([#8252](https://github.com/infor-design/enterprise/issues/8252))
 - `[Header]` Added an example configuration with both a hamburger and a back button. ([#8327](https://github.com/infor-design/enterprise/issues/8327))

diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss
@@ -534,6 +534,10 @@ $card-header-section: '.card-header-section', '.widget-header-section';
     &:hover .icon {
       color: $card-actions-toolbar-button-hover-color !important;
     }
+
+    &.go-back {
+      margin-top: -2px;
+    }
   }
 
   &:not(.has-toolbar) {

diff --git a/src/components/images/_images.scss b/src/components/images/_images.scss
@@ -74,6 +74,10 @@ $images-size: (
   height: 48px;
   width: 48px;
 
+  &.round {
+    border-radius: 50%;
+  }
+
   &:focus {
     @include focus-state();
   }
@@ -93,24 +97,53 @@ $images-size: (
 }
 
 // Initials for when photo is absent
-.image-initials {
-  background: $ids-color-palette-amethyst-50;
+.image-initials,
+.avatar {
+  background: $ids-color-palette-emerald-50;
   border: 1px solid transparent; // to prevent jump on focus
-  border-radius: 50%;
+  border-radius: 8px;
   color: $ids-color-palette-white;
   display: inline-block;
-  font-size: $ids-size-font-lg;
-  height: 4.8rem;
-  line-height: 4.8rem;
+  font-size: 14px;
+  font-weight: 600;
+  height: 32px;
+  line-height: 30px;
   text-align: center;
+  text-transform: uppercase;
   vertical-align: middle;
-  width: 4.8rem;
+  width: 32px;
+  user-select: none;
+
+  &.three-char {
+    text-transform: capitalize;
+  }
+
+  &.large {
+    height: 48px;
+    font-size: 20px;
+    line-height: 48px;
+    width: 48px;
+  }
+
+  &.round {
+    border-radius: 50%;
+  }
 
   &:focus {
     @include focus-state();
   }
 }
 
+@each $name in $color-names {
+  $i: index($color-names, $name);
+  $color: nth($color-vars, $i);
+
+  //Classes for Tags
+  .avatar.#{$name} {
+    background: nth($color-vars, $i);
+  }
+}
+
 .actionable {
   cursor: pointer;
 

diff --git a/src/components/images/readme.md b/src/components/images/readme.md
@@ -8,8 +8,8 @@ demo:
   pages:
   - name: A Pattern showing a toolbar over a list of Images
     slug: example-image-list
-  - name: People Photos and initials
-    slug: example-photos
+  - name: People, avatars and initials
+    slug: example-avatar
 ---
 
 The image component is a CSS only component to handle placeholder images, empty images, and the various sizes of images that can appear in an application. Placeholder images can be in sizes `image-lg`, `image-md`, and `image-sm`.
@@ -27,6 +27,19 @@ This example shows how to invoke a small sized placeholder image.
 </div>
 ```
 
+This example shows how to create an initials avatar
+
+```html
+<div class="avatar azure05">AC</div>
+<div class="avatar large azure05">Ac</div>
+```
+
+For the avatar class you can use the following classes.
+
+- `round` To make it round, or else it has a small border radius. The top level items in module nav should have the border radius. The guest area and other legacy areas should use the fully round one.
+- `none` or `large` To adjust the size to be larger add class `large`. Normal size is used in module nav and the app nav area and other legacy areas should use the `large` one.
+- `<colorname><0-9>` To set the background color, the color name is from the colors palette. For example `azure05, emerald05` depending on contrast should avoid 0-4 and use 5-8 range. When in doubt follow the designs.
+
 ## Accessibility
 
 - For images always use an `alt` tag, which is read by screen readers

diff --git a/src/components/module-nav/module-nav.guest.scss b/src/components/module-nav/module-nav.guest.scss
@@ -24,7 +24,8 @@
 .mode-expanded .module-nav-guest a {
   justify-content: flex-start;
 
-  svg {
+  svg,
+  .avatar {
     margin-inline-start: 4px;
   }
 }