@asd20/ui 3.2.850 → 3.2.852

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.850",
+  "version": "3.2.852",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -3,7 +3,9 @@
     <div class="photostrip"></div>
 
     <section class="asd20-primary-header" aria-label="Primary message">
-      <p v-if="userGivenName" class="greeting">Hi, {{ userGivenName }}.</p>
+      <client-only>
+        <p v-if="userGivenName && userGivenName !== ''" class="greeting">Hi, {{ userGivenName }}.</p>
+      </client-only>
       <asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
       <div class="image-container">
         <img
@@ -96,8 +98,8 @@ export default {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
   background: var(--website-homepage-header__background-color)
     var(--website-homepage-header__background-style);
   background-size: cover;
@@ -106,7 +108,6 @@ export default {
   padding: space(3) space(1) space(3) space(1);
   // margin-top: space(1);
   .greeting {
-    align-self: start;
     font-family: var(--website-typography__font-family-headlines);
     @include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
     color: var(--website-homepage-header__foreground-color);

package/src/mixins/userProfileMixin.js

@@ -21,21 +21,22 @@ export default {
   mixins: [userProfileMixin, userGroupsMixin],
   computed: {
     userDisplayName() {
-      return this._userProfile.displayName || 'Guest'
+      return (this._userProfile && this._userProfile.displayName) || ''
     },
     userGivenName() {
-      return this._userProfile.givenName || 'User'
+      return (this._userProfile && this._userProfile.givenName) || ''
     },
     userJobTitle() {
-      return this._userProfile.jobTitle || 'N/A'
+      return (this._userProfile && this._userProfile.jobTitle) || ''
     },
     userOfficeLocation() {
-      return this._userProfile.officeLocation || 'Unknown'
+      return (this._userProfile && this._userProfile.officeLocation) || ''
     },
     userGroupsList() {
-      return this._userGroups.length > 0
+      return (this._userGroups && this._userGroups.length > 0)
         ? this._userGroups.map(group => group.displayName).join(', ')
         : 'No groups assigned'
     },
-  },
+  }
+  
 }