From 391fb6191705c1d124326b9ca91b223bb4ae9d09 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 09:19:05 +0000 Subject: [PATCH 01/54] added url anchor --- .../src/web/components/Callout/Callout.tsx | 10 +++++++--- .../src/web/components/Callout/CalloutComponents.tsx | 7 +++++-- dotcom-rendering/src/web/components/Callout/Form.tsx | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/Callout.tsx b/dotcom-rendering/src/web/components/Callout/Callout.tsx index f7823a95ab2..f058ec2ae9c 100644 --- a/dotcom-rendering/src/web/components/Callout/Callout.tsx +++ b/dotcom-rendering/src/web/components/Callout/Callout.tsx @@ -43,7 +43,7 @@ export interface CalloutBlockProps { heading: string; description: string; formFields: CampaignFieldType[]; - formId: number; + formId: string; submissionURL: string; isExpired: boolean; } @@ -78,7 +78,7 @@ export const CalloutBlock = ({ ]; return ( -
+
Tell us

{heading}

@@ -86,7 +86,11 @@ export const CalloutBlock = ({
- +
{ const [isCopied, setIsCopied] = useState(false); @@ -120,7 +123,7 @@ export const CalloutShare = ({ `; const shareText = ` I saw this callout on an article I was reading and thought you might like to share your story. - ${url} + ${url}#${urlAnchor} You can share your story by using the form on this article, or by contacting us on WhatsApp or Telegram. `; await navigator.share({ @@ -130,7 +133,7 @@ export const CalloutShare = ({ } if ('clipboard' in navigator) { - await navigator.clipboard.writeText(url); + await navigator.clipboard.writeText(`${url}#${urlAnchor}`); setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); } diff --git a/dotcom-rendering/src/web/components/Callout/Form.tsx b/dotcom-rendering/src/web/components/Callout/Form.tsx index 79377e41128..23011ab7a09 100644 --- a/dotcom-rendering/src/web/components/Callout/Form.tsx +++ b/dotcom-rendering/src/web/components/Callout/Form.tsx @@ -56,7 +56,7 @@ type FormProps = { formFields: CampaignFieldType[]; format: ArticleFormat; submissionURL: string; - formID: number; + formID: string; }; export const Form = ({ From 999d7fc387033752111445eaa0475126ce0a0822 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 09:24:35 +0000 Subject: [PATCH 02/54] add signal number --- .../src/web/components/Callout/MessageUs.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx index a1be52d1da9..a1d2afe6cab 100644 --- a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx +++ b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx @@ -46,9 +46,11 @@ const TELEGRAM_GUIDANCE_URL = 'https://www.theguardian.com/info/2022/mar/15/telegram-sharing-stories-with-the-guardian'; const SECURE_DROP_URL = 'https://www.theguardian.com/securedrop'; const CONTACT_NUMBER = '+447766780300'; +const SIGNAL_NUMBER = '+447766780300'; const OPEN_WHATSAPP_URL = `https://wa.me/${CONTACT_NUMBER}`; const OPEN_TELEGRAM_URL = `https://telegram.me/${CONTACT_NUMBER}`; +const OPEN_SIGNAL_URL = `https://signal.me/#p/${SIGNAL_NUMBER}`; export const MessageUs = ({ format }: CalloutContactProps) => { return ( @@ -79,6 +81,17 @@ export const MessageUs = ({ format }: CalloutContactProps) => { Message us on Whatsapp + + Message us on Telegram + + { ]} type="submit" priority="primary" - icon={} - href={OPEN_TELEGRAM_URL} + href={OPEN_SIGNAL_URL} target="_blank" > - Message us on Telegram + Message us on Signal
); From e9ef21a76e3887a8359a20dcdf0bdf35137be0b9 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 09:29:29 +0000 Subject: [PATCH 03/54] update description copy --- .../src/web/components/Callout/MessageUs.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx index a1d2afe6cab..49b94722ca4 100644 --- a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx +++ b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx @@ -56,18 +56,17 @@ export const MessageUs = ({ format }: CalloutContactProps) => { return (

- You can contact us on WhatsApp or Telegram at {CONTACT_NUMBER}. - For more information, please see our guidance on{' '} + You can contact us on WhatsApp or Signal at {SIGNAL_NUMBER} or + Telegram at {CONTACT_NUMBER}. For more information, please see + our guidance on{' '} contacting us via WhatsApp{' '} and our guidance on{' '} contacting us via Telegram.

-

For true anonymity please use our{' '} SecureDrop service instead.

- { > Message us on Whatsapp - { > Message us on Telegram - Date: Tue, 10 Jan 2023 09:30:24 +0000 Subject: [PATCH 04/54] update share link copy --- .../src/web/components/Callout/CalloutComponents.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx index c7b1ac8943d..cf7923fc381 100644 --- a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx +++ b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx @@ -122,10 +122,8 @@ export const CalloutShare = ({ Share your experience: ${'PLACEHOLDER TITLE'} `; const shareText = ` - I saw this callout on an article I was reading and thought you might like to share your story. - ${url}#${urlAnchor} - You can share your story by using the form on this article, or by contacting us on WhatsApp or Telegram. - `; + I saw this callout in an article: ${url}#${urlAnchor} + You can share your story by using the form on this article, or by contacting the Guardian on WhatsApp, Signal or Telegram.`; await navigator.share({ title: shareTitle, text: shareText, From 9f297b7e2ceee48e7bfef5271dda7548ac9e3547 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 10:10:11 +0000 Subject: [PATCH 05/54] added tooltip --- .../components/Callout/CalloutComponents.tsx | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx index cf7923fc381..e94675015e8 100644 --- a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx +++ b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx @@ -6,7 +6,11 @@ import { space, textSans, } from '@guardian/source-foundations'; -import { Button, SvgShareCallout } from '@guardian/source-react-components'; +import { + Button, + SvgShareCallout, + InlineSuccess, +} from '@guardian/source-react-components'; import { useState } from 'react'; import { decidePalette } from '../../lib/decidePalette'; @@ -94,9 +98,18 @@ const shareCalloutLinkStyles = (format: ArticleFormat) => margin: 0 ${space[1]}px; `; -const supportingText = css` - ${textSans.xsmall()}; - color: ${neutral[46]}; +const tooltipStyles = css` + /* Position the tooltip text */ + background-color: white; + border-radius: 4px; + box-shadow: 0 0 5px 5px ${neutral[60]}; + padding: 10px; + z-index: 1; + position: fixed; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -100px; `; export const CalloutShare = ({ @@ -121,13 +134,17 @@ export const CalloutShare = ({ const shareTitle = ` Share your experience: ${'PLACEHOLDER TITLE'} `; + const shareText = ` I saw this callout in an article: ${url}#${urlAnchor} You can share your story by using the form on this article, or by contacting the Guardian on WhatsApp, Signal or Telegram.`; + await navigator.share({ title: shareTitle, text: shareText, }); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 2000); } if ('clipboard' in navigator) { @@ -161,9 +178,10 @@ export const CalloutShare = ({ Please share this callout. {isCopied && ( - - {' '} - Link copied to clipboard + + + Link copied to clipboard + )}
From afd3cf01d649bd9685c7270664c5fcab3b3e2582 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 10:23:51 +0000 Subject: [PATCH 06/54] make tooltip div --- .../src/web/components/Callout/CalloutComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx index e94675015e8..2dc3ce94620 100644 --- a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx +++ b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx @@ -178,11 +178,11 @@ export const CalloutShare = ({ Please share this callout. {isCopied && ( - +
Link copied to clipboard - +
)}
From c3d5c52d3e5d714e8778f74a5ec1d061635921ef Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 11:51:48 +0000 Subject: [PATCH 07/54] fixed styling of pop up --- .../components/Callout/CalloutComponents.tsx | 36 +++++++++++-------- .../src/web/components/Callout/MessageUs.tsx | 6 +--- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx index 2dc3ce94620..14d454ae989 100644 --- a/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx +++ b/dotcom-rendering/src/web/components/Callout/CalloutComponents.tsx @@ -4,12 +4,13 @@ import { neutral, palette, space, + success, textSans, } from '@guardian/source-foundations'; import { Button, SvgShareCallout, - InlineSuccess, + SvgTickRound, } from '@guardian/source-react-components'; import { useState } from 'react'; import { decidePalette } from '../../lib/decidePalette'; @@ -99,17 +100,25 @@ const shareCalloutLinkStyles = (format: ArticleFormat) => `; const tooltipStyles = css` - /* Position the tooltip text */ - background-color: white; - border-radius: 4px; - box-shadow: 0 0 5px 5px ${neutral[60]}; - padding: 10px; - z-index: 1; + ${textSans.xsmall()}; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; + display: flex; + align-items: center; + background-color: ${neutral[100]}; + color: ${neutral[7]}; + font-weight: normal; + border-radius: 4px; + z-index: 1; + padding: 0 ${space[1]}px 0 0; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); + + > svg { + fill: ${success[400]}; + } `; export const CalloutShare = ({ @@ -131,9 +140,7 @@ export const CalloutShare = ({ navigator.userAgent, ) ) { - const shareTitle = ` - Share your experience: ${'PLACEHOLDER TITLE'} - `; + const shareTitle = `Share your experience: ${title}`; const shareText = ` I saw this callout in an article: ${url}#${urlAnchor} @@ -144,13 +151,13 @@ export const CalloutShare = ({ text: shareText, }); setIsCopied(true); - setTimeout(() => setIsCopied(false), 2000); + setTimeout(() => setIsCopied(false), 3000); } if ('clipboard' in navigator) { await navigator.clipboard.writeText(`${url}#${urlAnchor}`); setIsCopied(true); - setTimeout(() => setIsCopied(false), 2000); + // setTimeout(() => setIsCopied(false), 3000); } }; @@ -179,9 +186,8 @@ export const CalloutShare = ({ {isCopied && (
- - Link copied to clipboard - + + Link copied to clipboard
)} diff --git a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx index 49b94722ca4..8771404346b 100644 --- a/dotcom-rendering/src/web/components/Callout/MessageUs.tsx +++ b/dotcom-rendering/src/web/components/Callout/MessageUs.tsx @@ -2,11 +2,7 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import type { ArticleFormat } from '@guardian/libs'; import { neutral, space, textSans } from '@guardian/source-foundations'; -import { - LinkButton, - SvgGps, - SvgWhatsApp, -} from '@guardian/source-react-components'; +import { LinkButton, SvgWhatsApp } from '@guardian/source-react-components'; import { decidePalette } from '../../lib/decidePalette'; interface CalloutContactProps { From 92c882ffb630531703be02f89bab38bc1fc05d59 Mon Sep 17 00:00:00 2001 From: Thomas King <102960825+tkgnm@users.noreply.github.com> Date: Tue, 10 Jan 2023 12:35:09 +0000 Subject: [PATCH 08/54] removed unnecessary div in formfield, formatted submission success --- .../src/web/components/Callout/Form.tsx | 55 ++-- .../src/web/components/Callout/FormField.tsx | 302 ++++++++---------- 2 files changed, 178 insertions(+), 179 deletions(-) diff --git a/dotcom-rendering/src/web/components/Callout/Form.tsx b/dotcom-rendering/src/web/components/Callout/Form.tsx index 23011ab7a09..4e78cca27c2 100644 --- a/dotcom-rendering/src/web/components/Callout/Form.tsx +++ b/dotcom-rendering/src/web/components/Callout/Form.tsx @@ -1,27 +1,26 @@ import { css } from '@emotion/react'; import { + brand, neutral, palette, space, textSans, } from '@guardian/source-foundations'; -import { Button, InlineSuccess } from '@guardian/source-react-components'; +import { Button, SvgTickRound } from '@guardian/source-react-components'; import { ErrorSummary } from '@guardian/source-react-components-development-kitchen'; import { useState } from 'react'; import type { CampaignFieldType } from '../../../types/content'; import { decidePalette } from '../../lib/decidePalette'; import { FormField } from './FormField'; -const submitButtonStyles = (format: ArticleFormat) => css` - margin: 20px 0px; - width: 100%; - display: block; - background-color: ${decidePalette(format).text.richLink}; - :hover { - background-color: ${neutral[0]}; - } +const textStyles = css` + ${textSans.xsmall()}; `; +const tickBoxStyles = css` + fill: ${brand[500]}; + width: 48px; +`; const errorTextStyles = css` color: ${palette.error[400]}; ${textSans.medium({ fontWeight: 'bold' })}; @@ -37,6 +36,16 @@ const formStyles = css` const formFieldWrapperStyles = css` display: flex; flex-direction: column; + margin-bottom: ${space[4]}px; +`; +const submitButtonStyles = (format: ArticleFormat) => css` + margin: 20px 0px; + width: 100%; + display: block; + background-color: ${decidePalette(format).text.richLink}; + :hover { + background-color: ${neutral[0]}; + } `; const footerPaddingStyles = css` @@ -46,10 +55,6 @@ const footerPaddingStyles = css` padding-bottom: ${space[4]}px; `; -const textStyles = css` - ${textSans.medium()}; -`; - type FormDataType = { [key in string]: any }; type FormProps = { @@ -71,7 +76,7 @@ export const Form = ({ }>({}); const [networkError, setNetworkError] = useState(''); - const [submissionSuccess, setSubmissionSuccess] = useState(false); + const [submissionSuccess, setSubmissionSuccess] = useState(true); const [twitterHandle, setTwitterHandle] = useState(''); const setFieldInFormData = ( @@ -175,11 +180,23 @@ export const Form = ({ if (submissionSuccess) { return ( - - Thank you, your story has been submitted successfully. One of - our journalists will be in touch if we wish to take your - submission further. - + <> +
+ +
+
+ Thank you! +
+
+ Your story has been submitted successfully. One of our + journalists will be in touch if we wish to take your + submission further. +
+ ); } diff --git a/dotcom-rendering/src/web/components/Callout/FormField.tsx b/dotcom-rendering/src/web/components/Callout/FormField.tsx index 474e2b8896a..64d494337a1 100644 --- a/dotcom-rendering/src/web/components/Callout/FormField.tsx +++ b/dotcom-rendering/src/web/components/Callout/FormField.tsx @@ -27,10 +27,6 @@ type FormFieldProp = { ) => void; }; -const formFieldStyles = css` - margin-top: ${space[2]}px; -`; - export const FormField = ({ format, formField, @@ -48,187 +44,173 @@ export const FormField = ({ switch (formField.type) { case 'text': { return ( -
- - setFieldInFormData(formField.id, e.target.value) - } - /> -
+ + setFieldInFormData(formField.id, e.target.value) + } + /> ); } case 'textarea': return ( -
-