diff --git a/src/components/form/FormError.stories.mdx b/src/components/form/FormError.stories.mdx new file mode 100644 index 00000000..e2231c42 --- /dev/null +++ b/src/components/form/FormError.stories.mdx @@ -0,0 +1,27 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import { FormError } from './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 }) => ( + {children} +) + + + + {Template.bind({})} + + + +### Props + + + +### Theme + +- `form.formError.base`: Defines base styles of container diff --git a/src/components/form/FormError.tsx b/src/components/form/FormError.tsx new file mode 100644 index 00000000..42b9c262 --- /dev/null +++ b/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 ( + + {children} + + ) +} diff --git a/src/framework/theme/theme.ts b/src/framework/theme/theme.ts index d977aa15..abb03e04 100644 --- a/src/framework/theme/theme.ts +++ b/src/framework/theme/theme.ts @@ -21,6 +21,9 @@ export type OverrideTheme = RecursivePartial & { 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: