Docs(ci): Introduce manual testing section with Netlify links tweak

  * @see: https://gist.github.com/adamkudrna/694f3048c1338f07375b9b8af24afe2f
  * Many thanks to @adamkudrna

refs #DS-611

CONTRIBUTING.md

@@ -180,6 +180,22 @@ Testing script includes:
 You can run unit testing via `test:unit` scripts.
 For all available scripts see the package's `package.json` file.
 
+### Manual testing
+
+For better testing experience we are using deploy previews on Netlify.
+If your modification affects the publishable code and when you create a PR, every push then will be deployed to Netlify.
+Netlify will create a deploy preview and you can test your changes there.
+Netlify will also attach a link to the deploy preview to your PR so you can easily access it.
+
+#### Readable Netlify links
+
+For better UI experience when searching for the deploy preview link, you can use our [userContent.css](./docs/ci/userContent.css) file which will highlight the link in the PR.
+
+![Example of the modified Netlify link](./docs/ci/pr-netlify-links.png)
+
+👉 [How to Create a userContent.css File](https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data)
+👉 [How to Create a userChrome.css File](https://www.userchrome.org/how-create-userchrome-css.html)
+
 ### Visual regression testing
 
 **Prerequisites:** [Docker][docker] 🐳

docs/ci/userContent.css

@@ -0,0 +1,62 @@
+/* Disable some rules because we are tweaking GitHub's PR look */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable selector-no-qualifying-type */
+
+/**
+ * Make Netlify deploy preview links on GitHub stand out.
+ */
+@-moz-document domain("github.com") {
+  /* Turn Netlify links into buttons using GitHub design tokens. */
+  .comment-body a[href$='netlify.app'] {
+    position: relative;
+    display: block;
+    padding: 1em;
+    margin-block: 1em;
+    overflow: hidden;
+    font-weight: 500;
+    color: var(--color-btn-primary-text) !important;
+    border: 1px solid var(--color-btn-primary-border);
+    border-radius: 6px;
+    background-color: var(--color-btn-primary-bg) !important;
+    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+  }
+
+  .comment-body a[href$='netlify.app']::after {
+    content: 'Preview';
+    position: absolute;
+    inset: 1px;
+    display: grid;
+    place-content: center;
+    font-size: 1.25rem;
+    color: inherit;
+    background-color: inherit;
+  }
+
+  .comment-body a[href$='netlify.app']:hover {
+    border-color: var(--color-btn-primary-hover-border);
+    background-color: var(--color-btn-primary-hover-bg) !important;
+  }
+
+  .comment-body a[href$='netlify.app']:active {
+    border-color: var(--color-btn-active-border);
+    background-color: var(--color-btn-primary-selected-bg) !important;
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+  /* Spirit Design System: Adjust individual button labels by URL. */
+  .comment-body a[href$='spirit-design-system-demo.netlify.app']::after {
+    content: 'CSS Preview';
+  }
+
+  .comment-body a[href$='spirit-design-system-react.netlify.app']::after {
+    content: 'React Preview';
+  }
+
+  .comment-body a[href$='spirit-design-system-storybook.netlify.app']::after {
+    content: 'Storybook Preview';
+  }
+
+  .comment-body a[href$='spirit-design-system-validations.netlify.app']::after {
+    content: 'Form Validations Preview';
+  }
+}