From 8353ebbcc354b3a4220c253dadf53f3cdadff315 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Feb 2024 09:20:04 +0000 Subject: [PATCH] About page (#11) --- public/translations/cy.json | 16 ++++++++ public/translations/en.json | 16 ++++++++ src/components/Header/Header.css | 7 ++++ src/components/Header/Header.stories.tsx | 18 +++++++++ src/components/Header/Header.tsx | 9 +++++ src/components/Icon/Icon.tsx | 4 +- src/components/Icon/svg/close.svg | 3 ++ src/components/Icon/svg/info.svg | 3 ++ src/components/Layout/Layout.css | 1 + src/pages/Entrypoint.tsx | 11 ++++-- src/pages/Start.tsx | 42 -------------------- src/pages/Start/About.tsx | 36 +++++++++++++++++ src/pages/Start/Layout.tsx | 50 ++++++++++++++++++++++++ src/pages/Start/Start.tsx | 22 +++++++++++ src/styles/tokens/button.css | 5 ++- src/styles/tokens/font.css | 6 ++- 16 files changed, 200 insertions(+), 49 deletions(-) create mode 100644 src/components/Header/Header.css create mode 100644 src/components/Header/Header.stories.tsx create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/Icon/svg/close.svg create mode 100644 src/components/Icon/svg/info.svg delete mode 100644 src/pages/Start.tsx create mode 100644 src/pages/Start/About.tsx create mode 100644 src/pages/Start/Layout.tsx create mode 100644 src/pages/Start/Start.tsx diff --git a/public/translations/cy.json b/public/translations/cy.json index 49954406..839a0347 100644 --- a/public/translations/cy.json +++ b/public/translations/cy.json @@ -1,5 +1,21 @@ { "start": { "title": "Dod o hyd i leoedd i ailgylchu." + }, + "about": { + "title": "About this service", + "intro": "Powered by RecycleNow.com, this tool can be used to search and find recycling locations throughout the United Kingdom.", + "becomeAPartner": { + "title": "Add this tool to your website", + "description": "It’s been created as an embeddable widget that can be added to any website to help visitors discover more recycling options. For example, a beverage manufacturer could use the tool to show places to recycle drinks cans.", + "cta": "Become a partner", + "url": "https://wrap.org.uk/taking-action/citizen-behaviour-change/recycle-now/recycling-locator-tool" + }, + "feedback": { + "title": "Improving this service", + "description": "We’re always looking to improve this tool and would be interested to hear about your experience whilst using it, good or bad.", + "cta": "Feedback on this tool", + "url": "https://wrapcymru.org.uk/contact-wrap-cymru" + } } } diff --git a/public/translations/en.json b/public/translations/en.json index f1c48427..df17a850 100644 --- a/public/translations/en.json +++ b/public/translations/en.json @@ -1,5 +1,21 @@ { "start": { "title": "Find places to recycle." + }, + "about": { + "title": "About this service", + "intro": "Powered by RecycleNow.com, this tool can be used to search and find recycling locations throughout the United Kingdom.", + "becomeAPartner": { + "title": "Add this tool to your website", + "description": "It’s been created as an embeddable widget that can be added to any website to help visitors discover more recycling options. For example, a beverage manufacturer could use the tool to show places to recycle drinks cans.", + "cta": "Become a partner", + "url": "https://wrap.org.uk/taking-action/citizen-behaviour-change/recycle-now/recycling-locator-tool" + }, + "feedback": { + "title": "Improving this service", + "description": "We’re always looking to improve this tool and would be interested to hear about your experience whilst using it, good or bad.", + "cta": "Feedback on this tool", + "url": "https://wrap.org.uk/contact-us" + } } } diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 00000000..b651927a --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,7 @@ +locator-header { + align-items: center; + display: flex; + gap: var(--diamond-spacing); + justify-content: space-between; + padding: var(--diamond-spacing-sm) var(--diamond-spacing); +} diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx new file mode 100644 index 00000000..acb5ee53 --- /dev/null +++ b/src/components/Header/Header.stories.tsx @@ -0,0 +1,18 @@ +import { Meta, StoryObj } from '@storybook/preact'; + +import './Header'; + +const meta: Meta = { + title: 'Components/Header', +}; + +export default meta; + +export const Header: StoryObj = { + render: () => ( + +
Flex header
+
With gap
+ + ), +}; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 00000000..e2b8654a --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,9 @@ +import { CustomElement } from '../../types/custom-element'; + +declare module 'preact' { + namespace JSX { + interface IntrinsicElements { + 'locator-header': CustomElement; + } + } +} diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 4040146b..8b4adddd 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -7,7 +7,7 @@ import { CustomElement } from '../../types/custom-element'; import BlankSvg from './svg/blank.svg?react'; export interface IconAttributes { - readonly icon: 'pin'; + readonly icon: 'pin' | 'info' | 'close'; readonly color?: 'primary'; readonly label?: string; } @@ -22,7 +22,7 @@ export default function Icon({ icon, label }: IconAttributes) { ); } -register(Icon, 'locator-icon'); +register(Icon, 'locator-icon', ['icon']); declare module 'preact' { namespace JSX { diff --git a/src/components/Icon/svg/close.svg b/src/components/Icon/svg/close.svg new file mode 100644 index 00000000..f5899ac3 --- /dev/null +++ b/src/components/Icon/svg/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/svg/info.svg b/src/components/Icon/svg/info.svg new file mode 100644 index 00000000..1364af94 --- /dev/null +++ b/src/components/Icon/svg/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css index 910fd278..47dae3b1 100644 --- a/src/components/Layout/Layout.css +++ b/src/components/Layout/Layout.css @@ -26,6 +26,7 @@ locator-layout { &::part(main) { grid-area: main; + overflow: auto; } &::part(aside) { diff --git a/src/pages/Entrypoint.tsx b/src/pages/Entrypoint.tsx index f67bbc00..fd6f33fc 100644 --- a/src/pages/Entrypoint.tsx +++ b/src/pages/Entrypoint.tsx @@ -9,12 +9,17 @@ import { import { i18nInit } from '../lib/i18n'; import { Locale } from '../types/locale'; -import NotFound from './404.js'; -import StartPage from './Start.js'; +import NotFound from './404'; +import AboutPage from './Start/About'; +import StartLayout from './Start/Layout'; +import StartPage from './Start/Start'; const router = createMemoryRouter( createRoutesFromElements( - } errorElement={NotFound} />, + } errorElement={NotFound}> + } /> + } /> + , ), ); diff --git a/src/pages/Start.tsx b/src/pages/Start.tsx deleted file mode 100644 index 60d5e328..00000000 --- a/src/pages/Start.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import '../components/Layout/Layout'; -import '../components/Logo/Logo'; -import '../components/Tip/Tip'; -import '../components/LocationInput/LocationInput'; -import '../components/Wrap/Wrap'; - -export default function StartPage() { - const { t } = useTranslation(); - - return ( - - - - -

{t('start.title')}

-
- - - - - - - -
- - - - -

Use this service to:

-
    -
  • see your nearest places to recycle
    • -
  • find out how to recycle a specific item
    • -
  • check what you can recycle at home
    • -
- - - - - ); -} diff --git a/src/pages/Start/About.tsx b/src/pages/Start/About.tsx new file mode 100644 index 00000000..957c3dc4 --- /dev/null +++ b/src/pages/Start/About.tsx @@ -0,0 +1,36 @@ +import { useTranslation } from 'react-i18next'; + +export default function AboutPage() { + const { t } = useTranslation(); + + return ( + <> +

{t('about.title')}

+

{t('about.intro')}

+

+ {t('about.becomeAPartner.title')} +

+

{t('about.becomeAPartner.description')}

+ + + {t('about.becomeAPartner.cta')} + + +

{t('about.feedback.title')}

+

{t('about.feedback.description')}

+ + + {t('about.feedback.cta')} + + + + ); +} diff --git a/src/pages/Start/Layout.tsx b/src/pages/Start/Layout.tsx new file mode 100644 index 00000000..fde3b9d3 --- /dev/null +++ b/src/pages/Start/Layout.tsx @@ -0,0 +1,50 @@ +import { Outlet, Link, useHref } from 'react-router-dom'; + +import '../../components/Layout/Layout'; +import '../../components/Logo/Logo'; +import '../../components/Icon/Icon'; +import '../../components/Header/Header'; +import '../../components/Tip/Tip'; +import '../../components/Wrap/Wrap'; + +function InfoButton({ open }: { readonly open: boolean }) { + const to = open ? '/' : '/about'; + const icon = open ? 'close' : 'info'; + + return ( + + + + + + ); +} + +export default function StartLayout() { + const path = useHref(); + + return ( + + + + + + + + + + + + +

Use this service to:

+
    +
  • see your nearest places to recycle
    • +
  • find out how to recycle a specific item
    • +
  • check what you can recycle at home
    • +
+ + + + + ); +} diff --git a/src/pages/Start/Start.tsx b/src/pages/Start/Start.tsx new file mode 100644 index 00000000..cd10d9a5 --- /dev/null +++ b/src/pages/Start/Start.tsx @@ -0,0 +1,22 @@ +import { useTranslation } from 'react-i18next'; + +import '../../components/LocationInput/LocationInput'; + +export default function StartPage() { + const { t } = useTranslation(); + + return ( + <> +

{t('start.title')}

+
+ + + + + + + +
+ + ); +} diff --git a/src/styles/tokens/button.css b/src/styles/tokens/button.css index 42661052..326da521 100644 --- a/src/styles/tokens/button.css +++ b/src/styles/tokens/button.css @@ -1,6 +1,6 @@ :host { --diamond-button-background: var(--color-white); - --diamond-button-background-hover: var(--diamond-button-background); + --diamond-button-background-hover: var(--theme-background-accent); --diamond-button-background-disabled: var(--diamond-button-background); --diamond-button-border-color: var(--color-green); --diamond-button-border-color-hover: var(--color-green-dark); @@ -8,6 +8,7 @@ --diamond-button-color: var(--diamond-button-border-color); --diamond-button-color-hover: var(--diamond-button-border-color-hover); --diamond-button-color-disabled: var(--diamond-button-border-color-disabled); + --diamond-button-padding-block: 0.75rem; --diamond-button-primary-background: var(--color-green); --diamond-button-primary-background-hover: var(--color-green-dark); @@ -15,4 +16,6 @@ --diamond-button-primary-color: var(--color-white); --diamond-button-primary-color-hover: var(--diamond-button-primary-color); --diamond-button-primary-color-disabled: var(--diamond-button-primary-color); + + --diamond-button-text-background-hover: var(--theme-background-accent); } diff --git a/src/styles/tokens/font.css b/src/styles/tokens/font.css index 056b875e..42ef995b 100644 --- a/src/styles/tokens/font.css +++ b/src/styles/tokens/font.css @@ -5,7 +5,11 @@ var(--font-family-default) ); - @media (width >= 768px) { + --diamond-font-size-h3: 1.5rem; +} + +@media (width >= 768px) { + :host { --diamond-font-size-h2: 1.75rem; } }