From 4ee9021fc2f289a1ba7237da6711feba89d099e2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 1 May 2023 15:54:43 -0400 Subject: [PATCH 1/2] Run regression spec against preview site Why? So that it'll continue to work after the main design.login.gov site is decommissioned. --- CHANGELOG.md | 4 ++-- CONTRIBUTING.md | 2 +- test/screenshot.test.js | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 47e0c407..3e15c149 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -177,7 +177,7 @@ ### New Features - Add support for SASS package entrypoints to limit or control loading of styles, [similar to USWDS components](https://designsystem.digital.gov/components/packages/). Available packages are `packages/required`, `packages/global`, `packages/components`, and `packages/utilities`. -- The [Side Navigation component](https://design.login.gov/components/side-navigation/) is now documented and includes updated and improved styling. While this should not require any markup changes, you should validate that the updated styling does not conflict with any product-specific styles for side navigation. +- The Side Navigation component is now documented and includes updated and improved styling. While this should not require any markup changes, you should validate that the updated styling does not conflict with any product-specific styles for side navigation. ### Bug Fixes @@ -221,7 +221,7 @@ - Link hover and active colors are now distinct. - Before: Hover and active colors are both `primary-darker`. - After: Hover is `primary-dark`, and active is `primary-darker`. -- Improved support for "Unstyled" button variant ([see documentation](https://design.login.gov/components/buttons/)) +- Improved support for "Unstyled" button variant - Add three new button variants to control width: - `usa-button--wide` displays a button at a wider (minimum) width at larger viewport displays. - `usa-button--flexible-width` displays a button at flexible width regardless of viewport size, and overrides default mobile appearance of full-width buttons. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2c98cef4..bc8777a9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -96,7 +96,7 @@ Since the Login.gov Design System is based upon the [U.S. Web Design System (USW - Where possible, use [the available Sass theme variables](https://designsystem.digital.gov/documentation/developers/#customization-theming-and-tokens) to customize the appearance of components. These are configured under `src/scss/uswds-theme`. We only include the customized variables, to improve visibility of where differences are expected. Refer to the [USWDS theme variables source](https://github.com/uswds/uswds/tree/develop/src/stylesheets/theme) for the full set of configuration values. - To limit side-effects and to clarify where styles are extended, customized USWDS styles should follow as close to the file location and CSS selector as possible. For example, if USWDS defines a selector `.usa-header` in `packages/usa-header` which defines a style `background` that we want to override, the style should be located at an identically-named selector in `src/scss/packages/_usa-header.scss` in this project. -- Prefer color and size tokens when possible. Never use hard-coded hex colors. Instead, use the `color` SCSS function with a [color token](https://design.login.gov/utilities/color/) as its argument. +- Prefer color and size tokens when possible. Never use hard-coded hex colors. Instead, use the `color` SCSS function with a [color token](https://designsystem.digital.gov/design-tokens/color/theme-tokens/) as its argument. ## Public domain diff --git a/test/screenshot.test.js b/test/screenshot.test.js index 74e24b89..52334e08 100644 --- a/test/screenshot.test.js +++ b/test/screenshot.test.js @@ -10,7 +10,8 @@ const { getURLsFromSitemap } = require('./support/sitemap'); const { writeFile, mkdir } = fsPromises; const LOCAL_HOST = `http://localhost:${process.env.JEST_PORT}`; -const REMOTE_HOST = 'https://design.login.gov'; +const REMOTE_HOST = + 'https://federalist-340d8801-aa16-4df5-ad22-b1e3e731098e.sites.pages.cloud.gov/site/18f/identity-design-system'; const DIFF_DIRECTORY = join(__dirname, '../tmp/results/screenshot-diff'); async function stubAnimations() { From ad249704a1b537602bfc7ad1660e3f5fe551ae1e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 1 May 2023 16:08:53 -0400 Subject: [PATCH 2/2] Strip baseurl from code example markup Since it'll be different between preview environments affected by visual regression spec --- docs/_includes/helpers/code-example.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/helpers/code-example.html b/docs/_includes/helpers/code-example.html index 8fcea778..f7ff0dc2 100644 --- a/docs/_includes/helpers/code-example.html +++ b/docs/_includes/helpers/code-example.html @@ -6,6 +6,6 @@
```html -{{ include.code | strip | replace_regex: '\s?data-test(?:="[^\s"]+")', '' }} +{{ include.code | replace: site.baseurl, '' | strip | replace_regex: '\s?data-test(?:="[^\s"]+")', '' }} ```