Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removes borders around form sections #1136

Merged
merged 3 commits into from
Jan 8, 2024
Merged

Removes borders around form sections #1136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e50597c
Removes borders around form sections
daniellemaxwell Jan 5, 2024
dd267e1
Adjusts how padding is applied in contacts and trisa forms
daniellemaxwell Jan 5, 2024
596c23c
Merge branch 'main' into sc-23204
daniellemaxwell Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions web/gds-user-ui/src/components/Addresses/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { Heading, Text } from '@chakra-ui/react';
import { Heading, Stack, Text } from '@chakra-ui/react';
import { Trans } from '@lingui/react';
import FormLayout from 'layouts/FormLayout';
import React from 'react';
import AddressList from './AddressList';

const Addresses: React.FC = () => {
return (
<FormLayout>
<Stack pt={5}>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FormLayout component has a styles set to display the border that we wanted to remove from around the form's smaller sections. The FormLayout component is used throughout the UI, so replacing it with the Stack component allows for the content to be grouped together. This change will also make it easier to apply specific styles to a smaller section within a form.

<Heading size="md">
<Trans id="Addresses">Addresses</Trans>
</Heading>
Expand All @@ -18,7 +17,7 @@ const Addresses: React.FC = () => {
</Trans>
</Text>
<AddressList />
</FormLayout>
</Stack>
);
};

Expand Down
7 changes: 3 additions & 4 deletions web/gds-user-ui/src/components/Contacts/ContactForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Heading, Text } from '@chakra-ui/react';
import { Heading, Stack, Text } from '@chakra-ui/react';
import InputFormControl from 'components/ui/InputFormControl';
import PhoneNumberInput from 'components/ui/PhoneNumberInput';
import FormLayout from 'layouts/FormLayout';
import { Controller, useFormContext } from 'react-hook-form';
import get from 'lodash/get';
import { t } from '@lingui/macro';
Expand Down Expand Up @@ -47,7 +46,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ title, description, name }) =
};

return (
<FormLayout>
<Stack>
<Heading size="md" data-testid="title">
{title}
</Heading>
Expand Down Expand Up @@ -100,7 +99,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ title, description, name }) =
);
}}
/>
</FormLayout>
</Stack>
);
};

Expand Down
22 changes: 14 additions & 8 deletions web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef, SetStateAction, Dispatch } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { t } from '@lingui/macro';
import { chakra, useDisclosure } from '@chakra-ui/react';
import { Box, chakra, useDisclosure } from '@chakra-ui/react';
import StepButtons from 'components/StepsButtons';
import ContactForm from 'components/Contacts/ContactForm';
import useCertificateStepper from 'hooks/useCertificateStepper';
Expand Down Expand Up @@ -68,7 +68,7 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
resetForm(updatedCertificateStep?.form, {
keepValues: false
});
console.log('[] prev updatedCertificateStep', updatedCertificateStep);
// console.log('[] prev updatedCertificateStep', updatedCertificateStep);
previousStepRef.current = false;
previousStep(updatedCertificateStep);
}
Expand Down Expand Up @@ -148,21 +148,27 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
title={t`Legal/ Compliance Contact (required)`}
description={t`Compliance officer or legal contact for requests about the compliance requirements and legal status of your organization. A business phone number is required to complete physical verification for MainNet registration. Please provide a phone number where the Legal/ Compliance contact can be contacted.`}
/>
<ContactForm
<Box pt={5}>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Box is Chakra UI's (the component library used for this app) way of adding a <div>.

<ContactForm
name="contacts.technical"
title={t`Technical Contact (required)`}
description={t`Primary contact for handling technical queries about the operation and status of your service participating in the TRISA network. Can be a group or admin email.`}
/>
<ContactForm
/>
</Box>
<Box pt={5}>
<ContactForm
name="contacts.administrative"
title={t`Administrative Contact (optional)`}
description={t`Administrative or executive contact for your organization to field high-level requests or queries. (Strongly recommended)`}
/>
<ContactForm
/>
</Box>
<Box pt={5}>
<ContactForm
name="contacts.billing"
title={t`Billing Contact (optional)`}
description={t`Billing contact for your organization to handle account and invoice requests or queries relating to the operation of the TRISA network.`}
/>
/>
</Box>
<StepButtons
handlePreviousStep={handlePreviousStepClick}
handleNextStep={handleNextStepClick}
Expand Down
7 changes: 3 additions & 4 deletions web/gds-user-ui/src/components/CountryOfRegistration/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Heading } from '@chakra-ui/react';
import { Heading, Stack } from '@chakra-ui/react';
import { t } from '@lingui/macro';
import { Trans } from '@lingui/react';
import SelectFormControl from 'components/ui/SelectFormControl';
import { getCountriesOptions } from 'constants/countries';
import FormLayout from 'layouts/FormLayout';
import { Controller, useFormContext } from 'react-hook-form';

const CountryOfRegistration: React.FC = () => {
Expand All @@ -14,7 +13,7 @@ const CountryOfRegistration: React.FC = () => {
const countries = getCountriesOptions();

return (
<FormLayout data-testid="legal-country-of-registration">
<Stack pt={5} data-testid="legal-country-of-registration">
<Heading size="md">
<Trans id="Country of Registration">Country of Registration</Trans>
</Heading>
Expand All @@ -36,7 +35,7 @@ const CountryOfRegistration: React.FC = () => {
/>
)}
/>
</FormLayout>
</Stack>
);
};

