diff --git a/.github/percy/percy_config.yml b/.github/percy/percy_config.yml new file mode 100644 index 00000000..82c75125 --- /dev/null +++ b/.github/percy/percy_config.yml @@ -0,0 +1,15 @@ +# @file(yaml) +# Global Configurations for Percy CLI +version: 2 +snapshot: + widths: [390,1280] + minHeight: 1024 + percyCSS: "" +discovery: + allowedHostnames: [] + disallowedHostnames: [] + networkIdleTimeout: 100 +upload: + files: "**/*.{png,jpg,jpeg}" + ignore: "" + stripExtensions: false diff --git a/.github/percy/snapshot_config.yml b/.github/percy/snapshot_config.yml new file mode 100644 index 00000000..7a4f583c --- /dev/null +++ b/.github/percy/snapshot_config.yml @@ -0,0 +1,106 @@ + + +- name: Article with ALL components + url: https://d8-dev.boston.gov/departments/digital-team/test-page + waitForTimeout: 5000 + execute: | + jQuery('.paragraphs-item-events-and-notices').addClass("hidden"); + +- name: Event (basic) - WEST END COMMUNITY PRESERVATION + url: https://d8-dev.boston.gov/node/61556 + +- name: Event (with header) - MAYOR ON MAIN TROLLEY TOUR + url: https://d8-dev.boston.gov/node/45361 + +- name: Listing Page - PAY AND APPLY + url: https://d8-dev.boston.gov/node/32906 + +- name: Listing Page - PARKS AND PLAYGROUNDS + url: https://d8-dev.boston.gov/node/32946 + +- name: Place Profile - ANIMAL CARE AND CONTROL CENTER + url: https://d8-dev.boston.gov/node/2191 + +- name: Place Profile - BAY VILLAGE HISTORIC DISTRICT + url: https://d8-dev.boston.gov/node/3251 + +- name: Person Profile - MARK CIOMMO + url: https://d8-dev.boston.gov/node/401 + +- name: Person Profile - KIM JANEY + url: https://d8-dev.boston.gov/node/38046 + +- name: Program Initiative Page - MY BROTHERS KEEPER BOSTON + url: https://d8-dev.boston.gov/node/7396 + +- name: Program Initiative Page - AGE-FRIENDLY BOSTON + url: https://d8-dev.boston.gov/node/25396 + +- name: Post - BIKE SHARE + url: https://d8-dev.boston.gov/node/1741 + +- name: Post - RODENT AND PEST CONTROL + url: http://d8-dev.boston.gov/node/63036 + +- name: How To - CPR TRAINING + url: https://d8-dev.boston.gov/node/3606 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands last drawer on page + +- name: How To - FILE FOR A PROPERTY TAX ABATEMENT + url: https://d8-dev.boston.gov/node/12806 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands last drawer on page + +- name: Article - PARKING METERS + url: https://d8-dev.boston.gov/node/551 + +- name: Article - MAYORS OFFICE OF HOUSING + url: https://d8-dev.boston.gov/node/2726 + +- name: Department - INSPECTIONAL SERVICES + url: https://d8-dev.boston.gov/node/151 + execute: | + jQuery('.paragraphs-item-events-and-notices').addClass("hidden"); +# Hides dynamic content on page to reduce false positives for changes + +- name: Department - HUMAN RESOURCES + url: https://d8-dev.boston.gov/node/216 + execute: | + jQuery('.dr-c:first()').; +# Expands first drawer on page + +- name: Public Notice - PUBLIC FACILITIES COMMISSION MEETING + url: https://d8-dev.boston.gov/node/64966 + +- name: Guide - GETTING AROUND BOSTON + url: https://d8-dev.boston.gov/node/506 + +- name: Guide - HAVING A CAR IN BOSTON + url: https://d8-dev.boston.gov/node/6 + +- name: Landing Page - HOMEPAGE + url: https://d8-dev.boston.gov/node/21 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands first drawer on page + +- name: Landing Page - CAREER CENTER + url: https://d8-dev.boston.gov/node/19261 + execute: | + jQuery('.paragraphs-item-grid-of-cards:first()').addClass("hidden"); + # Hides dynamic content on page to reduce false positives for changes + +- name: Procurement - INSPECTIONAL SERVICES RELATIVE TO ... + url: https://d8-dev.boston.gov/node/15920681 + +- name: Procurement - BFD THERMAL IMAGING CAMERAS ... + url: https://d8-dev.boston.gov/node/15920521 + +- name: Map Verification - 30 Westville St (BH) + url: https://d8-dev.boston.gov/buildinghousing/30-westville-st + +- name: Drawers Example - DRAWERS (INSPECTION SERVICES) + url: https://d8-dev.boston.gov/node/3921 diff --git a/.github/percy/snapshot_config_stage.yml b/.github/percy/snapshot_config_stage.yml new file mode 100644 index 00000000..4f075234 --- /dev/null +++ b/.github/percy/snapshot_config_stage.yml @@ -0,0 +1,101 @@ +- name: Article with ALL components + url: https://d8-stg.boston.gov/departments/digital-team/test-page + waitForTimeout: 5000 + execute: | + jQuery('.paragraphs-item-events-and-notices').addClass("hidden"); + +- name: Event (basic) - WEST END COMMUNITY PRESERVATION + url: https://d8-stg.boston.gov/node/61556 + +- name: Event (with header) - MAYOR ON MAIN TROLLEY TOUR + url: https://d8-stg.boston.gov/node/45361 + +- name: Listing Page - PAY AND APPLY + url: https://d8-stg.boston.gov/node/32906 + +- name: Listing Page - PARKS AND PLAYGROUNDS + url: https://d8-stg.boston.gov/node/32946 + +- name: Place Profile - ANIMAL CARE AND CONTROL CENTER + url: https://d8-stg.boston.gov/node/2191 + +- name: Place Profile - BAY VILLAGE HISTORIC DISTRICT + url: https://d8-stg.boston.gov/node/3251 + +- name: Person Profile - MARK CIOMMO + url: https://d8-stg.boston.gov/node/401 + +- name: Person Profile - KIM JANEY + url: https://d8-stg.boston.gov/node/38046 + +- name: Program Initiative Page - MY BROTHERS KEEPER BOSTON + url: https://d8-stg.boston.gov/node/7396 + +- name: Program Initiative Page - AGE-FRIENDLY BOSTON + url: https://d8-stg.boston.gov/node/25396 + +- name: Post - BIKE SHARE + url: https://d8-stg.boston.gov/node/1741 + +- name: Post - RODENT AND PEST CONTROL + url: http://d8-stg.boston.gov/node/63036 + +- name: How To - CPR TRAINING + url: https://d8-stg.boston.gov/node/3606 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands last drawer on page + +- name: How To - FILE FOR A PROPERTY TAX ABATEMENT + url: https://d8-stg.boston.gov/node/12806 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands last drawer on page + +- name: Article - PARKING METERS + url: https://d8-stg.boston.gov/node/551 + +- name: Article - MAYORS OFFICE OF HOUSING + url: https://d8-stg.boston.gov/node/2726 + +- name: Department - INSPECTIONAL SERVICES + url: https://d8-stg.boston.gov/node/151 + execute: | + jQuery('.paragraphs-item-events-and-notices').addClass("hidden"); +# Hides dynamic content on page to reduce false positives for changes + +- name: Department - HUMAN RESOURCES + url: https://d8-stg.boston.gov/node/216 + execute: | + jQuery('.dr-c:first()').; +# Expands first drawer on page + +- name: Public Notice - PUBLIC FACILITIES COMMISSION MEETING + url: https://d8-stg.boston.gov/node/64966 + +- name: Guide - GETTING AROUND BOSTON + url: https://d8-stg.boston.gov/node/506 + +- name: Guide - HAVING A CAR IN BOSTON + url: https://d8-stg.boston.gov/node/6 + +- name: Landing Page - HOMEPAGE + url: https://d8-stg.boston.gov/node/21 + execute: | + jQuery('.dr-tr:last()').click(); +# Expands first drawer on page + +- name: Landing Page - CAREER CENTER + url: https://d8-stg.boston.gov/node/19261 + execute: | + jQuery('.paragraphs-item-grid-of-cards:first()').addClass("hidden"); + # Hides dynamic content on page to reduce false positives for changes + +- name: Procurement - INSPECTIONAL SERVICES RELATIVE TO ... + url: https://d8-stg.boston.gov/node/15920681 + +- name: Procurement - BFD THERMAL IMAGING CAMERAS ... + url: https://d8-stg.boston.gov/node/15920521 + +- name: Map Verification - 30 Westville St (BH) + url: https://d8-stg.boston.gov/buildinghousing/30-westville-st diff --git a/.github/workflows/percy_snapshot.yml b/.github/workflows/percy_snapshot.yml new file mode 100644 index 00000000..d6bd5c08 --- /dev/null +++ b/.github/workflows/percy_snapshot.yml @@ -0,0 +1,120 @@ +# @file(yaml) +# == GITHUB ACTION == +# Percy screenshot scripting for patterns.boston.gov +# Workflow monitors master branch and is triggered by a Pull Request. +# The action is triggered before the code reaches the environment, so the workflow compares screenshots taken +# from the lower environment. + +# Attached resources: +# - GitHub SECRETS: +# -> local.PERCY_TOKEN_STAGE -> Notify people that release is ready. +# -> local.PERCY_TOKEN -> Notify people that release is ready. + +name: Percy Snapshot Regression Testing + +env: + PERCY_CONFIG: "$GITHUB_WORKSPACE/.github/percy/percy_config.yml" + +on: + workflow_dispatch: + pull_request: + branches: + - production + types: + - opened + - reopened + - synchronize + +jobs: + + debug: + runs-on: ubuntu-latest + if: ${{ vars.DEBUG == 1 }} + + defaults: + run: + shell: bash + + steps: + - name: Debug ENVARS + run: | + export + + - name: Debug github context + env: + GITHUB_CONTEXT: ${{ toJSON(github) }} + run: | + echo $GITHUB_CONTEXT + + - name: Debug github.event context + env: + EVENT_CONTEXT: ${{ toJSON(github.event) }} + run: | + echo $EVENT_CONTEXT + + + percy_manual: + + if: github.event_name == 'workflow_dispatch' + runs-on: ubuntu-latest + + env: + SNAPSHOT_CONFIG: "$GITHUB_WORKSPACE/.github/percy/snapshot_config.yml" + + defaults: + run: + shell: bash + + steps: + - name: checkout percy files + uses: Bhacaz/checkout-files@v2 + with: + files: .github/percy + branch: develop + + - name: Setup Node 16 + uses: actions/setup-node@v3 + with: + node-version: '16' + + - name: Install Percy CLI + run: npm install --save-dev @percy/cli + + - name: Compare Frontend Snapshots + run: | + npx @percy/cli snapshot --config ${{ env.PERCY_CONFIG }} ${{ env.SNAPSHOT_CONFIG }} + env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} + + percy_production: + + if: ${{ github.base_ref == 'production' }} + runs-on: ubuntu-latest + + env: + SNAPSHOT_CONFIG: "$GITHUB_WORKSPACE/.github/percy/snapshot_config_stage.yml" + + defaults: + run: + shell: bash + + steps: + - name: checkout percy files + uses: Bhacaz/checkout-files@v2 + with: + files: .github/percy + branch: develop + + - name: Setup Node 16 + uses: actions/setup-node@v3 + with: + node-version: '16' + + - name: Install Percy CLI + run: npm install --save-dev @percy/cli + + - name: Compare Frontend Snapshots + run: | + npx @percy/cli snapshot --config ${{ env.PERCY_CONFIG }} ${{ env.SNAPSHOT_CONFIG }} + env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STAGE }} diff --git a/stylesheets/patterns-cob-theme.styl b/stylesheets/patterns-cob-theme.styl index 7bff32fd..f476efef 100644 --- a/stylesheets/patterns-cob-theme.styl +++ b/stylesheets/patterns-cob-theme.styl @@ -507,6 +507,13 @@ label { margin-bottom: 25px; padding-bottom: 3rem } +.paragraphs-item-text .entity-paragraphs-item { + margin-bottom: 0; + padding-bottom: 0 +} +.paragraphs-item-text .entity-paragraphs-item .supporting-lg, .paragraphs-item-text .entity-paragraphs-item.paragraphs-item-text-three-column { + padding-bottom: 30px +} .dr .squiggle-border-bottom .supporting-text { padding-bottom: 3rem }