feat: APPS-2957 Create FTVA Pullquote (#617)

* feat: ftva pull-quote

* chore: lint

* fix: font weight, non italic

* fix: bolder bold inside pullquote

* fix: font weight

* fix: add 12px

---------

Co-authored-by: Jess Divers <[email protected]>
Co-authored-by: Parinita Mulak <[email protected]>

src/lib-components/PullQuote.vue

@@ -1,27 +1,27 @@
-<script>
-// COMPONENTS
+<script lang="ts" setup>
+import { computed } from 'vue'
 import RichText from './RichText.vue'
+import { useTheme } from '@/composables/useTheme'
 
-export default {
-  name: 'PullQuote',
-  components: {
-    RichText,
+const { text, attribution } = defineProps({
+  text: {
+    type: String,
+    default: '',
   },
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    attribution: {
-      type: String,
-      default: '',
-    },
+  attribution: {
+    type: String,
+    default: '',
   },
-}
+})
+
+const theme = useTheme()
+const classes = computed(() => {
+  return ['pull-quote', theme?.value || '']
+})
 </script>
 
 <template>
-  <div class="pull-quote">
+  <div :class="classes">
     <RichText v-if="text" class="quote" :rich-text-content="text" />
     <div v-if="attribution" class="attribution-block">
       <span class="dash">—</span>
@@ -31,70 +31,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.pull-quote {
-    background-color: var(--color-white);
-    max-width: var(--container-width);
-    text-align: left;
-    font-family: var(--font-primary);
-    font-size: 24px;
-    font-style: italic;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.01em;
-    color: var(--color-primary-blue-03);
-    border-left: 4px solid var(--color-default-cyan-03);
-    border-radius: 2px;
-    padding: 24px var(--spacing-text-left);
-    --spacing-text-left: 64px;
-    --container-width: $container-m-text + px;
-
-    :deep(.rich-text) {
-        max-width: none;
-        margin: 0;
-        padding-right: 0;
-    }
-
-    :deep(div),
-    :deep(p) {
-        color: var(--color-primary-blue-03);
-        font-size: 24px;
-        font-style: italic;
-        font-weight: 600;
-        line-height: 150%;
-    }
-
-    :deep(.parsed-content) {
-        margin-bottom: 0;
-    }
-
-    // Breakpoints
-    @media #{$small} {
-        --spacing-text-left: 24px;
-        --container-width: 100%;
-    }
-
-    .attribution-block {
-        padding-top: 24px;
-    }
-
-    .dash {
-        font-size: 48px;
-        font-style: normal;
-        font-weight: 300;
-        color: var(--color-secondary-grey-05);
-        position: absolute;
-        height: 58px;
-    }
-
-    .attribution {
-        font-weight: 400;
-        font-size: 20px;
-        font-style: normal;
-        line-height: 140%;
-        align-items: center;
-        text-transform: uppercase;
-        color: var(--color-secondary-grey-05);
-        margin-left: 50px;
-    }
-}
+@import "@/styles/default/_pull-quote.scss";
+@import "@/styles/ftva/_pull-quote.scss";
 </style>

src/stories/PullQuote.stories.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue'
 import PullQuote from '../lib-components/PullQuote'
 
 export default {
@@ -46,3 +47,45 @@ export function NoAttribution() {
     `,
   }
 }
+
+export function FTVADefault() {
+  return {
+    data() {
+      return {
+        ...mock,
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { PullQuote },
+    template: `
+        <pull-quote
+            :text="text"
+            :attribution="attribution"
+        />
+    `,
+  }
+}
+export function FTVADefaultNoAttribution() {
+  return {
+    data() {
+      return {
+        ...mock,
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { PullQuote },
+    template: `
+        <pull-quote
+            :text="text"
+        />
+    `,
+  }
+}

src/styles/default/_pull-quote.scss

@@ -0,0 +1,66 @@
+.pull-quote {
+    background-color: var(--color-white);
+    max-width: var(--container-width);
+    text-align: left;
+    font-family: var(--font-primary);
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 600;
+    line-height: 150%;
+    letter-spacing: 0.01em;
+    color: var(--color-primary-blue-03);
+    border-left: 4px solid var(--color-default-cyan-03);
+    border-radius: 2px;
+    padding: 24px var(--spacing-text-left);
+    --spacing-text-left: 64px;
+    --container-width: $container-m-text + px;
+
+    :deep(.rich-text) {
+        max-width: none;
+        margin: 0;
+        padding-right: 0;
+    }
+
+    :deep(div),
+    :deep(p) {
+        color: var(--color-primary-blue-03);
+        font-size: 24px;
+        font-style: italic;
+        font-weight: 600;
+        line-height: 150%;
+    }
+
+    :deep(.parsed-content) {
+        margin-bottom: 0;
+    }
+
+    // Breakpoints
+    @media #{$small} {
+        --spacing-text-left: 24px;
+        --container-width: 100%;
+    }
+
+    .attribution-block {
+        padding-top: 24px;
+    }
+
+    .dash {
+        font-size: 48px;
+        font-style: normal;
+        font-weight: 300;
+        color: var(--color-secondary-grey-05);
+        position: absolute;
+        height: 58px;
+    }
+
+    .attribution {
+        font-weight: 400;
+        font-size: 20px;
+        font-style: normal;
+        line-height: 140%;
+        align-items: center;
+        text-transform: uppercase;
+        color: var(--color-secondary-grey-05);
+        margin-left: 50px;
+    }
+}

src/styles/ftva/_pull-quote.scss

@@ -0,0 +1,39 @@
+.ftva.pull-quote {
+    --spacing-text-left: 36px;
+    padding: 20px var(--spacing-text-left);
+    border-color: $grey-blue;
+
+    :deep(div),
+    :deep(p) {
+        @include ftva-card-title-1;
+        color: $accent-blue;
+        line-height: 140%;
+        font-weight: 500;
+        font-style: normal;
+    }
+    :deep(strong){
+        font-weight: 600;
+    }
+
+    :deep(.parsed-content) {
+        margin-bottom: 0;
+    }
+
+    .attribution-block {
+        padding-top: 12px;
+        ::before {
+            content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-diamond.svg');
+            padding-right: 8px;
+            filter: invert(98%) sepia(131%) saturate(1029%) hue-rotate(196deg) brightness(130%) contrast(68%);
+        }
+        .attribution {
+            margin-left: 0px;
+            @include ftva-subtitle-1;
+            color: $subtitle-grey;
+        }
+    }
+    // hide default dash for ftva
+    .dash {
+        display: none;
+    }
+}