fix: APPS-2491 Component updates (#417)

* task: merge in apps-2460

* feat: add SectionSpacesList component, spec, stories

* feat: add DualMasonry component, spec, stories

* feat: add ResponsiveImage component, spec, stories

* add SectionCardIllustrations comp, spec, stories

* feat: add MastheadPrimary comp, spec, stories

* feat: add MastheadSecondary comp, spec, stories

* task: updates to commented code

* fix: eslint errors

* refactor: remove fields from BlockStaffSubjectLibrarian component

* style: update BlockEvent with CSS changes from Vue2 branch

* fix: update logic to display icon-close in ButtonLink component

* fix: change ::v-deep to :deep selector

* fix: updates from lint warning

* task: gitignore App.vue file

* fix: update path of molecule masthead icon

* fix: add new case to icon display logic in ButtonLink comp

---------

Co-authored-by: tinuola <[email protected]>
Co-authored-by: pghorpade <[email protected]>

.gitignore

@@ -31,4 +31,5 @@ cypress/e2e/1-getting-started
 cypress/e2e/2-advanced-examples
 
 serve
-vite.config.serve.ts
+vite.config.serve.ts
+src/App.vue

src/lib-components/BlockStaffSubjectLibrarian.vue

@@ -1,14 +1,9 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue'
-import type { PropType } from 'vue'
 
-// UTILITY FUNCTIONS
 // Components
 import SmartLink from '@/lib-components/SmartLink.vue'
 
-// Types
-import type { DepartmentItemType, LocationItemType } from '@/types/types'
-
 defineProps({
   subjectArea: {
     type: String,
@@ -30,22 +25,10 @@ defineProps({
     type: String,
     default: '',
   },
-  jobTitle: {
-    type: String,
-    default: '',
-  },
-  departments: {
-    type: Array as PropType<DepartmentItemType[]>,
-    default: () => [],
-  },
   academicDepartments: {
     type: Array,
     default: () => [],
   },
-  locations: {
-    type: Array as PropType<LocationItemType[]>,
-    default: () => [],
-  },
   alternativeFullName: {
     type: String,
     default: '',
@@ -91,21 +74,6 @@ const IconWithLink = defineAsyncComponent(
         <span v-if="alternativeFullName" :lang="language">
           {{ alternativeFullName }}</span>
       </SmartLink>
-
-      <div class="job-title" v-text="jobTitle" />
-
-      <ul v-if="departments.length" class="departments">
-        <li v-for="department in departments" :key="`staffsubjectdepartment-${department.id}`" class="department">
-          {{ department.title }}
-        </li>
-      </ul>
-
-      <div v-if="locations.length">
-        <IconWithLink
-          v-for="location in locations" :key="`staffsubjectlocation-${location.id}`" :text="location.title"
-          icon-name="svg-icon-location" :to="`/${location.to}`"
-        />
-      </div>
     </td>
 
     <!-- CONTACT INFO -->

src/lib-components/ButtonLink.vue

@@ -93,12 +93,13 @@ export default {
           return 'svg-arrow-download'
         case isInternalLink(this.to):
           return 'svg-arrow-right'
-        case this.iconName === 'none':
-          return 'none'
+        case this.linkTarget === '_blank' || this.iconName === 'svg-external-link':
+          return 'svg-external-link'
+        case this.iconName === 'icon-close':
         case this.iconName:
           return this.iconName
         default:
-          return 'svg-external-link'
+          return 'none'
       }
     },
   },

src/lib-components/FooterPrimary.vue

@@ -167,13 +167,13 @@ export default {
     height: 287px;
     transform: rotate(180deg) translateY(50%);
 
-    ::v-deep .svg__fill-bottom,
-    ::v-deep .svg__fill-top {
+    :deep(.svg__fill-bottom),
+    :deep(.svg__fill-top) {
       fill: var(--color-primary-blue-02);
       opacity: 0.25;
     }
 
-    ::v-deep .svg__fill-accent {
+    :deep(.svg__fill-accent) {
       fill: var(--color-primary-blue-02);
       opacity: 0.55;
     }
@@ -212,7 +212,7 @@ export default {
         width: 304px;
         max-width: 100%;
 
-        ::v-deep path {
+        :deep(path) {
           fill: var(--color-white);
         }
       }

src/lib-components/NavPrimary.vue

@@ -284,7 +284,7 @@ function clearActive() {
 
   // Hovers
   &.not-hovered {
-    ::v-deep .nav-menu-item .sub-menu {
+    :deep(.nav-menu-item .sub-menu) {
       opacity: 1;
     }
   }

src/lib-components/NavSecondary.vue

@@ -137,7 +137,7 @@ const accountLink = computed(() => {
     color: var(--color-primary-blue-04);
   }
 
-  ::v-deep .account-button {
+  :deep(.account-button) {
     color: var(--color-white);
     background-color: var(--color-primary-blue-04);
     border-color: var(--color-primary-blue-04);

src/lib-components/SearchResult.vue

@@ -1,9 +1,7 @@
 <script setup>
-// components
 import { computed } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
 
-// vue
 import removeHtmlTruncate from '@/utils/removeHtmlTruncate'
 
 const { to, category, title, summary } = defineProps({

src/stories/BlockStaffSubjectLibrarian.stories.js

@@ -13,14 +13,6 @@ const mock = {
   to: '/about/staff/ariane-bicho',
   staffName: 'Ariane Bicho 娘の洋子より',
   image: null,
-
-  jobTitle: 'Director of Communications and Marketing',
-  departments: [
-    {
-      id: '7272',
-      title: 'Communications',
-    },
-  ],
   alternativeName: [
     {
       fullName: '娘の洋子より',
@@ -40,14 +32,7 @@ const mock = {
       id: '11955',
       title: 'Cluster 60: America in Sixties: Politics, Society, and Culture, 1954 to 1974',
     },
-  ],
-  locations: [
-    {
-      id: '3456',
-      title: 'DIIT',
-      to: '/location/bar',
-    },
-  ],
+  ]
 }
 
 // Variations of stories below