@rei/cedar 13.0.0-vite.6 → 13.0.0

package/README.md

@@ -4,7 +4,7 @@
 
 ## Work In Progress
 
-This project tracks the migration of [@rei/cedar](https://github.com/rei/rei-cedar) to Vue 3. This is a work in progress and the code contained in this repo is not production ready. Please reach out to the Cedar team if you have any questions.
+This project tracks the migration of [@rei/cedar](https://github.com/rei/rei-cedar) to Vue 3. The library is currently in release candidate testing and will eventually be renamed to `@rei/cedar`
 
 
 Welcome to REI's style framework! The overall goals of this project are to provide a common scaffolding for UI elements,
@@ -15,24 +15,7 @@ the Cedar grow and learn from what we are doing, or jump in and provide some rec
 
 ### Migration Status
 
-Vue 2 Cedar was written in JSX because at that time it was the only way to generate a tree-shakeable vue component library. We have migrated to .vue SFC's for vue 3 and have also adopted the "composition API" which should make the Cedar bundle significantly smaller as it will no longer need to import all of Vue. All of the "view-model" logic for a component is exported as part of it's `setup()` function. There are definitely opportunities to DRY up this code by extracting common computed property logic or to simply better organize the contents of the setup functions. Helper functions could be moved into `/utils` or simply a `.js` file in the component directory and imported rather than defined in the setup function itself. The Vue mastery courses around vue 3, particularly the one by Evan You are the best resource I have found for understanding the composition API
-
-Vue 2 private API usage: Cedar used the `vnode` API in a few places in vue 2 which simply does not work in vue 3. This is particularly problematic for CdrTabs which maintains a close parent-child relationship between the CdrTabs wrapper and CdrTabPanel contents. Will need to refactor that component to use a flux architecture, with CdrTabs using provide/inject to pass data into the tab panels, and CdrTabPanel's emitting events that CdrTabs listens for.
-
-Unit Tests: many unit tests are commented out or `xit`'d currently. Searching for `xit(` in the spec files should point out where tests either need work or bugs in components themselves. I know CdrModal, CdrSelect, and CdrTabs definitely have some issues, with CdrTabs being the most broken. In some cases, Vue/VTU have just changed such that our old method of unit testing no longer works and those tests may need to be removed or replaced (i.e, test a instance method directly rather than triggering an event on a component and validating that the component updates based on what the instance method does). That's a much better unit testing pattern in general, complex stuff like "click a button and see what happens" is more of an integration test. May make sense to set up a proper integration testing framework against the kitchen sink for validating these more complex use cases. Most of the broken unit tests are around triggering events, applying focus, etc. and all those would be better handled by testing the function that gets called by those events rather than trying to trigger the events themselves. VTU has also dropped the ability to forcibly set data or methods on components which makes things a lot harder to fake.
-
-Unit Test Slots: Note that when passing slots into a component in VTU you have to use the `h()` render function helper to have it work properly. This might get resolved in a future version of VTU. Search for `h(` in the .spec.js files for examples of how to do this. Essentially using h() you are creating a new component that gets passed to the VTU `mount` function.
-
-Build: The dev/test/prod builds should all work. However there are still breaking bugs in the vue ecosystem that prevent tree-shaking from working which will be the biggest blocker for release. It may be possible to bypass the tree shaking issues by having consumers import Cedar components directly rather than from the index entry point, for example
-
-```
-import { CdrButton, CdrLink } from '@rei/cedar'; // imports from entry point, if tree-shaking is broken this imports ALL of cedar
-
-import CdrButton from '@rei/cedar/dist/components/CdrButton.vue'; // Importing components individually would allow febs/webpack to tree-shake Cedar
-import CdrLink from '@rei/cedar/dist/components/CdrLink.vue'; // Might be possible to make a webpack alias in FEBS that would automagically do this so consumers could maintain the old import syntax.
-```
-
-Visual Regression: It should be possible to generate backstop reference images in the vue 2 Cedar repo and then copy them into `/backstop_data` in this repo to validate that components are rendering the same.
+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
 

package/dist/cdr-fonts.css

@@ -1,20 +1,24 @@
 @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;