Merge pull request #11613 from bbc/WSTEAM1-1011-UGC-submit-button

WSTEAM1-1011 UGC Form Submit Button
bbc · May 14, 2024 · cc4dbcd · cc4dbcd
2 parents b1fd4db + 1ce139c
commit cc4dbcd
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 13 deletions.
diff --git a/docs/User-Experience/colours.tsx b/docs/User-Experience/colours.tsx
@@ -52,7 +52,7 @@ export const LEGACY = [
 export const CROSS_PLATFORM = [
   { colorName: 'SERVICE_NEUTRAL_CORE', colorCode: '#0071F1' },
   { colorName: 'SERVICE_NEUTRAL_LIGHT', colorCode: '#3092FF' },
-  { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0064E6' },
+  { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0051AD' },
   { colorName: 'LIVE_CORE', colorCode: '#009E9E' },
   { colorName: 'LIVE_LIGHT', colorCode: '#00CCC7' },
   { colorName: 'LIVE_DARK', colorCode: '#006666' },

diff --git a/src/app/components/ThemeProvider/focusIndicator.ts b/src/app/components/ThemeProvider/focusIndicator.ts
@@ -6,7 +6,8 @@ export const focusIndicatorThickness = `${pixelsToRem(3)}rem`; // 3px
 const focusIndicator = ({ palette }: Theme) => css`
   // Adds focus indicator styling to all a and button elements by default.
   a:focus-visible,
-  button:focus-visible {
+  button:focus-visible,
+  button[type='submit']:focus-visible {
     outline: ${focusIndicatorThickness} solid ${palette.BLACK};
     box-shadow: 0 0 0 ${focusIndicatorThickness} ${palette.WHITE};
     outline-offset: ${focusIndicatorThickness};

diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts
@@ -40,6 +40,8 @@ export const PHILIPPINE_GREY = '#8A8C8E';
 export const POSTBOX = '#B80000';
 export const POSTBOX_30 = '#EAB3B3';
 export const RHINO = '#5A5A5A';
+export const SERVICE_NEUTRAL_CORE = '#0071F1';
+export const SERVICE_NEUTRAL_DARK = '#0051AD';
 export const SHADOW = '#3F3F42';
 export const SPORT_MIST = '#F7F7F5';
 export const SPORT_SILVER = '#DBDBDB';

diff --git a/src/app/components/ThemeProvider/withThemeProvider.tsx b/src/app/components/ThemeProvider/withThemeProvider.tsx
@@ -50,6 +50,8 @@ import {
   POSTBOX,
   POSTBOX_30,
   RHINO,
+  SERVICE_NEUTRAL_CORE,
+  SERVICE_NEUTRAL_DARK,
   SHADOW,
   SPORT_MIST,
   SPORT_SILVER,
@@ -254,6 +256,8 @@ const withThemeProvider = ({
       POSTBOX,
       POSTBOX_30,
       RHINO,
+      SERVICE_NEUTRAL_CORE,
+      SERVICE_NEUTRAL_DARK,
       SHADOW,
       SPORT_MIST,
       SPORT_SILVER,

diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts
@@ -49,6 +49,8 @@ interface Palette extends BrandPalette {
   POSTBOX: string;
   POSTBOX_30: string;
   RHINO: string;
+  SERVICE_NEUTRAL_CORE: string;
+  SERVICE_NEUTRAL_DARK: string;
   SHADOW: string;
   SPORT_MIST: string;
   SPORT_SILVER: string;

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx
@@ -34,8 +34,6 @@ export default function Form({
       <form onSubmit={handleSubmit} noValidate>
         {formFields}
 
-        {!submitted ? <Submit /> : <Loader />}
-
         <Heading // TODO: need translations for this, it doesn't come through from the api
           level={3}
           css={styles.privacyHeading}
@@ -48,6 +46,7 @@ export default function Form({
           dangerouslySetInnerHTML={{ __html: privacyNotice }}
           css={styles.privacyNotice}
         />
+        {!submitted ? <Submit /> : <Loader />}
       </form>
       {submissionError && (
         <div css={styles.submissionError}>

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts
@@ -13,11 +13,11 @@ export default {
   privacyNotice: ({ fontVariants, fontSizes }: Theme) =>
     css({
       ...fontVariants.sansRegular,
-      ...fontSizes.bodyCopy,
+      ...fontSizes.brevier,
     }),
   privacyHeading: ({ fontVariants, fontSizes }: Theme) =>
     css({
       ...fontVariants.sansBold,
-      ...fontSizes.bodyCopy,
+      ...fontSizes.brevier,
     }),
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap
@@ -1,8 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SubmitButton should render a submit button with an associated label 1`] = `
-<input
+.emotion-0 {
+  background-color: #0071F1;
+  color: #FFFFFF;
+  width: 100%;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  border: none;
+  padding: 0.75rem 0;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+@media (min-width: 20rem) and (max-width: 37.4375rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 37.5rem) {
+  .emotion-0 {
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.emotion-0:hover,
+.emotion-0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  background-color: #0051AD;
+}
+
+@media (min-width: 15rem) {
+  .emotion-0 {
+    margin-bottom: 1.5rem;
+  }
+}
+
+<button
+  class="emotion-0"
   type="submit"
-  value="Submit"
-/>
+>
+  Submit
+</button>
 `;
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx
@@ -12,7 +12,7 @@ describe('SubmitButton', () => {
       return render(<SubmitButton />, { service: 'news' });
     });
 
-    const button = container.querySelector('input[type=submit][value=Submit]');
+    const button = container.querySelector('button[type=submit]');
 
     expect(button).toBeInTheDocument();
     expect(button).toMatchSnapshot();

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import styles from './styles';
 
 const Submit = () => {
   const translation = 'Submit';
-  return <input type="submit" value={translation} />;
+  return (
+    <button css={styles.submit} type="submit">
+      {translation}
+    </button>
+  );
 };
 
 export default Submit;
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts
@@ -0,0 +1,27 @@
+import { Theme, css } from '@emotion/react';
+
+export default {
+  submit: ({ palette, fontSizes, fontVariants, spacings, mq }: Theme) =>
+    css({
+      backgroundColor: palette.SERVICE_NEUTRAL_CORE,
+      color: palette.WHITE,
+      width: '100%',
+      ...fontVariants.sansBold,
+      ...fontSizes.bodyCopy,
+      border: 'none',
+      padding: `${spacings.FULL + spacings.HALF}rem 0`,
+      marginBottom: `${spacings.DOUBLE}rem`,
+      cursor: 'pointer',
+      '&:hover,&:focus': {
+        textDecoration: 'underline',
+        backgroundColor: palette.SERVICE_NEUTRAL_DARK,
+      },
+      [mq.GROUP_1_MIN_WIDTH]: {
+        marginBottom: `${spacings.TRIPLE}rem`,
+      },
+      [mq.GROUP_3_MIN_WIDTH]: {
+        marginTop: `${spacings.FULL}rem`,
+        marginBottom: `${spacings.TRIPLE}rem`,
+      },
+    }),
+};
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx
@@ -45,7 +45,7 @@ describe('UGC Page Layout', () => {
   });
 
   it('Renders a submit button within the form', () => {
-    const submitButton = container.querySelector('form input[type=submit]');
+    const submitButton = container.querySelector('button[type=submit]');
     expect(submitButton).toBeInTheDocument();
   });
 });