Run regression spec against preview site (#353)

* Run regression spec against preview site

Why? So that it'll continue to work after the main design.login.gov site is decommissioned.

* Strip baseurl from code example markup

Since it'll be different between preview environments affected by visual regression spec

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.

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
 

docs/_includes/helpers/code-example.html

@@ -6,6 +6,6 @@
 
 <div markdown="1">
 ```html
-{{ include.code | strip | replace_regex: '\s?data-test(?:="[^\s"]+")', '' }}
+{{ include.code | replace: site.baseurl, '' | strip | replace_regex: '\s?data-test(?:="[^\s"]+")', '' }}
 ```
 </div>

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() {