feat(mantine): poc for new ChildForm component

packages/mantine/src/components/child-form/ChildForm.module.css

@@ -0,0 +1,6 @@
+.paper {
+    border-radius: 0 0 var(--mantine-radius-default) var(--mantine-radius-default);
+    box-shadow:
+        inset 0 1px 0 -1px #e5e8e8,
+        inset 0 4px 2px -2px rgb(55 55 55 / 3%);
+}

packages/mantine/src/components/child-form/ChildForm.tsx

@@ -0,0 +1,64 @@
+import {
+    Collapse,
+    CollapseProps,
+    Factory,
+    Paper,
+    polymorphicFactory,
+    Stack,
+    StylesApiProps,
+    Text,
+    Title,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import classes from './ChildForm.module.css';
+
+export type ChildFormStylesNames = 'root' | 'paper';
+
+export interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {
+    title?: string;
+    description?: string;
+}
+
+type ChildFormFactory = Factory<{
+    props: ChildFormProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: ChildFormStylesNames;
+}>;
+
+const defaultProps: Partial<ChildFormProps> = {};
+
+export const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {
+    const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(
+        'ChildForm',
+        defaultProps,
+        props,
+    );
+
+    const getStyles = useStyles<ChildFormFactory>({
+        name: 'ChildForm',
+        classes,
+        props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+    });
+
+    return (
+        <Collapse ref={ref} {...others} {...getStyles('root')}>
+            <Paper bg="gray.1" p="md" {...getStyles('paper')}>
+                {(title || description) && (
+                    <Stack gap={0} mb="md">
+                        {title && <Title order={5}>{title}</Title>}
+                        {description && <Text c="gray.7">{description}</Text>}
+                    </Stack>
+                )}
+                <Stack gap="md">{children}</Stack>
+            </Paper>
+        </Collapse>
+    );
+});

packages/mantine/src/components/child-form/index.ts

@@ -0,0 +1 @@
+export * from './ChildForm';

packages/mantine/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './prompt';
 export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
+export * from './child-form';

packages/website/src/Navigation.tsx

@@ -62,6 +62,7 @@ export const Navigation = () => (
             <InternalNavLink to="/form/Collection" label="Collection" />
             <InternalNavLink to="/form/CopyToClipboard" label="Copy to Clipboard" />
             <InternalNavLink to="/form/Form" label="Form" />
+            <InternalNavLink to="/form/ChildForm" label="Child Form" />
             <InternalNavLink to="/form/InlineConfirm" label="Inline confirm" />
         </NavLink>
         <NavLink label="Feedback" leftSection={<AnnouncementSize16Px height={16} />} defaultOpened>

packages/website/src/examples/form/child-form/ChildForm.demo.tsx

@@ -0,0 +1,8 @@
+import {ChildForm, TextInput} from '@coveord/plasma-mantine';
+const Demo = () => (
+    <ChildForm in={true}>
+        <TextInput label="First name" required />
+        <TextInput label="Last name" required />
+    </ChildForm>
+);
+export default Demo;

packages/website/src/examples/form/child-form/ChildFormWithForm.demo.tsx

@@ -0,0 +1,21 @@
+import {ChildForm, Stack, Switch, TextInput, useForm} from '@coveord/plasma-mantine';
+const Demo = () => {
+    const form = useForm({
+        initialValues: {
+            provideInfo: false,
+            firstName: '',
+            lastName: '',
+        },
+    });
+
+    return (
+        <Stack gap="md">
+            <Switch {...form.getInputProps('provideInfo')} label="Provide information" />
+            <ChildForm in={!!form.values.provideInfo}>
+                <TextInput label="First name" required {...form.getInputProps('firstName')} />
+                <TextInput label="Last name" required {...form.getInputProps('lastName')} />
+            </ChildForm>
+        </Stack>
+    );
+};
+export default Demo;

packages/website/src/examples/form/child-form/ChildFormWithTitleAndDescription.demo.tsx

@@ -0,0 +1,8 @@
+import {ChildForm, TextInput} from '@coveord/plasma-mantine';
+const Demo = () => (
+    <ChildForm in={true} title="Personal information" description="Provide the user's personal information">
+        <TextInput label="First name" required />
+        <TextInput label="Last name" required />
+    </ChildForm>
+);
+export default Demo;

packages/website/src/pages/form/ChildForm.tsx

@@ -0,0 +1,21 @@
+import ChildFormDemo from '@examples/form/child-form/ChildForm.demo?demo';
+import ChildFormWithForm from '@examples/form/child-form/ChildFormWithForm.demo?demo';
+import ChildFormWithTitleAndDescription from '@examples/form/child-form/ChildFormWithTitleAndDescription.demo?demo';
+
+import {PageLayout} from '../../building-blocs/PageLayout';
+
+const Page = () => (
+    <PageLayout
+        section="Form"
+        title="Child Form"
+        description="A container part of a form that can be used to group fields that are conditionally displayed together."
+        id="ChildFrom"
+        demo={<ChildFormDemo />}
+        examples={{
+            withToggle: <ChildFormWithForm title="Display bound to another form field" />,
+            withTitleAndDescription: <ChildFormWithTitleAndDescription title="Title and description" />,
+        }}
+    />
+);
+
+export default Page;