diff --git a/apps/docs/src/common/pages/patterns.tsx b/apps/docs/src/common/pages/patterns.tsx index 98153c08..9db974ac 100644 --- a/apps/docs/src/common/pages/patterns.tsx +++ b/apps/docs/src/common/pages/patterns.tsx @@ -15,10 +15,6 @@ export const menu = ( href: '/patterns/address-outside-uk/delivery-address', text: '- Delivery address' }, - { - href: '/patterns/address-outside-uk/familiar-address', - text: '- Familiar address' - }, { href: '/patterns/address-outside-uk/record-given-address', text: '- Given address' diff --git a/apps/docs/src/common/pages/patterns/address-outside-uk.tsx b/apps/docs/src/common/pages/patterns/address-outside-uk.tsx index a3ea2c8a..4bcb61a5 100644 --- a/apps/docs/src/common/pages/patterns/address-outside-uk.tsx +++ b/apps/docs/src/common/pages/patterns/address-outside-uk.tsx @@ -1,7 +1,7 @@ import { FC, createElement as h } from 'react'; import { Helmet } from 'react-helmet-async'; import { PageProps } from '@not-govuk/app-composer'; -import { A, DateInput, Details, Radios, TextInput, Select } from '@not-govuk/components'; +import { A, Fieldset, Radios, TextInput, Select } from '@not-govuk/components'; import { menu } from '../patterns'; export const title = 'Address outside the UK'; @@ -28,27 +28,166 @@ const Page: FC = ({ location }) => ( {subsection} {title} -

Ask for an address in different ways depending on what the user needs to do. They might need to enter an address:

+

Ask for an address outside the UK.

+ +

The country list has specific information about addresses in certain countries.

+ +

When to use this pattern

+

This pattern is for services where there is either:

+ + +

There are more specific patterns when users need to enter an address:

-

The country list has specific information about addresses in certain countries.

+

How it works

-

When to use this pattern

-

This is for both internal staff members and members of the public providing addresses.

+

If you do not already know the country, ask for the country that you are collecting the address in.

-

How it works

-

Explain why you are asking for this address. This helps users understand why they need to enter it.

-

Consider:

+

Ask for country first because the manual address format can be adjusted for particular countries. For example your research may show for users in particular countries find entering an address easier if:

+ +

Check the country list for variations found helpful in other Home Office services.

+ +

Country

+

Consider the list of countries you allow users to select from. There are territories, such as Puerto Rico, that are not recognised as separate by the FCDO geographical names index. Some of these have specific address needs that may be different from the internationally recognised ‘country’.

+ +

If asking for previous addresses, consider whether users can select countries that no longer exist.

+ +

Do not include the 3 letter country code, unless there is evidence your users understand them.

+ +

Consider providing users with an option if they cannot find the country in the list. Depending on the user needs this could be:

+ + +
+ -

I cannot find the country in the list

-
- -

If there is a particular country your users are more likely to live in, ask with a radio button first:

- -
- - ) - } - ]} - /> -

I cannot find the country in the list

-
+

If you do not already know the country, ask for the country that you are collecting the address in - use the address outside the UK pattern.

Postal code

@@ -119,7 +59,7 @@ const Page: FC = ({ location }) => (

Enter address manually

-

Postal code to town

+

Use the postal code to get possible towns

Some delivery companies have a defined list of towns or city for each postal code or country.

@@ -151,6 +91,7 @@ const Page: FC = ({ location }) => ( Address } + className="govuk-!-width-two-thirds" > = ({ location }) => ( legend={

Address

} + className="govuk-!-width-two-thirds" > = ({ location }) => ( legend={

Address

} + className="govuk-!-width-two-thirds" > = ({ location }) => (
Check your postal code or enter your address manually. @@ -251,7 +195,7 @@ const Page: FC = ({ location }) => (

Norway

-

Postal code to address

+

Use the postal code to get possible addresses

Sometimes there is a defined list of addresses for each postal code in a country.

Use when users are familiar with this use of postal code.

Allow users to:

@@ -303,6 +247,12 @@ const Page: FC = ({ location }) => (

What is your address?

Postal code

9007 Change

+
Address + } + className="govuk-!-width-two-thirds" + > = ({ location }) => ( +

I cannot find my town or city.

Country

Norway

@@ -325,29 +277,34 @@ const Page: FC = ({ location }) => (

Manual entry

-

What is your address?

- - Address line 1 +
+ What is your address? + } - name="address-line-1" - /> - - - + className="govuk-!-width-two-thirds"> + + + + +

Country

-

St Pierre & Miquelon

+

Saint Pierre and Miquelon

For address lines 1, 2 and town or city allow:

@@ -370,7 +327,7 @@ const Page: FC = ({ location }) => (

Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?

Research

-

Valuable delivery address outside the UK is used by:

+

Delivery address outside the UK is used by:

  • Apply for a passport
diff --git a/apps/docs/src/common/pages/patterns/address-outside-uk/familiar-address.tsx b/apps/docs/src/common/pages/patterns/address-outside-uk/familiar-address.tsx deleted file mode 100644 index 0c129668..00000000 --- a/apps/docs/src/common/pages/patterns/address-outside-uk/familiar-address.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import { FC, createElement as h } from 'react'; -import { Helmet } from 'react-helmet-async'; -import { PageProps } from '@not-govuk/app-composer'; -import { A, DateInput, Details, Radios, TextInput, Select, Fieldset } from '@not-govuk/components'; -import { menu } from '../../patterns'; - -export const title = 'Familiar address'; -const description = 'How to ask users for a familiar address outside the UK'; -const section = 'Patterns'; -const subsection = 'Ask users for'; - -const Page: FC = ({ location }) => ( -
- - {subsection} {title.toLowerCase()} - Home Office Design System - - - - - - -
- {menu} -
- -
-

- {subsection} - {title} -

- -

Ask users for an address they know or are familiar with. This could be somewhere they live or have lived.

- -

When to use this pattern

-

This pattern is for services where there is either:

-
    -
  • little impact on the user for the address being incorrect or not recognised by another system
    • -
  • other validation before the address is used
    • -
- -

How it works

- -

If you do not already know the country, ask for the country that you are collecting the address in.

- -

Ask for country first because the manual address format can be adjusted for particular countries. For example your research may show for users in particular countries find entering an address easier if:

-
    -
  • there are extra lines for 'state' or 'province'
    • -
  • 'zip code' is used instead of 'postal code'
    • -
- -

Check the country list for variations found helpful in other Home Office services.

- -

Country

- -

Consider the list of countries you allow users to select from. There are territories, such as Puerto Rico, that are not recognised as separate by the FCDO geographical names index. Some of these have specific address needs that may be different from the internationally recognised ‘country’.

- -

If asking for previous addresses, consider whether users can select countries that no longer exist.

- -

Do not include the 3 letter country code, unless there is evidence your users understand them.

- -

Consider providing users with an option if they cannot find the country in the list.

- -
-