From 3dfcb143c7b9996aeb7286d766c96c67f8d1a1ca Mon Sep 17 00:00:00 2001
From: Samuel Fialho <samuel.fialho@gmail.com>
Date: Mon, 9 Nov 2020 18:24:36 +0000
Subject: [PATCH] ELEMENTS-1272: add nuxeo-sort-select and
 nuxeo-user-suggestion to storybook

---
 storybook/src/data/user-suggestion.data.js    | 47 +++++++++++++++++++
 .../nuxeo-sort-select.stories.js              | 41 ++++++++++++++++
 .../nuxeo-user-suggestion.stories.js          | 45 ++++++++++++++++++
 .../src/elements/widgets/widget.stories.js    | 34 ++++++++------
 4 files changed, 152 insertions(+), 15 deletions(-)
 create mode 100644 storybook/src/data/user-suggestion.data.js
 create mode 100644 storybook/src/elements/nuxeo-sort-select/nuxeo-sort-select.stories.js
 create mode 100644 storybook/src/elements/nuxeo-user-suggestion/nuxeo-user-suggestion.stories.js

diff --git a/storybook/src/data/user-suggestion.data.js b/storybook/src/data/user-suggestion.data.js
new file mode 100644
index 000000000..c5018b2cf
--- /dev/null
+++ b/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',
+  },
+];
diff --git a/storybook/src/elements/nuxeo-sort-select/nuxeo-sort-select.stories.js b/storybook/src/elements/nuxeo-sort-select/nuxeo-sort-select.stories.js
new file mode 100644
index 000000000..9a58258e6
--- /dev/null
+++ b/storybook/src/elements/nuxeo-sort-select/nuxeo-sort-select.stories.js
@@ -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>
+    `,
+);
diff --git a/storybook/src/elements/nuxeo-user-suggestion/nuxeo-user-suggestion.stories.js b/storybook/src/elements/nuxeo-user-suggestion/nuxeo-user-suggestion.stories.js
new file mode 100644
index 000000000..1932ea241
--- /dev/null
+++ b/storybook/src/elements/nuxeo-user-suggestion/nuxeo-user-suggestion.stories.js
@@ -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>
+  `;
+});
diff --git a/storybook/src/elements/widgets/widget.stories.js b/storybook/src/elements/widgets/widget.stories.js
index c75a8716a..6de935a41 100644
--- a/storybook/src/elements/widgets/widget.stories.js
+++ b/storybook/src/elements/widgets/widget.stories.js
@@ -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 {
@@ -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
@@ -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>
   `;