Merge pull request #1539 from EnergySage/ced-1863-es-button-href-prop

fix: support href and to props for EsButton
EnergySage · Oct 1, 2024 · d3f400b · d3f400b
2 parents 42a900f + 6b7cd88
commit d3f400b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/es-ds-components/components/es-button.vue b/es-ds-components/components/es-button.vue
@@ -55,6 +55,16 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // Url when using button as a link
+    href: {
+        type: String,
+        default: null,
+    },
+    // Url when using button as a link to an internal page
+    to: {
+        type: String,
+        default: null,
+    },
 });
 
 const getRootClasses = computed(() => {
@@ -73,7 +83,15 @@ const getRootClasses = computed(() => {
 </script>
 
 <template>
+    <nuxt-link
+        v-if="props.href || props.to"
+        :href="props.href || undefined"
+        :to="props.to || undefined"
+        :class="getRootClasses">
+        <slot />
+    </nuxt-link>
     <prime-button
+        v-else
         :pt="{
             root: { class: getRootClasses },
         }">

diff --git a/es-ds-docs/pages/molecules/button.vue b/es-ds-docs/pages/molecules/button.vue
@@ -69,6 +69,7 @@ const linkExamples = ref([
 ]);
 
 const propTableRows = ref([
+    ['href', 'String', 'null', 'An external URL to navigate to when using a button as a link.'],
     [
         'inline',
         'Boolean',
@@ -78,6 +79,7 @@ const propTableRows = ref([
     ],
     ['outline', 'Boolean', 'false', 'If true, changes to the outline version of the specified variant.'],
     ['size', 'String', '"md"', "The size of the button: 'md', or 'sm'."],
+    ['to', 'String', 'null', 'An internal path to navigate to when using a button as a link'],
     ['variant', 'String', '"primary"', "The name of the desired button variant: 'primary', 'dark-bg', or 'link'."],
 ]);
 
@@ -107,11 +109,17 @@ onMounted(async () => {
         <h1>Button</h1>
         <p>
             Extended from
-            <a
+            <nuxt-link
                 href="https://v3.primevue.org/button/"
                 target="_blank">
-                primevue button
-            </a>
+                PrimeVue Button
+            </nuxt-link>
+            and
+            <nuxt-link
+                href="https://nuxt.com/docs/api/components/nuxt-link"
+                target="_blank">
+                NuxtLink
+            </nuxt-link>
         </p>
         <p>
             When using a button, please ensure that the copy style is