ELEMENTS-1265: add nuxeo-select to storybook

storybook/src/elements/nuxeo-select/nuxeo-select.stories.js

@@ -0,0 +1,41 @@
+import { html } from 'lit-html';
+import { storiesOf } from '@storybook/polymer';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-select.js';
+import { cities as CITIES } from '../../data/lists.data';
+
+storiesOf('UI/nuxeo-select', module).add('Default', () => {
+  const label = text('Label', 'Label');
+  const placeholder = text('Placeholder', 'Placeholder');
+  const errorMessage = text('Error message', 'Error message');
+  const horizontalAlign = select('horizontalAlign', { left: 'left', right: 'right' }, 'left');
+  const verticalAlign = select('verticalAlign', { top: 'top', bottom: 'bottom' }, 'top');
+  const dynamicAlign = boolean('dynamicAlign', false);
+  const readonly = boolean('Read only', false);
+  const disabled = boolean('Disabled', false);
+  const required = boolean('Required', false);
+  return html`
+    <style>
+      .container {
+        margin: 2rem;
+        max-width: 300px;
+      }
+    </style>
+    <div class="container">
+      <nuxeo-select
+        label="${label}"
+        placeholder="${placeholder}"
+        error-message="${errorMessage}"
+        .options="${CITIES}"
+        .selected="${CITIES[0]}"
+        .horizontal-align="${horizontalAlign}"
+        .vertical-align="${verticalAlign}"
+        ?dynamic-align="${dynamicAlign}"
+        ?readonly="${readonly}"
+        ?disabled="${disabled}"
+        ?required="${required}"
+      >
+      </nuxeo-select>
+    </div>
+  `;
+});

storybook/src/elements/widgets/widget.stories.js

@@ -7,6 +7,7 @@ import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-date-picker.js';
 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 { cities as CITIES, LIST } from '../../data/lists.data';
 import { DIRECTORY_SUGGESTION_ENTRIES } from '../../data/directory-suggestion.data.js';
 
@@ -103,7 +104,7 @@ storiesOf('Widgets', module).add('Vertical Alignment Consistency', () => {
       <div class="row">
         <nuxeo-selectivity .data="${CITIES}" label="${label}" placeholder="Placeholder" min-chars="0">
         </nuxeo-selectivity>
-        <nuxeo-input label="${label}" placeholder="Placeholder"></nuxeo-input>
+        <nuxeo-select label="${label}" placeholder="Placeholder" .options="${CITIES}"></nuxeo-select>
         <nuxeo-directory-radio-group label="Select language" directory-name="language"> </nuxeo-directory-radio-group>
       </div>
     </div>