feat: APPS-2527 ImpactNumberCard component

src/lib-components/ImpactNumberCard.vue

@@ -0,0 +1,77 @@
+<script>
+export default {
+  name: 'ImpactNumberCard',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    impactNumber: {
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>
+
+<template>
+  <li class="impact-number-card">
+    <div class="card">
+      <div
+        v-if="impactNumber"
+        class="impact-number"
+        v-html="impactNumber"
+      />
+      <div v-if="title" class="title" v-html="title" />
+    </div>
+    <div v-if="text" class="text" v-html="text" />
+  </li>
+</template>
+
+<style lang="scss" scoped>
+.impact-number-card {
+    width: calc((100% - 32px) / 3);
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .card {
+        min-height: 300px;
+        border-radius: var(--rounded-slightly-all);
+        overflow: hidden;
+        background-color: var(--color-primary-blue-01);
+
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+    }
+    .impact-number {
+        @include step-5;
+        font-weight: 500;
+        color: var(--color-primary-blue-05);
+        font-size: 80px;
+        text-align: center;
+    }
+    .title {
+        @include step-1;
+        color: var(--color-primary-blue-05);
+        text-align: center;
+        padding: 0 16px;
+    }
+
+    .text {
+        padding-top: 16px;
+        @include step-0;
+        color: var(--color-primary-blue-05);
+        padding: 0 4px;
+    }
+}
+</style>

src/lib-components/index.js

@@ -40,6 +40,7 @@ export { default as HeaderMain } from './HeaderMain.vue'
 export { default as HeaderMainResponsive } from './HeaderMainResponsive.vue'
 export { default as HeaderSmart } from './HeaderSmart.vue'
 export { default as IconWithLink } from './IconWithLink.vue'
+export { default as ImpactNumberCard } from './ImpactNumberCard.vue'
 export { default as MastheadPrimary } from './MastheadPrimary.vue'
 export { default as MastheadSecondary } from './MastheadSecondary.vue'
 export { default as MediaItem } from './Media/Item.vue'

src/stories/ImpactNumberCard.spec.js

@@ -0,0 +1,10 @@
+describe('IMPACT REPORT / Impact Number Card', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=impact-report-impact-number-card--default&args=&viewMode=story'
+    )
+    cy.get('.impact-number-card').should('exist')
+
+    cy.percySnapshot('IMPACT REPORT / Impact Number Card: Default')
+  })
+})

src/stories/ImpactNumberCard.stories.js

@@ -0,0 +1,31 @@
+import ImpactNumberCard from '../lib-components/ImpactNumberCard'
+
+export default {
+  title: 'IMPACT REPORT / Impact Number Card',
+  component: ImpactNumberCard,
+}
+
+const mock = {
+  id: '37072',
+  title: 'HathiTrust Partnership',
+  text: 'Pages Viewed Through HathiTrust Digital Library to Support Collections Access',
+  impactNumber: '3,958,321',
+}
+
+export function Default() {
+  return {
+    data() {
+      return {
+        ...mock,
+      }
+    },
+    components: { ImpactNumberCard },
+    template: `
+        <impact-number-card
+            :text="text"
+            :title="title"
+            :impact-number="impactNumber"
+        />
+    `,
+  }
+}