From e0c9da5331c6d60bde27cfae554ee17ea7fc2cd9 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 24 Jul 2019 18:56:15 +0200 Subject: [PATCH] feat: use `state` instead of `status` on #form-status (but `status` will still work in future) --- .../uilib/components/form-status/Examples.js | 4 +-- .../form-status/form-status-properties.md | 2 +- .../__snapshots__/DatePicker.test.js.snap | 1 + .../__snapshots__/Dropdown.test.js.snap | 1 + .../src/components/form-status/FormStatus.js | 25 +++++++++++-------- .../form-status/__tests__/FormStatus.test.js | 3 ++- .../__snapshots__/FormStatus.test.js.snap | 3 ++- .../stories/components/FormStatus.js | 2 +- 8 files changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js index bff8cf075fa..d2e939a13e7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js @@ -28,7 +28,7 @@ class Example extends PureComponent { `} @@ -76,7 +76,7 @@ const myHTML = \` \` const CustomStatus = () => render( - + ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md index e912c000d1c..e9c58a7b54b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/form-status-properties.md @@ -6,6 +6,6 @@ draft: true | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `text|children` | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well. | | `title` | _(optional)_ the `title` attribute in the status. | -| `status` | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. | +| `state` | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. | | `icon` | _(optional)_ the `icon` show before the status text. Defaults to `exclamation`. | | `icon_size` | _(optional)_ the icon size of the icon shows. Defaults to `medium`. | diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 945171603bd..12548823626 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -761,6 +761,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` icon="exclamation" icon_size="medium" render_content={null} + state="error" status="error" text="status" text_id="date-picker-id-status" 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 4d74bd1ec17..41dc5215e09 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 @@ -167,6 +167,7 @@ exports[`Dropdown component have to match snapshot 1`] = ` icon="exclamation" icon_size="medium" render_content={null} + state="error" status="error" text="status" text_id="dropdown-id-status" 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 042ddfc929e..ded6f0fd708 100644 --- a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js +++ b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js @@ -33,7 +33,8 @@ export const propTypes = { PropTypes.node ]), icon_size: PropTypes.string, - status: PropTypes.oneOf(['error', 'info']), + state: PropTypes.oneOf(['error', 'info']), + status: PropTypes.oneOf(['error', 'info']), // Deprecated hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), text_id: PropTypes.string, class: PropTypes.string, @@ -56,7 +57,8 @@ export const defaultProps = { text: null, icon: 'exclamation', icon_size: 'medium', - status: 'error', + state: 'error', + status: null, // Deprecated hidden: false, text_id: null, class: null, @@ -87,11 +89,11 @@ export default class FormStatus extends PureComponent { return processChildren(props) } - static getIcon({ status, icon, icon_size }) { + static getIcon({ state, icon, icon_size }) { if (typeof icon === 'string') { let iconToLoad = icon - switch (status) { + switch (state) { case 'info': case 'information': iconToLoad = 'information' @@ -107,13 +109,13 @@ export default class FormStatus extends PureComponent { return icon } - correctStatus(status) { - switch (status) { + correctStatus(state) { + switch (state) { case 'information': - status = 'info' + state = 'info' break } - return status + return state } render() { @@ -126,6 +128,7 @@ export default class FormStatus extends PureComponent { const { title, status: rawStatus, + state: rawState, hidden, className, animation, @@ -138,9 +141,9 @@ export default class FormStatus extends PureComponent { ...attributes } = props - const status = this.correctStatus(rawStatus) + const state = this.correctStatus(rawStatus || rawState) const iconToRender = FormStatus.getIcon({ - status, + state, icon, icon_size }) @@ -152,7 +155,7 @@ export default class FormStatus extends PureComponent { hidden, className: classnames( 'dnb-form-status', - `dnb-form-status--${status}`, + `dnb-form-status--${state}`, animation ? `dnb-form-status--${animation}` : null, hasStringContent ? 'dnb-form-status--has-content' : null, createSpacingClasses(props), 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 ac39b582f05..0d60994766e 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 @@ -21,7 +21,8 @@ import dnb_form_status_theme_ui from '../style/themes/dnb-form-status-theme-ui.s const props = fakeProps(require.resolve('../FormStatus'), { optional: true }) -props.status = 'error' +props.state = 'error' +props.status = null props.hidden = false props.icon = 'exclamation' 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 77e87ab0456..d874b879835 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 @@ -9,7 +9,8 @@ exports[`FormStatus component have to match snapshot 1`] = ` icon="exclamation" icon_size="icon_size" render_content={[Function]} - status="error" + state="error" + status={null} text="text" text_id="text_id" title="title" diff --git a/packages/dnb-ui-lib/stories/components/FormStatus.js b/packages/dnb-ui-lib/stories/components/FormStatus.js index b72af4d2b17..3b4d7532502 100644 --- a/packages/dnb-ui-lib/stories/components/FormStatus.js +++ b/packages/dnb-ui-lib/stories/components/FormStatus.js @@ -24,7 +24,7 @@ export default [ Status - + Long info text Ipsum habitant enim ullamcorper elit sit elementum platea rutrum eu condimentum erat risus lacinia viverra magnis lobortis nibh mollis suspendisse