Skip to content

Commit 00e9fb6

Browse files
moeldersmoelders
authored
Multiselect component (#8)
* Fix variable values and minor style issues * Rename classes of logos * Fix font size extra small and its use on code and markdown * Add border for palette colors and update names * Remove no longer necessary bootstrap dependency * Add choicesjs-stencil dependency * Add multiselect less component * Add multiselect example page * Update multiselect style * Rename host env variable * Fix choicesjs stencil require path * Update documentation * Add multiselect documentation * Update version and babel preset env dependency * Fix minor issues
1 parent 9b0d72b commit 00e9fb6

27 files changed

+2891
-1481
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ install:
99
script:
1010
- npm run lint
1111
- npm run build
12-
- HOST=//adidas.github.io/ BASE=/adidas-yarn-design-system/ npm run doc
12+
- HOSTNAME=//adidas.github.io/ BASE=/adidas-yarn-design-system/ npm run doc
1313

1414
deploy:
1515
- provider: npm

‎CHANGELOG.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
1+
# 1.2.0
2+
3+
- Added `multiselect` less component.
4+
- Added `choicesjs-stencil` library as dependency for multiselect components.
5+
- Renamed `HOST` env variable to `HOSTNAME` in order not to overwrite it.
6+
- Updated example.
7+
8+
### [ logos ]
9+
10+
- Renamed logos:
11+
- `yarn-logo adidas` -> `yarn-logo yarn-logo--adidas`.
12+
- `yarn-logo yarn` -> `yarn-logo yarn-logo--yarn`.
13+
14+
### [ multiselect ]
15+
16+
- Added `.multiselect` class to customize `choicesjs-stencil` web component with YARN style.
17+
18+
### [ palette ]
19+
20+
- Added classes to set the `border-color`.
21+
- Renamed classes according to their variable names for `color` and `background-color`:
22+
- `--black` to `--primary-black`.
23+
- `--silver` to `--primary-silver`.
24+
- `--white` to `--primary-white`.
25+
26+
### [ variables ]
27+
28+
- Fixed values.
29+
- Added `@font-size-x-small` and `@font-size-x-large`.
30+
31+
### [ example ]
32+
33+
- Added multiselect component page.
34+
135
# 1.1.0
236

337
- Added mobile view for the main layout.

‎README.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@
1111
- Footer: it is shown fixed at the bottom of the screen.
1212
- Main container: it fits the available screen between the header/tabbar/toolbar and the footer. It is the only container which should be able to scroll.
1313

14-
**YARN** is based on [Bootstrap v3][bootstrap], which is a front-end framework used to define HTML elements
15-
like grids, typography, inputs and other interface components, as well as optional JS extensions.
14+
**YARN** is based on [Bootstrap v3][bootstrap], which is a front-end framework used to define HTML elements like grids, typography, inputs and other interface components, as well as optional JS extensions.
1615

1716
Currently **YARN** has two different views based on the default font size of `16px`.
1817

1918
- Mobile version: `screen width < 60rem` (`960px`).
2019
- Left sidebar and tabbar components are hidden by default.
2120
- Desktop version `screen width >= 60rem` (`960px`).
2221

22+
Check all its features on the [**documentation page**][yarn-documentation] (work in progress).
23+
2324
## Use cases
2425

2526
The purpose of this library is to provide CSS classes to customize frontend applications with adidas style.
@@ -187,21 +188,21 @@ The library is compiled in the `dist` folder, whereas the example is created in
187188
188189
The example can be delivered as [Single Page Application][single-page-application] using the script `npm run build:example:spa`, executed after building the library. It accepts two environment variables:
189190
190-
- `HOST`: host where the application will be deployed, the protocol should be omitted.
191+
- `HOSTNAME`: host where the application will be deployed, the protocol should be omitted.
191192
- `BASE`: path where the application will be available.
192193
193194
Example deploying the application in `https://name.domain:port/app`:
194195
195196
```
196-
HOST=//name.domain:port BASE=app npm run build:example:spa
197+
HOSTNAME=//name.domain:port BASE=app npm run build:example:spa
197198
```
198199
199200
### Documentation
200201
201202
The documentation is generated using the script `doc`, which generates the example in [SPA][single-page-application] mode. It also accepts the environment variables.
202203
203204
```
204-
HOST=//name.domain:port BASE=app npm run doc
205+
HOSTNAME=//name.domain:port BASE=app npm run doc
205206
```
206207
207208
## Development
@@ -311,3 +312,4 @@ For further information open the [adidas terms and conditions][terms-and-conditi
311312
[vuejs]: https://vuejs.org/
312313
[webpack]: https://webpack.js.org/
313314
[webpack-hot-module-replacement]: https://webpack.js.org/concepts/hot-module-replacement/
315+
[yarn-documentation]: https://adidas.github.io/adidas-yarn-design-system/

‎example/components/headerbar/default.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<nav class="header__container">
44
<div class="header__left">
55
<nuxt-link class="header__brand" :to="{ name: 'index' }">
6-
<span class="header__icon yarn-logo adidas"></span>
6+
<span class="header__icon yarn-logo yarn-logo--adidas"></span>
77
<span class="header__headline">
88
{{ $t('meta.yarn') }}
99
</span>

‎example/locales/components/multiselect/en.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
## Documentation
2+
3+
### Installation
4+
5+
```
6+
npm install choices.js choicesjs-stencil
7+
```
8+
9+
```html
10+
<script src="node_modules/choices.js/assets/scripts/dist/choices.min.js"></script>
11+
<script src="node_modules/choicesjs-stencil/dist/choicesjsstencil.js"></script>
12+
```
13+
14+
For modern frameworks check the specific integration in the StencilJS documentation: [framework integration][framework-integration].
15+
16+
### Use of the component
17+
18+
To use the component just add it to the HTML code with the class `multiselect` and apply its configuration via element properties. The box height is fixed to one line unless the class `multiline` is added to the element.
19+
20+
```html
21+
<choicesjs-stencil class="multiselect" type="single"/>
22+
<choicesjs-stencil class="multiselect multiline" type="multiple"/>
23+
```
24+
25+
```js
26+
var select = document.querySelector('choicesjs-stencil[type=single]');
27+
28+
select.choices = [
29+
{ value: 'superstar', label: 'Superstar', selected: true, disabled: false },
30+
{ value: 'stansmith', label: 'Stan Smith', selected: false, disabled: false },
31+
{ value: 'campus', label: 'Campus', selected: false, disabled: false }
32+
];
33+
select.placeholder = true;
34+
select.placeholderValue = 'type the value...';
35+
```
36+
37+
The component has three different behaviors via `type` property:
38+
39+
- `text`: faceted text selector (the user can type any value and it will be added to the list of values).
40+
- `single`: single value selector (from a dropdown list).
41+
- `multiple`: multiple value selector (from a dropdown list).
42+
43+
The full component configuration can be found at [ChoicesJS][choicesjs] library, and a live demo at [choicesjs-stencil][choicesjs-stencil].
44+
45+
#### Customization
46+
47+
Most of the elements can be created using the method `.callbackOnCreateTemplates()` which returns a new template for different items:
48+
49+
- [Documentation][choicesjs-templates].
50+
- [Available elements][choicesjs-templates-elements].
51+
52+
[choicesjs]: https://github.com/jshjohnson/Choices
53+
[choicesjs-stencil]: https://adidas.github.io/choicesjs-stencil/
54+
[choicesjs-templates]: https://www.npmjs.com/package/choices.js#callbackoncreatetemplates
55+
[choicesjs-templates-elements]: https://github.com/jshjohnson/Choices/blob/394bde313d0f8a50b4c2b9d64d35b76ded68a515/assets/scripts/src/choices.js#L2463-L2701
56+
[framework-integration]: https://stenciljs.com/docs/overview/
57+
[stenciljs]: https://stenciljs.com/

‎example/locales/en.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,21 @@
160160
},
161161
"mobile": "Mobile buttons"
162162
}
163+
},
164+
"components-multiselect": {
165+
"name": "Multiselect components",
166+
"text": "Faceted text selector",
167+
"single": "Single value selector",
168+
"multiple": "Multiple value selector",
169+
"config": {
170+
"placeholder": "select...",
171+
"no-results": "No results found",
172+
"no-choices": "Nothing to select",
173+
"item-selection": "Press to choose",
174+
"add-item": "Press enter to add <b>\"{value}\"</b>",
175+
"max-items": "Maximum {maxItemCount} values",
176+
"remove-button": "Remove item: {label}"
177+
}
163178
}
164179
}
165180
}

