diff options
Diffstat (limited to 'src/components/organisms/forms')
10 files changed, 71 insertions, 76 deletions
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx index 1a9e7b7..a6069e6 100644 --- a/src/components/organisms/forms/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CommentForm from './comment-form'; +import { CommentForm } from './comment-form'; const saveComment = async () => { /** Do nothing. */ diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx index 10119ce..f11c449 100644 --- a/src/components/organisms/forms/comment-form.test.tsx +++ b/src/components/organisms/forms/comment-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import CommentForm from './comment-form'; +import { CommentForm } from './comment-form'; const saveComment = async () => { /** Do nothing. */ diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx index a823977..e4140dd 100644 --- a/src/components/organisms/forms/comment-form.tsx +++ b/src/components/organisms/forms/comment-form.tsx @@ -1,13 +1,15 @@ import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form, { type FormProps } from '../../atoms/forms/form'; -import Heading, { - type HeadingProps, +import { + Button, + Form, + type FormProps, + Heading, type HeadingLevel, -} from '../../atoms/headings/heading'; -import Spinner from '../../atoms/loaders/spinner'; -import LabelledField from '../../molecules/forms/labelled-field'; + type HeadingProps, + Spinner, +} from '../../atoms'; +import { LabelledField } from '../../molecules'; import styles from './comment-form.module.scss'; export type CommentFormData = { @@ -46,7 +48,7 @@ export type CommentFormProps = Pick<FormProps, 'className'> & { titleLevel?: HeadingLevel; }; -const CommentForm: FC<CommentFormProps> = ({ +export const CommentForm: FC<CommentFormProps> = ({ Notice, parentId, saveComment, @@ -119,55 +121,55 @@ const CommentForm: FC<CommentFormProps> = ({ return ( <Form - onSubmit={submitHandler} + {...props} aria-label={formAriaLabel} aria-labelledby={formLabelledBy} - {...props} + onSubmit={submitHandler} > {title && ( - <Heading id={formId} level={titleLevel} alignment={titleAlignment}> + <Heading alignment={titleAlignment} id={formId} level={titleLevel}> {title} </Heading> )} <LabelledField - type="text" + className={styles.field} id="commenter-name" - name="commenter-name" label={nameLabel} + name="commenter-name" required={true} - value={name} setValue={setName} - className={styles.field} + type="text" + value={name} /> <LabelledField - type="email" + className={styles.field} id="commenter-email" - name="commenter-email" label={emailLabel} + name="commenter-email" required={true} - value={email} setValue={setEmail} - className={styles.field} + type="email" + value={email} /> <LabelledField - type="text" + className={styles.field} id="commenter-website" - name="commenter-website" label={websiteLabel} + name="commenter-website" required={false} - value={website} setValue={setWebsite} - className={styles.field} + type="text" + value={website} /> <LabelledField - type="textarea" + className={styles.field} id="commenter-comment" - name="commenter-comment" label={commentLabel} + name="commenter-comment" required={true} - value={comment} setValue={setComment} - className={styles.field} + type="textarea" + value={comment} /> <Button type="submit" kind="primary" className={styles.button}> {intl.formatMessage({ @@ -189,5 +191,3 @@ const CommentForm: FC<CommentFormProps> = ({ </Form> ); }; - -export default CommentForm; diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx index 191d448..4df3db0 100644 --- a/src/components/organisms/forms/contact-form.stories.tsx +++ b/src/components/organisms/forms/contact-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ContactForm from './contact-form'; +import { ContactForm } from './contact-form'; /** * ContactForm - Storybook Meta diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx index def4346..8e27cd0 100644 --- a/src/components/organisms/forms/contact-form.test.tsx +++ b/src/components/organisms/forms/contact-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import ContactForm from './contact-form'; +import { ContactForm } from './contact-form'; const props = { sendMail: async () => { diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx index b8dcb5e..ca84c25 100644 --- a/src/components/organisms/forms/contact-form.tsx +++ b/src/components/organisms/forms/contact-form.tsx @@ -1,9 +1,7 @@ import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form from '../../atoms/forms/form'; -import Spinner from '../../atoms/loaders/spinner'; -import LabelledField from '../../molecules/forms/labelled-field'; +import { Button, Form, Spinner } from '../../atoms'; +import { LabelledField } from '../../molecules'; import styles from './contact-form.module.scss'; export type ContactFormData = { @@ -33,7 +31,7 @@ export type ContactFormProps = { * * Render a contact form. */ -const ContactForm: FC<ContactFormProps> = ({ +export const ContactForm: FC<ContactFormProps> = ({ className = '', Notice, sendMail, @@ -94,45 +92,45 @@ const ContactForm: FC<ContactFormProps> = ({ }; return ( - <Form aria-label={formName} onSubmit={submitHandler} className={className}> + <Form aria-label={formName} className={className} onSubmit={submitHandler}> <LabelledField - type="text" + className={styles.field} id="contact-name" - name="contact-name" label={nameLabel} + name="contact-name" required={true} - value={name} setValue={setName} - className={styles.field} + type="text" + value={name} /> <LabelledField - type="email" + className={styles.field} id="contact-email" - name="contact-email" label={emailLabel} + name="contact-email" required={true} - value={email} setValue={setEmail} - className={styles.field} + type="email" + value={email} /> <LabelledField - type="text" + className={styles.field} id="contact-object" - name="contact-object" label={objectLabel} - value={object} + name="contact-object" setValue={setObject} - className={styles.field} + type="text" + value={object} /> <LabelledField - type="textarea" + className={styles.field} id="contact-message" - name="contact-message" label={messageLabel} + name="contact-message" required={true} - value={message} setValue={setMessage} - className={styles.field} + type="textarea" + value={message} /> <Button type="submit" kind="primary" className={styles.button}> {intl.formatMessage({ @@ -154,5 +152,3 @@ const ContactForm: FC<ContactFormProps> = ({ </Form> ); }; - -export default ContactForm; diff --git a/src/components/organisms/forms/index.ts b/src/components/organisms/forms/index.ts new file mode 100644 index 0000000..10eaf20 --- /dev/null +++ b/src/components/organisms/forms/index.ts @@ -0,0 +1,3 @@ +export * from './comment-form'; +export * from './contact-form'; +export * from './search-form'; diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx index d8c8e1e..4a0a15c 100644 --- a/src/components/organisms/forms/search-form.stories.tsx +++ b/src/components/organisms/forms/search-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SearchForm from './search-form'; +import { SearchForm } from './search-form'; /** * SearchForm - Storybook Meta diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx index 0f79caf..bc9b7a0 100644 --- a/src/components/organisms/forms/search-form.test.tsx +++ b/src/components/organisms/forms/search-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import SearchForm from './search-form'; +import { SearchForm } from './search-form'; describe('SearchForm', () => { it('renders a search input', () => { diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx index a3cb6e4..f80d295 100644 --- a/src/components/organisms/forms/search-form.tsx +++ b/src/components/organisms/forms/search-form.tsx @@ -1,12 +1,8 @@ import { useRouter } from 'next/router'; import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form from '../../atoms/forms/form'; -import MagnifyingGlass from '../../atoms/icons/magnifying-glass'; -import LabelledField, { - type LabelledFieldProps, -} from '../../molecules/forms/labelled-field'; +import { Button, Form, MagnifyingGlass } from '../../atoms'; +import { LabelledField, type LabelledFieldProps } from '../../molecules'; import styles from './search-form.module.scss'; export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & { @@ -16,12 +12,7 @@ export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & { searchPage: string; }; -/** - * SearchForm component - * - * Render a search form. - */ -const SearchForm: ForwardRefRenderFunction< +const SearchFormWithRef: ForwardRefRenderFunction< HTMLInputElement, SearchFormProps > = ({ hideLabel, searchPage }, ref) => { @@ -48,7 +39,7 @@ const SearchForm: ForwardRefRenderFunction< const id = useId(); return ( - <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}> + <Form className={styles.wrapper} grouped={false} onSubmit={submitHandler}> <LabelledField className={styles.field} hideLabel={hideLabel} @@ -61,11 +52,11 @@ const SearchForm: ForwardRefRenderFunction< value={value} /> <Button - type="submit" + aria-label={buttonLabel} + className={styles.btn} kind="neutral" shape="initial" - className={styles.btn} - aria-label={buttonLabel} + type="submit" > <MagnifyingGlass className={styles.btn__icon} /> </Button> @@ -73,4 +64,9 @@ const SearchForm: ForwardRefRenderFunction< ); }; -export default forwardRef(SearchForm); +/** + * SearchForm component + * + * Render a search form. + */ +export const SearchForm = forwardRef(SearchFormWithRef); |