lux-design-system 4.5.4 → 5.0.0-alpha.10

package/README.md

@@ -1,95 +1,72 @@
-[![CircleCI](https://circleci.com/gh/pulibrary/lux.svg?style=svg)](https://circleci.com/gh/pulibrary/lux) [![npm version](https://badge.fury.io/js/lux-design-system.svg)](https://badge.fury.io/js/lux-design-system) ![Dependencies status](https://david-dm.org/pulibrary/lux.svg) ![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)
-
-# LUX Design System
-
-[View the docs](https://pulibrary.github.io/lux/docs/#/Getting%20Started)
-
-## To add to your project:
+# lux-styleguidist
 
+## Project setup
 ```
-# this will add the latest official release
-yarn add lux-design-system
+npm install
 ```
-
-If you are looking to integrate LUX into an existing Rails, Drupal, or even JSFiddle, check out
-our documentation for [How to Install LUX](https://pulibrary.github.io/lux/docs/#/Installing%20LUX).
-
-### To ride the bleeding edge, pull directly from the GitHub in package.json dependencies:
+### Serve the styleguide documentation locally
 
 ```
-...
-"dependencies": {
-  "lux-design-system": "pulibrary/lux"
-}
-...
+npm run styleguide
 ```
 
-### To use an older version, add pin the npm version you want to your package.json dependencies:
+### Release a new version
 
-```
-...
-"dependencies": {
-  "lux-design-system": "^0.0.0"
-}
-...
-```
-
-### To generate static asset files to use in a stand-alone HTML doc, run this command:
+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.
 
 ```
-yarn build:static
+npm login
+npm install --global np # don't add this as a devDependency, otherwise you won't be able to push to npm
+npm run release
 ```
 
-Then use `<script/>` and `<link/>` tags to include to the js and css files in the `static/system` directory in your HTML. Then include any LUX components in a wrapper with `class="lux"`.
-
-## To contribute to lux:
-
-- You will need Node v10.16.0+
-- If you use a NVM, run `nvm install` or `nvm use` if you already know you have Node v10.16.0
-
+### Deploy the styleguide to GitHub Pages
 ```
-yarn install
+npm run deploy
 ```
+This will update the docs at [https://pulibrary.github.io/lux-styleguidist/](https://pulibrary.github.io/lux-styleguidist/).
+Please note: For informational purposes only. Don't do this outside of a release!
 
-### To start development server:
 
-```
-yarn start
-```
+## Copying Vue 2 components from lux
+1. Copy a component from the lux repository into src/components
+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.
+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. 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:
 
-### To run all unit tests:
+        ```
+        {context: { props: { my_data: "data" }}}
+        ```
 
-```
-yarn test
-```
-
-### To run a single test:
-
-```
-yarn unit mytest.spec.js
-```
+        to this format:
 
-### To develop LUX locally as a dependency in a project
-
-You might want to develop LUX while developing on a project that uses LUX as a dependency. For example, you might want to develop LUX components while developing the Approvals app. NOTE: You will need to have both LUX and the project using it as a dependency running on your machine.
-
-1. Install [yalc](https://github.com/whitecolor/yalc)
-1. In the LUX root directory, run `yarn build:system && yalc publish`
-1. In the Project (e.g., Approvals) root directory, run `yalc add lux-design-system`
-1. Each time that you are ready to view the LUX work in progress, run the last 2 steps:
-   1. In the LUX root directory, run `yarn build:system && yalc publish`
-   1. In the Project (e.g., Approvals) root directory, run `yalc update`
-
-## To deploy [docs](https://pulibrary.github.io/lux/docs/#/Getting%20Started):
-
-```
-# make sure git status is clean with no uncommitted modified files
-yarn run deploy
-```
+        ```
+        {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.  
+        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.
 
-## To publish a new version to npm:
+### 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`.
 
-1.  If you don't already have np installed, `yarn global add np`.  If you are running an old version of node (e.g. Node 12), you may need to install an older version of np (e.g. `yarn global add np@5.0.0`)
-1.  Pull latest main with merged changes.
-2.  Run `yarn release`
-3.  :tada:
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/dist/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

package/dist/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>