From c6fe799c7f9ed14ad221c93bb98d0447d9969c9e Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 14 Apr 2023 13:48:18 +0200 Subject: [PATCH 01/36] feat(Forms): add basic Form components --- src/sections/ui/form/Form.tsx | 11 +++++++ src/sections/ui/form/form-group/FormGroup.tsx | 13 ++++++++ .../form/form-group/form-input/FormInput.tsx | 10 +++++++ .../form/form-group/form-label/FormLabel.tsx | 6 ++++ src/stories/ui/form/Form.stories.tsx | 30 +++++++++++++++++++ 5 files changed, 70 insertions(+) create mode 100644 src/sections/ui/form/Form.tsx create mode 100644 src/sections/ui/form/form-group/FormGroup.tsx create mode 100644 src/sections/ui/form/form-group/form-input/FormInput.tsx create mode 100644 src/sections/ui/form/form-group/form-label/FormLabel.tsx create mode 100644 src/stories/ui/form/Form.stories.tsx diff --git a/src/sections/ui/form/Form.tsx b/src/sections/ui/form/Form.tsx new file mode 100644 index 000000000..a1ef11178 --- /dev/null +++ b/src/sections/ui/form/Form.tsx @@ -0,0 +1,11 @@ +import { PropsWithChildren } from 'react' +import { FormGroup } from './form-group/FormGroup' +import { Form as FormBS } from 'react-bootstrap' + +function Form({ children }: PropsWithChildren) { + return {children} +} + +Form.Group = FormGroup + +export { Form } diff --git a/src/sections/ui/form/form-group/FormGroup.tsx b/src/sections/ui/form/form-group/FormGroup.tsx new file mode 100644 index 000000000..1476b7217 --- /dev/null +++ b/src/sections/ui/form/form-group/FormGroup.tsx @@ -0,0 +1,13 @@ +import { PropsWithChildren } from 'react' +import { Form as FormBS } from 'react-bootstrap' +import { FormInput } from './form-input/FormInput' +import { FormLabel } from './form-label/FormLabel' + +function FormGroup({ children }: PropsWithChildren) { + return {children} +} + +FormGroup.Label = FormLabel +FormGroup.Input = FormInput + +export { FormGroup } diff --git a/src/sections/ui/form/form-group/form-input/FormInput.tsx b/src/sections/ui/form/form-group/form-input/FormInput.tsx new file mode 100644 index 000000000..2f3e19d15 --- /dev/null +++ b/src/sections/ui/form/form-group/form-input/FormInput.tsx @@ -0,0 +1,10 @@ +import { Form as FormBS } from 'react-bootstrap' + +interface FormInputProps { + type: 'text' | 'email' | 'password' + placeholder?: string +} + +export function FormInput({ type, placeholder }: FormInputProps) { + return +} diff --git a/src/sections/ui/form/form-group/form-label/FormLabel.tsx b/src/sections/ui/form/form-group/form-label/FormLabel.tsx new file mode 100644 index 000000000..a877fb00b --- /dev/null +++ b/src/sections/ui/form/form-group/form-label/FormLabel.tsx @@ -0,0 +1,6 @@ +import { PropsWithChildren } from 'react' +import { Form as FormBS } from 'react-bootstrap' + +export function FormLabel({ children }: PropsWithChildren) { + return {children} +} diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx new file mode 100644 index 000000000..82887ce30 --- /dev/null +++ b/src/stories/ui/form/Form.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Form } from '../../../sections/ui/form/Form' + +const meta: Meta = { + title: 'UI/Form', + component: Form, + tags: ['autodocs'] +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => ( +
+ + Username + + + + Email + + + + Password + + +
+ ) +} From e471798a68138da87bb39e0dae2a5b9f66ba8c75 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 17 Apr 2023 11:47:30 +0200 Subject: [PATCH 02/36] feat(Form): add styles to form elements --- .../ui/assets/styles/bootstrap-customized.scss | 5 +++++ src/sections/ui/form/form-group/FormGroup.tsx | 11 ++++++++--- .../ui/form/form-group/{form-input => }/FormInput.tsx | 7 ++++++- .../ui/form/form-group/{form-label => }/FormLabel.tsx | 6 +++++- src/stories/ui/form/Form.stories.tsx | 6 +++--- 5 files changed, 27 insertions(+), 8 deletions(-) rename src/sections/ui/form/form-group/{form-input => }/FormInput.tsx (59%) rename src/sections/ui/form/form-group/{form-label => }/FormLabel.tsx (64%) diff --git a/src/sections/ui/assets/styles/bootstrap-customized.scss b/src/sections/ui/assets/styles/bootstrap-customized.scss index a5e6ffcd1..a64188389 100644 --- a/src/sections/ui/assets/styles/bootstrap-customized.scss +++ b/src/sections/ui/assets/styles/bootstrap-customized.scss @@ -53,6 +53,11 @@ $link-hover-color: $dv-link-hover-color; // Badge @import "bootstrap/scss/badge"; +// Forms +$form-label-font-weight: $dv-font-weight-bold; + +@import "bootstrap/scss/forms"; + // Navbar $navbar-light-brand-color: $dv-brand-color; diff --git a/src/sections/ui/form/form-group/FormGroup.tsx b/src/sections/ui/form/form-group/FormGroup.tsx index 1476b7217..84e6f0782 100644 --- a/src/sections/ui/form/form-group/FormGroup.tsx +++ b/src/sections/ui/form/form-group/FormGroup.tsx @@ -1,10 +1,15 @@ import { PropsWithChildren } from 'react' import { Form as FormBS } from 'react-bootstrap' -import { FormInput } from './form-input/FormInput' -import { FormLabel } from './form-label/FormLabel' +import { FormInput } from './FormInput' +import { FormLabel } from './FormLabel' +import { Row } from '../../grid/Row' function FormGroup({ children }: PropsWithChildren) { - return {children} + return ( + + {children} + + ) } FormGroup.Label = FormLabel diff --git a/src/sections/ui/form/form-group/form-input/FormInput.tsx b/src/sections/ui/form/form-group/FormInput.tsx similarity index 59% rename from src/sections/ui/form/form-group/form-input/FormInput.tsx rename to src/sections/ui/form/form-group/FormInput.tsx index 2f3e19d15..c3e654da5 100644 --- a/src/sections/ui/form/form-group/form-input/FormInput.tsx +++ b/src/sections/ui/form/form-group/FormInput.tsx @@ -1,4 +1,5 @@ import { Form as FormBS } from 'react-bootstrap' +import { Col } from '../../grid/Col' interface FormInputProps { type: 'text' | 'email' | 'password' @@ -6,5 +7,9 @@ interface FormInputProps { } export function FormInput({ type, placeholder }: FormInputProps) { - return + return ( + + + + ) } diff --git a/src/sections/ui/form/form-group/form-label/FormLabel.tsx b/src/sections/ui/form/form-group/FormLabel.tsx similarity index 64% rename from src/sections/ui/form/form-group/form-label/FormLabel.tsx rename to src/sections/ui/form/form-group/FormLabel.tsx index a877fb00b..c984dd524 100644 --- a/src/sections/ui/form/form-group/form-label/FormLabel.tsx +++ b/src/sections/ui/form/form-group/FormLabel.tsx @@ -2,5 +2,9 @@ import { PropsWithChildren } from 'react' import { Form as FormBS } from 'react-bootstrap' export function FormLabel({ children }: PropsWithChildren) { - return {children} + return ( + + {children} + + ) } diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx index 82887ce30..0471346e9 100644 --- a/src/stories/ui/form/Form.stories.tsx +++ b/src/stories/ui/form/Form.stories.tsx @@ -15,15 +15,15 @@ export const Default: Story = {
Username - + Email - + Password - +
) From 8062b4a617edf161c69ab6b6d3a0d21133214723 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 17 Apr 2023 11:55:07 +0200 Subject: [PATCH 03/36] feat(FormGroup): add id prop --- src/sections/ui/form/form-group/FormGroup.tsx | 8 ++++++-- src/stories/ui/form/Form.stories.tsx | 6 +++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/sections/ui/form/form-group/FormGroup.tsx b/src/sections/ui/form/form-group/FormGroup.tsx index 84e6f0782..647e403e2 100644 --- a/src/sections/ui/form/form-group/FormGroup.tsx +++ b/src/sections/ui/form/form-group/FormGroup.tsx @@ -4,9 +4,13 @@ import { FormInput } from './FormInput' import { FormLabel } from './FormLabel' import { Row } from '../../grid/Row' -function FormGroup({ children }: PropsWithChildren) { +interface FormGroupProps { + controlId: string +} + +function FormGroup({ controlId, children }: PropsWithChildren) { return ( - + {children} ) diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx index 0471346e9..647afd24a 100644 --- a/src/stories/ui/form/Form.stories.tsx +++ b/src/stories/ui/form/Form.stories.tsx @@ -13,15 +13,15 @@ type Story = StoryObj export const Default: Story = { render: () => (
- + Username - + Email - + Password From 96f46b6d6be363e40179e955d0a49e1970fde5b6 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 17 Apr 2023 12:37:32 +0200 Subject: [PATCH 04/36] feat(Form): add story description --- src/stories/ui/form/Form.stories.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx index 647afd24a..ac8072af0 100644 --- a/src/stories/ui/form/Form.stories.tsx +++ b/src/stories/ui/form/Form.stories.tsx @@ -1,6 +1,21 @@ import type { Meta, StoryObj } from '@storybook/react' import { Form } from '../../../sections/ui/form/Form' +/** + * ## Description + * A form is a collection of HTML elements used to gather user input. Allows users to enter data, such as text, numbers, + * or file uploads, and submit it to a server for processing. + * + * ## Usage guidelines + * ### Dos + * - Input labels: + * - Each input field should have a label + * - Labels should be short and descriptive + * - They should be placed above the input field + * + * ### Don'ts + * - Leave inputs without labels + */ const meta: Meta = { title: 'UI/Form', component: Form, From b11185ac03d4e80285b51a6e4bd6f1d97458817a Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 17 Apr 2023 13:01:48 +0200 Subject: [PATCH 05/36] feat(Form): add input description text component --- src/sections/ui/form/form-group/FormGroup.tsx | 2 ++ src/sections/ui/form/form-group/FormText.tsx | 11 +++++++++++ src/sections/ui/grid/Col.tsx | 15 +++++++++++---- src/stories/ui/form/Form.stories.tsx | 17 +++++++++++++++++ src/stories/ui/grid/Grid.stories.tsx | 18 ++++++++++++++++++ 5 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 src/sections/ui/form/form-group/FormText.tsx diff --git a/src/sections/ui/form/form-group/FormGroup.tsx b/src/sections/ui/form/form-group/FormGroup.tsx index 647e403e2..2e742e350 100644 --- a/src/sections/ui/form/form-group/FormGroup.tsx +++ b/src/sections/ui/form/form-group/FormGroup.tsx @@ -3,6 +3,7 @@ import { Form as FormBS } from 'react-bootstrap' import { FormInput } from './FormInput' import { FormLabel } from './FormLabel' import { Row } from '../../grid/Row' +import { FormText } from './FormText' interface FormGroupProps { controlId: string @@ -18,5 +19,6 @@ function FormGroup({ controlId, children }: PropsWithChildren) { FormGroup.Label = FormLabel FormGroup.Input = FormInput +FormGroup.Text = FormText export { FormGroup } diff --git a/src/sections/ui/form/form-group/FormText.tsx b/src/sections/ui/form/form-group/FormText.tsx new file mode 100644 index 000000000..03de3ff4e --- /dev/null +++ b/src/sections/ui/form/form-group/FormText.tsx @@ -0,0 +1,11 @@ +import { PropsWithChildren } from 'react' +import { Form as FormBS } from 'react-bootstrap' +import { Col } from '../../grid/Col' + +export function FormText({ children }: PropsWithChildren) { + return ( + + {children} + + ) +} diff --git a/src/sections/ui/grid/Col.tsx b/src/sections/ui/grid/Col.tsx index 24409857d..89b649a98 100644 --- a/src/sections/ui/grid/Col.tsx +++ b/src/sections/ui/grid/Col.tsx @@ -3,12 +3,19 @@ import { ReactNode } from 'react' import * as React from 'react' type ColSize = number | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' +type ColSpec = + | ColSize + | { + span?: ColSize + offset?: ColSize + } + interface ColProps extends React.HTMLAttributes { children: ReactNode - xs?: ColSize - sm?: ColSize - md?: ColSize - lg?: ColSize + xs?: ColSpec + sm?: ColSpec + md?: ColSpec + lg?: ColSpec } export function Col({ children, ...props }: ColProps) { diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx index ac8072af0..9a7dea374 100644 --- a/src/stories/ui/form/Form.stories.tsx +++ b/src/stories/ui/form/Form.stories.tsx @@ -12,6 +12,9 @@ import { Form } from '../../../sections/ui/form/Form' * - Each input field should have a label * - Labels should be short and descriptive * - They should be placed above the input field + * - Input text: + * - If you need to describe an input text you can use the `Form.Group.Text` component + * - Add the text below the input * * ### Don'ts * - Leave inputs without labels @@ -43,3 +46,17 @@ export const Default: Story = { ) } +export const InputWithText: Story = { + render: () => ( +
+ + Username + + + Create a valid username of 2 to 60 characters in length containing letters (a-Z), numbers + (0-9), dashes (-), underscores (_), and periods (.). + + +
+ ) +} diff --git a/src/stories/ui/grid/Grid.stories.tsx b/src/stories/ui/grid/Grid.stories.tsx index cc52bf21a..7bcef0994 100644 --- a/src/stories/ui/grid/Grid.stories.tsx +++ b/src/stories/ui/grid/Grid.stories.tsx @@ -87,3 +87,21 @@ export const RowsWithDifferentWidths: Story = { ) } + +export const ColumnsWithOffset: Story = { + render: () => ( + + + md=4 + {`md={{ span: 4, offset: 4 }}`} + + + {`md={{ span: 3, offset: 3 }}`} + {`md={{ span: 3, offset: 3 }}`} + + + {`md={{ span: 6, offset: 3 }}`} + + + ) +} From bbd32e3c06d5dfdcddc736554c09714c78824094 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 17 Apr 2023 14:03:22 +0200 Subject: [PATCH 06/36] feat(Form): add FormSelect component --- src/sections/ui/form/form-group/FormGroup.tsx | 2 ++ .../ui/form/form-group/FormSelect.tsx | 11 +++++++++++ src/stories/ui/form/Form.stories.tsx | 19 +++++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 src/sections/ui/form/form-group/FormSelect.tsx diff --git a/src/sections/ui/form/form-group/FormGroup.tsx b/src/sections/ui/form/form-group/FormGroup.tsx index 2e742e350..c679b6951 100644 --- a/src/sections/ui/form/form-group/FormGroup.tsx +++ b/src/sections/ui/form/form-group/FormGroup.tsx @@ -4,6 +4,7 @@ import { FormInput } from './FormInput' import { FormLabel } from './FormLabel' import { Row } from '../../grid/Row' import { FormText } from './FormText' +import { FormSelect } from './FormSelect' interface FormGroupProps { controlId: string @@ -19,6 +20,7 @@ function FormGroup({ controlId, children }: PropsWithChildren) { FormGroup.Label = FormLabel FormGroup.Input = FormInput +FormGroup.Select = FormSelect FormGroup.Text = FormText export { FormGroup } diff --git a/src/sections/ui/form/form-group/FormSelect.tsx b/src/sections/ui/form/form-group/FormSelect.tsx new file mode 100644 index 000000000..0612f0d8b --- /dev/null +++ b/src/sections/ui/form/form-group/FormSelect.tsx @@ -0,0 +1,11 @@ +import { PropsWithChildren } from 'react' +import { Form as FormBS } from 'react-bootstrap' +import { Col } from '../../grid/Col' + +export function FormSelect({ children }: PropsWithChildren) { + return ( + + {children} + + ) +} diff --git a/src/stories/ui/form/Form.stories.tsx b/src/stories/ui/form/Form.stories.tsx index 9a7dea374..391612f1d 100644 --- a/src/stories/ui/form/Form.stories.tsx +++ b/src/stories/ui/form/Form.stories.tsx @@ -15,6 +15,9 @@ import { Form } from '../../../sections/ui/form/Form' * - Input text: * - If you need to describe an input text you can use the `Form.Group.Text` component * - Add the text below the input + * - Select: + * - First option should be the 'Select...' option + * - The options should use the