Skip to content

Commit

Permalink
Updates based on crit
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomyems
tomyems committed May 30, 2024
1 parent 71a004d commit 01dad91
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 81 deletions.
14 changes: 7 additions & 7 deletions apps/docs/src/common/pages/patterns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ export const menu = (
<span className="govuk-caption-m" style={{marginBottom: "1em"}}>Ask users for</span>
<NavigationMenu items={[
{
href: '/patterns/address-not-uk',
text: 'Address not in the UK'
href: '/patterns/address-outside-uk',
text: 'Address outside the UK'
},
{
href: '/patterns/address-not-uk/valuable-delivery',
text: '- Valuable delivery'
href: '/patterns/address-outside-uk/delivery-address',
text: '- Delivery address'
},
{
href: '/patterns/address-not-uk/familiar-address',
href: '/patterns/address-outside-uk/familiar-address',
text: '- Familiar address'
},
{
href: '/patterns/address-not-uk/record-given-address',
href: '/patterns/address-outside-uk/record-given-address',
text: '- Given address'
},
{
href: '/patterns/address-not-uk/country-list',
href: '/patterns/address-outside-uk/country-list',
text: '- Country list'
},
{
Expand Down
22 changes: 12 additions & 10 deletions .../common/pages/patterns/address-not-uk.tsx → ...mon/pages/patterns/address-outside-uk.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { PageProps } from '@not-govuk/app-composer';
import { A, DateInput, Details, Radios, TextInput, Select } from '@not-govuk/components';
import { menu } from '../patterns';

export const title = 'Address not in the UK';
const description = 'How to ask users for their address not in the UK';
export const title = 'Address outside the UK';
const description = 'How to ask users for their address outside the UK';
const section = 'Patterns';
const subsection = 'Ask users for';

Expand All @@ -28,11 +28,11 @@ const Page: FC<PageProps> = ({ location }) => (
<span className="caption">{subsection}</span>
{title}
</h1>
<p className="govuk-body">Ask for address in different ways depending on what the user needs to do. They might need to enter:</p>
<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>
<ul className="govuk-list govuk-list--bullet">
<li><A href="/patterns/address-not-uk/valuable-delivery">an address for something valuable to be delievered to</A></li>
<li><A href="/patterns/address-not-uk/familiar-address">a familiar address</A></li>
<li><A href="/patterns/address-not-uk/record-given-address">an address they have been given</A></li>
<li><A href="/patterns/address-not-uk/valuable-delivery">for something valuable to be delivered to</A></li>
<li><A href="/patterns/address-not-uk/familiar-address">where they live, have lived, or are otherwise familiar with</A></li>
<li><A href="/patterns/address-not-uk/record-given-address">they have been given</A></li>
</ul>

<p className="govuk-body">The <A href="/patterns/address-not-uk/country-index">country index</A> has specific information about addresses in certain countries.</p>
Expand All @@ -46,16 +46,18 @@ const Page: FC<PageProps> = ({ location }) => (
<ul className="govuk-list govuk-list--bullet">
<li>how the address is used</li>
<li>how reliable the address needs to be</li>
<li>are there internal processes that can correct or validate addresses</li>
<li>if there are internal processes that can correct or validate addresses</li>
</ul>

<h2 className="govuk-heading-l">Accessibility</h2>
<p className="govuk-body">Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?</p>
<p className="govuk-body">Consider that users need more than one method for entering their address.</p>

<h2 className="govuk-heading-l">Help us improve these patterns</h2>
<p className="govuk-body">Asking for addresses not in the UK needs improving. We need evidence about:</p>
<p className="govuk-body">Asking for addresses outside the UK needs improving. We need evidence about:</p>
<ul className="govuk-list govuk-list--bullet">
<li></li>
<li>standard address formats in different countries</li>
<li>the barriers users with low English confidence face</li>
<li>if images or visual information helps users to enter their address</li>
</ul>

<p className="govuk-body">To contribute, add your thoughts and research findings to our <A href="https://github.com/UKHomeOffice/design-system/discussions/580">GitHub discussion</A>, or follow our <A href="/contribute">contribute guidance</A>.</p>
Expand Down
0 .../patterns/address-not-uk/country-list.tsx → ...terns/address-outside-uk/country-list.tsx
View file
File renamed without changes.
90 changes: 45 additions & 45 deletions ...erns/address-not-uk/valuable-delivery.tsx → ...s/address-outside-uk/delivery-address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { A, DateInput, Details, Radios, TextInput, Select, Fieldset } from '@not
import { menu } from '../../patterns';

export const title = 'Valuable delivery address';
const description = 'How to ask users for a valuable delivery address not in the UK';
const description = 'How to ask users for a valuable delivery address outside the UK';
const section = 'Patterns';
const subsection = 'Ask users for';

Expand All @@ -29,10 +29,10 @@ const Page: FC<PageProps> = ({ location }) => (
{title}
</h1>

<p className="govuk-body">Ask users to provide reliable addresses for a valuable delivery.</p>
<p className="govuk-body">Ask users to provide reliable addresses to delivery something valuable.</p>

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p className="govuk-body">This pattern is for services where the user has a barrier to completing the service if the address is incorrect.</p>
<p className="govuk-body">This pattern is for services where the user has a barrier to completing the service if the address is incorrect. For example, not being able to receive an important document.</p>
<p className="govuk-body">Consider if a process to correct the address after the user has entered it would resolve this barrier.</p>

<h2 className="govuk-heading-l">How it works</h2>
Expand Down Expand Up @@ -101,13 +101,13 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><A href="#manual-entry">I cannot find the country in the list</A></p>
</div>

<h3 className="govuk-heading-m" id="postcode">Postcode</h3>
<h3 className="govuk-heading-m" id="postal-code">Postal code</h3>

<p className="govuk-body">Only ask for a postcode if you know the country uses them.</p>
<p className="govuk-body">Only ask for a postal code if you know the country uses them.</p>

<p className="govuk-body">Include an option for users to enter their address manually.</p>

<p className="govuk-body">If possible, use the country specific word for the postcode, such as 'postal code', 'zipcode'. If not, use 'postal code'</p>
<p className="govuk-body">If possible, use the country specific word for the postal code, such as 'postcode', 'zipcode', or 'Eircode'. If not, use 'postal code'. Check the <A href="/patterns/address-outside-uk/country-list">country list</A>.</p>

<div className="app-example">
<TextInput
Expand All @@ -117,36 +117,36 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body"><A href="#manual-entry">Enter address manually</A></p>
</div>

<h4 className="govuk-heading-s">Postcode to town</h4>
<h4 className="govuk-heading-s">Postal code to town</h4>

<p className="govuk-body">Some delivery companies have a defined list of towns or city for each postcode or country.</p>
<p className="govuk-body">Some delivery companies have a defined list of towns or city for each postal code or country.</p>

<p className="govuk-body">Only use if the spelling of the town or city impacts the user.</p>

<p className="govuk-body">Allow users to:</p>
<ul className="govuk-list govuk-list--bullet">
<li>change the postcode</li>
<li>change the postal code</li>
<li>enter the full address manually.</li>
</ul>

<p className="govuk-body">For address lines 1 and 2 allow:</p>
<ul className="govuk-list govuk-list--bullet">
<li>free text inputs</li>
<li>accented latin-based characters</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>a blank address line 2</li>
</ul>

<p className="govuk-body">If there is only one town or city:</p>

<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">9007 <A href="#postcode" className="govuk-link">Change</A></p>
<h1 className="govuk-heading-l">What is your address?</h1>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">9007 <A href="#postal-code" className="govuk-link">Change</A></p>
<Fieldset
legend={
<h2 className="govuk-heading-m">
Home address
Address
</h2>
}
>
Expand All @@ -162,7 +162,7 @@ const Page: FC<PageProps> = ({ location }) => (
<h2 className="govuk-heading-m">Town or city</h2>
<p className="govuk-body">Oslo</p>
<Details summary="This is not the correct town or city">
Check your postcode or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
Check your postal code or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
</Details>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Norway</p>
Expand All @@ -171,12 +171,12 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">If there are 2 to 10 towns or cities, use the Select component to allow the town or city to be selected. Show how many towns or cities are in the list.</p>

<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">9007 <A href="#postcode" className="govuk-link">Change</A></p>
<h1 className="govuk-heading-l">What is your address?</h1>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">9007 <A href="#postal-code" className="govuk-link">Change</A></p>
<Fieldset
legend={
<h2 className="govuk-heading-m">Home address</h2>
<h2 className="govuk-heading-m">Address</h2>
}
>
<TextInput
Expand Down Expand Up @@ -211,7 +211,7 @@ const Page: FC<PageProps> = ({ location }) => (
]}
/>
<Details summary="I cannot find my town or city">
Check your postcode or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
Check your postal code or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
</Details>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
Expand All @@ -221,12 +221,12 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">If there are more than 10 towns or cities, use autosuggest to allow the town or city to be selected:</p>

<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">9007 <A href="#postcode" className="govuk-link">Change</A></p>
<h1 className="govuk-heading-l">What is your address?</h1>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">9007 <A href="#postal-code" className="govuk-link">Change</A></p>
<Fieldset
legend={
<h2 className="govuk-heading-m">Home address</h2>
<h2 className="govuk-heading-m">Address</h2>
}
>
<TextInput
Expand All @@ -242,27 +242,27 @@ const Page: FC<PageProps> = ({ location }) => (
name="town-city"
/>
<Details summary="I cannot find my town or city">
Check your postcode or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
Check your postal code or <A href="#manual-entry" className="govuk-link">enter your address manually</A>.
</Details>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Norway</p>
</div>

<h4 className="govuk-heading-s">Postcode to address</h4>
<p className="govuk-body">Sometimes there is a defined list of addresses for each postcode in a country.</p>
<p className="govuk-body">Use when users are familiar with this use of postcodes.</p>
<h4 className="govuk-heading-s">Postal code to address</h4>
<p className="govuk-body">Sometimes there is a defined list of addresses for each postal code in a country.</p>
<p className="govuk-body">Use when users are familiar with this use of postal code.</p>
<p className="govuk-body">Allow users to:</p>
<ul className="govuk-list govuk-list--bullet">
<li>select the address from an autosuggest</li>
<li>change the postcode</li>
<li>change the postal code</li>
<li>enter their address manually</li>
</ul>

<div className="app-example">
<Select
label={
<h1 className="govuk-heading-l">Select your address</h1>
<h1 className="govuk-heading-l">What is your address?</h1>
}
name="address"
options={[
Expand All @@ -273,34 +273,34 @@ const Page: FC<PageProps> = ({ location }) => (
}
]}
/>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">A65 F4E2 <A href="#postcode" className="govuk-link">Change</A></p>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">A65 F4E2 <A href="#postal-code" className="govuk-link">Change</A></p>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Ireland</p>
<p className="govuk-body"><A href="#manual-entry" className="govuk-link">I cannot find my address in the list</A></p>
</div>

<p className="govuk-body">If there are no addresses for the postcode, allow the user to change the postcode or enter their address manually. For example:</p>
<p className="govuk-body">If there are no addresses for the postal code, allow the user to change the postal code or enter their address manually. For example:</p>

<div className="app-example">
<h1 className="govuk-heading-l">No addresses found</h1>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">A65 F4E2 <A href="#postcode" className="govuk-link">Change</A></p>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">A65 F4E2 <A href="#postal-code" className="govuk-link">Change</A></p>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Ireland</p>
<p className="govuk-body"><A href="#manual-entry" className="govuk-link">Enter address manually</A></p>
</div>

<h3 className="govuk-heading-m">No postcode</h3>
<h3 className="govuk-heading-m">No postal code</h3>

<p className="govuk-body">If there are no postcodes, consider using a complete list of towns or cities in that country. Without a list, small villages or regions may be entered.</p>
<p className="govuk-body">If there are no postal codes, consider using a complete list of towns or cities in that country. Without a list, small villages or regions may be entered.</p>

<p className="govuk-body">Balance the need of the user to recieve their delivery with the barrier of interaction.</p>
<p className="govuk-body">Balance the need of the user to receive their delivery with the barrier of interaction.</p>

<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>
<h2 className="govuk-heading-m">Postcode</h2>
<p className="govuk-body">9007 <A href="#postcode" className="govuk-link">Change</A></p>
<h1 className="govuk-heading-l">What is your address?</h1>
<h2 className="govuk-heading-m">Postal code</h2>
<p className="govuk-body">9007 <A href="#postal-code" className="govuk-link">Change</A></p>
<TextInput
label="Address line 1"
name="address-line-1"
Expand All @@ -318,12 +318,12 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">Norway</p>
</div>

<p className="govuk-body">In some places, like Bermuda, users expect a postcode field, even though some delivery companies do not accept them. In this case, ask for the postcode optionally, and do not share it with the delivery company.</p>
<p className="govuk-body">In some places, like Bermuda, users expect a postal code field, even though some delivery companies do not accept them. In this case, ask for the postal code optionally, and do not share it with the delivery company.</p>

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

<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>
<h1 className="govuk-heading-l">What is your address?</h1>

<TextInput
label={
Expand Down Expand Up @@ -351,7 +351,7 @@ const Page: FC<PageProps> = ({ location }) => (
<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>accented latin-based characters</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>
Expand All @@ -368,7 +368,7 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">Consider that users may need more than one method for capturing the information. What do they do if they hit a barrier?</p>

<h2 className="govuk-heading-l">Research</h2>
<p className="govuk-body">Valuable delivery address not in the UK is used by:</p>
<p className="govuk-body">Valuable delivery address outside the UK is used by:</p>
<ul className="govuk-list govuk-list--bullet">
<li>Apply for a passport</li>
</ul>
Expand Down
Loading

1 comment on commit 01dad91

@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://665896c1497f3a2c62aafb51--hods.netlify.app

Please sign in to comment.