lux-design-system 5.2.2 → 5.2.4

package/README.md

@@ -45,59 +45,18 @@ npm run deploy
 This will update the docs at [https://pulibrary.github.io/lux-design-system/](https://pulibrary.github.io/lux-design-system/).
 Please note: For informational purposes only. Don't do this outside of a release!
 
-
-## Copying Vue 2 components from lux
-1. Copy a component from the lux repository into src/components
-1. Run `npm run lint --fix` to make sure the component has our formatting rules applied.
-1. This repo uses CSS variables, rather than SCSS token variables.  If the component
-includes tokens:
-    1. Add `@import "../assets/styles/variables.css";` to the `<style>` section.
-    1. Replace any token references to use the CSS variable instead.  For example,
-      `$font-family-text` can be changed to `var(--font-family-text)`.
-1. If the component includes SCSS mixins, add `@import "../assets/styles/mixins.scss";`
-to the `<style>` section.  You may also need `../assets/styles/spacing.scss` if the
-component uses spacing mixins.  Media queries can't be included in CSS variables, so if you need those, import `../assets/styles/media_queries.scss` and use SCSS variables. There are functions that use SCSS variables and cannot take CSS variables as a parameter; In this case add `@import ../assets/styles/system.scss`.
-1. Vue 3 no longer supports functional templates.  If the component includes `<template functional>`,
-you will need to refactor it back into a regular template.
-1. If the component emits events, [declare the emits in the `emits` option](https://v3-migration.vuejs.org/breaking-changes/emits-option.html).
-1. Run `npm run styleguide` and make sure it compiles and looks good.
-1. Add the component to src/components/index.js so it is added to the lux Vue plugin and can be used in other projects.
-1. Copy the test for the component from the lux test/unit/specs/components directory.
-    1. Revert any changes to the test that were needed for functional templates.
-    1. Modify the import for the test to point to the component's new path.
-    1. Remove any references to `localVue`, the new versions of vue-test-utils don't
-    support it or need it.
-    1. Change mount params in this format:
-
-        ```
-        {context: { props: { my_data: "data" }}}
-        ```
-
-        to this format:
-
-        ```
-        {props: { my_data: "data" }}
-        ```
-    1. Run the tests with `npm run test`.  Make any necessary changes to get the tests to pass.
-        1. If a value is not updating correctly after a `wrapper.setProps` call, follow these steps to add a `nextTick()`, which will cause Vue to update the value:
-            1. If it's not already imported, add `import { nextTick } from "vue"`
-            2. Add `async` to the test arrow function.
-            3. Add `await nextTick()` between the `setProps` and the assertion, or simply prepend the setProps command with `await`. (Example: `await wrapper.setProps({ show: true })`)  
-        1. Refer to the [vue-test-utils migration guide](https://test-utils.vuejs.org/migration/) for other breaking changes.
-    1. Running the tests will produce a snapshot file.  Compare it to the original snapshot file.  If there are no substantial changes, commit it.  If there are substantial changes, make any necessary changes.
-
 ### Linting
 We are using the eslint_plugin-prettier to lint our files. To adjust the lint format settings, please use the `.prettierrc` file. Code linting rules should be set in `eslintrc.js`.
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
-### Using a local copy of lux-styleguidist in your project
+### Using a local copy of lux-design-system in your project
 
 1. `yarn global add yalc` (yalc has to be installed globally, it doesn't work as part of the package.json)
-2. In lux-styleguidist run: `npm run build && yarn exec yalc publish`   
+2. In lux-design-system run: `npm run build && yarn exec yalc publish`   
 You should see a note that it's published in store  
-3. In the application where lux-styleguidist is installed,    
+3. In the application where lux-design-system is installed,    
 run: `yarn exec yalc add lux-design-system`
 4. Sometimes, your application's vite will have cached the old version.
 If you are not seeing your changes, in your application directory run:

package/dist/lux-styleguidist.mjs

@@ -3439,7 +3439,7 @@ const So = /* @__PURE__ */ M(of, [["render", hf], ["__scopeId", "data-v-d93a1c53
     LuxInputButton: bo,
     LuxInputText: Co
   }
-}, xo = (e) => (tt("data-v-a775ec69"), e = e(), nt(), e), pf = {
+}, xo = (e) => (tt("data-v-d64e44aa"), e = e(), nt(), e), pf = {
   id: "mc-embedded-subscribe-form",
   action: "https://princeton.us4.list-manage.com/subscribe/post?u=f1159e2c2a8bc35d62147f282&id=6c19fe9a37",
   method: "post",
@@ -3474,7 +3474,8 @@ function yf(e, t, n, a, r, s) {
             type: "email",
             name: "EMAIL",
             "aria-required": "true",
-            "aria-label": "Email address"
+            label: "Email address",
+            hideLabel: "true"
           }),
           D(i, {
             id: "mc-embedded-subscribe",
@@ -3498,7 +3499,7 @@ function yf(e, t, n, a, r, s) {
     _: 1
   }, 8, ["class"]);
 }
-const Mo = /* @__PURE__ */ M(ff, [["render", yf], ["__scopeId", "data-v-a775ec69"]]), _f = {
+const Mo = /* @__PURE__ */ M(ff, [["render", yf], ["__scopeId", "data-v-d64e44aa"]]), _f = {
   name: "LuxUniversityAccessibility",
   status: "ready",
   release: "1.0.0",
@@ -3516,7 +3517,7 @@ const Mo = /* @__PURE__ */ M(ff, [["render", yf], ["__scopeId", "data-v-a775ec69
       default: "dark"
     }
   }
-}, bf = (e) => (tt("data-v-6fa37bb9"), e = e(), nt(), e), $f = /* @__PURE__ */ bf(() => /* @__PURE__ */ l("a", { href: "https://accessibility.princeton.edu/help" }, "Accessibility Help", -1));
+}, bf = (e) => (tt("data-v-bc412c2d"), e = e(), nt(), e), $f = /* @__PURE__ */ bf(() => /* @__PURE__ */ l("a", { href: "https://accessibility.princeton.edu/help" }, "Accessibility Help", -1));
 function wf(e, t, n, a, r, s) {
   return f(), T(ce(n.type), {
     class: H(["lux-accessibility", n.theme])
@@ -3527,7 +3528,7 @@ function wf(e, t, n, a, r, s) {
     _: 1
   }, 8, ["class"]);
 }
-const Do = /* @__PURE__ */ M(_f, [["render", wf], ["__scopeId", "data-v-6fa37bb9"]]), Cf = {
+const Do = /* @__PURE__ */ M(_f, [["render", wf], ["__scopeId", "data-v-bc412c2d"]]), Cf = {
   name: "LuxUniversityAccessibilityOld",
   status: "ready",
   release: "5.2.0",
@@ -3568,7 +3569,7 @@ const ko = /* @__PURE__ */ M(Cf, [["render", Mf], ["__scopeId", "data-v-1398c4b9
       default: "dark"
     }
   }
-}, kf = (e) => (tt("data-v-516d2d0c"), e = e(), nt(), e), Lf = /* @__PURE__ */ kf(() => /* @__PURE__ */ l("div", {
+}, kf = (e) => (tt("data-v-da3513fa"), e = e(), nt(), e), Lf = /* @__PURE__ */ kf(() => /* @__PURE__ */ l("div", {
   itemscope: "",
   itemtype: "http://schema.org/Organization"
 }, [
@@ -3600,7 +3601,7 @@ function Of(e, t, n, a, r, s) {
     _: 1
   }, 8, ["class"]);
 }
-const Lo = /* @__PURE__ */ M(Df, [["render", Of], ["__scopeId", "data-v-516d2d0c"]]), Ef = {
+const Lo = /* @__PURE__ */ M(Df, [["render", Of], ["__scopeId", "data-v-da3513fa"]]), Ef = {
   name: "LuxLogoFacebook",
   status: "ready",
   release: "1.0.0",
@@ -3876,7 +3877,7 @@ function c7(e, t, n, a, r, s) {
     _: 1
   }, 8, ["class"]);
 }
-const Fr = /* @__PURE__ */ M(l7, [["render", c7], ["__scopeId", "data-v-aceef67a"]]), u7 = {
+const Fr = /* @__PURE__ */ M(l7, [["render", c7], ["__scopeId", "data-v-5d4b319f"]]), u7 = {
   name: "LuxUniversityCopyrightOld",
   status: "ready",
   release: "5.2.0",
@@ -14146,6 +14147,20 @@ const Yl = /* @__PURE__ */ M(ML, [["render", EL], ["__scopeId", "data-v-e3749462
     theme: {
       type: String,
       default: "dark"
+    },
+    /*
+     * The width of the logo
+     */
+    width: {
+      type: String,
+      default: "155px"
+    },
+    /*
+     * The height of the logo
+     */
+    height: {
+      type: String,
+      default: "34px"
     }
   },
   components: {
@@ -14159,22 +14174,22 @@ function TL(e, t, n, a, r, s) {
       l("a", AL, [
         n.theme === "dark" ? (f(), T(o, {
           key: 0,
-          width: "155px",
-          height: "34px",
+          width: n.width,
+          height: n.height,
           class: "full-logo"
-        })) : (f(), T(o, {
+        }, null, 8, ["width", "height"])) : (f(), T(o, {
           key: 1,
-          width: "155px",
-          height: "34px",
+          width: n.width,
+          height: n.height,
           color: "#000000",
           class: "full-logo"
-        }))
+        }, null, 8, ["width", "height"]))
       ])
     ]),
     _: 1
   });
 }
-const x1 = /* @__PURE__ */ M(IL, [["render", TL], ["__scopeId", "data-v-5431edb8"]]), PL = {
+const x1 = /* @__PURE__ */ M(IL, [["render", TL], ["__scopeId", "data-v-464ba89d"]]), PL = {
   name: "LuxSpacer",
   status: "ready",
   release: "1.0.0",
@@ -14245,7 +14260,7 @@ function VL(e, t, n, a, r, s) {
     _: 3
   }, 8, ["class", "style"]);
 }
-const M1 = /* @__PURE__ */ M(YL, [["render", VL], ["__scopeId", "data-v-13f6280b"]]), NL = {
+const M1 = /* @__PURE__ */ M(YL, [["render", VL], ["__scopeId", "data-v-85e85934"]]), NL = {
   name: "LuxLibraryHeader",
   status: "ready",
   release: "1.0.0",
@@ -14340,7 +14355,7 @@ function FL(e, t, n, a, r, s) {
     _: 3
   }, 8, ["class"]);
 }
-const jL = /* @__PURE__ */ M(NL, [["render", FL], ["__scopeId", "data-v-9ed9bd82"]]), WL = {
+const jL = /* @__PURE__ */ M(NL, [["render", FL], ["__scopeId", "data-v-118ceff2"]]), WL = {
   name: "LuxLogoInstagram",
   status: "ready",
   release: "5.2.0",
@@ -14464,7 +14479,7 @@ const Hl = /* @__PURE__ */ M(XL, [["render", tO]]), nO = {
       default: "dark"
     }
   }
-}, Rl = (e) => (tt("data-v-f01dd50a"), e = e(), nt(), e), aO = { class: "lux-footer-main" }, rO = { class: "lux-library-links" }, sO = { href: "https://library.princeton.edu" }, oO = { class: "lux-library-links" }, iO = /* @__PURE__ */ Rl(() => /* @__PURE__ */ l("h2", null, "Subscribe to our Newsletter", -1)), lO = { class: "social-pul-icons" }, cO = { href: "https://x.com/PULibrary" }, uO = { href: "http://www.facebook.com/PULibrary" }, dO = { href: "https://www.instagram.com/PULibrary/" }, hO = { href: "https://libguides.princeton.edu/usgovdocs" }, fO = { href: "https://fpul.princeton.edu/" }, pO = /* @__PURE__ */ Rl(() => /* @__PURE__ */ l("div", { class: "lux-library-links" }, [
+}, Rl = (e) => (tt("data-v-6b623df4"), e = e(), nt(), e), aO = { class: "lux-footer-main" }, rO = { class: "lux-library-links" }, sO = { href: "https://library.princeton.edu" }, oO = { class: "lux-library-links" }, iO = /* @__PURE__ */ Rl(() => /* @__PURE__ */ l("h2", null, "Subscribe to our Newsletter", -1)), lO = { class: "social-pul-icons" }, cO = { href: "https://x.com/PULibrary" }, uO = { href: "http://www.facebook.com/PULibrary" }, dO = { href: "https://www.instagram.com/PULibrary/" }, hO = { href: "https://libguides.princeton.edu/usgovdocs" }, fO = { href: "https://fpul.princeton.edu/" }, pO = /* @__PURE__ */ Rl(() => /* @__PURE__ */ l("div", { class: "lux-library-links" }, [
   /* @__PURE__ */ l("nav", {
     role: "navigation",
     "aria-label": "Library Staff"
@@ -14497,8 +14512,8 @@ function $O(e, t, n, a, r, s) {
             l("div", rO, [
               l("a", sO, [
                 D(o, {
-                  width: "142",
-                  height: "40",
+                  width: "245",
+                  height: "54",
                   theme: s.value(n.theme)
                 }, null, 8, ["theme"])
               ]),
@@ -14578,7 +14593,7 @@ function $O(e, t, n, a, r, s) {
     _: 1
   }, 8, ["class"]);
 }
-const wO = /* @__PURE__ */ M(nO, [["render", $O], ["__scopeId", "data-v-f01dd50a"]]), CO = {
+const wO = /* @__PURE__ */ M(nO, [["render", $O], ["__scopeId", "data-v-6b623df4"]]), CO = {
   name: "LuxSpecialCollectionsFooter",
   status: "ready",
   release: "1.0.0",
@@ -15019,7 +15034,7 @@ function jO(e, t, n, a, r, s) {
     [i, s.hide]
   ]) : B("", !0);
 }
-const WO = /* @__PURE__ */ M(TO, [["render", jO], ["__scopeId", "data-v-c2bb7efe"]]), UO = {
+const WO = /* @__PURE__ */ M(TO, [["render", jO], ["__scopeId", "data-v-8c989059"]]), UO = {
   name: "LuxTextStyle",
   status: "ready",
   release: "1.0.0",