feat: APPS-2450 Add multiple block components (#409)

* chore: resolve merge conflicts

* test: add BlockSpaces spec and stories

* fix: replace ::v-deep combinator with :deep

* fix: resolve merge conflicts

* test: add BlockSimpleCard specs and stories

* feat: add BlockEvent component, util files

* chore: install date-fns dependency

* test: add BlockEvent spec and stories

* feat: add BlockSponsor component, spec and stories

* feat: add BlockCardWithIllustration component, specs and stories

* fix: resolve minor linting/neg-space errors

* fix: refactoring directives

* fix: applying deep selector to chevron svg

---------

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

package.json

@@ -70,6 +70,7 @@
         "vue-tsc": "^1.8.5"
     },
     "dependencies": {
+        "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
         "pinia": "^2.1.6"
     }

serve/serve.vue

@@ -1,31 +1,36 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AlphabeticalBrowseBy from '@/lib-components/AlphabeticalBrowseBy.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 BlockMediaWithText from '@/lib-components/BlockMediaWithText.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'
 import ButtonLink from '@/lib-components/ButtonLink'
 import ButtonMore from '@/lib-components/ButtonMore'
 import ButtonShow from '@/lib-components/ButtonShow'
 import DividerGeneral from '@/lib-components/DividerGeneral'
 import DividerWayFinder from '@/lib-components/DividerWayFinder'
+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'
 import IconWithLink from '@/lib-components/IconWithLink.vue'
 import PullQuote from '@/lib-components/PullQuote.vue'
 import RichText from '@/lib-components/RichText'
+import SearchResult from '@/lib-components/SearchResult.vue'
+import SectionWrapper from '@/lib-components/SectionWrapper.vue'
+import SingleCheckbox from '@/lib-components/SingleCheckbox.vue'
 import SiteBrandBar from '@/lib-components/SiteBrandBar'
 import SiteNotificationAlert from '@/lib-components/SiteNotificationAlert'
-import SectionWrapper from '@/lib-components/SectionWrapper.vue'
 import { mock as mockMediaWithText } from '@/stories/mock/BlockMediaWithText.js'
-import BlockMediaWithText from '@/lib-components/BlockMediaWithText.vue'
 import * as MEDIA from '@/stories/mock/Media'
-import SearchResult from '@/lib-components/SearchResult.vue'
-import SingleCheckbox from '@/lib-components/SingleCheckbox.vue'
-import BlockCallToAction from '@/lib-components/BlockCallToAction.vue'
-import BlockCallToActionTwoUp from '@/lib-components/BlockCallToActionTwoUp.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'
 
 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>'
@@ -34,7 +39,22 @@ const richTextContent = computed(() => {
 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',
+  startDate: '2022-12-09T00:00',
   svgName: 'svg-call-to-action-chat',
   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:
@@ -237,20 +257,81 @@ const coverImage = MEDIA.VideoFileCoverImage
     <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>
+    <BlockCardWithIllustration
+      :to="mock.to"
+      :title="mock.title"
+      :text="mock.text"
+    />
+    <br>
+    <hr>
+    <br>
     <h2>FooterMain Component</h2>
+    <br>
     <FooterMain />
     <hr>
     <br>
     <h2>FooterPrimary Component</h2>
+    <br>
     <FooterPrimary />
+    <br>
     <hr>
     <br>
     <h2>FooterSock Component</h2>
+    <br>
     <FooterSock />
     <hr>
     <br>
     <h2>FooterSponsor Component</h2>
+    <br>
     <FooterSponsor />
+    <br>
     <hr>
     <br>
   </div>