Merge pull request #53 from aboutbits/form_error

added FormError and story of it

src/components/form/FormError.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { FormError } from './FormError'
+
+<Meta title="Components/Form/FormError" component={FormError} />
+
+# FormError
+
+This component is a variation of the [Alert](/docs/components-alert-alert--default-story) component.
+Its main purpose is to show an error in a form. The default style applies `col-span-2`, so that the error message is shown in one line in `SectionContentTwoColumn` forms.
+
+export const Template = ({ children, ...args }) => (
+  <FormError {...args}>{children}</FormError>
+)
+
+<Canvas>
+  <Story name="Default" args={{ children: 'Critical Message.' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Default" />
+
+### Theme
+
+- `form.formError.base`: Defines base styles of container

src/components/form/FormError.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '../../framework/theme/ThemeContext'
+import { Alert, Tone } from '../alert'
+
+export const FormError: React.FC = ({ children }) => {
+  const { form } = useTheme()
+
+  return (
+    <Alert tone={Tone.critical} className={form.formError.base}>
+      {children}
+    </Alert>
+  )
+}

src/framework/theme/theme.ts

@@ -21,6 +21,9 @@ export type OverrideTheme = RecursivePartial<Theme> & {
 
 export const defaultTheme = {
   form: {
+    formError: {
+      base: 'col-span-2',
+    },
     input: {
       base: 'block w-full border p-3 focus:ring-0 appearance-none outline-none rounded-md',
       normal: