Home

Awesome

<h1 align="center"> <a href="https://tradeshift.com/"> <img alt="Tradeshift" src="https://tradeshift.com/wp-content/themes/Tradeshift/img/brand/logo-black.png"/> </a> </h1> <h1 align="center">Elements</h1> <p align="center"> Reusable Tradeshift UI Components as Web Components <a href="https://tradeshift.github.io/elements"> https://tradeshift.github.io/elements </a> </p> <p align="center"> <a href="https://www.npmjs.com/package/@tradeshift/elements"> <img alt="NPM Version" src="https://badgen.net/npm/v/@tradeshift/elements" height="20"/> </a> <a href="https://npmcharts.com/compare/@tradeshift/elements?minimal=true"> <img alt="Downloads per month" src="https://badgen.net/npm/dm/@tradeshift/elements" height="20"/> </a> <a href="https://github.com/Tradeshift/elements/graphs/contributors"> <img alt="Contributors" src="https://badgen.net/github/contributors/Tradeshift/elements" height="20"/> </a> <br/> <a href="https://github.com/Tradeshift/elements/issues?q=is%3Aissue+is%3Aclosed"> <img alt="Closed issues" src="https://badgen.net/github/closed-issues/Tradeshift/elements" height="20"/> </a> <a href="https://github.com/Tradeshift/elements/issues"> <img alt="Open issues" src="https://badgen.net/github/open-issues/Tradeshift/elements" height="20"/> </a> <a href="https://github.com/Tradeshift/elements/pulls"> <img alt="Open pull requests" src="https://badgen.net/github/open-prs/Tradeshift/elements" height="20"/> </a> <a href="https://github.com/Tradeshift/elements/pulls?q=is%3Apr+is%3Aclosed"> <img alt="Closed pull requests" src="https://badgen.net/github/closed-prs/Tradeshift/elements" height="20"/> </a> <a href="https://github.com/Tradeshift/elements/commits/master"> <img alt="Last commit" src="https://badgen.net/github/last-commit/Tradeshift/elements" height="20"/> </a> </p>

➤ How to use it

$ npm i @tradeshift/elements --save
$ npm i @tradeshift/elements.button --save
import '@tradeshift/elements.button';

or

<script src="node_modules/@tradeshift/elements/lib/core.umd.js"></script>
<script src="node_modules/@tradeshift/elements.button/lib/button.umd.js"></script>
import '@tradeshift/elements/src/vars.css';

or

<link rel="stylesheet" href="node_modules/@tradeshift/elements/src/vars.css" />
<ts-button type="primary"> Sample Button </ts-button>
<link rel="stylesheet" href="node_modules/@tradeshift/elements/src/fonts.css" />

➤ Polyfills

For supporting IE11 you need to do couple of more things

<!-- Place this in the <head>, before the Web Component polyfills are loaded -->
<script>
	if (!window.Promise) {
		window.ShadyCSS = { nativeCss: true };
	}
</script>
You have two options for polyfills library:
  1. Use @open-wc/polyfills-loader
$ npm i @open-wc/polyfills-loader
import loadPolyfills from '@open-wc/polyfills-loader';

loadPolyfills().then(() => import('./my-app.js'));
  1. Use @webcomponents/webcomponentsjs
$ npm i @webcomponents/webcomponentsjs --save
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
<!-- Load Tradeshift Elements once the polyfills are ready -->
<script>
	window.addEventListener('WebComponentsReady', function () {
		// Load Tradeshift Elements core package
		var coreEl = document.createElement('script');
		coreEl.setAttribute('src', '/packages/core/lib/core.umd.js');
		document.body.appendChild(coreEl);

		// Load other Tradeshift Elements once the core package is loaded
		coreEl.onload = function () {
			var components = ['root', 'button'];
			components.forEach(function (component) {
				var el = document.createElement('script');
				el.setAttribute('src', '/packages/components/' + component + '/lib/' + component + '.umd.js');
				document.body.appendChild(el);
			});
		};
	});
</script>

➤ How to run it

$ nvm use
$ npx lerna bootstrap     # bootstrap all packages and make sure they work together
$ npm start

➤ How to contribute

Thanks for your interest and help!

General info

You can find some links to useful materials about what we are using and some tutorials and articles that can help you get started.

ts.elements-specific info

➤ How to create new component

To make it simpler and more consistent, we added a Component generator, You can use our its script to generate a new component from terminal and it will create the component inside packages/components

$ npm run component-gen

➤ How to release

We are using lerna to publish our elements


Polyfill Limitations

You can see a list of limitations that we should watch out for, here

➤ License

You can read the full license agreement in the LICENSE.md.