@lu-development/ux-patterns

Liberty University: Design System

If you are seeing this on NPM... you can use this component library in any framework or the "no framework" of your choice. See getting started with components below.

If you are trying to develop the design system. Note that though the component library is public the design system repo is still private.

Getting Started Developing the Design System

To start working on the design system(and if you have access to repo), clone this repo to a new directory:

git clone [e-mail]:lu-dev/ux-design-systems.git
cd ux-design-systems

and run:

npm install
npm start

To build the app for production, run:

npm run build

To run the unit tests once, run:

npm test

To run the unit tests and watch for file changes during development, run:

npm run test.watch

To publish the repo. Make sure the project version is incremented properly according to Semantic Versioning. Of course you need to be logged into you npm account and have publishing auth. If you need access create an npm account if you don't have one and email [e-mail] with you request.

npm publish --access=public    

Getting Started With Components

######Script tag

Put this script tag with the version

<script src='https://unpkg.com/@lu-development/ux-patterns@<version you want>/dist/uxdesignsystem.js'></script>

in the head of your index.html Then you can use the element anywhere in your template, JSX, html etc.

######Node Modules

Run

npm install @lu-development/ux-patterns --save

Put a script tag similar to this

<script src='node_modules/@lu-development/ux-patterns/dist/uxdesignsystems.js'></script>

in the head of your index.html Then you can use the element anywhere in your template, JSX, html etc.

######In a stencil-app-starter app

Run

npm install @lu-development/ux-patterns --save

Add an import to the npm packages: import @lu-development/ux-patterns; Then you can use the element anywhere in your template, JSX, html etc.

######Framework Integration Reference: https://stenciljs.com/docs/framework-integration

In my experience so far(because stencil still has not created the common js index.js magic at this point) you need to specify the /dist/esm/index.js when importing the defineCustomElements function.

Also the angular import does not work at his point but you can import with the script tag and still add the CustomElementSchema to the AppModule... it works just fine.