MOVED REPOSITORY
This plugin has been moved, as well as its documentation, to a new mono repository which contains all YARN plugins all together.
The NPM package remains unchanged: @adidas/yarn-plugin-choicesjs-stencil.
- New repository: adidas/adidas-yarn-design-system-plugins.
- Documentation: adidas-yarn-design-system-plugins/plugins/choicesjs-stencil.
This plugin is a CSS customization for the choicesjs-stencil Web Component.
It extends [adidas YARN Design System][yarn] library by adding the class .choicesjs-stencil as part of .yarn main class.
Check all its features on the documentation page.
The plugin just customize the choicesjs-stencil Web Component via CSS classes. It can be used along with adidas YARN to have enhanced select and multiselect components.
NodeJS and NPM are required to work with the repository.
It requires adidas YARN main library (YARN icons font dependency), as well as the Web Component and the [ChoicesJS][choicesjs] library.
npm install choices.js choicesjs-stencil @adidas/yarn-design-system
- In development mode:
npm install - Run time:
npm install @adidas/yarn-plugin-choicesjs-stencil
Load the stylesheet files and the dependencies in the HTML of your application:
<!-- YARN core and icons -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn.css"/>
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn-icon.css"/>
<!-- plugin -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css"/>
<!-- plugin dependencies -->
<script src="node_modules/choices.js/assets/scripts/dist/choices.min.js"></script>
<script src="node_modules/choicesjs-stencil/dist/choicesjsstencil.js"></script>Or import them in your preprocessed CSS files with @import:
@import '~@adidas/yarn-design-system/dist/yarn.css';
@import '~@adidas/yarn-design-system/dist/yarn-icon.css';
@import '~@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css';The plugin can be used with or without YARN, but in both cases it requires main .yarn class in the top or in a parent element.
Just add the class .choicesjs-stencil to the Web Component.
<div class="yarn">
<choicesjs-stencil class="choicesjs-stencil" type="text"/>
</div>The library consists of two parts:
- The style source code, which is code of the library itself.
- The example to show the different parts of the library.
Both are independent and they have different scripts to run them.
- Library:
npm run build - Example:
npm run build:example
The library is compiled in the dist folder, whereas the example is created in the docs folder.
The example can be delivered as Single Page Application using the script npm run build:example:spa, executed after building the library. It accepts two environment variables:
HOSTNAME: host where the application will be deployed, the protocol should be omitted.BASE: path where the application will be available.
Example deploying the application in https://name.domain:port/app:
HOSTNAME=//name.domain:port BASE=app npm run build:example:spa
The documentation is generated using the script doc, which generates the example in SPA mode. It also accepts the environment variables.
HOSTNAME=//name.domain:port BASE=app npm run doc
The script to develop this project have to be executed in different terminals because they have to be continuously running checking changes.
- Library:
npm run start:lib - Example:
npm run start:example
Once the library is ready, and the example has been built, the application is ready in localhost: http://localhost:3000.
The scripts are waiting for changes in the source code to rebuild the library and the example. Each time a change is ready, the browser will update the page without reloading it, using Hot Module Replacement.
The library source code is inside the src folder.
Everything is imported from the main main.less file.
YARN library follows the adidas coding style guidelines.
The example code has been written using Nuxt, which is the Server Side Rendering framework of Vue.JS.
The code is located in the example folder and follows the Nuxt guidelines.
The documents are located in example/locales to be able to show the page in different languages. The .md files contain the content of full pages, while the [lang].json files have only titles and common words.
The LESS and the Vue source code are linted using the adidas stylelint and ESLint linter configurations respectively.
There are separated scripts to lint the different sources and a global one to execute all together:
npm run lint
Note: it is mandatory to fix all the issues before pushing the code.
Check the contributor list and you will be welcome if you want to contribute.
Check out the CONTRIBUTING.md to know how to contribute to this project.
© adidas AG
adidas AG publishes this software and accompanied documentation (if any) subject to the terms of the MIT license with the aim of helping the community with our tools and libraries which we think can be also useful for other people. You will find a copy of the MIT license in the root folder of this package. All rights not explicitly granted to you under the MIT license remain the sole and exclusive property of adidas AG.
NOTICE: The software has been designed solely for the purpose of giving some CSS classes to customize the ChoicesJS Stencil Web Component with the adidas style. The software is NOT designed, tested or verified for productive use whatsoever, nor or for any use related to high risk environments, such as health care, highly or fully autonomous driving, power plants, or other critical infrastructures or services.
If you want to contact adidas regarding the software, you can mail us at [email protected].
For further information open the adidas terms and conditions page.