diff --git a/storybook/.storybook/nuxeo-demo-theme.js b/storybook/.storybook/nuxeo-demo-theme.js index 7c1f6bbd1..399b071b9 100644 --- a/storybook/.storybook/nuxeo-demo-theme.js +++ b/storybook/.storybook/nuxeo-demo-theme.js @@ -4,11 +4,200 @@ import '@nuxeo/nuxeo-ui-elements/nuxeo-button-styles.js'; const template = html` +
+ +
+ `; +}); diff --git a/storybook/src/elements/nuxeo-input/nuxeo-input.stories.js b/storybook/src/elements/nuxeo-input/nuxeo-input.stories.js new file mode 100644 index 000000000..cafa930f3 --- /dev/null +++ b/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` + + + + `; +}); diff --git a/storybook/src/elements/nuxeo-select/nuxeo-select.stories.js b/storybook/src/elements/nuxeo-select/nuxeo-select.stories.js new file mode 100644 index 000000000..34bb19c78 --- /dev/null +++ b/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` + +
+ + +
+ `; +}); diff --git a/storybook/src/elements/nuxeo-selectivity/nuxeo-selectivity.stories.js b/storybook/src/elements/nuxeo-selectivity/nuxeo-selectivity.stories.js new file mode 100644 index 000000000..d5ac652d0 --- /dev/null +++ b/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` + + + + `; + }) + .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` + + + + `; + }); 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` + +
+ +
+ `, +); 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` + +
+ + +
+ `; +}); diff --git a/storybook/src/elements/widgets/widget.stories.js b/storybook/src/elements/widgets/widget.stories.js new file mode 100644 index 000000000..6de935a41 --- /dev/null +++ b/storybook/src/elements/widgets/widget.stories.js @@ -0,0 +1,116 @@ +import { html } from 'lit-html'; +import { storiesOf } from '@storybook/polymer'; +import { text } from '@storybook/addon-knobs'; +import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-input.js'; +import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-textarea.js'; +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 '@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` + +
+
+ + + +
+
+ + + + + +
+
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ `; +}); diff --git a/ui/demo/nuxeo-data-table/nuxeo-data-table-demo.js b/ui/demo/nuxeo-data-table/nuxeo-data-table-demo.js index 2c158563d..75dde8192 100644 --- a/ui/demo/nuxeo-data-table/nuxeo-data-table-demo.js +++ b/ui/demo/nuxeo-data-table/nuxeo-data-table-demo.js @@ -54,7 +54,6 @@ import '../../nuxeo-data-table/iron-data-table.js'; .tag { display: inline-block; - text-transform: uppercase; background-color: #edf1f5; color: #6d7684; padding: 0.2rem 0.4rem; diff --git a/ui/demo/nuxeo-demo-theme.js b/ui/demo/nuxeo-demo-theme.js index 94e92fed9..bddff2363 100644 --- a/ui/demo/nuxeo-demo-theme.js +++ b/ui/demo/nuxeo-demo-theme.js @@ -253,7 +253,6 @@ const template = html` font-size: 1rem; font-weight: 700; margin: 0 0 1em; - text-transform: uppercase; letter-spacing: 0.04em; } @@ -308,7 +307,6 @@ const template = html` font-size: 1rem; font-weight: 700; margin: 0 0 1em; - text-transform: uppercase; letter-spacing: 0.04em; } diff --git a/ui/demo/nuxeo-document-permissions/style.css b/ui/demo/nuxeo-document-permissions/style.css index de76a15b2..3bc71a1a5 100644 --- a/ui/demo/nuxeo-document-permissions/style.css +++ b/ui/demo/nuxeo-document-permissions/style.css @@ -67,7 +67,6 @@ input { font-weight: bold; line-height: 130%; padding: 0.06em 0.3em; - text-transform: uppercase; white-space: nowrap; } diff --git a/ui/nuxeo-aggregation/nuxeo-dropdown-aggregation.js b/ui/nuxeo-aggregation/nuxeo-dropdown-aggregation.js index e65692426..85f1014b8 100644 --- a/ui/nuxeo-aggregation/nuxeo-dropdown-aggregation.js +++ b/ui/nuxeo-aggregation/nuxeo-dropdown-aggregation.js @@ -46,7 +46,6 @@ import { AggregationBehavior } from './nuxeo-aggregation-behavior.js'; :host { display: block; width: 100%; - height: 100%; } [hidden] { diff --git a/ui/nuxeo-data-table/data-table-column-filter.js b/ui/nuxeo-data-table/data-table-column-filter.js index a364c043a..ceaad5a82 100644 --- a/ui/nuxeo-data-table/data-table-column-filter.js +++ b/ui/nuxeo-data-table/data-table-column-filter.js @@ -12,6 +12,8 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; diff --git a/ui/nuxeo-data-table/data-table-row.js b/ui/nuxeo-data-table/data-table-row.js index 7574de98a..7ed812549 100644 --- a/ui/nuxeo-data-table/data-table-row.js +++ b/ui/nuxeo-data-table/data-table-row.js @@ -26,6 +26,11 @@ import '@nuxeo/nuxeo-elements/nuxeo-element.js'; user-select: none; } + :host([header]) { + border: initial; + padding-bottom: 0; + } + :host([selected]) { border: 2px solid var(--nuxeo-primary-color, #0066ff); padding-bottom: 0; diff --git a/ui/nuxeo-data-table/default-styles.js b/ui/nuxeo-data-table/default-styles.js index 681e03424..7b05bf300 100644 --- a/ui/nuxeo-data-table/default-styles.js +++ b/ui/nuxeo-data-table/default-styles.js @@ -23,9 +23,10 @@ const template = html` color: var(--secondary-text-color, #939caa); font-weight: 600; font-size: 1rem; - height: 48px; - border-bottom: 2px solid var(--nuxeo-border, #e3e3e3); - min-height: 48px; + height: 50px; + border-bottom: 1px solid var(--nuxeo-border, #e3e3e3); + min-height: 50px; + padding-bottom: 0; } --iron-data-table-row: { diff --git a/ui/nuxeo-draggable-list-behavior.js b/ui/nuxeo-draggable-list-behavior.js index 8d3857a41..b1a2cc9b7 100644 --- a/ui/nuxeo-draggable-list-behavior.js +++ b/ui/nuxeo-draggable-list-behavior.js @@ -21,7 +21,7 @@ import '@nuxeo/nuxeo-elements/nuxeo-element.js'; const template = html`