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 +3 -44
- package/dist/lux-styleguidist.mjs +10 -10
- package/dist/lux-styleguidist.umd.js +2 -2
- package/dist/style.css +1 -1
- package/dist/styles/variables.css +1 -0
- package/package.json +1 -1
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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",
|