feat(atoms): add FormError component

src/atoms/dataEntry/Form/Form.stories.js

@@ -34,6 +34,18 @@ export default (asStory) => {
             </Form.SectionBody>
           </Form.Section>
         </Form.Plate>
+      ))
+      .add('with form error', () => (
+        <Form.Plate>
+          <Form.Error error="Some error" />
+          <Form.Section>
+            <FieldMock component={ InputField } name="curple" label="Jobs" />
+            <FieldMock component={ InputField } name="provect" label="Posted" />
+            <FieldMock component={ InputField } name="inlaying" label="My Active Jobs" />
+            <FieldMock component={ InputField } name="saccharifier" label="Active Requests" />
+            <FieldMock component={ InputField } name="inertance" label="Applied" />
+          </Form.Section>
+        </Form.Plate>
       ));
   });
 };

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 (
+    <FormErrorPlateTag tagName="div" >
+      <Row gap="md">
+        <Icon name="Alert" color="DANGER" size="lg" />
+        <Text color="GRAY1" lineHeight="lg">{ error || children }</Text>
+      </Row>
+    </FormErrorPlateTag>
+  );
+}
+
+FormError.defaultProps = {
+  ...theme[name].defaults,
+  component: 'form',
+  direction: 'column',
+};
+
+export { FormError, theme };

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 {