lux-design-system v5.1.3
Lux Design System
View the Design System
Adding Lux to an application or website
Project setup
npm install
Serve the styleguide documentation locally
npm run styleguide
Running tests
- Run all tests with
npm run test
- Run a single test file with
npx jest tests/unit/specs/components/luxGridItem.spec.js
- Run a single test with the name of the test from the
it()
call:npx jest -t "should have the appropriate class to define the columns"
Release a new version
This requires you to have an account on npm with 2fa enabled. You will also need to be part of the PULibrary organization on npm.
npm login
npm install --global np@9.2.0 # don't add this as a devDependency, otherwise you won't be able to push to npm
npm run release
Tips
- If you have a passphrase on your ssh key, run ssh-add ~/.ssh/id_ed25519 (or wherever your key is located).
- If you use a security key, rather than an authenticator app, for two-factor authentication in npmjs.com, make sure that "Require two-factor authentication for write actions" is not checked in your account 2FA settings.
- Go to:Account -> Manage Two-Factor Authentication -> Uncheck 'Additional Options' -> Update Preferences. If it is checked, np will ask you for an OTP from your phone, and won't allow you to push without it.
Deploy the styleguide to GitHub Pages
npm run deploy
This will update the docs at 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
- Copy a component from the lux repository into src/components
- Run
npm run lint --fix
to make sure the component has our formatting rules applied. - 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 tovar(--font-family-text)
. - 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
. - Vue 3 no longer supports functional templates. If the component includes
<template functional>
, you will need to refactor it back into a regular template. - If the component emits events, declare the emits in the
emits
option. - Run
npm run styleguide
and make sure it compiles and looks good. - Add the component to src/components/index.js so it is added to the lux Vue plugin and can be used in other projects.
Copy the test for the component from the lux test/unit/specs/components directory.
- Revert any changes to the test that were needed for functional templates.
- Modify the import for the test to point to the component's new path.
- Remove any references to
localVue
, the new versions of vue-test-utils don't support it or need it. Change mount params in this format:
{context: { props: { my_data: "data" }}}
to this format:
{props: { my_data: "data" }}
Run the tests with
npm run test
. Make any necessary changes to get the tests to pass.- If a value is not updating correctly after a
wrapper.setProps
call, follow these steps to add anextTick()
, which will cause Vue to update the value:- If it's not already imported, add
import { nextTick } from "vue"
- Add
async
to the test arrow function. - Add
await nextTick()
between thesetProps
and the assertion, or simply prepend the setProps command withawait
. (Example:await wrapper.setProps({ show: true })
)
- If it's not already imported, add
- Refer to the vue-test-utils migration guide for other breaking changes.
- If a value is not updating correctly after a
- 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
Using a local copy of lux-styleguidist in your project
yarn global add yalc
(yalc has to be installed globally, it doesn't work as part of the package.json)- In lux-styleguidist run:
npm run build && yarn exec yalc publish
You should see a note that it's published in store - In the application where lux-styleguidist is installed,
run:yarn exec yalc add lux-design-system
- Sometimes, your application's vite will have cached the old version. If you are not seeing your changes, in your application directory run:
bundle exec vite clobber
for ruby projectsyarn dev --force
for Vue projects
Upgrade Instructions
21 hours ago
6 days ago
8 days ago
10 days ago
27 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
8 months ago
12 months ago
11 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago