@pocketprep/ui-kit 3.1.6 → 3.2.0

package/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
         'eslint:recommended',
         '@vue/eslint-config-typescript',
     ],
+    ignorePatterns: [ 'docs' ],
     rules: {
         'quotes': [ 'error', 'single' ],
         'comma-dangle': [ 'error', {

package/README.md

@@ -10,21 +10,26 @@ To install the UI Kit on an app, first run the NPM install command in your proje
 npm i @pocketprep/ui-kit
 ```
 
-Then import the appropriate `scss` file from the installed package into your project wherever it is needed.
-For example, to use the UI Kit colors in a Vue component, add the following to the Vue component's `<styles>` block:
+To import the UI Kit's exported stylesheets in a vite context:
 
-```css
-@import '~@pocketprep/ui-kit/colors';
+```ts
+import '@pocketprep/ui-kit/normalize'
+import '@pocketprep/ui-kit/fonts'
+import '@pocketprep/ui-kit/styles'
 ```
 
-To import the styles into your Vue app globally, add the following code to your `vue.config.js` file:
+To import the color variables and breakpoint mixin into your Vue app components globally,
+add the following code to your `vite.config.js` file:
 
 ```pre
 module.exports = {
     css: {
-        loaderOptions: {
+        preprocessorOptions: {
             scss: {
-                prependData: '@import "~@pocketprep/ui-kit/pocketprep.scss";',
+                additionalData: `
+                @import '@pocketprep/ui-kit/breakpoints';
+                @import '@pocketprep/ui-kit/colors';
+                `,
             },
         },
     },
@@ -47,4 +52,20 @@ In order to increment the `ui-kit` version when a change is made, you have to ma
 npm run patch
 ```
 
-This command will queue up the version increment.
+This command will queue up the version increment.
+
+## Testing the package in apps
+
+We have script commands to help copy and paste the UI Kit package into an app's node_modules:
+
+In the UI Kit:
+
+```bash
+npm run uikit-copy
+```
+
+In an app (like `study` or `teach`):
+
+```bash
+npm run uikit-paste
+```

package/dist/@pocketprep/ui-kit.js

@@ -13225,8 +13225,8 @@ function n7(e, i, s, o, t, n) {
       role: "button",
       type: "tertiary",
       tabindex: "0",
-      onKeypress: je(e.showFilterDropdown, ["enter"]),
-      onClick: i[0] || (i[0] = (T) => e.showFilterDropdown = !e.showFilterDropdown)
+      onKeypress: i[0] || (i[0] = je(() => e.showFilterDropdown = !e.showFilterDropdown, ["enter"])),
+      onClick: i[1] || (i[1] = () => e.showFilterDropdown = !e.showFilterDropdown)
     }, {
       default: Je(() => [
         Qe(r, {
@@ -13240,7 +13240,7 @@ function n7(e, i, s, o, t, n) {
         }, me(e.filterLabel), 3)
       ]),
       _: 1
-    }, 8, ["aria-expanded", "class", "onKeypress"])), [
+    }, 8, ["aria-expanded", "class"])), [
       [j, e.isDarkMode]
     ]),
     e.showFilterDropdown ? he((X(), ie("div", {