@rei/cedar 15.0.1 → 15.2.0

package/README.md

@@ -9,13 +9,9 @@ and a set of themes that build on this scaffolding. We started this project in 2
 The project has evolved into what it is today, and will continue to grow to fit our expanding needs. Feel free to watch
 the Cedar grow and learn from what we are doing, or jump in and provide some recommendations.
 
-### Vue 3 Migration Status
-
-Cedar has been fully migrated to Vue 3 using the composition API and is using [vite](https://vitejs.dev/) for its build system. Additionally, [vitest](https://vitest.dev/) is now being used as our testing framework.
-
 ## Using Cedar
 
-See the [Cedar docs](https://rei.github.io/rei-cedar-docs/) for usage instructions.
+See the [Cedar docs](https://cedar.rei.com) for usage instructions.
 
 ## Getting Started
 
@@ -31,12 +27,6 @@ Clone the project.
 
 Runs locally for development. Has hot reloading, and other nice things related to development.
 
-Sometimes the liveReload server will hang in the background, do the following...
-
-Works on MacOS:
-
-`kill -9 $(lsof -ti tcp:35729)`
-
 ## Testing
 
 ### Code Tests
@@ -45,40 +35,19 @@ Works on MacOS:
 
 Runs unit tests.
 
-`npm run e2e`
-
-Runs [Nightwatch](http://nightwatchjs.org/) end-to-end tests and Axe a11y tests.
-
-`npm run test`
-
-Runs both unit and e2e/accesibility tests.
-
-### Visual Regression Testing
-
-> [!NOTE]
-> this has been temporarily disabled due to Vue3 compatibility issues.
-
-Check [backstop](https://github.com/garris/BackstopJS) for general configuration questions.
+`npm run watch`
 
-Our visual regressions audits can be performed against all patterns documented within the project's component proving grounds. To do so, follow the steps below:
+Runs unit tests in watch mode. This also allows you to inspect snapshot discrepancies and regenerate the snapshots if appropriate.
 
-1. Run the project locally with `npm run dev`
-2. `npm run reference` will create a base set of images providing coverage for all defined patterns. Ensure this is run against a clean build prior to any edits.
-3. `npm run compare` after making changes to the markup or css. This will create another set of test images and compare them against those generated in the previous step.
-4. Review the generated report that should open in your browser. Make sure all changes are what you expect.
-5. `npm run approve` if everything looks good. This will promote the latest test images to be the new reference images that future tests will be compared against.
-
-If you want to do backstop tests against a single scenario you can do `npm run compare -- --filter=<Label>`
+`npm run e2e`
 
-The config (`backstop.js`) looks through `src/` for all __*.backstop.js__ and generates a proper backstop scenario object for each.
+Runs [Nightwatch](http://nightwatchjs.org/) end-to-end tests and Axe a11y tests.
 
-__*.backstop.js__ files will export an array of objects that are standard backstop scenario objects and support all the same options noted in the docs with the following exceptions:
+Tests run using Chromedriver. To upgrade Chromedriver, determine the latest version of Chrome and Puppeteer that are compatible by visiting [this](https://pptr.dev/supported-browsers) page.
 
-- `responsive`: Boolean, configures whether or not the scenario runs against all 4 breakpoints. If not present or false it will only run against the largest breakpoint. Note that running responsive tests against specific selectors can often lead to incorrect screenshots, and it is better to set up a separate responsive scenario that targets the entire document, for example: `{ url: 'http://localhost:3000/#/EXAMPLE', label: 'EXAMPLE', responsive: true }`
-- `focusSelectors`: Array, list of selectors that will have `focus` applied before screenshotting
-- `hoverSelectors`: Array, list of selectors that will have `hover` applied before screenshotting
-- `wait`: Number, if using `focusSelectors` or `hoverSelectors` this will insert a delay in milliseconds between the element interaction and the screenshot
+`npm run test`
 
+Runs both unit and e2e/accessibility tests.
 
 ## Publishing Prerelease Components
 

package/dist/cdr-fonts.css

@@ -1,25 +1 @@
-@font-face {
-  font-display: swap;
-  font-family: Stuart;
-  font-weight: 1 999;
-  src: url("//www.rei.com/satchel/media/font-optimized/Stuart/REIStuart-VF-Web-Subset.woff2") format("woff2-variations"), url("//www.rei.com/satchel/media/font-optimized/Stuart/REIStuart-VF-Web-Subset.woff2") format("woff2"); }
-
-@font-face {
-  font-display: swap;
-  font-family: Stuart;
-  font-weight: 1 999;
-  font-style: italic;
-  src: url("//www.rei.com/satchel/media/font-optimized/Stuart/REIStuartWebItalics-VF-Web-Subset.woff2") format("woff2-variations"), url("//www.rei.com/satchel/media/font-optimized/Stuart/REIStuartWebItalics-VF-Web-Subset.woff2") format("woff2"); }
-
-@font-face {
-  font-display: swap;
-  font-family: Graphik;
-  font-weight: 1 999;
-  src: url("//www.rei.com/satchel/media/font-optimized/Graphik/Graphik-VF-Web-Subset.woff2") format("woff2-variations"), url("//www.rei.com/satchel/media/font-optimized/Graphik/Graphik-VF-Web-Subset.woff2") format("woff2"); }
-
-@font-face {
-  font-display: swap;
-  font-family: Graphik;
-  font-weight: 1 999;
-  font-style: italic;
-  src: url("//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2") format("woff2-variations"), url("//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2") format("woff2"); }
+@font-face{font-display:swap;font-family:Stuart;font-weight:1 999;src:url(//www.rei.com/satchel/media/font-optimized/Stuart/REIStuart-VF-Web-Subset.woff2) format("woff2-variations"),url(//www.rei.com/satchel/media/font-optimized/Stuart/REIStuart-VF-Web-Subset.woff2) format("woff2")}@font-face{font-family:Stuart fallback;src:local("Georgia");size-adjust:106%}@font-face{font-display:swap;font-family:Stuart;font-weight:1 999;font-style:italic;src:url(//www.rei.com/satchel/media/font-optimized/Stuart/REIStuartWebItalics-VF-Web-Subset.woff2) format("woff2-variations"),url(//www.rei.com/satchel/media/font-optimized/Stuart/REIStuartWebItalics-VF-Web-Subset.woff2) format("woff2")}@font-face{font-display:swap;font-family:Graphik;font-weight:1 999;src:url(//www.rei.com/satchel/media/font-optimized/Graphik/Graphik-VF-Web-Subset.woff2) format("woff2-variations"),url(//www.rei.com/satchel/media/font-optimized/Graphik/Graphik-VF-Web-Subset.woff2) format("woff2")}@font-face{font-family:Graphik fallback;src:local("Verdana");size-adjust:92%}@font-face{font-display:swap;font-family:Graphik;font-weight:1 999;font-style:italic;src:url(//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2) format("woff2-variations"),url(//www.rei.com/satchel/media/font-optimized/Graphik/GraphikWebItalic-VF-Web-Subset.woff2) format("woff2")}

package/dist/cdr-reset.css

@@ -1,101 +1 @@
-html {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  font-family: sans-serif;
-  font-size: 62.5%;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::before,
-*::after {
-  -webkit-box-sizing: inherit;
-  box-sizing: inherit;
-}
-
-@-ms-viewport {
-  width: device-width;
-}
-
-body {
-  /* cdr-text-default */
-  font-family: Graphik, "Helvetica Neue", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: -0.16px;
-  font-size: 1.6rem;
-  line-height: 1.5;
-  margin: 0;
-  /* cdr-color-text-primary */
-  color: rgba(12, 11, 8, 0.75);
-  /* cdr-color-background-primary */
-  background-color: #ffffff;
-}
-
-h1,h2,h3,h4,h5,h6 {
-  text-wrap: balance;
-}
-
-p {
-  text-wrap: pretty
-}
-
-a,
-area,
-button,
-[role="button"],
-input,
-label,
-select,
-summary,
-textarea {
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-}
-
-button:focus {
-  outline: 0.5rem auto -webkit-focus-ring-color;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type="search"] {
-  outline-offset: -0.2rem;
-  -webkit-appearance: none;
-}
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+html{box-sizing:border-box;font-family:sans-serif;font-size:62.5%;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit}body{font-family:Graphik,Graphik fallback,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;letter-spacing:-.016rem;font-size:1.6rem;line-height:1.5;margin:0;color:#0c0b08bf;background-color:#fff}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{text-wrap:pretty}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button:focus{outline:.5rem auto -webkit-focus-ring-color}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-.2rem;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[data-palette=sandstone]{--cdr-color-background-surface-primary: #f4f2ed;--cdr-color-background-surface-secondary: #dcd6cb;--cdr-color-border-surface-primary: #928b80;--cdr-color-border-surface-secondary: #726d64}