feat: APPS-2919 add slot to sectionwrapper for link (#604)

* feat: add slot to sectionwrapper for link * chore: run linter * chore: cleanup comments --------- Co-authored-by: Jess Divers <[email protected]>
UCLALibrary · Sep 5, 2024 · 0195bab · 0195bab · github-actions · Sep 5, 2024
1 parent 1eadfda
commit 0195bab
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 2 deletions.
diff --git a/src/lib-components/SectionWrapper.vue b/src/lib-components/SectionWrapper.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, provide } from 'vue'
 import SectionHeader from '@/lib-components/SectionHeader.vue'
 import RichText from '@/lib-components/RichText.vue'
@@ -79,6 +79,11 @@ const getId = computed(() => {
         v-text="sectionTitle"
       />
 
+      <!-- section-link will not display if slot does not have content -->
+      <div class="section-link">
+        <slot name="top-right" class="" />
+      </div>
+
       <RichText
         v-if="sectionSummary"
         class="section-summary"

diff --git a/src/stories/SectionWrapper.stories.js b/src/stories/SectionWrapper.stories.js
@@ -7,6 +7,7 @@ import SectionWrapper from '@/lib-components/SectionWrapper'
 import BlockMediaWithText from '@/lib-components/BlockMediaWithText'
 import DividerWayFinder from '@/lib-components/DividerWayFinder'
 import SectionTeaserCard from '@/lib-components/SectionTeaserCard'
+import SmartLink from '@/lib-components/SmartLink.vue'
 
 const propsForMediaWithText = {
   sectionHeader: mockMediaWithText.mediaWithText[0].titleLink,
@@ -260,12 +261,20 @@ export function FtvaExploreOtherSeries() {
         theme: computed(() => 'ftva'),
       }
     },
-    components: { SectionWrapper, SectionTeaserCard },
+    components: { SectionWrapper, SectionTeaserCard, SmartLink },
     template: `
       <SectionWrapper
         section-title="Explore Other Series"
         theme="white"
       >
+        <template v-slot:top-right>
+          <smart-link
+            to="/somelink"
+          >
+            View All Series <span style="font-size:1.5em;"> &#8250;</span>
+          </smart-link>
+          
+        </template>
         <SectionTeaserCard
 
           :items="parsedFtvaEventSeries"

diff --git a/src/styles/default/_section-wrapper.scss b/src/styles/default/_section-wrapper.scss
@@ -1,5 +1,6 @@
 .section-wrapper {
     >.section-header {
+        position: relative;
         margin-bottom: var(--space-xl);
 
         >.section-title {
@@ -8,6 +9,17 @@
             margin-bottom: var(--space-m);
         }
 
+        .section-link {
+            position: absolute;
+            top: 0;
+            right: 0;
+            line-height: 1.2;
+
+            &:empty {
+                display: none;
+            }
+        }
+
         .section-summary {
             @include step-0;
             padding-right: 0;
@@ -84,4 +96,14 @@
             margin-bottom: 0;
         }
     }
+
+    // move link under title on mobile
+    @media #{$small} {
+        >.section-header {
+            .section-link {
+                margin-top: -20px;
+                position: relative;
+            }
+        }
+    }
 }
diff --git a/src/styles/ftva/_section-teaser-card.scss b/src/styles/ftva/_section-teaser-card.scss
@@ -2,6 +2,7 @@
     flex-wrap: nowrap;
     max-width: 100%; // 100% of the parent container
     align-items: flex-start;
+    justify-content: space-between;
     overflow-y: auto;
     padding-top: 25px;
     scrollbar-color: $grey-blue $white;

diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
@@ -1,4 +1,21 @@
 .ftva.section-wrapper {
+
+    // default link styles for FTVA
+    .section-link {
+        top: 11px;
+        @include ftva-button-link;
+        color: #{$medium-grey};
+
+        text-decoration: underline;
+        text-decoration-thickness: 3px;
+        text-decoration-color: #{$grey-blue};
+        text-underline-offset: 4px;
+
+        &:hover {
+            text-decoration-color: #{$bright-blue};
+        }
+    }
+
     &.top-level {
         &.theme-white {
             &.section-banner {