add abandon button on privacy screen (#176)

Author: faiza-jahanzeb

frontend/app/.server/locales/protected-en.json

@@ -26,9 +26,11 @@
   },
   "person-case": {
     "page-title": "In person case",
+    "abandon-button": "Abandon",
     "add-button": "Add first name",
     "previous": "Previous",
     "next": "Next",
+    "refer-button": "Refer",
     "first-name": "Enter first name",
     "last-name": "Enter last name"
   },

frontend/app/.server/locales/protected-fr.json

@@ -26,9 +26,11 @@
   },
   "person-case": {
     "page-title": "Cas en personne",
+    "abandon-button": "Abandonner",
     "add-button": "Ajouter un prénom",
     "previous": "Précédent",
     "next": "Suivant",
+    "refer-button": "Parrainer",
     "first-name": "Entrez le prénom",
     "last-name": "Entrez le nom de famille"
   },

frontend/app/components/button-icons.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cn } from '~/utils/tailwind-utils';
 
 export function ButtonStartIcon({ className, ...restProps }: FontAwesomeIconProps) {
-  return <FontAwesomeIcon fixedWidth className={cn('me-2', className)} {...restProps} />;
+  return <FontAwesomeIcon fixedWidth className={cn('me-1', className)} {...restProps} />;
 }
 
 export function ButtonEndIcon({ className, ...restProps }: FontAwesomeIconProps) {
-  return <FontAwesomeIcon fixedWidth className={cn('ms-2', className)} {...restProps} />;
+  return <FontAwesomeIcon fixedWidth className={cn('ms-1', className)} {...restProps} />;
 }

frontend/app/components/button-link.tsx

@@ -23,6 +23,7 @@ const variants = {
   green: 'border-green-700 bg-green-700 text-white hover:bg-green-800 focus:bg-green-800',
   primary: 'border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800',
   red: 'border-red-700 bg-red-700 text-white hover:bg-red-800 focus:bg-red-800',
+  link: 'bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:bg-gray-100 focus:text-blue-700 underline border-0',
 } as const;
 
 type ButtonLinkStyleProps = {

frontend/app/components/button.tsx

@@ -22,6 +22,7 @@ const variants = {
   green: 'border-green-700 bg-green-700 text-white hover:bg-green-800 focus:bg-green-800',
   primary: 'border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800',
   red: 'border-red-700 bg-red-700 text-white hover:bg-red-800 focus:bg-red-800',
+  link: 'bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:bg-gray-100 focus:text-blue-700 underline border-0',
 } as const;
 
 const baseClassName = 'inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4';

frontend/app/routes/protected/person-case/privacy-statement.tsx

@@ -1,6 +1,7 @@
 import { data, useFetcher } from 'react-router';
 import type { RouteHandle } from 'react-router';
 
+import { faXmark, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
@@ -70,6 +71,14 @@ export default function PrivacyStatement({ loaderData, actionData, params }: Rou
 
   return (
     <>
+      <div className="flex justify-end">
+        <Button id="abandon-button" endIcon={faXmark} variant="link">
+          {t('protected:person-case.abandon-button')}
+        </Button>
+        <Button id="refer-button" endIcon={faExclamationCircle} variant="link">
+          {t('protected:person-case.refer-button')}
+        </Button>
+      </div>
       <Progress className="mt-8" label="" value={20} />
       <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:privacy-statement.page-title')}</PageTitle>
 

frontend/tests/components/__snapshots__/button-icon.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`ButtonEndIcon > should pass additional props to FontAwesomeIcon > expected html 1`] = `
 <div
   aria-label="end-icon"
-  class="ms-2"
+  class="ms-1"
 >
   "spinner"
 </div>
 `;
 
 exports[`ButtonEndIcon > should render FontAwesomeIcon with the correct classes > expected html 1`] = `
 <div
-  class="ms-2 custom-class"
+  class="ms-1 custom-class"
 >
   "spinner"
 </div>
@@ -20,15 +20,15 @@ exports[`ButtonEndIcon > should render FontAwesomeIcon with the correct classes
 exports[`ButtonStartIcon > should pass additional props to FontAwesomeIcon > expected html 1`] = `
 <div
   aria-label="start-icon"
-  class="me-2"
+  class="me-1"
 >
   "spinner"
 </div>
 `;
 
 exports[`ButtonStartIcon > should render FontAwesomeIcon with the correct classes > expected html 1`] = `
 <div
-  class="me-2 custom-class"
+  class="me-1 custom-class"
 >
   "spinner"
 </div>

frontend/tests/components/__snapshots__/loading-button.test.tsx.snap

@@ -2,8 +2,8 @@
 
 exports[`LoadingButton > renders the children correctly > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300"><span>Test Button</span></button>"`;
 
-exports[`LoadingButton > renders the custom loading icon > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><span>Test Button</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-spin fa-fw ms-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg></button>"`;
+exports[`LoadingButton > renders the custom loading icon > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><span>Test Button</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-spin fa-fw ms-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg></button>"`;
 
-exports[`LoadingButton > renders the loading spinner at the end position > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><span>Test Button</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner fa-spin fa-fw ms-2 animate-spin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"></path></svg></button>"`;
+exports[`LoadingButton > renders the loading spinner at the end position > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><span>Test Button</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner fa-spin fa-fw ms-1 animate-spin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"></path></svg></button>"`;
 
-exports[`LoadingButton > renders the loading spinner at the start position > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner fa-spin fa-fw me-2 animate-spin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"></path></svg><span>Test Button</span></button>"`;
+exports[`LoadingButton > renders the loading spinner at the start position > expected html 1`] = `"<button class="inline-flex items-center justify-center rounded border align-middle font-lato outline-offset-4 px-5 py-2.5 text-sm border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 pointer-events-none cursor-not-allowed opacity-70"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner fa-spin fa-fw me-1 animate-spin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"></path></svg><span>Test Button</span></button>"`;