lux-design-system 5.2.2 → 5.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -45,59 +45,18 @@ npm run deploy
45
45
  This will update the docs at [https://pulibrary.github.io/lux-design-system/](https://pulibrary.github.io/lux-design-system/).
46
46
  Please note: For informational purposes only. Don't do this outside of a release!
47
47
 
48
-
49
- ## Copying Vue 2 components from lux
50
- 1. Copy a component from the lux repository into src/components
51
- 1. Run `npm run lint --fix` to make sure the component has our formatting rules applied.
52
- 1. This repo uses CSS variables, rather than SCSS token variables. If the component
53
- includes tokens:
54
- 1. Add `@import "../assets/styles/variables.css";` to the `<style>` section.
55
- 1. Replace any token references to use the CSS variable instead. For example,
56
- `$font-family-text` can be changed to `var(--font-family-text)`.
57
- 1. If the component includes SCSS mixins, add `@import "../assets/styles/mixins.scss";`
58
- to the `<style>` section. You may also need `../assets/styles/spacing.scss` if the
59
- 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`.
60
- 1. Vue 3 no longer supports functional templates. If the component includes `<template functional>`,
61
- you will need to refactor it back into a regular template.
62
- 1. If the component emits events, [declare the emits in the `emits` option](https://v3-migration.vuejs.org/breaking-changes/emits-option.html).
63
- 1. Run `npm run styleguide` and make sure it compiles and looks good.
64
- 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.
65
- 1. Copy the test for the component from the lux test/unit/specs/components directory.
66
- 1. Revert any changes to the test that were needed for functional templates.
67
- 1. Modify the import for the test to point to the component's new path.
68
- 1. Remove any references to `localVue`, the new versions of vue-test-utils don't
69
- support it or need it.
70
- 1. Change mount params in this format:
71
-
72
- ```
73
- {context: { props: { my_data: "data" }}}
74
- ```
75
-
76
- to this format:
77
-
78
- ```
79
- {props: { my_data: "data" }}
80
- ```
81
- 1. Run the tests with `npm run test`. Make any necessary changes to get the tests to pass.
82
- 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:
83
- 1. If it's not already imported, add `import { nextTick } from "vue"`
84
- 2. Add `async` to the test arrow function.
85
- 3. Add `await nextTick()` between the `setProps` and the assertion, or simply prepend the setProps command with `await`. (Example: `await wrapper.setProps({ show: true })`)
86
- 1. Refer to the [vue-test-utils migration guide](https://test-utils.vuejs.org/migration/) for other breaking changes.
87
- 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.
88
-
89
48
  ### Linting
90
49
  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`.
91
50
 
92
51
  ### Customize configuration
93
52
  See [Configuration Reference](https://cli.vuejs.org/config/).
94
53
 
95
- ### Using a local copy of lux-styleguidist in your project
54
+ ### Using a local copy of lux-design-system in your project
96
55
 
97
56
  1. `yarn global add yalc` (yalc has to be installed globally, it doesn't work as part of the package.json)
98
- 2. In lux-styleguidist run: `npm run build && yarn exec yalc publish`
57
+ 2. In lux-design-system run: `npm run build && yarn exec yalc publish`
99
58
  You should see a note that it's published in store
100
- 3. In the application where lux-styleguidist is installed,
59
+ 3. In the application where lux-design-system is installed,
101
60
  run: `yarn exec yalc add lux-design-system`
102
61
  4. Sometimes, your application's vite will have cached the old version.
103
62
  If you are not seeing your changes, in your application directory run:
@@ -3516,7 +3516,7 @@ const Mo = /* @__PURE__ */ M(ff, [["render", yf], ["__scopeId", "data-v-a775ec69
3516
3516
  default: "dark"
3517
3517
  }
3518
3518
  }
3519
- }, 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));
3519
+ }, bf = (e) => (tt("data-v-9e1be07f"), e = e(), nt(), e), $f = /* @__PURE__ */ bf(() => /* @__PURE__ */ l("a", { href: "https://accessibility.princeton.edu/help" }, "Accessibility Help", -1));
3520
3520
  function wf(e, t, n, a, r, s) {
3521
3521
  return f(), T(ce(n.type), {
3522
3522
  class: H(["lux-accessibility", n.theme])
@@ -3527,7 +3527,7 @@ function wf(e, t, n, a, r, s) {
3527
3527
  _: 1
3528
3528
  }, 8, ["class"]);
3529
3529
  }
3530
- const Do = /* @__PURE__ */ M(_f, [["render", wf], ["__scopeId", "data-v-6fa37bb9"]]), Cf = {
3530
+ const Do = /* @__PURE__ */ M(_f, [["render", wf], ["__scopeId", "data-v-9e1be07f"]]), Cf = {
3531
3531
  name: "LuxUniversityAccessibilityOld",
3532
3532
  status: "ready",
3533
3533
  release: "5.2.0",
@@ -3568,7 +3568,7 @@ const ko = /* @__PURE__ */ M(Cf, [["render", Mf], ["__scopeId", "data-v-1398c4b9
3568
3568
  default: "dark"
3569
3569
  }
3570
3570
  }
3571
- }, kf = (e) => (tt("data-v-516d2d0c"), e = e(), nt(), e), Lf = /* @__PURE__ */ kf(() => /* @__PURE__ */ l("div", {
3571
+ }, kf = (e) => (tt("data-v-da3513fa"), e = e(), nt(), e), Lf = /* @__PURE__ */ kf(() => /* @__PURE__ */ l("div", {
3572
3572
  itemscope: "",
3573
3573
  itemtype: "http://schema.org/Organization"
3574
3574
  }, [
@@ -3600,7 +3600,7 @@ function Of(e, t, n, a, r, s) {
3600
3600
  _: 1
3601
3601
  }, 8, ["class"]);
3602
3602
  }
3603
- const Lo = /* @__PURE__ */ M(Df, [["render", Of], ["__scopeId", "data-v-516d2d0c"]]), Ef = {
3603
+ const Lo = /* @__PURE__ */ M(Df, [["render", Of], ["__scopeId", "data-v-da3513fa"]]), Ef = {
3604
3604
  name: "LuxLogoFacebook",
3605
3605
  status: "ready",
3606
3606
  release: "1.0.0",
@@ -3876,7 +3876,7 @@ function c7(e, t, n, a, r, s) {
3876
3876
  _: 1
3877
3877
  }, 8, ["class"]);
3878
3878
  }
3879
- const Fr = /* @__PURE__ */ M(l7, [["render", c7], ["__scopeId", "data-v-aceef67a"]]), u7 = {
3879
+ const Fr = /* @__PURE__ */ M(l7, [["render", c7], ["__scopeId", "data-v-d8db10a0"]]), u7 = {
3880
3880
  name: "LuxUniversityCopyrightOld",
3881
3881
  status: "ready",
3882
3882
  release: "5.2.0",
@@ -14245,7 +14245,7 @@ function VL(e, t, n, a, r, s) {
14245
14245
  _: 3
14246
14246
  }, 8, ["class", "style"]);
14247
14247
  }
14248
- const M1 = /* @__PURE__ */ M(YL, [["render", VL], ["__scopeId", "data-v-13f6280b"]]), NL = {
14248
+ const M1 = /* @__PURE__ */ M(YL, [["render", VL], ["__scopeId", "data-v-85e85934"]]), NL = {
14249
14249
  name: "LuxLibraryHeader",
14250
14250
  status: "ready",
14251
14251
  release: "1.0.0",
@@ -14340,7 +14340,7 @@ function FL(e, t, n, a, r, s) {
14340
14340
  _: 3
14341
14341
  }, 8, ["class"]);
14342
14342
  }
14343
- const jL = /* @__PURE__ */ M(NL, [["render", FL], ["__scopeId", "data-v-9ed9bd82"]]), WL = {
14343
+ const jL = /* @__PURE__ */ M(NL, [["render", FL], ["__scopeId", "data-v-118ceff2"]]), WL = {
14344
14344
  name: "LuxLogoInstagram",
14345
14345
  status: "ready",
14346
14346
  release: "5.2.0",
@@ -14464,7 +14464,7 @@ const Hl = /* @__PURE__ */ M(XL, [["render", tO]]), nO = {
14464
14464
  default: "dark"
14465
14465
  }
14466
14466
  }
14467
- }, 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" }, [
14467
+ }, Rl = (e) => (tt("data-v-910e452a"), 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" }, [
14468
14468
  /* @__PURE__ */ l("nav", {
14469
14469
  role: "navigation",
14470
14470
  "aria-label": "Library Staff"
@@ -14578,7 +14578,7 @@ function $O(e, t, n, a, r, s) {
14578
14578
  _: 1
14579
14579
  }, 8, ["class"]);
14580
14580
  }
14581
- const wO = /* @__PURE__ */ M(nO, [["render", $O], ["__scopeId", "data-v-f01dd50a"]]), CO = {
14581
+ const wO = /* @__PURE__ */ M(nO, [["render", $O], ["__scopeId", "data-v-910e452a"]]), CO = {
14582
14582
  name: "LuxSpecialCollectionsFooter",
14583
14583
  status: "ready",
14584
14584
  release: "1.0.0",
@@ -15019,7 +15019,7 @@ function jO(e, t, n, a, r, s) {
15019
15019
  [i, s.hide]
15020
15020
  ]) : B("", !0);
15021
15021
  }
15022
- const WO = /* @__PURE__ */ M(TO, [["render", jO], ["__scopeId", "data-v-c2bb7efe"]]), UO = {
15022
+ const WO = /* @__PURE__ */ M(TO, [["render", jO], ["__scopeId", "data-v-8c989059"]]), UO = {
15023
15023
  name: "LuxTextStyle",
15024
15024
  status: "ready",
15025
15025
  release: "1.0.0",