Expand Down
6 changes: 3 additions & 3 deletions web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { chakra, useDisclosure } from '@chakra-ui/react';
import CountryOfRegistration from 'components/CountryOfRegistration';
import FormLayout from 'layouts/FormLayout';
import NameIdentifiers from '../NameIdentifiers';
import NationalIdentification from '../NameIdentification';
import NationalIdentification from '../NationalIdentification';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file name was changed to make it easier to locate the component.

import Address from 'components/Addresses';
import { FormProvider, useForm } from 'react-hook-form';
import StepButtons from 'components/StepsButtons';
Expand Down Expand Up @@ -71,7 +71,7 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
resetForm(updatedCertificateStep?.form, {
keepValues: false
});
console.log('[] prev updatedCertificateStep', updatedCertificateStep);
// console.log('[] prev updatedCertificateStep', updatedCertificateStep);
previousStepRef.current = false;
previousStep(updatedCertificateStep);
}
Expand Down Expand Up @@ -109,7 +109,7 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
state: currentState()
} as any
};
console.log('[] isDirty payload', payload);
// console.log('[] isDirty payload', payload);

updateCertificateStep(payload);
previousStepRef.current = true;
Expand Down
7 changes: 3 additions & 4 deletions web/gds-user-ui/src/components/NameIdentifiers/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { Button, HStack } from '@chakra-ui/react';
import FormLayout from 'layouts/FormLayout';
import { Button, HStack, Stack } from '@chakra-ui/react';
import NameIdentifier from '../NameIdentifier';
import { t } from '@lingui/macro';
import { Trans } from '@lingui/react';
Expand All @@ -23,7 +22,7 @@ const NameIdentifiers: React.FC = () => {
};

return (
<FormLayout data-testid="name-identifier">
<Stack data-testid="name-identifier">
<NameIdentifier
name="entity.name.name_identifiers"
heading={t`Name Identifiers`}
Expand Down Expand Up @@ -57,7 +56,7 @@ const NameIdentifiers: React.FC = () => {
<Trans id="Add Phonetic Names">Add Phonetic Names</Trans>
</Button>
</HStack>
</FormLayout>
</Stack>
);
};

Expand Down
0 ...cation/NationalIdentification.stories.tsx → ...cation/NationalIdentification.stories.tsx
View file
Open in desktop
File renamed without changes.
7 changes: 3 additions & 4 deletions ...c/components/NameIdentification/index.tsx → ...mponents/NationalIdentification/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React, { useEffect, useRef } from 'react';
import { Heading, Link, Text } from '@chakra-ui/react';
import { Heading, Link, Stack, Text } from '@chakra-ui/react';
import InputFormControl from 'components/ui/InputFormControl';
import SelectFormControl from 'components/ui/SelectFormControl';
import { getCountriesOptions } from 'constants/countries';
import {
getNationalIdentificationOptions,
disabledIdentifiers,
} from 'constants/national-identification';
import FormLayout from 'layouts/FormLayout';
import { Controller, useFormContext } from 'react-hook-form';
import {
getRegistrationAuthorities,
Expand Down Expand Up @@ -110,7 +109,7 @@ useEffect(() => {
}, [NationalIdentificationType]);

return (
<FormLayout data-testid="legal-name-identification">
<Stack pt={5} data-testid="legal-name-identification">
<Heading size="md">
<Trans id="National Identification">National Identification</Trans>
</Heading>
Expand Down Expand Up @@ -208,7 +207,7 @@ useEffect(() => {
/>
</>
)}
</FormLayout>
</Stack>
);
};

Expand Down
8 changes: 5 additions & 3 deletions web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
import { chakra, useDisclosure } from '@chakra-ui/react';
import { Box, chakra, useDisclosure } from '@chakra-ui/react';
import { t } from '@lingui/macro';
import FormLayout from 'layouts/FormLayout';
import { FormProvider, useForm } from 'react-hook-form';
Expand Down Expand Up @@ -143,11 +143,13 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
name="testnet"
headerText={t`TRISA Endpoint: TestNet`}
/>
<TrisaImplementationForm
<Box pt={5}>
<TrisaImplementationForm
type="MainNet"
name="mainnet"
headerText={t`TRISA Endpoint: MainNet`}
/>
/>
</Box>
<StepButtons
handlePreviousStep={handlePreviousStepClick}
handleNextStep={handleNextStepClick}
Expand Down
7 changes: 3 additions & 4 deletions web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { WarningIcon } from '@chakra-ui/icons';
import { Heading, Text } from '@chakra-ui/react';
import { Heading, Stack, Text } from '@chakra-ui/react';
import InputFormControl from 'components/ui/InputFormControl';
import FormLayout from 'layouts/FormLayout';
import React from 'react';
import { useFormContext } from 'react-hook-form';
import { getDomain } from 'utils/utils';
Expand Down Expand Up @@ -61,7 +60,7 @@ const TrisaImplementationForm: React.FC<TrisaImplementationFormProps> = ({
const domain = getValues('website') && getDomain(getValues('website'));

return (
<FormLayout>
<Stack>
<Heading size="md">{headerText}</Heading>
<InputFormControl
label={t`TRISA Endpoint`}
Expand All @@ -84,7 +83,7 @@ const TrisaImplementationForm: React.FC<TrisaImplementationFormProps> = ({
controlId="certificateCommonName"
{...register(`${name}.common_name`)}
/>
</FormLayout>
</Stack>
);
};

Expand Down
Loading