ELEMENTS-1226: vertical alignment consistency with new typography

storybook/src/data/directory-suggestion.data.js

@@ -0,0 +1,70 @@
+export const DIRECTORY_SUGGESTION_ENTRIES = [
+  {
+    absoluteLabel: 'Arabic',
+    computedId: 'ar',
+    directoryName: 'language',
+    displayLabel: 'Arabic',
+    'entity-type': 'directoryEntry',
+    id: 'ar',
+    label: 'Arabic',
+    obsolete: 0,
+    ordering: 10000000,
+    properties: {
+      id: 'ar',
+      label: 'Arabic',
+      obsolete: 0,
+      ordering: 10000000,
+    },
+  },
+  {
+    absoluteLabel: 'Chinese',
+    computedId: 'zh',
+    directoryName: 'language',
+    displayLabel: 'Chinese',
+    'entity-type': 'directoryEntry',
+    id: 'zh',
+    label: 'Chinese',
+    obsolete: 0,
+    ordering: 10000000,
+    properties: {
+      id: 'zh',
+      label: 'Chinese',
+      obsolete: 0,
+      ordering: 10000000,
+    },
+  },
+  {
+    absoluteLabel: 'English',
+    computedId: 'en',
+    directoryName: 'language',
+    displayLabel: 'English',
+    'entity-type': 'directoryEntry',
+    id: 'en',
+    label: 'English',
+    obsolete: 0,
+    ordering: 10000000,
+    properties: {
+      id: 'en',
+      label: 'English',
+      obsolete: 0,
+      ordering: 10000000,
+    },
+  },
+  {
+    absoluteLabel: 'French',
+    computedId: 'fr',
+    directoryName: 'language',
+    displayLabel: 'French',
+    'entity-type': 'directoryEntry',
+    id: 'fr',
+    label: 'French',
+    obsolete: 0,
+    ordering: 10000000,
+    properties: {
+      id: 'fr',
+      label: 'French',
+      obsolete: 0,
+      ordering: 10000000,
+    },
+  },
+];

storybook/src/data/lists.data.js

@@ -65,7 +65,7 @@ const dates = [
   '9/28/2018',
 ];
 
-const cities = [
+export const cities = [
   'Lisbon',
   'Paris',
   'San Francisco',

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',
+  },
+];

storybook/src/elements/nuxeo-directory-radio-group/nuxeo-directory-radio-group.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+import { storiesOf } from '@storybook/polymer';
+import { text } from '@storybook/addon-knobs';
+import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-directory-radio-group.js';
+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);
+
+storiesOf('UI/nuxeo-directory-radio-group', module).add('Default', () => {
+  const label = text('Label', 'Select language');
+  return html`
+    <style>
+      .container {
+        margin: 2rem;
+      }
+    </style>
+    <div class="container">
+      <nuxeo-directory-radio-group label="${label}" directory-name="language"> </nuxeo-directory-radio-group>
+    </div>
+  `;
+});

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

@@ -0,0 +1,50 @@
+import { storiesOf } from '@storybook/polymer';
+import { boolean, color, number, select, text } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-input';
+
+storiesOf('UI/nuxeo-input', module).add('nuxeo-input', () => {
+  const listOfTypes = ['email', 'number', 'password', 'tel', 'text', 'url'];
+  const type = select('Type', listOfTypes, 'text');
+  const label = text('Label', 'Label');
+  const placeholder = text('Placeholder', 'Placeholder');
+  const errorMessage = text('Error message', '');
+  const readOnly = boolean('readonly', false);
+  const disabled = boolean('Disabled', false);
+  const required = boolean('Required', false);
+  const invalid = boolean('Invalid', false);
+  const autoFocus = boolean('Autofocus', false);
+  const minLength = number('minlength', 0);
+  const maxLength = number('maxLength', 10);
+  const min = number('min', 0);
+  const max = number('max', 100);
+  const step = number('Step', 1);
+  const invalidColor = color('--paper-input-container-invalid-color', '#de350b', 'CSS variables');
+
+  return html`
+    <style>
+      nuxeo-input {
+        margin: 2rem;
+        max-width: 300px;
+        --paper-input-container-invalid-color: ${invalidColor};
+      }
+    </style>
+    <nuxeo-input
+      type="${type}"
+      placeholder="${placeholder}"
+      error-message="${errorMessage}"
+      auto-focus="${autoFocus}"
+      ?readonly="${readOnly}"
+      ?disabled="${disabled}"
+      ?required="${required}"
+      minlength="${minLength}"
+      maxlength="${maxLength}"
+      min="${min}"
+      max="${max}"
+      step="${step}"
+      ?invalid="${invalid}"
+      label="${label}"
+    >
+    </nuxeo-input>
+  `;
+});

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/nuxeo-selectivity/nuxeo-selectivity.stories.js

@@ -0,0 +1,64 @@
+import { html } from 'lit-html';
+import { storiesOf } from '@storybook/polymer';
+import { boolean, number, text } from '@storybook/addon-knobs';
+import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-selectivity.js';
+import { cities as CITIES } from '../../data/lists.data.js';
+
+storiesOf('UI/nuxeo-selectivity', module)
+  .add('Single', () => {
+    const label = text('Label', 'Label');
+    const placeholder = text('Placeholder', 'Placeholder');
+    const required = boolean('Required', false);
+    const disabled = boolean('Disabled', false);
+    const invalid = boolean('Invalid', false);
+    const readonly = boolean('Read only', false);
+    const minChars = number('minChars', 0);
+    return html`
+      <style>
+        nuxeo-selectivity {
+          margin: 2rem;
+          max-width: 300px;
+        }
+      </style>
+      <nuxeo-selectivity
+        .data="${CITIES}"
+        label="${label}"
+        placeholder="${placeholder}"
+        ?required="${required}"
+        ?disabled="${disabled}"
+        ?invalid="${invalid}"
+        ?readonly="${readonly}"
+        min-chars="${minChars}"
+      >
+      </nuxeo-selectivity>
+    `;
+  })
+  .add('Multiple', () => {
+    const label = text('Label', 'Label');
+    const placeholder = text('Placeholder', 'Placeholder');
+    const required = boolean('Required', false);
+    const disabled = boolean('Disabled', false);
+    const invalid = boolean('Invalid', false);
+    const readonly = boolean('Read only', false);
+    const minChars = number('minChars', 0);
+    return html`
+      <style>
+        nuxeo-selectivity {
+          margin: 2rem;
+          max-width: 300px;
+        }
+      </style>
+      <nuxeo-selectivity
+        .data="${CITIES}"
+        label="${label}"
+        placeholder="${placeholder}"
+        ?required="${required}"
+        ?disabled="${disabled}"
+        ?invalid="${invalid}"
+        ?readonly="${readonly}"
+        min-chars="${minChars}"
+        multiple
+      >
+      </nuxeo-selectivity>
+    `;
+  });

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>
+    `,
+);

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>
+  `;
+});