From ac400793677cacd70106f24ad5f17d1a99a64b8c Mon Sep 17 00:00:00 2001 From: ej9x Date: Tue, 9 Oct 2018 13:18:00 +0300 Subject: [PATCH] feat(atoms): add FormError component --- src/atoms/dataEntry/Form/Form.stories.js | 12 + src/atoms/dataEntry/Form/FormError.js | 51 ++ src/atoms/dataEntry/Form/index.js | 3 + .../__snapshots__/storyshots.test.js.snap | 497 +++++++++++++++++- 4 files changed, 553 insertions(+), 10 deletions(-) create mode 100644 src/atoms/dataEntry/Form/FormError.js diff --git a/src/atoms/dataEntry/Form/Form.stories.js b/src/atoms/dataEntry/Form/Form.stories.js index e2095b6d..d8e1e6c7 100644 --- a/src/atoms/dataEntry/Form/Form.stories.js +++ b/src/atoms/dataEntry/Form/Form.stories.js @@ -34,6 +34,18 @@ export default (asStory) => { + )) + .add('with form error', () => ( + + + + + + + + + + )); }); }; diff --git a/src/atoms/dataEntry/Form/FormError.js b/src/atoms/dataEntry/Form/FormError.js new file mode 100644 index 00000000..a79e0875 --- /dev/null +++ b/src/atoms/dataEntry/Form/FormError.js @@ -0,0 +1,51 @@ +// @flow + +import React from 'react'; + +import { createStyledTag, createTheme, getThemeStyle } from '../../../utils'; +import { Row } from '../../FlexLayout/FlexLayout'; +import { Text } from '../../typography/Text'; +import { Icon } from '../../typography/Icon'; + +type FormErrorProps = { + /** form error */ + error?: ?string, + /** form error */ + children?: ?React$Node, +}; + +const name = 'formError'; + +const theme = createTheme(name, (colors: *, sizes: *): * => ({ + errorPlate: { + border: `1px solid ${colors.DANGER}`, + borderRadius: sizes.MAIN_BORDER_RADIUS, + padding: '1.6rem', + }, + + modifiers: { }, + defaults: { }, +})); + +const FormErrorPlateTag = createStyledTag(name, props => ({ + ...getThemeStyle(props, name).errorPlate, +})); + +function FormError({ error, children }: FormErrorProps) { + return ( + + + + { error || children } + + + ); +} + +FormError.defaultProps = { + ...theme[name].defaults, + component: 'form', + direction: 'column', +}; + +export { FormError, theme }; diff --git a/src/atoms/dataEntry/Form/index.js b/src/atoms/dataEntry/Form/index.js index 61f97b2c..a655ddc2 100644 --- a/src/atoms/dataEntry/Form/index.js +++ b/src/atoms/dataEntry/Form/index.js @@ -4,11 +4,13 @@ import { FormField as Field, theme as formFieldTheme, ControlErrorTag } from './ import { FormPlate as Plate, theme as formPlateTheme } from './FormPlate'; import { FormSection as Section } from './FormSection'; import { FormSectionBody as SectionBody } from './FormSectionBody'; +import { FormError as Error, theme as formErrorTheme } from './FormError'; import { FormSectionTitle as SectionTitle, theme as formSectionTitleTheme } from './FormSectionTitle'; const Form = { Field, Plate, + Error, Section, SectionTitle, SectionBody, @@ -19,6 +21,7 @@ const theme = { ...formFieldTheme, ...formPlateTheme, ...formSectionTitleTheme, + ...formErrorTheme, }; export { diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap index fae34961..aff0ce42 100644 --- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap +++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap @@ -3453,6 +3453,409 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField with error 1`] = ` `; +exports[`Storyshots ATOMS/DATA ENTRY/Form with form error 1`] = ` +.emotion-32 { + margin: 2rem; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: inherit; +} + +.emotion-2 > *:not(:last-child) { + margin-right: 1.5rem; +} + +.emotion-8 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + width: 100%; +} + +.emotion-7 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + width: 100%; +} + +.emotion-31 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-30 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + cursor: inherit; +} + +.emotion-30 > *:not(:last-child) { + margin-bottom: 1.5rem; +} + +.emotion-4 { + margin-left: 0; + font-size: 1.2rem; + color: #878c93; + line-height: 2; +} + +.emotion-6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + width: 100%; +} + +.emotion-5 { + width: 100%; + outline: none; + padding-left: 1rem; + padding-right: 2rem; + color: #323c47; + font-size: 1.4rem; + font-weight: 400; + height: 4rem; + line-height: normal; + -webkit-transition: all .15s ease-in-out; + transition: all .15s ease-in-out; + background-color: #FFFFFF; + text-align: left; + border: 1px solid #d0d7dd; + border-radius: 5px; +} + +.emotion-5::-webkit-input-placeholder { + color: #d0d7dd; +} + +.emotion-5::-moz-placeholder { + color: #d0d7dd; +} + +.emotion-5:-ms-input-placeholder { + color: #d0d7dd; +} + +.emotion-5::placeholder { + color: #d0d7dd; +} + +.emotion-5:focus { + border-color: #4DA1FF; +} + +.emotion-5::-webkit-outer-spin-button, +.emotion-5::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.emotion-29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + cursor: inherit; + width: 100%; + height: 100%; +} + +.emotion-29 > *:not(:last-child) { + margin-bottom: 1rem; +} + +.emotion-3 { + border: 1px solid #ff6d4a; + border-radius: .5rem; + padding: 1.6rem; +} + +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + color: #ff6d4a; + width: 2.4rem; + height: 2.4rem; +} + +.emotion-1 { + line-height: 1.6; + margin: 0; + color: #878c93; + font-weight: 400; + font-size: 1.4rem; +} + +
+
+
+
+
+
+ + + + + + ! + + + + +
+ + Some error + +
+
+
+
+
+
+ Jobs +
+
+ +
+
+
+
+
+
+ Posted +
+
+ +
+
+
+
+
+
+ My Active Jobs +
+
+ +
+
+
+
+
+
+ Active Requests +
+
+ +
+
+
+
+
+
+ Applied +
+
+ +
+
+
+
+
+
+
+`; + exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = ` .emotion-33 { margin: 2rem; @@ -13507,7 +13910,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = ` `; exports[`Storyshots ATOMS/TYPOGRAPHY/Icon all icons 1`] = ` -.emotion-14 { +.emotion-15 { margin: 2rem; } @@ -13521,7 +13924,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon all icons 1`] = ` }
+
+ + + + + + ! + + + + +
@@ -13786,7 +14221,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon all icons 1`] = ` `; exports[`Storyshots ATOMS/TYPOGRAPHY/Icon with custom color 1`] = ` -.emotion-4 { +.emotion-5 { margin: 2rem; } @@ -13795,7 +14230,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon with custom color 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - color: #4DA1FF; + color: #ff6d4a; width: 1.8rem; height: 1.8rem; } @@ -13805,7 +14240,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon with custom color 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - color: #1968cb; + color: #4DA1FF; width: 1.8rem; height: 1.8rem; } @@ -13815,12 +14250,22 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon with custom color 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - color: #00bb6e; + color: #1968cb; width: 1.8rem; height: 1.8rem; } .emotion-3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + color: #00bb6e; + width: 1.8rem; + height: 1.8rem; +} + +.emotion-4 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -13831,7 +14276,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Icon with custom color 1`] = ` }
+ + + + + + ! + + + + +
+