feat: Add Button

package.json

@@ -33,6 +33,5 @@
   },
   "engines": {
     "pnpm": "^9.12.1"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/vue-component-library/src/lib-components/ButtonLink.vue

@@ -136,4 +136,5 @@ const parsedIconName = computed(() => {
 <style lang="scss" scoped>
 @import "@/styles/default/_button-link.scss";
 @import "@/styles/ftva/_button-link.scss";
+@import "@/styles/dlc/_button-link.scss";
 </style>

packages/vue-component-library/src/stories/ButtonLink.stories.js

@@ -174,3 +174,29 @@ export function FTVATertiary() {
             '<button-link label="FTVA Tertiary" :isTertiary="true" icon-name="none" to=\'www.google.com\'/>',
   }
 }
+
+export function DLCPrimary() {
+  return {
+    components: { ButtonLink },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    template:
+            '<button-link label="Back to Search Results" icon-name="none" to=\'https://www.google.com\'/>',
+  }
+}
+
+export function DLCSecondary() {
+  return {
+    components: { ButtonLink },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    template:
+            '<button-link label="Available for Download" :isSecondary="true"  :is-download="true" to=\'/help/more\'/>',
+  }
+}

packages/vue-component-library/src/styles/dlc/_button-link.scss

@@ -0,0 +1,62 @@
+.dlc.button-link {
+    --transition-duration: 0.3s;
+    .hover {
+        display: none;
+    }
+    .arrow {
+        display: none;
+    }
+
+    padding: 10px 15px;
+    border-radius: 30px;
+    background-color: $subtitle-grey;
+
+    font-size: 15px;
+    font-family: var(--font-primary);
+    font-weight: 500;
+    line-height: 1;
+    color: var(--color-white);
+    outline: none;
+    border: 1px solid $subtitle-grey;
+    min-height: 38px;
+
+    transition: background-color var(--transition-duration) ease-out,
+        color var(--transition-duration) ease-out,
+        border-color var(--transition-duration) ease-out;
+
+    // Remove padding from first child
+    *:not(:only-child):first-child {
+        padding-left: 0px;
+    }
+
+    // Secondary variant
+    &.is-secondary {
+        padding: 8px 20px;
+        border-radius: 5px;
+
+        background-color: transparent;
+        border: 1px solid $accent-blue;
+        color: $accent-blue;
+
+        font-size: 18px;
+        font-family: var(--font-primary);
+        font-weight: 500;
+        line-height: 1;
+        min-height: 35px;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover {
+            background-color: var(--color-secondary-blue-01);
+            border-color: var(--color-secondary-blue-01);
+
+            // Secondary variant hover
+            &.is-secondary {
+                background-color: $accent-blue;
+                border-color: $accent-blue;
+                color: var(--color-white);
+            }
+        }
+    }
+}