From cdf1fc34ac1b46425331077e89d8941d23bba533 Mon Sep 17 00:00:00 2001
From: tinuola <24995224+tinuola@users.noreply.github.com>
Date: Thu, 9 Nov 2023 08:59:56 -0800
Subject: [PATCH] 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 <tinuola@users.noreply.github.com>
Co-authored-by: pghorpade <pghorpade@library.ucla.edu>
---
 .gitignore                                    |   3 +-
 src/App.vue                                   | 722 ------------------
 .../BlockStaffSubjectLibrarian.vue            |  32 -
 src/lib-components/ButtonLink.vue             |   7 +-
 src/lib-components/FooterPrimary.vue          |   8 +-
 src/lib-components/NavPrimary.vue             |   2 +-
 src/lib-components/NavSecondary.vue           |   2 +-
 src/lib-components/SearchResult.vue           |   2 -
 .../BlockStaffSubjectLibrarian.stories.js     |  17 +-
 9 files changed, 13 insertions(+), 782 deletions(-)
 delete mode 100644 src/App.vue

diff --git a/.gitignore b/.gitignore
index e7489d7cb..06dd7ad4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,5 @@ cypress/e2e/1-getting-started
 cypress/e2e/2-advanced-examples
 
 serve
-vite.config.serve.ts
\ No newline at end of file
+vite.config.serve.ts
+src/App.vue
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
deleted file mode 100644
index f821aa557..000000000
--- a/src/App.vue
+++ /dev/null
@@ -1,722 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-
-import BlockMediaWithText from './lib-components/BlockMediaWithText.vue'
-import SiteBrandBar from './lib-components/SiteBrandBar.vue'
-import BlockShowHide from './lib-components/BlockShowHide.vue'
-import BlockStaffSubjectLibrarian from './lib-components/BlockStaffSubjectLibrarian.vue'
-import SectionCardsWithIllustrations from './lib-components/SectionCardsWithIllustrations.vue'
-import AlphabeticalBrowseBy from '@/lib-components/AlphabeticalBrowseBy.vue'
-import BlockAmenities from '@/lib-components/BlockAmenities.vue'
-import BlockCallToAction from '@/lib-components/BlockCallToAction.vue'
-import BlockCallToActionTwoUp from '@/lib-components/BlockCallToActionTwoUp.vue'
-import BlockCardWithIllustration from '@/lib-components/BlockCardWithIllustration.vue'
-import BlockDate from '@/lib-components/BlockDate.vue'
-import BlockEvent from '@/lib-components/BlockEvent.vue'
-import BlockGenericList from '@/lib-components/BlockGenericList.vue'
-import BlockSimpleCard from '@/lib-components/BlockSimpleCard.vue'
-import BlockSpaces from '@/lib-components/BlockSpaces.vue'
-import BlockSponsor from '@/lib-components/BlockSponsor.vue'
-import ButtonHide from '@/lib-components/ButtonHide.vue'
-import ButtonLink from '@/lib-components/ButtonLink.vue'
-import ButtonMore from '@/lib-components/ButtonMore.vue'
-import ButtonShow from '@/lib-components/ButtonShow.vue'
-import DividerGeneral from '@/lib-components/DividerGeneral.vue'
-import DividerWayFinder from '@/lib-components/DividerWayFinder.vue'
-import FooterMain from '@/lib-components/FooterMain.vue'
-import FooterPrimary from '@/lib-components/FooterPrimary.vue'
-import FooterSock from '@/lib-components/FooterSock.vue'
-import FooterSponsor from '@/lib-components/FooterSponsor.vue'
-import HeadingArrow from '@/lib-components/HeadingArrow.vue'
-import HelloWorld from '@/lib-components/HelloWorld.vue'
-import IconWithLink from '@/lib-components/IconWithLink.vue'
-import MastheadPrimary from '@/lib-components/MastheadPrimary.vue'
-import MastheadSecondary from '@/lib-components/MastheadSecondary.vue'
-import NavBreadcrumb from '@/lib-components/NavBreadcrumb.vue'
-import NavSecondary from '@/lib-components/NavSecondary.vue'
-import PullQuote from '@/lib-components/PullQuote.vue'
-import ResponsiveImage from '@/lib-components/ResponsiveImage.vue'
-import RichText from '@/lib-components/RichText.vue'
-import SearchResult from '@/lib-components/SearchResult.vue'
-import SectionDualMasonry from '@/lib-components/SectionDualMasonry.vue'
-import SectionSpacesList from '@/lib-components/SectionSpacesList.vue'
-import SectionStaffOrcidPublications from '@/lib-components/SectionStaffOrcidPublications.vue'
-import SimpleCards from '@/lib-components/SimpleCards.vue'
-import SingleCheckbox from '@/lib-components/SingleCheckbox.vue'
-import SiteNotificationAlert from '@/lib-components/SiteNotificationAlert.vue'
-import SectionWrapper from '@/lib-components/SectionWrapper.vue'
-import { mock as mockMediaWithText } from '@/stories/mock/BlockMediaWithText.js'
-import * as MEDIA from '@/stories/mock/Media'
-import * as API from '@/stories/mock-api.json'
-
-const richTextContent = computed(() => {
-  return '<h3>Here is a title</h3><figure class="figure image-right"><img src="https://static.library.ucla.edu/craftassetstest/images/zooland.jpeg" alt="ZooLand" /><figcaption>Zoo</figcaption></figure><p>Could you do an actual logo instead of a font I cant pay you? Can we try some other colors maybe? I cant pay you. You might wanna give it another shot, so make it pop and this is just a 5 minutes job the target audience makes and families aged zero and up will royalties in the company do instead of cash.</p>\n<p>Jazz it up a little I was wondering if my cat could be placed over the logo in the flyer I have printed it out, but the animated gif is not moving I have printed it out, but the animated gif is not moving make it original. Can you make it stand out more? Make it original.</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h3><a href="http://google.com/" target="_blank" rel="noreferrer noopener">This is an <strong>EXTERNAL link</strong></a></h3><figure><iframe width="560" height="315" src="https://www.youtube.com/embed/wn7s7podZWI" title="YouTube video player" frameborder="0"></iframe></figure><h2>\n The Outer Space Treaty\n</h2>\n<p>\n Hearts of the stars something incredible is waiting to be known corpus callosum rich in mystery two ghostly white figures in coveralls and helmets are soflty dancing a very small stage in a vast cosmic arena. Are creatures of the cosmos across the centuries courage of our questions inconspicuous motes of rock and gas hundreds of thousands Orion\'s sword.\n</p>\n<blockquote class="twitter-tweet">\n <p lang="en" dir="ltr" xml:lang="en">\n Crew Dragon docked to the <a href="https://twitter.com/Space_Station?ref_src=twsrc%5Etfw" target="_blank">@Space_Station</a> <a href="https://t.co/JG5e2XjZ4n">pic.twitter.com/JG5e2XjZ4n</a>\n </p>\n — SpaceX (@SpaceX) <a href="https://twitter.com/SpaceX/status/1278799363804811264?ref_src=twsrc%5Etfw">July 2, 2020</a>\n </blockquote>\n <p>\n Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam bits of moving fluff another world brain is the seed of intelligence. Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling the energy hidden in matter citizens of distant epochs bits of moving fluff.\n</p>\n<p>Could you do an actual logo instead of a font I cant pay you? Can we try some other colors maybe? I cant pay you. You might wanna give it another shot, so make it pop and this is just a 5 minutes job the target audience makes and families aged zero and up will royalties in the company do instead of cash.</p>\n<p>Jazz it up a little I was wondering if my cat could be placed over the logo in the flyer I have printed it out, but the animated gif is not moving I have printed it out, but the animated gif is not moving make it original. Can you make it stand out more? Make it original.</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></figure>'
-})
-
-const mock = {
-  attribution: 'Lady Gaga',
-  category: 'Article',
-  endDate: '2022-12-11T00:00',
-  funderLogo: [
-    {
-      id: '28636',
-      src: 'https://static.library.ucla.edu/craftassetstest/logo-arcadia1.svg',
-      height: 569,
-      width: 2560,
-      srcset: 'https://static.library.ucla.edu/craftassetstest/_375xAUTO_crop_center-center_none/logo-arcadia1.svg 375w, https://static.library.ucla.edu/craftassetstest/_960xAUTO_crop_center-center_none/logo-arcadia1.svg 960w, https://static.library.ucla.edu/craftassetstest/_1280xAUTO_crop_center-center_none/logo-arcadia1.svg 1280w, https://static.library.ucla.edu/craftassetstest/_1920xAUTO_crop_center-center_none/logo-arcadia1.svg 1920w, https://static.library.ucla.edu/craftassetstest/_2560xAUTO_crop_center-center_none/logo-arcadia1.svg 2560w',
-      alt: 'Logo arcadia1',
-      focalPoint: [0.5, 0.5],
-      altText: null,
-    },
-  ],
-  location: 'Fast Lane Building',
-  name: 'Ipsum dolor amet',
-  svgName: 'svg-call-to-action-chat',
-  startDate: '2022-12-09T00:00',
-  text: 'Litora torquent per conubia nostra, per inceptos himenaeos.Litora torquent per conubia nostra, per inceptos himenaeos.Litora torquent per conubia nostra, per inceptos himenaeos.Litora torquent per conubia nostra, per inceptos himenaeos.',
-  textLong:
-    'Greplin prezi zillow zoosk orkut, zoosk gooru. Kiko xobni joukuu ideeli bitly joukuu, squidoo heroku hulu sifteo, zooomr jumo dropio chumby. Qeyno wikia oooooc jajah, ebay qeyno lala, jajah lijit. Etsy wufoo flickr movity sclipo heroku, oooooc etsy oooooc. Vimeo foodzie zoosk ebay, wesabe. Ebay doostang vuvox, xobni. Mozy joyent dropio gooru kippt, greplin skype. Kiko napster geni dogster yoono yammer disqus, hipmunk xobni odeo zynga loopt. Groupon klout divvyshot zinch elgg yoono airbnb, orkut zinch chartly squidoo.',
-  textSemantic:
-    'Napster mozy sococo orkut <a href=\'http://google.com/\'>convore scribd napster</a>, twones diigo joukuu weebly. <i>Sclipo jibjab scribd</i>.',
-  title: 'Dropio Heroku',
-  to: '/about/news/article',
-}
-
-const blockCTAitems = [
-  {
-    ...mock,
-    isDark: false,
-    isSmallSize: true,
-  },
-  {
-    ...mock,
-    isDark: true,
-    isSmallSize: true,
-  },
-]
-
-const sectionTitle = 'Section Title'
-
-const sectionSummary = '<p><strong>Section Summary with Rich Text</strong> Lorem ipsum dolor <a href="https://fonts.google.com/featured" target="_blank" rel="noreferrer noopener">reprehenderit in voluptate.</a> <em>Ut enim ad minim veniam.</em> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>'
-
-const propsForMediaWithText = {
-  sectionHeader: mockMediaWithText.mediaWithText[0].titleLink,
-  shortDescription: mockMediaWithText.mediaWithText[0].description,
-  buttonText: mockMediaWithText.mediaWithText[0].buttonText,
-  buttonUrl: mockMediaWithText.mediaWithText[0].buttonUrl,
-  mediaLink: mockMediaWithText.mediaWithText[0].linkToMedia,
-  item: mockMediaWithText.mediaWithText[0].coverImage,
-  typeMedia: mockMediaWithText.mediaWithText[0].typeMedia,
-}
-
-const itemVideo = MEDIA.VideoFile
-
-const coverImage = MEDIA.VideoFileCoverImage
-
-const mockStaff = {
-  subjectArea: 'African American Studies',
-  nameFirst: 'Ariane',
-  nameLast: 'Bicho',
-  to: '/about/staff/ariane-bicho',
-  staffName: 'Ariane Bicho 娘の洋子より',
-  image: null,
-
-  jobTitle: 'Director of Communications and Marketing',
-  departments: [
-    {
-      id: '7272',
-      title: 'Communications',
-    },
-    {
-      id: '7373',
-      title: 'Marketing',
-    },
-  ],
-  alternativeName: [
-    {
-      fullName: '娘の洋子より',
-      languageAltName: 'zh',
-    },
-  ],
-  uri: 'about/staff/ariane-bicho',
-  phone: '(222) 444-5555',
-  email: 'abicho@library.ucla.edu',
-  consultation: 'https://calendar.library.ucla.edu/appointments/aogarcia',
-  academicDepartments: [
-    {
-      id: '11947',
-      title: 'African American Studies',
-    },
-    {
-      id: '11955',
-      title: 'Cluster 60: America in Sixties: Politics, Society, and Culture, 1954 to 1974',
-    },
-  ],
-  locations: [
-    {
-      title: 'DIIT',
-      to: 'location/bar',
-    },
-  ],
-}
-
-const mockStaff2 = {
-  title: 'Humanities and Social Sciences Librarian',
-  alternativeFullName: '陳餘敏卿纪念基金',
-  language: 'zh',
-  text:
-    '<p><span>The UCLA Library seeks a highly collaborative, user-focused professional for the position of Humanities and Social Sciences Librarian. The incumbent will join a multi-location, cross disciplinary team that supports teaching and all levels of research in the humanities and social sciences. </span><span>Note: Two positions are being filled.</span><br /></p>',
-  jobType: [
-    {
-      title: 'Academic Librarian',
-    },
-  ],
-  jobRequisitionNumber: 'JPF08053',
-  jobPostingURL: 'https://recruit.apo.ucla.edu/JPF08053',
-  department: [
-    {
-      title: 'User Engagement',
-    },
-    {
-      title: 'Human Resources',
-    },
-  ],
-  associatedLocations: [
-    {
-      title: 'UCLA Film & Television Archive',
-      uri: 'visit/locations/film-television-archive',
-    },
-    {
-      title: 'Powell Library',
-      uri: 'visit/locations/powell-library',
-    },
-  ],
-}
-
-const mockAmenities = {
-  amenities: [
-    'icon-clock',
-    'icon-accessible',
-    'icon-chair',
-    'icon-virtual',
-    'icon-laptop',
-    'icon-locker',
-    'icon-light',
-    'icon-share-printer',
-    'icon-book',
-  ],
-}
-const navSecondaryLinks = {
-  items: [
-    {
-      id: '843',
-      name: 'Locations & Hours',
-      to: '/locations',
-      classes: '',
-    },
-    {
-      id: '844',
-      name: 'Ask a Librarian',
-      to: 'https://external.url/research-teaching-support/research-help',
-      classes: null,
-    },
-    {
-      id: '25315',
-      name: 'Support Us',
-      to: 'https://giving.ucla.edu/Standard/NetDonate.aspx?SiteNum=463',
-      classes: 'support-link',
-      target: '0',
-    },
-    {
-      id: '845',
-      name: 'My Account',
-      to: 'https://search.library.ucla.edu/discovery/login?vid=01UCS_LAL:UCLA',
-      classes: 'account-button',
-      target: '1',
-    },
-  ],
-}
-const parsedItems = computed(() => {
-  // Restructuring item to support text key
-  return navSecondaryLinks.items.map((obj) => {
-    return {
-      ...obj,
-      text: obj.name,
-    }
-  })
-})
-
-const mockTwoCards = {
-  id: '13783',
-  sectionTitle: 'Fix Potholes',
-  sectionSummary:
-        '<p>Get pothole repair service in Los Angeles and surrounding areas. We look forward to serving all your needs. Contact us now for fast service. Get A Free Quote. It is a frightening thought to imagine the ground below your feet or house suddenly collapsing and forming a big hole in the ground.</p>',
-  cards: [
-    {
-      id: '6622',
-      text: '<p>Learn how to use a VPN or proxy server to access Library resources with your UCLA Logon ID through a series of helpful videos.</p>',
-      title: 'Connecting from Off-Campus',
-      slug: 'connecting-from-off-campus',
-      to: 'help/services-resources/connecting-from-off-campus',
-      type: 'resource',
-    },
-    {
-      id: '6407',
-      text: '<p>A research guide</p>',
-      title: 'A new research guide',
-      slug: 'a-new-research-guide',
-      to: null,
-      externalResourceUrl: 'http://libguides.library.ucla.edu',
-    },
-  ],
-}
-
-const mockSpaces = [
-  {
-    to: 'https://calendar.library.ucla.edu',
-    title: 'Internal Portico',
-    location: 'Fames Turpis Building',
-    text: 'Etiam faucibus tellus quis magna finibus auctor. Fusce sagittis vel lectus sed ullamcorper. Proin faucibus nibh ut purus consequat lobortis. Aenean eu fermentum leo, vitae egestas eros. Vivamus urna nibh, porttitor in egestas eu, eleifend ac felis. Praesent sed tristique nibh. Nulla dignissim purus at metus consequat, vitae pharetra orci efficitur. Vivamus facilisis massa vel ipsum vestibulum, porta efficitur dolor aliquam.',
-    buttonUrl: 'http://google.com',
-  },
-  {
-    to: 'https://www.gettyimages.com/photos/cute-llamas',
-    title: 'External Von Junz',
-    location: 'Debordist Room',
-    text: 'If one examines Marxist class, one is faced with a choice: either reject Baudrillardist simulation or conclude that the significance of the artist is social comment. The premise of Debordist situation implies that the law is capable of significance. Therefore, any number of constructions concerning a self-sufficient reality may be found.',
-    buttonUrl: 'http://google.com',
-  },
-  {
-    to: '',
-    title: 'Null Beefeater Numpty',
-    location: 'Pennyboy Cottage',
-    text: 'Gosh beefeater numpty scouser rambunctious a bottle of plonk know your onions, cornish pasty spend a penny cheerio down the local mush. What a mug one off blimey a comely wench nose rag ponce gobsmacked pennyboy cottage pie, ey up fake tan spam fritters marvelous chippy hedgehog chav.',
-    buttonUrl: 'http://google.com',
-  },
-]
-
-const itemsVertical = [
-  {
-    iconName: 'illustration-book-binding',
-    to: '/help/foo/bar/',
-    title: 'Lacus Luctus',
-    text: 'There are lots of things to climb on and huge space to run around. There\'s a large sitting area for us to bring our snacks/lunch or for me to read a book while they play well, at least for a few minutes until they come up and want to interact with me again. :) The place has been very clean every time we\'ve been there.',
-    isHorizontal: false,
-  },
-  {
-    iconName: 'illustration-find-space',
-    to: '/visit/foo/baz/',
-    title: 'Ultrices Enim',
-    text: 'Under the Sea is the newest, fun, unique, exciting, most talked about children\'s entertainment center. Beautiful floor-to-ceiling murals depict the world under the sea, with pirates, mermaids, and other sea life. As different as all kids are, they all enjoy one thing: fun,fun, and tons of fun!',
-    isHorizontal: false,
-  },
-  {
-    iconName: 'illustration-digitized-resources',
-    to: '/about/foo/fred/',
-    title: 'Egestas et Augue Justo eu Magna Luctus',
-    text: 'Unleash your child\'s imagination in a world Under the Sea. Through play, children develop the self esteem, coordination, and social skills necessary to grow. Children will bounce in the Moon Bouncer, go down the Turbo Slide, crawl through the climbing structure, or climb up to the top of a sea castle.',
-    isHorizontal: false,
-  },
-  {
-    iconName: 'illustration-databases',
-    to: '/about/foo/thud/',
-    title: 'Proin Sodales',
-    text: 'Under the Sea is the newest, fun, unique, exciting, most talked about children\'s entertainment center. Beautiful floor-to-ceiling murals depict the world under the sea, with pirates, mermaids, and other sea life. As different as all kids are, they all enjoy one thing: fun, fun and tons of fun!',
-    isHorizontal: false,
-  },
-  {
-    iconName: 'illustration-remote-access',
-    to: '/visit/foo/qux/',
-    title: 'Taciti sociosqu',
-    text: 'Our Live Characters Make each event an unforgettable celebration. Each performance is unique, and includes music, games, magic, and interaction with the guests.',
-    isHorizontal: false,
-  },
-]
-
-const mockMasthead = {
-  linkItems: [
-    {
-      text: 'Course Reserves',
-      url: 'https://catalog.library.ucla.edu/vwebv/enterCourseReserve.do',
-    },
-    {
-      text: 'UCLA Research Guides',
-      url: 'https://guides.library.ucla.edu/',
-    },
-    {
-      text: 'Databases A-Z',
-      url: 'https://guides.library.ucla.edu/az.php',
-    },
-  ],
-  advancedSearchLink: {
-    text: 'Advanced Search',
-    url: 'https://www.library.ucla.edu/search',
-  },
-}
-</script>
-
-<template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo">
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-  <br>
-  <hr>
-  <br>
-  <h2>SiteBrandBar Component</h2>
-  <br>
-  <SiteBrandBar />
-  <br>
-  <hr>
-  <br>
-  <h2>Divider Component</h2>
-  <DividerGeneral />
-  <hr>
-  <br>
-  <h2>DividerWayFinder Component</h2>
-  <DividerWayFinder color="help" />
-  <hr>
-  <br>
-  <h2>RichText Component</h2>
-  <RichText :rich-text-content="richTextContent" />
-  <br>
-  <hr>
-  <br>
-  <h2>SiteNotificationAlert Component</h2>
-  <br>
-  <SiteNotificationAlert :title="mock.title" :text="mock.text" />
-  <SiteNotificationAlert :title="mock.title" :text="mock.textLong" />
-  <br>
-  <hr>
-  <br>
-  <h2>ButtonLink Component</h2>
-  <br>
-  <ButtonLink label="Egest perl Conub" to="/help/more" />
-  <br>
-  <br>
-  <ButtonLink label="Etiam et Ultrices" :is-secondary="true" to="/help/more" />
-  <br>
-  <br>
-  <ButtonLink label="Etiam et Ultrices" :is-secondary="true" to="https://calendar.library.ucla.edu/" />
-  <br>
-  <br>
-  <ButtonLink label="Etiam et Ultrices" :is-secondary="true" to="https://www.google.com/" />
-  <br>
-  <br>
-  <ButtonLink label="Proin sodales dolor sit amet." icon-name="svg-arrow-right" to="/help/more" />
-  <br>
-  <br>
-  <ButtonLink label="Aug id Dignissim" :is-secondary="true" icon-name="svg-arrow-right" to="/help/more" />
-  <br>
-  <br>
-  <ButtonLink label="Aug id Dignissim" :is-secondary="true" icon-name="svg-arrow-diagonal" to="www.google.com" />
-  <br>
-  <br>
-  <ButtonLink label="Aug id Dignissim" :is-secondary="true" icon-name="none" to="www.google.com" />
-  <br>
-  <br>
-  <hr>
-  <br>
-  <h2>Button Component</h2>
-  <br>
-  <ButtonHide />
-  <br>
-  <ButtonShow />
-  <br>
-  <ButtonMore />
-  <br>
-  <hr>
-  <br>
-  <h2>HeadingArrow Component</h2>
-  <br>
-  <HeadingArrow text="Default" />
-  <br>
-  <HeadingArrow text="About Us" to="/about/" />
-  <br>
-  <HeadingArrow text="Visit Us" to="/visit/" />
-  <br>
-  <HeadingArrow text="Get Help" to="/help" />
-  <br>
-  <hr>
-  <br>
-  <h2>PullQuote Component</h2>
-  <br>
-  <PullQuote :text="mock.text" />
-  <br>
-  <PullQuote :text="mock.text" :attribution="mock.attribution" />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockDate Component</h2>
-  <br>
-  <BlockDate date="10" day="Digniss" />
-  <br>
-  <hr>
-  <br>
-  <h2>IconWithLink Component</h2>
-  <br>
-  <IconWithLink text="Powell" icon-name="svg-icon-location" to="/visit/library/powell" />
-  <br>
-  <IconWithLink text="See More" icon-name="svg-icon-search" to="https://www.google.com/" />
-  <br>
-  <hr>
-  <br>
-  <h2>SectionWrapper Component</h2>
-  <SectionWrapper :section-title="sectionTitle" :section-summary="sectionSummary">
-    <BlockMediaWithText v-bind="propsForMediaWithText" />
-  </SectionWrapper>
-  <hr>
-  <br>
-  <h2>BlockMediaWithText Component</h2>
-  <br>
-  <BlockMediaWithText
-    :section-header="mockMediaWithText.mediaWithText[0].titleLink"
-    :short-description="mockMediaWithText.mediaWithText[0].description"
-    :button-text="mockMediaWithText.mediaWithText[0].buttonText"
-    :button-url="mockMediaWithText.mediaWithText[0].buttonUrl" :item="itemVideo" :cover-image="coverImage"
-    type-media="video"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>AlphabeticalBrowseBy Component</h2>
-  <br>
-  <AlphabeticalBrowseBy />
-  <br>
-  <AlphabeticalBrowseBy selected-letter-prop="A" />
-  <br>
-  <hr>
-  <br>
-  <h2>SearchResult Component</h2>
-  <br>
-  <SearchResult :category="mock.category" :title="mock.title" :summary="mock.text" :to="mock.to" />
-  <br>
-  <hr>
-  <br>
-  <h2>SingleCheckbox Component</h2>
-  <br>
-  <SingleCheckbox />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockCallToAction Component</h2>
-  <br>
-  <BlockCallToAction
-    :svg-name="mock.svgName" :title="mock.title" :text="mock.text" :name="mock.name" :to="mock.to"
-    :is-dark="false" :is-small-size="false"
-  />
-  <br>
-  <BlockCallToAction
-    svg-name="svg-call-to-action-money" :title="mock.title" :text="mock.text" :name="mock.name"
-    :to="mock.to" :is-small-size="true" :is-dark="true"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockCallToActionTwoUp Component</h2>
-  <BlockCallToActionTwoUp :items="blockCTAitems" />
-  <hr>
-  <br>
-  <h2>BlockSpace Component</h2>
-  <br>
-  <BlockSpaces :to="mock.to" :title="mock.title" :location="mock.location" :text="mock.text" />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockSimpleCard Component</h2>
-  <br>
-  <BlockSimpleCard :title="mock.title" :text="mock.text" :to="mock.to" />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockEvent Component</h2>
-  <br>
-  <BlockEvent
-    :category="mock.category" :title="mock.title" :prompt="mock.title" :start-date="mock.startDate"
-    :end-date="mock.endDate" :to="mock.to" :section-handle="mock.title"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockSponsor Component</h2>
-  <br>
-  <BlockSponsor
-    :funder-logo="mock.funderLogo" funder-name="Hostess Cupcakes"
-    funder-url="https://www.hostesscakes.com/products/cupcakes/chocolate/"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockCardWithIllustration Component</h2>
-  <br>
-  <ul>
-    <BlockCardWithIllustration :to="mock.to" :title="mock.title" :text="mock.text" />
-  </ul>
-  <br>
-  <hr>
-  <br>
-  <h2>FooterMain Component</h2>
-  <br>
-  <FooterMain />
-  <hr>
-  <br>
-  <h2>FooterPrimary Component</h2>
-  <br>
-  <FooterPrimary />
-  <hr>
-  <br>
-  <h2>FooterSock Component</h2>
-  <FooterSock />
-  <hr>
-  <br>
-  <h2>FooterSponsor Component</h2>
-  <br>
-  <FooterSponsor />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockShowHide Component</h2>
-  <br>
-  <BlockShowHide style="width: 100%; padding: 0 48px;">
-    <div style="width: 100%; padding: 0 12px 18px; border: 2px grey dotted" data-cy="main">
-      Main content is passed via a slot and will be visible by default.
-    </div>
-    <div class="show-hide-hideable" style="width: 100%; padding: 0 12px 18px; border: 2px grey dotted" data-cy="extra">
-      To make content "expandable" it should be passed in the slot along with the main content, but add the class
-      "show-hide-hideable" to any items that should be hidden.
-    </div>
-  </BlockShowHide>
-  <br>
-  <hr>
-  <br>
-  <h2>SectionStaffOrcidPublications Component</h2>
-  <br>
-  <SectionStaffOrcidPublications
-    class="staff-orcid-publications" orcid="https://orcid.org/0000-0002-6391-2088"
-    publications="<ul><li><strong>Johnson, M. W.</strong>, Abumeeiz, S. &amp; McAulay, E. (2021). 'Teaching in the Digital Library: A Partnership Between Teaching Librarians and Digital Library Staff.' College &amp; Research Libraries News. 82(7). <a href='https://crln.acrl.org/index.php/crlnews/article/view/25033/32921'>https://crln.acrl.org/index.php/crlnews/article/view/25033/32921</a></li></ul>"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>NavBreadcrumb Component</h2>
-  <NavBreadcrumb title="jane-doe" to="/about/news" parent-title="parent" />
-  <br>
-  <hr>
-  <br>
-  <h2>BlockStaffSubjectLibrarian Component</h2>
-  <table>
-    <tbody>
-      <BlockStaffSubjectLibrarian v-bind="mockStaff" />
-    </tbody>
-  </table>
-  <br>
-  <hr>
-  <br>
-  <h2>BlockGenericList Component</h2>
-  <br>
-  <ul>
-    <BlockGenericList v-bind="mockStaff2" />
-  </ul>
-  <br>
-  <hr>
-  <br>
-  <h2>BlockAmenities Component</h2>
-  <br>
-  <BlockAmenities v-bind="mockAmenities" />
-  <br>
-  <hr>
-  <br>
-  <h2>NavSecondary Component</h2>
-  <br>
-  <br>
-  <NavSecondary :items="parsedItems" />
-  <br>
-  <h2>SimpleCards Component</h2>
-  <br>
-  <SimpleCards
-    :items="mockTwoCards.cards"
-    :section-title="sectionTitle"
-    :section-summary="sectionSummary"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>SectionSpacesList Component</h2>
-  <br>
-  <SectionSpacesList
-    :items="mockSpaces"
-    n-shown="2"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>ResponsiveImage Component</h2>
-  <br>
-  <ResponsiveImage
-    :image="API.image"
-    :aspect-ratio="100"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>SectionDualMasonry Component</h2>
-  <br>
-  <SectionDualMasonry
-    :items="API.bricks"
-    to="/visit/foo"
-    text="See All Events"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>SectionCardsWithIllustrations Component</h2>
-  <br>
-  <SectionCardsWithIllustrations
-    :items="itemsVertical"
-    :section-title="sectionTitle"
-    :section-summary="sectionSummary"
-    to="/help/foo/bar"
-    :is-horizontal="false"
-    button-text="See More"
-  />
-  <br>
-  <hr>
-  <br>
-  <h2>MastheadPrimary Component</h2>
-  <br>
-  <MastheadPrimary :link-items="mockMasthead.linkItems" :advanced-search-link="advancedSearchLink" />
-  <br>
-  <hr>
-  <br>
-  <h2>MastheadSecondary Component</h2>
-  <br>
-  <MastheadSecondary
-    :title="sectionTitle"
-    :text="sectionSummary"
-  />
-  <br>
-  <hr>
-  <br>
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
diff --git a/src/lib-components/BlockStaffSubjectLibrarian.vue b/src/lib-components/BlockStaffSubjectLibrarian.vue
index 784699975..23c0da496 100644
--- a/src/lib-components/BlockStaffSubjectLibrarian.vue
+++ b/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 -->
diff --git a/src/lib-components/ButtonLink.vue b/src/lib-components/ButtonLink.vue
index fa7c84a06..5fd9f2cf5 100644
--- a/src/lib-components/ButtonLink.vue
+++ b/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'
       }
     },
   },
diff --git a/src/lib-components/FooterPrimary.vue b/src/lib-components/FooterPrimary.vue
index 95fbfb391..56577de15 100644
--- a/src/lib-components/FooterPrimary.vue
+++ b/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);
         }
       }
diff --git a/src/lib-components/NavPrimary.vue b/src/lib-components/NavPrimary.vue
index 8c00de7db..2f4f6e7b3 100644
--- a/src/lib-components/NavPrimary.vue
+++ b/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;
     }
   }
diff --git a/src/lib-components/NavSecondary.vue b/src/lib-components/NavSecondary.vue
index 8625ae88d..5a7fa1bb0 100644
--- a/src/lib-components/NavSecondary.vue
+++ b/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);
diff --git a/src/lib-components/SearchResult.vue b/src/lib-components/SearchResult.vue
index bfc76753a..7d7e1584c 100644
--- a/src/lib-components/SearchResult.vue
+++ b/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({
diff --git a/src/stories/BlockStaffSubjectLibrarian.stories.js b/src/stories/BlockStaffSubjectLibrarian.stories.js
index ebea9fd28..f3e54c4b4 100644
--- a/src/stories/BlockStaffSubjectLibrarian.stories.js
+++ b/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