Merge pull request #11631 from bbc/WSTEAM1-1020-adds-default-styling-…

…text-link-uploader WSTEAM1-1020 - Adds default styling for P and A elements on the Uploader form
bbc · May 20, 2024 · edaf647 · edaf647
2 parents 26f5b4e + 5c3f14b
commit edaf647
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/app/components/InlineLink/index.styles.ts b/src/app/components/InlineLink/index.styles.ts
@@ -2,21 +2,20 @@ import { css, Theme } from '@emotion/react';
 
 import pixelsToRem from '../../utilities/pixelsToRem';
 
-const styles = {
-  self: ({ palette }: Theme) =>
-    css({
-      color: palette.EBON,
-      borderBottom: `${pixelsToRem(1)}rem solid ${palette.POSTBOX}`,
-      textDecoration: 'none',
-      '&:visited': {
-        color: palette.METAL,
-        borderBottom: `${pixelsToRem(1)}rem solid ${palette.METAL}`,
-      },
-      '&:focus, &:hover': {
-        borderBottom: `${pixelsToRem(2)}rem solid ${palette.POSTBOX}`,
-        color: palette.POSTBOX,
-      },
-    }),
-};
+export const getInlineLinkStyles = (palette: Theme['palette']) => ({
+  color: palette.EBON,
+  borderBottom: `${pixelsToRem(1)}rem solid ${palette.POSTBOX}`,
+  textDecoration: 'none',
+  '&:visited': {
+    color: palette.METAL,
+    borderBottom: `${pixelsToRem(1)}rem solid ${palette.METAL}`,
+  },
+  '&:focus, &:hover': {
+    borderBottom: `${pixelsToRem(2)}rem solid ${palette.POSTBOX}`,
+    color: palette.POSTBOX,
+  },
+});
 
-export default styles;
+export const styles = {
+  self: ({ palette }: Theme) => css(getInlineLinkStyles(palette)),
+};
diff --git a/src/app/components/InlineLink/index.tsx b/src/app/components/InlineLink/index.tsx
@@ -6,7 +6,7 @@ import Url from 'url-parse';
 
 import { FontVariant, GelFontSize } from '../../models/types/theming';
 import { ServiceContext } from '../../contexts/ServiceContext';
-import styles from './index.styles';
+import { styles } from './index.styles';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   className?: string;

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts
@@ -1,5 +1,6 @@
 import pixelsToRem from '#app/utilities/pixelsToRem';
 import { Theme, css } from '@emotion/react';
+import { getInlineLinkStyles } from '#app/components/InlineLink/index.styles';
 
 export default {
   submissionError: () =>
@@ -28,12 +29,17 @@ export default {
         paddingBottom: `${spacings.FULL}rem`,
         marginBottom: `${spacings.TRIPLE}rem`,
       },
+      p: { color: palette.BLACK },
+      a: getInlineLinkStyles(palette),
     }),
-  privacyNotice: ({ fontVariants, fontSizes }: Theme) =>
+  privacyNotice: ({ palette, fontVariants, fontSizes }: Theme) =>
     css({
       ...fontVariants.sansRegular,
       ...fontSizes.brevier,
+      p: { color: palette.BLACK },
+      a: getInlineLinkStyles(palette),
     }),
+
   privacyHeading: ({ fontVariants, fontSizes }: Theme) =>
     css({
       ...fontVariants.sansBold,