Merge remote-tracking branch 'refs/remotes/origin/CED-1760-Create-v3-…

…EsVerificationCode-using-PrimeVue' into CED-1760-Create-v3-EsVerificationCode-using-PrimeVue

.github/PULL_REQUEST_TEMPLATE.md

@@ -45,6 +45,14 @@ Please carefully read the contribution docs before creating a pull request
 <!-- If your change requires a documentation PR, please link it appropriately -->
 <!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
 
-- [ ] I have linked an issue or discussion.
-- [ ] I have updated the documentation accordingly.
-- [ ] I have documented testing approach
+<!-- Accessibility is required for new components unless specifically exempted. -->
+<!-- The WAVE browser extension can be downloaded here: https://wave.webaim.org/extension/ -->
+<!-- Navigating with keyboard means that any interactive elements like forms and buttons can be navigated -->
+<!-- to using the Tab key and triggered with the Enter key. -->
+
+- [ ] I have verified accessibility of any new components by:
+  - [ ] automated check with the WAVE browser extension
+  - [ ] navigating by keyboard
+  - [ ] using with a screen reader (e.g. VoiceOver on Safari)
+- [ ] I have included any Storyblok component schema updates.
+- [ ] I have updated any applicable documentation.

.github/workflows/ci.yml

@@ -13,31 +13,23 @@ on:
 
 jobs:
     ci:
-        runs-on: ${{ matrix.os }}
-
-        strategy:
-            matrix:
-                os: [ubuntu-latest]
-                node: [16]
+        runs-on: ubuntu-latest
 
         steps:
             - name: Checkout 🛎
-              uses: actions/checkout@master
+              uses: actions/checkout@v4
+
+            - name: Get nodenv version 🔌
+              id: nodenv
+              shell: bash
+              run: echo "node-version=$(cat .node-version)" >> $GITHUB_OUTPUT
 
             - name: Setup node env 🏗
-              uses: actions/setup-node@v3.7.0
+              uses: actions/setup-node@v4
               with:
-                  node-version: ${{ matrix.node }}
+                  node-version: '${{ steps.nodenv.outputs.node-version }}'
                   check-latest: true
 
-            - name: Cache node_modules 📦
-              uses: actions/[email protected]
-              with:
-                  path: ~/.npm
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-node-
-
             - name: Install dependencies 👨🏻‍💻
               run: |
                 make install

.github/workflows/deploy-v3.yml

@@ -31,19 +31,27 @@ jobs:
               run: |
                   aws codeartifact login --tool npm --domain energysage --domain-owner 659694780082 --repository cloud-engineering
 
-            - name: Link ES-DS Version 3 🔗
-              working-directory:
+            - name: Get nodenv version 🔌
+              id: nodenv
               shell: bash
+              run: echo "node-version=$(cat .node-version)" >> $GITHUB_OUTPUT
+
+            - name: Setup node env 🏗
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '${{ steps.nodenv.outputs.node-version }}'
+                  check-latest: true
+
+            - name: Install dependencies 👨🏻‍💻
               run: |
-                cd es-ds-styles; npm link
-                cd ../es-ds-components; npm link
-                cd ../es-ds-docs; npm link @energysage/es-ds-styles @energysage/es-ds-components
+                make install
+                make symlink
 
             - name: Build ES-DS Version 3 🛠️
               working-directory: ./es-ds-docs
               shell: bash
               run: |
-                npx nuxt generate
+                npm run generate
 
             - name: Deploy to S3 📍
               working-directory: ./es-ds-docs

.node-version

@@ -1 +1 @@
-18.19.1
+20.17.0

Makefile

@@ -22,9 +22,9 @@ unlink:
 
 .PHONY: lint
 lint:
-	npm --prefix es-ds-styles run lint
-	npm --prefix es-ds-components run lint
-	npm --prefix es-ds-docs run lint
+	npm --prefix es-ds-styles run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
+	npm --prefix es-ds-components run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
+	npm --prefix es-ds-docs run lint || { echo "Linting failed. Forgot to run 'make format'?"; exit 1; }
 
 .PHONY: format
 format:

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 },
         }">

es-ds-components/components/es-cta-card.vue

@@ -0,0 +1,60 @@
+<script setup>
+const props = defineProps({
+    imageFirst: {
+        type: Boolean,
+        default: false,
+    },
+    horizontalPadding: {
+        type: String,
+        default: 'px-100',
+    },
+    verticalSpacing: {
+        type: String,
+        default: 'mb-150',
+    },
+});
+</script>
+
+<template>
+    <es-card
+        class="align-items-center d-flex flex-column py-200 text-center"
+        :class="props.horizontalPadding"
+        v-bind="$attrs">
+        <!-- avoiding use of an <h2> tag here for long-form content SEO reasons,
+            but preserving heading semantics for screen readers -->
+        <div
+            role="heading"
+            aria-level="2"
+            class="font-weight-semibold font-size-300"
+            :class="[{ 'order-1': props.imageFirst }, props.verticalSpacing]">
+            <slot name="heading"> Easily find what solar costs in your area </slot>
+        </div>
+        <div
+            v-if="$slots.image"
+            class="mx-auto w-100"
+            :class="props.verticalSpacing">
+            <slot name="image" />
+        </div>
+        <div
+            class="w-100"
+            :class="{ 'order-2': props.imageFirst }">
+            <div
+                v-if="$slots.subtitle"
+                class="es-cta-card-subtitle"
+                :class="props.verticalSpacing">
+                <slot name="subtitle" />
+            </div>
+            <slot name="cta" />
+        </div>
+    </es-card>
+</template>
+
+<style lang="scss" scoped>
+.es-cta-card {
+    &-subtitle {
+        :deep(p:last-child) {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>

es-ds-components/components/es-file-preview-modal.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    fileName: {
+        type: String,
+        default: 'test.png',
+        required: false,
+    },
+    fileSource: {
+        type: String,
+        default: '',
+        required: false,
+    },
+});
+
+defineEmits(['hidden']);
+</script>
+
+<template>
+    <es-modal
+        :id="`preview-modal-${fileName}`"
+        hide-footer
+        :visible="visible"
+        size="xl"
+        body-class="border-top p-0"
+        @hidden="$emit('hidden')">
+        <template #modal-title>
+            {{ fileName }}
+        </template>
+        <div class="d-md-none d-block file-preview text-center">
+            <nuxt-img
+                loading="lazy"
+                class="img-fluid file-preview"
+                :src="fileSource"
+                :alt="fileName" />
+        </div>
+        <div class="d-none d-md-block">
+            <div class="px-500 py-200 bg-gray-200">
+                <div class="card bg-white file-preview">
+                    <nuxt-img
+                        loading="lazy"
+                        class="img-fluid file-preview rounded-img"
+                        :src="fileSource"
+                        :alt="fileName" />
+                </div>
+            </div>
+        </div>
+    </es-modal>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.rounded-img {
+    border-radius: variables.$card-inner-border-radius !important;
+}
+</style>