Skip to content

Commit

Permalink
updates based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomyems
tomyems committed May 23, 2024
1 parent 974a87a commit 943d62e
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 96 deletions.
8 changes: 4 additions & 4 deletions apps/docs/src/common/pages/patterns/address-not-uk.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ const Page: FC<PageProps> = ({ location }) => (
<span className="caption">{subsection}</span>
{title}
</h1>
<p className="govuk-body">You can ask for addresses not in the UK in 3 ways. You can ask:</p>
<p className="govuk-body">Ask for address in different ways depending on what the user needs to do. They might need to enter:</p>
<ul className="govuk-list govuk-list--bullet">
<li><A href="/patterns/address-not-uk/valuable-delivery">for a valuable delivery - most assurance</A></li>
<li><A href="/patterns/address-not-uk/familiar">for familiar address</A></li>
<li><A href="/patterns/address-not-uk/record-given-address">to record a given address - least assurance</A></li>
<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>
</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 Down
58 changes: 34 additions & 24 deletions apps/docs/src/common/pages/patterns/address-not-uk/familiar-address.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, DateInput, Details, Radios, TextInput, Select, Fieldset } from '@not-govuk/components';
import { menu } from '../../patterns';

export const title = 'Familiar address';
Expand Down Expand Up @@ -32,7 +32,11 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">Ask users to provide a familiar address not in the UK. This could be somewhere they live or have lived.</p>

<h2 className="govuk-heading-l">When to use this pattern</h2>
<p className="govuk-body">This pattern is for services where there is little impact on the user for the address being incorrect or not recognised by another system.</p>
<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>

<h2 className="govuk-heading-l">How it works</h2>

Expand Down Expand Up @@ -101,36 +105,42 @@ const Page: FC<PageProps> = ({ location }) => (

<h3 className="govuk-heading-m">Manual entry</h3>
<div className="app-example">
<h1 className="govuk-heading-l">Enter your home address</h1>

<TextInput
label={
<span className="govuk-label govuk-label--s">Address line 1</span>
}
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<TextInput
label="Town or city"
name="town-city"
/>
<TextInput
label="Postal code"
name="postal-code"
width={10}
/>
<Fieldset
legend={
<h1 className="govuk-heading-l">
Enter your home address
</h1>
}>
<TextInput
label={
<span className="govuk-label govuk-label--s">Address line 1</span>
}
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<TextInput
label="Town or city"
name="town-city"
/>
<TextInput
label="Postal code"
name="postal-code"
width={10}
/>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">St Pierre & 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>accented characters</li>
<li>accented latin-based characters</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>
Expand Down
53 changes: 29 additions & 24 deletions apps/docs/src/common/pages/patterns/address-not-uk/record-given-address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,30 +47,35 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">This structured format can be used to send letters with GOV.UK Notify. This is the maximum number of address lines GOV.UK Notify accepts. Ensure there is a process to handle with undeliverable letters.</p>

<div className="app-example">
<h1 className="govuk-heading-l">Their home address</h1>

<TextInput
label={
<span className="govuk-label govuk-label--s">Address line 1</span>
}
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<TextInput
label="Address line 3 (optional)"
name="address-line-3"
/>
<TextInput
label="Address line 4 (optional)"
name="address-line-4"
/>
<TextInput
label="Address line 5 (optional)"
name="address-line-5"
/>
<Fieldset
legend={
<h1 className="govuk-heading-l">
Their home address
</h1>
}>
<TextInput
label={
<span className="govuk-label govuk-label--s">Address line 1</span>
}
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<TextInput
label="Address line 3 (optional)"
name="address-line-3"
/>
<TextInput
label="Address line 4 (optional)"
name="address-line-4"
/>
<TextInput
label="Address line 5 (optional)"
name="address-line-5"
/>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">St Pierre & Miquelon <A href="#country">Change <span className="govuk-visually-hidden">country</span></A></p>
</div>
Expand Down
109 changes: 65 additions & 44 deletions apps/docs/src/common/pages/patterns/address-not-uk/valuable-delivery.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, DateInput, Details, Radios, TextInput, Select, Fieldset } from '@not-govuk/components';
import { menu } from '../../patterns';

export const title = 'Valuable delivery address';
Expand Down Expand Up @@ -143,14 +143,22 @@ const Page: FC<PageProps> = ({ location }) => (
<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>
<TextInput
label="Address line 1"
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<Fieldset
legend={
<h2 className="govuk-heading-m">
Home address
</h2>
}
>
<TextInput
label="Address line 1"
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
</Fieldset>
<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">
Expand All @@ -166,40 +174,46 @@ const Page: FC<PageProps> = ({ location }) => (
<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>
<TextInput
label="Address line 1"
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<Select
label="Town or city"
name="town-city"
options={[
{
value: "3 towns or cities found",
label: "3 towns or cities found",
selected: true
},
{
value: "Bodo",
label: "Bodo",
},
{
value: "Oslo",
label: "Oslo",
},
{
value: "Tromso",
label: "Tromso",
}
]}
/>
<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>.
</Details>
<Fieldset
legend={
<h2 className="govuk-heading-m">Home address</h2>
}
>
<TextInput
label="Address line 1"
name="address-line-1"
/>
<TextInput
label="Address line 2 (optional)"
name="address-line-2"
/>
<Select
label="Town or city"
name="town-city"
options={[
{
value: "3 towns or cities found",
label: "3 towns or cities found",
selected: true
},
{
value: "Bodo",
label: "Bodo",
},
{
value: "Oslo",
label: "Oslo",
},
{
value: "Tromso",
label: "Tromso",
}
]}
/>
<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>.
</Details>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Norway</p>
</div>
Expand All @@ -210,6 +224,11 @@ const Page: FC<PageProps> = ({ location }) => (
<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>
<Fieldset
legend={
<h2 className="govuk-heading-m">Home address</h2>
}
>
<TextInput
label="Address line 1"
name="address-line-1"
Expand All @@ -225,6 +244,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>.
</Details>
</Fieldset>
<h2 className="govuk-heading-m">Country</h2>
<p className="govuk-body">Norway</p>
</div>
Expand Down Expand Up @@ -331,8 +351,9 @@ 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 characters</li>
<li>accented latin-based characters</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>
Expand Down

0 comments on commit 943d62e

Please sign in to comment.