Skip to content

Commit

Permalink
Combine patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomyems
tomyems committed Jul 1, 2024
1 parent b5e2444 commit f702ca0
Show file tree
Hide file tree
Showing 6 changed files with 220 additions and 313 deletions.
4 changes: 0 additions & 4 deletions apps/docs/src/common/pages/patterns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
163 changes: 151 additions & 12 deletions apps/docs/src/common/pages/patterns/address-outside-uk.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -28,27 +28,166 @@ const Page: FC<PageProps> = ({ location }) => (
<span className="caption">{subsection}</span>
{title}
</h1>
<p className="govuk-body">Ask for an address in different ways depending on what the user needs to do. They might need to enter an address:</p>
<p className="govuk-body">Ask for an address outside the UK.</p>

<p className="govuk-body">The <A href="/patterns/address-outside-uk/country-list">country list</A> has specific information about addresses in certain countries.</p>

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p className="govuk-body">This pattern is for services where there is either:</p>
<ul className="govuk-list govuk-list--bullet">
<li>little impact on the user for the address being incorrect or not recognised by another system</li>
<li>other validation before the address is used</li>
</ul>

<p className="govuk-body">There are more specific patterns when users need to enter an address:</p>
<ul className="govuk-list govuk-list--bullet">
<li><A href="/patterns/address-outside-uk/delivery-address">for something valuable to be delivered to</A></li>
<li><A href="/patterns/address-outside-uk/familiar-address">where they live, have lived, or are otherwise familiar with</A></li>
<li><A href="/patterns/address-outside-uk/record-given-address">they have been given</A></li>
</ul>

<p className="govuk-body">The <A href="/patterns/address-outside-uk/country-list">country list</A> has specific information about addresses in certain countries.</p>
<h2 className="govuk-heading-l">How it works</h2>

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p className="govuk-body">This is for both internal staff members and members of the public providing addresses.</p>
<p className="govuk-body">If you do not already know the country, ask for the country that you are collecting the address in.</p>

<h2 className="govuk-heading-l">How it works</h2>
<p className="govuk-body">Explain why you are asking for this address. This helps users understand why they need to enter it.</p>
<p className="govuk-body">Consider:</p>
<p className="govuk-body">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:</p>
<ul className="govuk-list govuk-list--bullet">
<li>how the address is used</li>
<li>how reliable the address needs to be</li>
<li>if there are internal processes that can correct or validate addresses</li>
<li>there are extra lines for 'state' or 'province'</li>
<li>'zip code' is used instead of 'postal code'</li>
</ul>

<p className="govuk-body">Check the <A href="country-list">country list</A> for variations found helpful in other Home Office services.</p>

<h3 className="govuk-heading-m">Country</h3>

<p className="govuk-body">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 <A href="https://www.gov.uk/government/publications/geographical-names-and-information">FCDO geographical names index</A>. Some of these have specific address needs that may be different from the internationally recognised ‘country’.</p>

<p className="govuk-body">If asking for previous addresses, consider whether users can select countries that no longer exist.</p>

<p className="govuk-body">Do not include the 3 letter country code, unless there is evidence your users understand them.</p>

<p className="govuk-body">Consider providing users with an option if they cannot find the country in the list. Depending on the user needs this could be:</p>
<ul className="govuk-list govuk-list--bullet">
<li>manually entering the country</li>
<li>guidance about what do if the country cannot be found</li>
</ul>

<div className="app-example">
<Select
label="Which country or territory do you currently live in?"
name="country-or-territory"
options={[
{
value: "France",
label: "France"
},
{
value: "United Kingdom",
label: "United Kingdom"
}
]}
/>
<p className="govuk-body"><A href="#">I cannot find the country in the list</A></p>
</div>

<p className="govuk-body">If there is a particular country your users are more likely to live in, ask with a conditional radio button:</p>

<div className="app-example">
<Radios
label="Do you currently live in ((country name))?"
name="country-or-territory"
options={[
{
value: "yes",
label: "Yes"
},
{
value: "no",
label: "No",
conditional: (
<Select
label="Which country or territory do you currently live in?"
name="country-or-territory"
options={[
{
value: "France",
label: "France"
},
{
value: "United Kingdom",
label: "United Kingdom"
}
]}
/>
)
}
]}
/>
<p className="govuk-body"><A href="#manual-entry">I cannot find the country in the list</A></p>
</div>

<h3 className="govuk-heading-m">Manual entry</h3>

<p className="govuk-body">Use the <A href="/patterns/address-outside-uk/country-list">country list</A> to customise the manual address entry to each specific country.</p>

<p className="govuk-body">From your service, you may know which addresses users find most difficult to enter, prioritise these for customisation.</p>

<div className="app-example">
<Fieldset
legend={
<h1 className="govuk-heading-l">
What is your address?
</h1>
}
className="govuk-!-width-two-thirds">
<TextInput
label="Address line 1"
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<TextInput
label="Town or city"
name="town-city"
className="govuk-!-width-two-thirds"
/>
<TextInput
label="Postal code"
name="postal-code"
width={10}
/>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Saint Pierre and Miquelon <A href="#country">Change <span className="govuk-visually-hidden">country</span></A></p>
</div>

<p className="govuk-body">For address lines 1, 2 and town or city allow:</p>
<ul className="govuk-list govuk-list--bullet">
<li>free text inputs</li>
<li>letters a to z, lowercase, and uppercase, including accents (extended latin character set)</li>
<li>punctuation, such as full stops, commas, apostrophes, hypens, exclamation marks</li>
<li>numbers</li>
<li>up to 255 characters</li>
<li>a blank address line 2</li>
</ul>

<p className="govuk-body">For postal code allow:</p>
<ul className="govuk-list govuk-list--bullet">
<li>free text inputs</li>
<li>numbers (0 to 9)</li>
<li>letters A to Z (unaccented)</li>
<li>spaces</li>
<li>hyphens</li>
<li>up to 10 letters and numbers</li>
</ul>

<h2 className="govuk-heading-l">Research</h2>
<p className="govuk-body">Address address outside the UK is used by:</p>
<ul className="govuk-list govuk-list--bullet">
<li></li>
</ul>

<h2 className="govuk-heading-l">Accessibility</h2>
<p className="govuk-body">Consider that users need more than one method for entering their address.</p>

Expand Down
34 changes: 17 additions & 17 deletions apps/docs/src/common/pages/patterns/address-outside-uk/country-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="b">B</h2>
<h3 id="bermuda">Bermuda</h3>
<p className="govuk-body">A British overseas territory.</p>
<p className="govuk-body">Sovereign state: United Kingdom</p>
<p className="govuk-body">Bermuda has postal codes, which are encouraged to be used.</p>
<p className="govuk-body">Some delivery companies do not accept addresses in Bermuda with postal codes.</p>
<h3 id="bonaire">Bonaire, Sint Eustatius and Saba</h3>
<p className="govuk-body">Part of the Netherlands in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the Netherlands in the FCDO country list</p>
<p className="govuk-body">Some delivery companies use a different country code for the Netherlands and each of:</p>
<ul className="govuk-list govuk-list--bullet">
<li>Bonaire</li>
Expand All @@ -52,18 +52,18 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="c">C</h2>
<h3 id="canary-islands">Canary Islands</h3>
<p className="govuk-body">Part of Spain in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: Spain in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies use a different country code for Spain and the Canary Islands.</p>
<h3 id="commonwealth-of-the-northern-mariana-islands">Commonwealth of the Northern Mariana Isalnds</h3>
<p className="govuk-body">Part of the United States of America in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the United States of America in the FCDO country list.</p>
<p className="govuk-body">Also known as: Northern Mariana Islands</p>
<p className="govuk-body">Some delivery companies use a different country code for the USA and the Northern Mariana Islands</p>
<p className="govuk-body">Zip code range: 96950 to 96952</p>
<h3 id="cook-islands">Cook Islands</h3>
<p className="govuk-body">Part of New Zealand in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: New Zealand in the FCDO country list.</p>
<p className="govuk-body">The Cook Islands do not use postal codes, but New Zealand does.</p>
<h3 id="curacao">Curacao</h3>
<p className="govuk-body">Part of the Netherlands in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the Netherlands in the FCDO country list.</p>
<p className="govuk-body">Some delivery copmanies use a different country code for the Netherlands and Curacao.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="d">D</h2>
Expand All @@ -72,15 +72,15 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="f">F</h2>
<h3 id="faroe-islands">Faroe Islands</h3>
<p className="govuk-body">Part of Denmark in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: Denmark in the FCDO country list.</p>
<p className="govuk-body">Faroe Islands postal codes start 'FO', followed by 3 digits. This is a different format to Denmark postal codes.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="g">G</h2>
<h3 id="greenland">Greenland</h3>
<p className="govuk-body">Part of Denmark in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: Denmark in the FCDO country list.</p>
<p className="govuk-body">Greenland postal codes start 'GL-39', followed by 2 digits. This is consistent with Denmark postal codes.</p>
<h3 id="guam">Guam</h3>
<p className="govuk-body">Part of the United States in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the United States in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies use a different country code for the United States and Guam.</p>
<p className="govuk-body">Zip code range: 96910 to 96932</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
Expand All @@ -101,15 +101,15 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="n">N</h2>
<h3 id="niue">Niue</h3>
<p className="govuk-body">Part of New Zealand in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: New Zealand in the FCDO country list.</p>
<p className="govuk-body">Niue has one postal code for the whole island, 9974. This is consistent with the New Zealand postal code format.</p>
<p className="govuk-body">Some delivery companies do not recogonise the Niue postal code.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="o">O</h2>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="p">P</h2>
<h3 id="puerto-rico">Puerto Rico</h3>
<p className="govuk-body">Part of the United States in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the United States in the FCDO country list.</p>
<p className="govuk-body">Some deilvery companies use a different country code for the United States and Puerto Rico</p>
<p className="govuk-body">Zip code range: 00600 to 00799 and 0900 to 00999.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
Expand All @@ -119,18 +119,18 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="s">S</h2>
<h3 id='saint-barthelemy'>Saint Barthélemy</h3>
<p className="govuk-body">Part of France in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: France in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies use a different country code for France and Saint Barthélemy.</p>
<h3 id="saint-pierre-and-miquelon">Saint Pierre and Miquelon</h3>
<p className="govuk-body">Part of France in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: France in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies do not use a separate country code.</p>
<h3 id="sint-maarten">Saint Martin</h3>
<p className="govuk-body">Part of France in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: France in the FCDO country list.</p>
<p className="govuk-body">It is the northern part of an island, where the southern part is <a href="#sint-maarten">Sint Maarten</a>.</p>
<p className="govuk-body">Some delivery companies use the same country code for both Sint Maarten and Saint Martin. They may also only use one of Sint Maarten or Saint Martin.</p>
<p className="govuk-body">Saint Martin has one postal code: 97150.</p>
<h3 id="sint-maarten">Sint Maarten</h3>
<p className="govuk-body">Part of the Netherlands in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the Netherlands in the FCDO country list.</p>
<p className="govuk-body">It is the southern part of an island, where the northern part is <a href="#saint-martin">Saint Martin</a>.</p>
<p className="govuk-body">Some delivery companies use the same country code for both Sint Maarten and Saint Martin. They may also only use one of Sint Maarten or Saint Martin.</p>
<h3 id="saint-kitts-and-nevis">Saint Kitts and Nevis</h3>
Expand All @@ -143,12 +143,12 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="v">V</h2>
<h3 id="virgin-islands-of-the-united-states">Virgin islands of the United States</h3>
<p className="govuk-body">Part of the United States in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: the United States in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies may use a different country code for the Unites States and the Virgin Islands of the United States.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="w">W</h2>
<h3 id="wallis-and-futuna">Wallis and Futuna</h3>
<p className="govuk-body">Part of France in the FCDO country list.</p>
<p className="govuk-body">Sovereign state: France in the FCDO country list.</p>
<p className="govuk-body">Some delivery companies may use a different country code for France and Wallis and Futuna.</p>
<p className="govuk-body"><a className="back-to-top" href="#a-z-nav">Back to top</a></p>
<h2 className="a-z-header" id="x">X</h2>
Expand Down
Loading

1 comment on commit f702ca0

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

🚀 Deployed on https://6682a44e45573b09690fc515--hods.netlify.app

Please sign in to comment.