CED-1782: v3 EsCtaBanner

.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

@@ -9,43 +9,35 @@ on:
         branches:
             - main
             - master
+            - esds-3.0-vue3-primevue
 
 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
-                make update-peer-deps
-                make build-scss-pkg
-                make symlink
-                make build-vue-pkg
                 make symlink
 
+            - name: Building
+              run: make build
+
             - name: Run linter 👀
               run: make lint
 

.github/workflows/deploy-v3.yml

@@ -0,0 +1,60 @@
+name: build & deploy esds 3.0
+
+on:
+    push:
+        branches:
+            - esds-3.0-vue3-primevue
+
+jobs:
+    deploy:
+        runs-on: ubuntu-latest
+        permissions:
+            id-token: write
+            contents: read
+
+        steps:
+            - name: Checkout Repo 🗃️
+              uses: actions/checkout@v4
+              with:
+                ref: esds-3.0-vue3-primevue
+
+            - name: Log into ES_DS_DEV AWS account 🔑
+              id: creds
+              uses: aws-actions/configure-aws-credentials@v4
+              with:
+                aws-region: us-east-1
+                role-to-assume: arn:aws:iam::453321834875:role/github-write-to-s3
+                output-credentials: true
+
+            - name: Log into CodeArtifact 🗝️
+              shell: bash
+              run: |
+                  aws codeartifact login --tool npm --domain energysage --domain-owner 659694780082 --repository cloud-engineering
+
+            - 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: |
+                make install
+                make symlink
+
+            - name: Build ES-DS Version 3 🛠️
+              working-directory: ./es-ds-docs
+              shell: bash
+              run: |
+                npm run generate
+
+            - name: Deploy to S3 📍
+              working-directory: ./es-ds-docs
+              shell: bash
+              run: |
+                aws s3 cp --recursive .output/public/ s3://es-ds-version-2

.gitignore

@@ -4,6 +4,8 @@ dist
 stats
 coverage
 cdk.out
+.nuxt
+.output
 
 # vscode
 .vscode/*

.node-version

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

.vscode/extensions.json

@@ -2,16 +2,11 @@
     "recommendations": [
         "davidanson.vscode-markdownlint",
         "stylelint.vscode-stylelint",
-        "redhat.vscode-yaml",
-        "octref.vetur",
+        "lokalise.i18n-ally",
+        "EditorConfig.EditorConfig",
         "dbaeumer.vscode-eslint",
-        "editorconfig.editorconfig",
-        "mikestead.dotenv",
         "esbenp.prettier-vscode",
-        "lokalise.i18n-ally",
-        "zignd.html-css-class-completion",
-        "christian-kohler.path-intellisense",
-        "simonsiefke.svg-preview",
-        "wayou.vscode-todo-highlight"
+        "Vue.volar",
+        "redhat.vscode-yaml"
     ]
 }

CHANGELOG.md

@@ -426,7 +426,7 @@ the new `showPrivacySection` prop
   - Truncated display name
   - Emit the file name as payload for emitted events
 - Added a `humanReadable` field to the `mime-type-finder` utils to support better error handling
-- The internal `DsResponsiveTable` component used to generate slots and props documentation on the `Typography`,`EsCard`, `EsFileInput`, `EsFileThumbnail`, and `EsSupportCard` pages now has the ability to customize its column widths to match the layout grid in the same manner as `<b-col>` by taking breakpoint props for `md` and up
+- The internal `DsResponsiveTable` component used to generate slots and props documentation on the `Typography`,`EsCard`, `EsFileInput`, `EsFileThumbnail`, and `EsSupportCard` pages now has the ability to customize its column widths to match the layout grid in the same manner as `<es-col>` by taking breakpoint props for `md` and up
 
 ## [0.23.2] - 2023-07-13
 

Makefile

@@ -1,50 +1,59 @@
+# Run local v3 docs site with hot reloading hooked up to es-ds-styles and es-ds-components
+
 .PHONY: dev
-dev:
-	overmind s
+dev: symlink
+	cd es-ds-docs; npm run dev
+
+.PHONY: symlink
+symlink:
+	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
+
+# Unlink local v3 docs site from local es-ds-styles and es-ds-components; restore to NPM versions
+
+.PHONY: unlink
+unlink:
+	cd es-ds-styles; npm unlink @energysage/es-ds-styles
+	cd es-ds-components; npm unlink @energysage/es-ds-components
+	cd es-ds-docs; npm unlink --no-save @energysage/es-ds-styles
+	cd es-ds-docs; npm unlink --no-save @energysage/es-ds-components
+	cd es-ds-docs npm install
 
 .PHONY: lint
 lint:
-	npx lerna 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:
+	npm --prefix es-ds-components run format
+	npm --prefix es-ds-docs run format
 
 .PHONY: test
 test:
-	npx lerna run test
+	npm --prefix es-ds-styles run test
+# TODO: set up testing for es-ds-components and es-ds-docs
+#	npm --prefix es-ds-components run test
+#	npm --prefix es-ds-docs run test
 
 .PHONY: build
 build:
-	npx lerna run build
-
-.PHONY: publish
-publish:
-	npx lerna publish
-
-.PHONY: symlink
-symlink:
-	npx lerna bootstrap
-
-.PHONE: reload
-reload:
-	npm --prefix es-vue-base run build
-	npx lerna bootstrap
+	npm --prefix es-ds-styles run build
+	npm --prefix es-ds-docs run build
+# es-ds-components does not have a build step
 
 # Sometimes Called
 
 .PHONY: install
 install:
-	npm install
-	npx lerna exec -- npm install
+	npm --prefix es-ds-styles install
+	npm --prefix es-ds-components install
+	npm --prefix es-ds-docs install
 
 # Bootstraping Commands (not reguarly called)
 
-.PHONY: build-scss-pkg
-build-scss-pkg:
-	npm run --prefix es-bs-base build
-
-.PHONY: build-vue-pkg
-build-vue-pkg:
-	npm run --prefix es-vue-base build
-
-.PHONY: update-peer-deps
-update-peer-deps:
-	npm --prefix es-vue-base install bootstrap-vue@2 \
-		vue@2
+.PHONY: update-package-deps
+update-package-deps:
+	cd es-ds-docs; npm uninstall @energysage/es-ds-styles && npm install @energysage/es-ds-styles && npm uninstall @energysage/es-ds-components && npm install @energysage/es-ds-components