@asd20/ui 3.2.849 → 3.2.851

package/package.json

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

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

@@ -3,6 +3,7 @@
     <div class="photostrip"></div>
 
     <section class="asd20-primary-header" aria-label="Primary message">
+      <p v-if="userGivenName && userGivenName !== ''" class="greeting">Hi, {{ userGivenName }}.</p>
       <asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
       <div class="image-container">
         <img
@@ -38,6 +39,8 @@ export default {
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
     detailLinkLabel: { type: String, default: '' },
+    userGivenName: { type: String, default: '' },
+    userGroupsList: { type: String, default: '' },
   },
   computed: {
     mq() {
@@ -93,8 +96,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;
@@ -102,10 +105,16 @@ export default {
   color: var(--color__primary);
   padding: space(3) space(1) space(3) space(1);
   // margin-top: space(1);
-
+  .greeting {
+    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);
+    animation: small_slide_left 1.25s ease-in-out 0.5s both;
+    margin: 0;
+  }
   .asd20-messaging {
     margin-right: 0;
-    padding-top: space(2);
+    padding-top: space(1);
     color: white !important;
   }
   &::v-deep .asd20-messaging__heading {
@@ -192,12 +201,25 @@ export default {
   }
 }
 
+@keyframes small_slide_left {
+  from {
+    opacity: 0;
+    margin-left: 100px;
+    margin-right: -100px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 @media (min-width: 1024px) {
   .photostrip {
     height: 40vh;
   }
   .asd20-primary-header {
-    flex-direction: row;
+    // flex-direction: row;
     justify-content: space-between;
     // background-size: auto 50%;
     padding: space(3) space(2) space(3) space(2);

package/src/components/templates/Asd20DistrictHomeTemplate/index.stories.js

@@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/vue'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
 
 import mockPageMixin from '../../../mixins/mockPageMixin'
+import userProfileMixin from '../../../mixins/userProfileMixin'
+
 
 import Asd20DistrictHomeTemplate from '.'
 import pageQueryResult from '../../../data/page-queries/home-page-query-result.json'
@@ -12,12 +14,33 @@ const info = {
 }
 
 const wrapper = {
-  mixins: [mockPageMixin],
+  mixins: [mockPageMixin, userProfileMixin],
   components: {
     Asd20DistrictHomeTemplate,
   },
+  props: {
+    // Mock props for userProfile and userGroups
+    userProfile: {
+      type: Object,
+      default: () => ({
+        displayName: 'John Doe',
+        givenName: 'John',
+        jobTitle: 'Software Developer',
+        officeLocation: 'HQ',
+      }),
+    },
+    userGroups: {
+      type: Array,
+      default: () => [
+        { displayName: 'Admin Group' },
+        { displayName: 'Developers Group' },
+      ],
+    },
+  },
 
-  data: () => ({ pageQueryResult }),
+  data: () => ({
+    pageQueryResult
+  }),
 
   computed: {
     activeNotificationsByType() {
@@ -46,6 +69,8 @@ stories.add(
       v-bind="templateProps"
       :menu-open.sync="menuOpen"
       :search-open.sync="searchOpen"
+      :userProfile="userProfile"
+      :userGroups="userGroups" 
 
       @announcements-in-view="loadAnnouncements"
       @stories-in-view="loadStories"

package/src/components/templates/Asd20DistrictHomeTemplate/index.vue

@@ -87,7 +87,12 @@
         </template>
       </section>
 
-      <asd20-primary-header v-if="messages.length > 0" :messages="messages" />
+      <asd20-primary-header
+        v-if="messages.length > 0"
+        :messages="messages"
+        :userGivenName="userGivenName"
+        :userGroupsList="userGroupsList"
+      />
       <asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
       <asd20-tertiary-header v-if="messages.length > 2" :messages="messages" />
 
@@ -151,18 +156,12 @@ import Asd20PrimaryHeader from '../../../components/organisms/Asd20PrimaryHeader
 import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
 import Asd20TertiaryHeader from '../../../components/organisms/Asd20TertiaryHeader'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
-// import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
+import userProfileMixin from '../../../mixins/userProfileMixin'
 
 export default {
   name: 'Asd20DistrictHomeTemplate',
 
-  mixins: [
-    pageTemplateMixin,
-    // globalPropMixinFactory('isAuthenticated', {
-    //   type: Boolean,
-    //   default: true,
-    // }),
-  ],
+  mixins: [pageTemplateMixin, userProfileMixin],
 
   directives: { scrollTrack },
 

package/src/mixins/userProfileMixin.js

@@ -1,29 +1,42 @@
-import globalpropmixinfactory from '.'
+import globalPropMixinFactory from './globalPropMixinFactory'
 
-// Create a mixin to access user profile
-const userProfileMixin = globalpropmixinfactory('userProfile', {
+// Create a mixin to access user profile with default values
+const userProfileMixin = globalPropMixinFactory('userProfile', {
   type: Object,
-  default: () => ({}),
+  default: () => ({
+    displayName: '',
+    givenName: '',
+    jobTitle: '',
+    officeLocation: '',
+  }),
+})
+
+// Create a mixin to access user groups with default values
+const userGroupsMixin = globalPropMixinFactory('userGroups', {
+  type: Array,
+  default: () => [],
 })
 
-// In your component
 export default {
-  mixins: [userProfileMixin],
+  mixins: [userProfileMixin, userGroupsMixin],
   computed: {
     userDisplayName() {
-      return this._userProfile.displayName || ''
+      return (this._userProfile && this._userProfile.displayName) || ''
     },
     userGivenName() {
-      return this._userProfile.givenName || ''
+      return (this._userProfile && this._userProfile.givenName) || ''
     },
     userJobTitle() {
-      return this._userProfile.jobTitle || ''
+      return (this._userProfile && this._userProfile.jobTitle) || ''
     },
     userOfficeLocation() {
-      return this._userProfile.officeLocation || ''
+      return (this._userProfile && this._userProfile.officeLocation) || ''
+    },
+    userGroupsList() {
+      return (this._userGroups && this._userGroups.length > 0)
+        ? this._userGroups.map(group => group.displayName).join(', ')
+        : 'No groups assigned'
     },
-  },
-//   mounted() {
-//     console.log('User Profile:', this._userProfile)
-//   },
+  }
+  
 }