Chromatic preview link testing

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,6 +2,8 @@
 <!-- This `{{head.ref}}` is a placeholder for a CI job - it will be updated automatically -->
 https://{{head.ref}}--65a6e2ed2314f7b8f98609d8.chromatic.com
 
+https://STORYBOOK_PREVIEW_BRANCH--65a6e2ed2314f7b8f98609d8.chromatic.com
+
 ---
 ## Configuring this pull request
 - [ ] Link to any related issues in the description so they can be cross-referenced.

.github/workflows/chromatic-link.yml

@@ -13,3 +13,4 @@ jobs:
       - uses: luigibertaco/[email protected]
         with:
           token: '${{ secrets.GITHUB_TOKEN }}'
+

.github/workflows/chromatic.yml

@@ -27,11 +27,38 @@ jobs:
       - run: yarn workspace @department-of-veterans-affairs/web-components run build
       - run: yarn workspace @department-of-veterans-affairs/component-library run build
       - name: Publish to Chromatic
+        id: chromatic
         uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          # Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
           workingDir: packages/storybook
           skip: 'dependabot/**'
+          # branchName: pr-${{ env.PR_NUMBER}}
+
+      - name: Output Chromatic Results
+        id: chromatic_urls
+        run: |
+          echo "=== Debug Information ==="
+          echo "Original Storybook URL: ${{ steps.chromatic.outputs.storybookUrl }}"
+          echo "Original Build URL: ${{ steps.chromatic.outputs.buildUrl }}"
+          echo "Current branch name: ${{ github.ref_name }}"
+
+          # Extract the project URL and branch slug from Storybook URL
+          PROJECT_URL=$(echo "${{ steps.chromatic.outputs.storybookUrl }}" | sed -E 's/--.*\.chromatic\.com.*//')
+          BRANCH_SLUG=$(echo "${{ steps.chromatic.outputs.storybookUrl }}" | grep -o -- "--.*\." | sed 's/--\(.*\)\./\1/')
+
+          echo "=== Extracted Components ==="
+          echo "Project URL: ${PROJECT_URL}"
+          echo "Branch Slug: ${BRANCH_SLUG}"
+
+          # Construct the final branch URL
+          BRANCH_URL="${PROJECT_URL}.chromatic.com/branch/${BRANCH_SLUG}"
+
+          echo "=== Final URLs ==="
+          echo "Branch permalink: ${BRANCH_URL}"
+
+          # Set output for use in other steps if needed
+          echo "branch_url=${BRANCH_URL}" >> $GITHUB_OUTPUT

packages/web-components/src/components/va-accordion/va-accordion.tsx

@@ -226,6 +226,7 @@ export class VaAccordion {
             (this.accordionContainer = accordionContainer)
           }
         >
+          <h1>Hello world!</h1>
           {!openSingle ? (
             <button
               aria-expanded={`${this.expanded}`}