Merge remote-tracking branch 'origin/CED-1761' into CED-1761

EnergySage · Oct 3, 2024 · ebbaee9 · ebbaee9
2 parents 5374bd3 + b1872b6
commit ebbaee9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 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/examples/form-field-validation.vue b/es-ds-docs/pages/examples/form-field-validation.vue
@@ -5,7 +5,7 @@ const state = reactive({
         password: '',
         phone: '',
         maskedPhoneNumber: '',
-        // notes: '',
+        notes: '',
     },
 });
 
@@ -19,9 +19,9 @@ const rules = {
             [vuelidateKeys.REQUIRED]: vuelidateRequired,
             [vuelidateKeys.EMAIL]: vuelidateEmail,
         },
-        // notes: {
-        //     [vuelidateKeys.REQUIRED]: vuelidateRequired,
-        // },
+        notes: {
+            [vuelidateKeys.REQUIRED]: vuelidateRequired,
+        },
         password: {
             [vuelidateKeys.REQUIRED]: vuelidateRequired,
             [vuelidateKeys.MIN_LENGTH]: vuelidateMinLength(8),
@@ -167,18 +167,16 @@ onMounted(async () => {
                         <template #label> Masked phone number </template>
                         <template #errorMessage> Please enter a valid phone number. </template>
                     </es-form-input>
-                    <!--                    <es-form-textarea-->
-                    <!--                        id="notes"-->
-                    <!--                        v-model="form.notes"-->
-                    <!--                        :disabled="isSubmitInProgress"-->
-                    <!--                        :state="validateState('form.notes')"-->
-                    <!--                        required-->
-                    <!--                        @change="touchOnChange('form.notes')"-->
-                    <!--                        @blur="$v.form.notes.$touch">-->
-                    <!--                        <template #label>-->
-                    <!--                            Notes-->
-                    <!--                        </template>-->
-                    <!--                    </es-form-textarea-->
+                    <es-form-textarea
+                        id="notes"
+                        v-model="state.form.notes"
+                        :disabled="isSubmitInProgress"
+                        :state="validateState('form.notes')"
+                        required
+                        @change="touchOnChange('form.notes')"
+                        @blur="v$.form.notes.$touch">
+                        <template #label> Notes </template>
+                    </es-form-textarea>
                     <div class="d-flex flex-grow-1 justify-content-end mt-200">
                         <es-button
                             type="submit"

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