‎example/pages/components/multiselect.meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"showInSidebar": true,
3+
"displayName": "views.components-multiselect.name"
4+
}

‎example/pages/components/multiselect.vue

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template>
2+
<div class="container">
3+
<div class="jumbotron">
4+
<div class="row">
5+
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
6+
<p>{{ $t('views.components.name') }}</p>
7+
<h2>{{ $t('views.components-multiselect.name') }}</h2>
8+
</div>
9+
</div>
10+
</div>
11+
<section class="section">
12+
<div class="row">
13+
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
14+
<section class="section">
15+
<div class="row">
16+
<h5 class="col-xs-12">
17+
{{ $t('views.components-multiselect.text') }}
18+
</h5>
19+
<choicesjs-stencil class="col-xs-12 multiselect" type="text" v-pre/>
20+
</div>
21+
</section>
22+
<section class="section">
23+
<div class="row">
24+
<h5 class="col-xs-12">
25+
{{ $t('views.components-multiselect.single') }}
26+
</h5>
27+
<choicesjs-stencil class="col-xs-12 multiselect" type="single" v-pre/>
28+
</div>
29+
</section>
30+
<section class="section">
31+
<div class="row">
32+
<h5 class="col-xs-12">
33+
{{ $t('views.components-multiselect.multiple') }}
34+
</h5>
35+
<choicesjs-stencil class="col-xs-12 multiselect multiline" type="multiple" v-pre/>
36+
</div>
37+
</section>
38+
</div>
39+
</div>
40+
</section>
41+
<section class="section">
42+
<div class="row">
43+
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
44+
<markdown-renderer type="url" :src="'components.multiselect'"/>
45+
</div>
46+
</div>
47+
</section>
48+
</div>
49+
</template>
50+
51+
<script>
52+
import markdownRenderer from '~/components/markdown/renderer';
53+
import { createChoiceTemplate, createItemTemplate } from '~/services/multiselect';
54+
55+
const choices = [
56+
{ value: 'superstar', label: 'Superstar', selected: false, disabled: false, icon: 'footwear', color: 'aliceblue' },
57+
{ value: 'adizero', label: 'adizero', selected: false, disabled: false, icon: 'footwear', color: 'lightblue' },
58+
{ value: 'stansmith', label: 'Stan Smith', selected: true, disabled: false, icon: 'footwear', color: 'darkseagreen' },
59+
{ value: 'gazelle', label: 'Gazelle', selected: false, disabled: false, icon: 'footwear', color: 'grey' },
60+
{ value: 'ultraboost', label: 'ultraboost', selected: true, disabled: false, icon: 'footwear', color: 'mediumslateblue' },
61+
{ value: 'nmd', label: 'NMD', selected: false, disabled: false, icon: 'footwear', color: 'brown' },
62+
{ value: 'yeezy', label: 'YEEZY', selected: false, disabled: false, icon: 'footwear', color: 'gainsboro' },
63+
{ value: 'campus', label: 'Campus', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' },
64+
{ value: 'zx500', label: 'ZX 500', selected: false, disabled: true, icon: 'footwear', color: 'greenyellow' },
65+
{ value: 'samba', label: 'Samba', selected: false, disabled: false, icon: 'footwear', color: 'black' },
66+
{ value: 'predator', label: 'Predator', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' },
67+
{ value: 'munchen', label: 'Munchen', selected: false, disabled: false, icon: 'footwear', color: 'darkcyan' },
68+
{ value: 'zxflux', label: 'ZX Flux', selected: false, disabled: false, icon: 'footwear', color: 'coral' },
69+
{ value: 'eqt', label: 'EQT', selected: false, disabled: false, icon: 'footwear', color: 'blueviolet' },
70+
{ value: 'solar', label: 'Solar', selected: false, disabled: false, icon: 'footwear', color: 'orange' },
71+
{ value: 'copa', label: 'Copa', selected: false, disabled: true, icon: 'footwear', color: 'black' },
72+
{ value: 'terrex', label: 'Terrex', selected: false, disabled: false, icon: 'footwear', color: 'darkgreen' },
73+
{ value: 'pureboost', label: 'pureboost', selected: false, disabled: false, icon: 'footwear', color: 'violet' },
74+
{ value: 'dragon', label: 'Dragon', selected: false, disabled: false, icon: 'footwear', color: 'orange' },
75+
{ value: 'yung', label: 'YUNG', selected: false, disabled: false, icon: 'footwear', color: 'green' },
76+
{ value: 'deerupt', label: 'Deerupt', selected: false, disabled: false, icon: 'footwear', color: 'fuchsia' },
77+
{ value: 'kamanda', label: 'kamanda', selected: false, disabled: false, icon: 'footwear', color: 'burlywood' }
78+
];
79+
80+
export default {
81+
mounted() {
82+
const MAX_ITEMS = 8;
83+
const selectText = document.querySelector('choicesjs-stencil[type=text]');
84+
const selectSingle = document.querySelector('choicesjs-stencil[type=single]');
85+
const selectMultiple = document.querySelector('choicesjs-stencil[type=multiple]');
86+
87+
selectSingle.choices = choices;
88+
selectMultiple.choices = choices;
89+
selectMultiple.maxItemCount = MAX_ITEMS;
90+
selectMultiple.callbackOnCreateTemplates = (($t) => function(template) {
91+
return {
92+
choice: createChoiceTemplate(template, this.config, choices),
93+
item: createItemTemplate(template, this.config, choices, $t)
94+
};
95+
})(this.$t);
96+
97+
[ selectText, selectSingle, selectMultiple ].forEach((select) => {
98+
select.editItems = true;
99+
select.removeItems = true;
100+
select.removeItemButton = true;
101+
select.placeholder = true;
102+
select.placeholderValue = this.$t('views.components-multiselect.config.placeholder');
103+
select.noResultsText = this.$t('views.components-multiselect.config.no-results');
104+
select.noChoicesText = this.$t('views.components-multiselect.config.no-choices');
105+
select.itemSelectText = this.$t('views.components-multiselect.config.item-selection');
106+
select.addItemText = (value) => this.$t('views.components-multiselect.config.add-item', {
107+
value
108+
});
109+
select.maxItemText = (maxItemCount) => this.$t('views.components-multiselect.config.max-items', {
110+
maxItemCount
111+
});
112+
});
113+
},
114+
components: {
115+
markdownRenderer
116+
}
117+
};
118+
</script>

‎example/plugins/bootstrap.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎example/plugins/vendor.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
if (process.browser) {
2+
require('expose-loader?Choices!choices.js');
3+
require('choicesjs-stencil/dist/choicesjsstencil');
4+
}

0 commit comments

Comments
 (0)