From 46c0327e4e9c1db3a62a558fe042104b9e7c5d9e Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Jan 2019 21:27:40 +0100 Subject: [PATCH] fix: change and enhance properties for #input component and #form-input --- .../__snapshots__/Dropdown.test.js.snap | 10 ++--- .../src/components/form-status/FormStatus.js | 41 ++++++++++++------- .../form-status/__tests__/FormStatus.test.js | 1 + .../__snapshots__/FormStatus.test.js.snap | 6 +-- .../src/components/form-status/details.md | 14 +++---- .../form-status/style/_form-status.scss | 13 ++++-- .../themes/dnb-form-status-theme-ui.scss | 14 +++---- .../dnb-ui-lib/src/components/icon/Icon.js | 6 +-- .../__snapshots__/InputMasked.test.js.snap | 13 +++--- .../src/components/input/Example.js | 35 ++++++++-------- .../dnb-ui-lib/src/components/input/Input.js | 30 ++++++-------- .../components/input/__tests__/Input.test.js | 4 +- .../__snapshots__/Input.test.js.snap | 31 ++++---------- .../src/components/input/details.md | 3 +- .../src/components/input/style/_input.scss | 12 +++--- .../src/components/slider/Example.js | 3 +- .../src/patterns/range-slider/RangeSlider.js | 3 +- 17 files changed, 115 insertions(+), 124 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 05ac19aa2f0..cd2f430cf84 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -644,16 +644,14 @@ a.dnb-button { color: var(--color-black); font-size: 0.75em; line-height: 1.25rem; } - .dnb-form-label ~ .dnb-input__extra-information { + > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } .dnb-input__search-submit { transform: translateX(var(--button-border-width)); } - .dnb-input .dnb-form-label { + .dnb-input > .dnb-form-label { margin-right: 1rem; } - .dnb-input .dnb-form-status { + .dnb-input > .dnb-form-status { margin-top: 0.5rem; } - .dnb-input__status--error .dnb-input__shell { - border-color: red; } .dnb-form-row { display: inline-flex; @@ -661,7 +659,7 @@ a.dnb-button { justify-content: space-between; align-items: center; width: 100%; } - .dnb-form-row .dnb-form-label { + .dnb-form-row > .dnb-form-label { margin-right: 1rem; } .dnb-dropdown { diff --git a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js index 77688383d58..e84dccfbb34 100644 --- a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js +++ b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js @@ -26,9 +26,9 @@ export const propTypes = { PropTypes.node ]), icon_size: PropTypes.string, - status: PropTypes.string, + status: PropTypes.oneOf(['error', 'info']), class: PropTypes.string, - fade_in: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + animation: PropTypes.string, /** React props */ className: PropTypes.string, children: PropTypes.oneOfType([ @@ -44,10 +44,10 @@ export const defaultProps = { title: null, text: null, icon: 'exclamation', - icon_size: 'medium', + icon_size: 'default', status: 'error', class: null, - fade_in: true, + animation: null, // could be 'fade-in' /** React props */ className: null, children: null, @@ -71,31 +71,42 @@ export default class FormStatus extends PureComponent { return processChildren(props) } + static getIcon({ status, icon, icon_size }) { + if (typeof icon === 'string') { + let iconToLoad = icon + + switch (status) { + case 'info': + iconToLoad = 'info' + break + case 'error': + default: + iconToLoad = 'exclamation' + } + + icon = + } + + return icon + } + render() { const { title, - icon, - icon_size, status, className, - fade_in, + animation, class: _className } = this.props + const iconToRender = FormStatus.getIcon(this.props) const contentToRender = FormStatus.getContent(this.props) - const iconToRender = - typeof icon === 'string' ? ( - - ) : ( - // React.isValidElement(icon) - icon - ) const params = { className: classnames( 'dnb-form-status', - fade_in ? 'dnb-form-status--fade-in' : null, `dnb-form-status--${status}`, + animation ? `dnb-form-status--${animation}` : null, className, _className ), diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js index 66cc945a4bf..2a908368d8a 100644 --- a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js +++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js @@ -15,6 +15,7 @@ import Component from '../FormStatus' const props = fakeProps(require.resolve('../FormStatus'), { optional: true }) +props.status = 'error' props.icon = 'exclamation' describe('FormStatus component', () => { diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap index d6ca847778a..7bf118c70d6 100644 --- a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap +++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap @@ -2,18 +2,18 @@ exports[`FormStatus component have to match snapshot 1`] = ` .dnb-icon { display: flex; justify-content: center; align-items: center; @@ -37,11 +42,13 @@ height: 1.5em; margin: 0.5em; + margin-right: 0; color: inherit; border-radius: 50%; - border: 1px solid var(--color-emerald-green); + border: 1px solid; + border-color: currentColor; } // &--error { diff --git a/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss b/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss index 06fcb57907a..e5b53083bea 100644 --- a/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss @@ -4,16 +4,12 @@ * ======================================================================== */ .dnb-form-status { - background-color: var(--color-cherry-red-80); - - .dnb-icon { - border-color: var(--color-emerald-green); - } - &--error { color: var(--color-cherry-red); - .dnb-icon { - border-color: var(--color-cherry-red); - } + background-color: var(--color-cherry-red-80); + } + &--info { + color: var(--color-summer-green); + background-color: var(--color-sea-green-4); } } diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js index aa17228b7c3..0e7211a906f 100644 --- a/packages/dnb-ui-lib/src/components/icon/Icon.js +++ b/packages/dnb-ui-lib/src/components/icon/Icon.js @@ -16,8 +16,8 @@ import { export const DefaultIconSize = 16 export const DefaultIconSizes = { default: 16, - medium: 24, - large: 32 + medium: 24 + // large: 32 // currently not in use } export const ListDefaultIconSizes = Object.entries(DefaultIconSizes) @@ -231,7 +231,7 @@ export const loadSVG = (icon, size = null, listOfIcons = null) => { // for importing react component try { icon = iconCase(icon) - if (size && !/[0-9]/.test(size)) { + if (size && size !== 'default' && !/[0-9]/.test(size)) { icon = `${icon}_${size}` } const mod = (listOfIcons.dnbIcons diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index d7deebd5b65..2caed03091c 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -11,11 +11,9 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = ` custom_method={null} description={null} disabled={false} - extra_information={null} id={null} inputElement={[Function]} input_class={null} - input_typo="dnb-typo-number--lining" label={null} mask={Array []} on_blur={null} @@ -29,6 +27,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = ` show_mask="show_mask" size={null} status={null} + status_animation={null} status_state="error" type="text" value="test" @@ -502,16 +501,14 @@ a.dnb-button { color: var(--color-black); font-size: 0.75em; line-height: 1.25rem; } - .dnb-form-label ~ .dnb-input__extra-information { + > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } .dnb-input__search-submit { transform: translateX(var(--button-border-width)); } - .dnb-input .dnb-form-label { + .dnb-input > .dnb-form-label { margin-right: 1rem; } - .dnb-input .dnb-form-status { + .dnb-input > .dnb-form-status { margin-top: 0.5rem; } - .dnb-input__status--error .dnb-input__shell { - border-color: red; } .dnb-form-row { display: inline-flex; @@ -519,7 +516,7 @@ a.dnb-button { justify-content: space-between; align-items: center; width: 100%; } - .dnb-form-row .dnb-form-label { + .dnb-form-row > .dnb-form-label { margin-right: 1rem; } .dnb-input-masked { diff --git a/packages/dnb-ui-lib/src/components/input/Example.js b/packages/dnb-ui-lib/src/components/input/Example.js index 198877e363c..ae66db0edd9 100644 --- a/packages/dnb-ui-lib/src/components/input/Example.js +++ b/packages/dnb-ui-lib/src/components/input/Example.js @@ -69,7 +69,6 @@ class Example extends PureComponent {
-
- - This is the value 1234567890 - -
@@ -122,6 +106,21 @@ class Example extends PureComponent { value="Input value with error" />
+
+ + This is the value 1234567890 + +
) } diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js index a6efb444f6e..0a144596830 100644 --- a/packages/dnb-ui-lib/src/components/input/Input.js +++ b/packages/dnb-ui-lib/src/components/input/Input.js @@ -35,16 +35,15 @@ export const propTypes = { label: PropTypes.string, status: PropTypes.string, status_state: PropTypes.string, + status_animation: PropTypes.string, autocomplete: PropTypes.oneOf(['on', 'off']), search_button_title: PropTypes.string, placeholder: PropTypes.string, description: PropTypes.string, align: PropTypes.string, - extra_information: PropTypes.string, disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), class: PropTypes.string, input_class: PropTypes.string, - input_typo: PropTypes.string, attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // React props @@ -75,15 +74,14 @@ export const defaultProps = { label: null, status: null, status_state: 'error', + status_animation: null, autocomplete: 'off', search_button_title: '', placeholder: null, description: null, align: null, - extra_information: null, disabled: false, input_class: null, - input_typo: 'dnb-typo-number--lining', class: null, attributes: null, @@ -198,13 +196,12 @@ export default class Input extends PureComponent { label, status, status_state, + status_animation, disabled, placeholder, description, align, - input_class, - input_typo, - extra_information + input_class } = this.props let { autocomplete } = this.props @@ -216,7 +213,6 @@ export default class Input extends PureComponent { const classes = classnames( 'dnb-input', `dnb-input--${type}`, //type_modifier - extra_information ? 'dnb-input--has-extra-information' : null, size ? 'dnb-input--' + size : '', type === 'search' ? 'dnb-input__input--search' : null, align ? `dnb-input__align--${align}` : null, @@ -229,7 +225,7 @@ export default class Input extends PureComponent { const inputParams = { ...renderProps, - className: classnames('dnb-input__input', input_typo, input_class), + className: classnames('dnb-input__input', input_class), autoComplete: autocomplete, value: this.state.value || '', type, @@ -291,20 +287,18 @@ export default class Input extends PureComponent { {this.props.description && ( {this.props.description} )} - {extra_information && ( - - {extra_information} - - )} - - {status && status !== 'true' && ( - + {status && status !== 'error' && ( + )} ) diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js index a4c43ac9fc3..098e4cf4e53 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js +++ b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js @@ -98,7 +98,9 @@ describe('Input component', () => { }) it('has to to have a status value as defined in the prop', () => { - const Comp = mount() + const Comp = mount( + + ) expect(Comp.find('.dnb-form-status').text()).toBe('status') }) diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 684545e4aeb..a661cff286d 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -2,7 +2,7 @@ exports[`Input component have to match type="search" snapshot 1`] = ` description - - extra_information - `; exports[`Input component have to match type="text" snapshot 1`] = ` description - - extra_information - `; @@ -584,16 +573,14 @@ a.dnb-button { color: var(--color-black); font-size: 0.75em; line-height: 1.25rem; } - .dnb-form-label ~ .dnb-input__extra-information { + > .dnb-form-label ~ .dnb-input__extra-information { padding: 0.5em 0; } .dnb-input__search-submit { transform: translateX(var(--button-border-width)); } - .dnb-input .dnb-form-label { + .dnb-input > .dnb-form-label { margin-right: 1rem; } - .dnb-input .dnb-form-status { + .dnb-input > .dnb-form-status { margin-top: 0.5rem; } - .dnb-input__status--error .dnb-input__shell { - border-color: red; } .dnb-form-row { display: inline-flex; @@ -601,7 +588,7 @@ a.dnb-button { justify-content: space-between; align-items: center; width: 100%; } - .dnb-form-row .dnb-form-label { + .dnb-form-row > .dnb-form-label { margin-right: 1rem; } " `; diff --git a/packages/dnb-ui-lib/src/components/input/details.md b/packages/dnb-ui-lib/src/components/input/details.md index 513db24d6b6..29512f6033a 100644 --- a/packages/dnb-ui-lib/src/components/input/details.md +++ b/packages/dnb-ui-lib/src/components/input/details.md @@ -4,14 +4,13 @@ | `value` | _(optional)_ the content value of the input. | | `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. input. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. | +| `status_state` | _(optional)_ defines the state of the status. Currently are two statuses `[error, info]`. Defaults to `error`. | | `placeholder` | _(optional)_ the placeholder witch shows up once the input value is empty | | `input_class` | _(optional)_ in case we have to set a custom input class. | -| `input_typo` | _(optional)_ by default is the typography set to use `dnb-typo-number--lining` so numbers get aligned nicely. | | `type` | _(optional)_ choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`. | | `autocomplete` | _(optional)_ defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). | | `search_button_title` | _(optional)_ title attribute for the search icon. Only relevant if search input | | `description` | _(optional)_ text describing the content of the input more than the label. | -| `extra_information` | _(optional)_ text not describing the content, but an extra text to back up the purpose of the input content. | | `size` | _(optional)_ at the moment `large` is the only available variant. Leave blank if you want a standard size input. | | `attributes` | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes. | diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss index 62597ab9ba7..f8566fe7484 100644 --- a/packages/dnb-ui-lib/src/components/input/style/_input.scss +++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss @@ -154,26 +154,24 @@ font-size: 0.75em; // 12px line-height: 1.25rem; } - .dnb-form-label ~ &__extra-information { + > .dnb-form-label ~ &__extra-information { padding: 0.5em 0; } // &__input--search { // } + &__search-submit { transform: translateX(var(--button-border-width)); } - .dnb-form-label { + > .dnb-form-label { margin-right: 1rem; } - .dnb-form-status { + > .dnb-form-status { margin-top: 0.5rem; } - &__status--error &__shell { - border-color: red; - } } .dnb-form-row { @@ -184,7 +182,7 @@ width: 100%; - .dnb-form-label { + > .dnb-form-label { margin-right: 1rem; } } diff --git a/packages/dnb-ui-lib/src/components/slider/Example.js b/packages/dnb-ui-lib/src/components/slider/Example.js index 19a2d137ad5..447323893da 100644 --- a/packages/dnb-ui-lib/src/components/slider/Example.js +++ b/packages/dnb-ui-lib/src/components/slider/Example.js @@ -81,7 +81,8 @@ class AditionalExample extends PureComponent { value={this.state.value} input_class="dnb-typo-number--lining" description="Kr" - extra_information="Maksimumsbeløpet inkluderer eventuell fellesgjeld og omkostninger ved kjøp." + status="Maksimumsbeløpet inkluderer eventuell fellesgjeld og omkostninger ved kjøp." + status_state="info" on_change={({ value }) => { this.setState({ value: parseFloat(value) }) }} diff --git a/packages/dnb-ui-lib/src/patterns/range-slider/RangeSlider.js b/packages/dnb-ui-lib/src/patterns/range-slider/RangeSlider.js index 639ee42a111..468d6d90ee9 100644 --- a/packages/dnb-ui-lib/src/patterns/range-slider/RangeSlider.js +++ b/packages/dnb-ui-lib/src/patterns/range-slider/RangeSlider.js @@ -120,7 +120,8 @@ export default class RangeSlider extends PureComponent { value={this.state.value} font_class="typo-light dnb-typo-number--oldstyle" description={range_output_description} - extra_information={range_output_extra_information} + status={range_output_extra_information} + status_state="info" on_change={({ value }) => { this.setState({ value: parseFloat(value) }) }}