Skip to content

Commit

Permalink
ELEMENTS-1272: add nuxeo-sort-select and nuxeo-user-suggestion to sto…
Browse files Browse the repository at this point in the history
…rybook
  • Loading branch information
semisse committed Nov 17, 2020
1 parent f719f8f commit 3dfcb14
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 15 deletions.
47 changes: 47 additions & 0 deletions storybook/src/data/user-suggestion.data.js
@@ -0,0 +1,47 @@
export const USER_SUGGESTION_ENTRIES = [
{
company: '',
displayIcon: true,
displayLabel: 'Administrator',
email: 'devnull@nuxeo.com',
'entity-type': 'user',
firstName: '',
groups: [],
id: 'Administrator',
lastName: '',
prefixed_id: 'user:Administrator',
tenantId: null,
type: 'USER_TYPE',
username: 'Administrator',
},
{
company: '',
displayIcon: true,
displayLabel: 'jdoe',
email: 'devnull@nuxeo.com',
'entity-type': 'user',
firstName: '',
groups: [],
id: 'jdoe',
lastName: '',
prefixed_id: 'user:Administrator',
tenantId: null,
type: 'USER_TYPE',
username: 'jdoe',
},
{
company: '',
displayIcon: true,
displayLabel: 'Bob Jones',
email: 'bob@jones.com',
'entity-type': 'user',
firstName: 'Bob',
groups: [],
id: 'bobJones',
lastName: 'Jones',
prefixed_id: 'user:bjones',
tenantId: null,
type: 'USER_TYPE',
username: 'bjones',
},
];
@@ -0,0 +1,41 @@
import { html } from 'lit-html';
import { storiesOf } from '@storybook/polymer';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-sort-select.js';

const options = [
{
field: 'dc:title',
label: 'Title',
order: 'asc',
},
{
field: 'dc:created',
label: 'Created',
order: 'asc',
},
{
field: 'dc:modified',
label: 'Modified',
order: 'desc',
},
{
field: 'dc:lastContributor',
label: 'Last contributor',
order: 'asc',
},
];

storiesOf('UI/nuxeo-sort-select', module).add(
'Default',
() =>
html`
<style>
.container {
margin: 2rem;
}
</style>
<div class="container">
<nuxeo-sort-select .options="${options}"></nuxeo-sort-select>
</div>
`,
);
@@ -0,0 +1,45 @@
import { html } from 'lit-html';
import { storiesOf } from '@storybook/polymer';
import { boolean, number, select, text } from '@storybook/addon-knobs';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-user-suggestion.js';
import { USER_SUGGESTION_ENTRIES } from '../../data/user-suggestion.data';

const server = window.nuxeo.mock;
server.respondWith('post', '/api/v1/automation/UserGroup.Suggestion', () => USER_SUGGESTION_ENTRIES);
storiesOf('UI/nuxeo-user-suggestion', module).add('nuxeo-user-suggestion', () => {
const label = text('Label', 'Label');
const searchType = select(
'searchType',
{
USER_TYPE: 'USER_TYPE',
GROUP_TYPE: 'GROUP_TYPE',
USER_GROUP_TYPE: 'USER_GROUP_TYPE',
},
'USER_GROUP_TYPE',
);
const multiple = boolean('multiple', false);
const stayOpenOnSelect = boolean('stayOpenOnSelect', false);
const readonly = boolean('readonly', false);
const minChars = number('minChars', 0);
const placeholder = text('Placeholder', 'Placeholder');
return html`
<style>
.container {
margin: 2rem;
max-width: 300px;
}
</style>
<div class="container">
<nuxeo-user-suggestion
label="${label}"
.search-type="${searchType}"
?multiple="${multiple}"
?stay-open-on-select="${stayOpenOnSelect}"
?readonly="${readonly}"
min-chars="${minChars}"
placeholder="${placeholder}"
>
</nuxeo-user-suggestion>
</div>
`;
});
34 changes: 19 additions & 15 deletions storybook/src/elements/widgets/widget.stories.js
Expand Up @@ -8,13 +8,18 @@ import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-selectivity.js';
import '@nuxeo/nuxeo-ui-elements/nuxeo-data-table/iron-data-table.js';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-directory-radio-group.js';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-select.js';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-user-suggestion.js';
import { USER_SUGGESTION_ENTRIES } from '../../data/user-suggestion.data';
import { cities as CITIES, LIST } from '../../data/lists.data';
import { DIRECTORY_SUGGESTION_ENTRIES } from '../../data/directory-suggestion.data.js';

const server = window.nuxeo.mock;
server.respondWith('post', '/api/v1/automation/Directory.SuggestEntries', () => DIRECTORY_SUGGESTION_ENTRIES);
server.respondWith('post', '/api/v1/automation/UserGroup.Suggestion', () => USER_SUGGESTION_ENTRIES);

storiesOf('Widgets', module).add('Vertical Alignment Consistency', () => {
const label = text('Label', 'Label');
const placeholder = text('Placeholder', 'Placeholder');
return html`
<style>
.container {
Expand All @@ -30,16 +35,22 @@ storiesOf('Widgets', module).add('Vertical Alignment Consistency', () => {
</style>
<div class="container">
<div class="row">
<nuxeo-input label="${label}" placeholder="Placeholder"></nuxeo-input>
<nuxeo-date-picker label="${label}" placeholder="Placeholder"></nuxeo-date-picker>
<nuxeo-textarea label="${label}" placeholder="Placeholder"></nuxeo-textarea>
<nuxeo-input label="${label}" placeholder="${placeholder}"></nuxeo-input>
<nuxeo-date-picker label="${label}" placeholder="${placeholder}"></nuxeo-date-picker>
<nuxeo-textarea label="${label}" placeholder="${placeholder}"></nuxeo-textarea>
</div>
<div class="row">
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="Placeholder" min-chars="0">
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="${placeholder}" min-chars="0">
</nuxeo-selectivity>
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="${placeholder}" min-chars="0" multiple>
</nuxeo-selectivity>
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="Placeholder" min-chars="0" multiple>
<nuxeo-input label="${label}" placeholder="${placeholder}"></nuxeo-input>
</div>
<div class="row">
<nuxeo-user-suggestion label="${label}" placeholder="${placeholder}"></nuxeo-user-suggestion>
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="${placeholder}" min-chars="0" multiple>
</nuxeo-selectivity>
<nuxeo-input label="${label}" placeholder="Placeholder"></nuxeo-input>
<nuxeo-input label="${label}" placeholder="${placeholder}"></nuxeo-input>
</div>
<div class="row">
<nuxeo-data-table
Expand Down Expand Up @@ -97,15 +108,8 @@ storiesOf('Widgets', module).add('Vertical Alignment Consistency', () => {
</template>
</nuxeo-data-table-form>
</nuxeo-data-table>
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="Placeholder" min-chars="0" multiple>
</nuxeo-selectivity>
<nuxeo-input label="${label}" placeholder="Placeholder"></nuxeo-input>
</div>
<div class="row">
<nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="Placeholder" min-chars="0">
</nuxeo-selectivity>
<nuxeo-select label="${label}" placeholder="Placeholder" .options="${CITIES}"></nuxeo-select>
<nuxeo-directory-radio-group label="Select language" directory-name="language"> </nuxeo-directory-radio-group>
<nuxeo-select label="${label}" placeholder="${placeholder}" .options="${CITIES}"></nuxeo-select>
<nuxeo-directory-radio-group label="${label}" directory-name="language"> </nuxeo-directory-radio-group>
</div>
</div>
`;
Expand Down

0 comments on commit 3dfcb14

Please sign in to comment.