Wsteam1 cta refactor

src/app/components/CallToActionLink/README.md

@@ -0,0 +1,58 @@
+## Description
+
+A standalone link component. Used on banners, uploader CTAs and download pages.
+
+By default centre align and text-decoration: underline styles are applied. These can be overriden with bottom border styles.
+
+## Props
+
+| Name                | type                  | Description                                                                         |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------- |
+| href                | string                | Link to the CTA link destination                                                    |
+| className           | string                | used for passing styles                                                             |
+| children            | JSX Node              | Contains text for link and/or chevron                                               |
+| eventTrackingData   | EventTrackingMetadata | Contains click and view tracking data for Piano                                     |
+| size                | GelFontSize           | used for Text component                                                             |
+| fontVariant         | FontVariant           | used for Text component                                                             |
+| download            | boolean               | adds html download attribute                                                        |
+| ignoreLiteExtension | boolean               | removes .lite extension from href                                                   |
+| borderStyleOverride | string                | overrides text-decoration:underline behaviour and flex centre align styles          |
+| linkText            | boolean               | Text for link. Required for borderStyleOverride to prevent chevron being underlined |
+
+## Example ltr/rtl
+
+### With default centre align and underline styles
+
+```javascript
+<CallToActionLink href={link} eventTrackingData={eventTrackingData}>
+  {linkText}
+  {isRtl ? (
+    <LeftChevron css={styles.chevron} />
+  ) : (
+    <RightChevron css={styles.chevron} />
+  )}
+</CallToActionLink>
+```
+
+### With bottom border styles and with a chevron
+
+```javascript
+<CallToActionLink href={link} text={linkText} borderStyleOverride>
+  {isRtl ? (
+    <LeftChevron css={styles.chevron} />
+  ) : (
+    <RightChevron css={styles.chevron} />
+  )}
+</CallToActionLink>
+```
+
+### With bottom border styles and without a chevron
+
+```javascript
+<CallToActionLink
+  href={link}
+  text={linkText}
+  borderStyleOverride
+  css={[styles.bottomLinkSpacing, styles.link]}
+/>
+```

src/app/components/CallToActionLink/index.stories.tsx

@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from 'react';
-
+import readme from './README.md';
 import { CallToActionLinkProps } from './types';
 import CallToActionLink from '.';
+import Text from '../Text';
 
 const Component = ({
   href,
@@ -13,8 +14,41 @@ const Component = ({
 export default {
   title: 'Components/Call To Action Link',
   Component,
+  parameters: {
+    docs: { readme },
+  },
+  args: {
+    fontVariant: 'sansBold',
+  },
+  argTypes: {
+    fontVariant: {
+      control: { type: 'select' },
+      options: [
+        'sansRegular',
+        'sansRegularItalic',
+        'sansBold',
+        'sansBoldItalic',
+        'sansLight',
+        'serifRegular',
+        'serifMedium',
+        'serifMediumItalic',
+        'serifBold',
+        'serifLight',
+      ],
+    },
+  },
 };
 
 export const Example = () => {
   return <Component href="www.bbc.com/afrique">Call To Action</Component>;
 };
+
+export const CustomCTALink = ({ fontVariant }: { fontVariant: string }) => {
+  return (
+    <Component href="www.bbc.com/afrique">
+      <Text size="brevier" fontVariant={fontVariant}>
+        Custom Font Call To Action
+      </Text>
+    </Component>
+  );
+};

src/app/components/CallToActionLink/index.tsx

@@ -12,22 +12,29 @@ const CallToActionLink = ({
   children,
   eventTrackingData,
   download = false,
+  ignoreStyling = false,
+  ignoreLiteExtension = false,
 }: PropsWithChildren<CallToActionLinkProps>) => {
   const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
 
+  const styledContent = (
+    <div css={styles.linkTextWrapper}>
+      <Text size="pica" fontVariant="sansBold" css={styles.linkText}>
+        {children}
+      </Text>
+    </div>
+  );
+
   return (
     <a
       href={href}
       className={className}
       css={styles.linkBackground}
       onClick={clickTrackerHandler}
       download={download}
+      {...(ignoreLiteExtension && { 'data-ignore-lite': true })}
     >
-      <div css={styles.linkTextWrapper}>
-        <Text size="pica" fontVariant="sansBold" css={styles.linkText}>
-          {children}
-        </Text>
-      </div>
+      {ignoreStyling ? children : styledContent}
     </a>
   );
 };

src/app/components/CallToActionLink/types.ts

@@ -1,8 +1,15 @@
 import { EventTrackingMetadata } from '#app/models/types/eventTracking';
+import { GelFontSize, FontVariant } from '../../models/types/theming';
 
 export type CallToActionLinkProps = {
   href?: string;
   className?: string;
   eventTrackingData?: EventTrackingMetadata;
+  size?: GelFontSize;
+  fontVariant?: FontVariant;
   download?: boolean;
+  ignoreLiteExtension?: boolean;
+  borderStyleOverride?: boolean;
+  linkText?: string;
+  ignoreStyling?: boolean;
 };

src/app/components/LiteSiteCta/index.styles.tsx

@@ -39,18 +39,27 @@ export default {
         color: palette.POSTBOX,
       },
     }),
-  link: () =>
+  link: ({ palette }: Theme) =>
     css({
       display: 'inline-block',
       textDecoration: 'none',
-    }),
-  bottomLinkSpacing: ({ spacings }: Theme) =>
-    css({
-      padding: `${spacings.FULL}rem 0 ${spacings.DOUBLE}rem`,
-    }),
-  topLinkSpacing: ({ spacings }: Theme) =>
-    css({
-      padding: `${spacings.DOUBLE}rem 0 ${spacings.FULL}rem`,
+      span: {
+        borderBottom: `${pixelsToRem(1)}rem solid ${palette.GREY_10}`,
+        textDecoration: 'none',
+      },
+      '&:visited': {
+        span: {
+          color: palette.METAL,
+          borderBottom: `${pixelsToRem(1)}rem solid ${palette.METAL}`,
+        },
+      },
+      '&:hover, &:focus': {
+        textDecoration: 'none',
+        span: {
+          color: palette.POSTBOX,
+          borderBottom: `${pixelsToRem(2)}rem solid ${palette.POSTBOX}`,
+        },
+      },
     }),
   linkText: ({ palette }: Theme) =>
     css({
@@ -65,4 +74,12 @@ export default {
         color: palette.POSTBOX,
       },
     }),
+  bottomLinkSpacing: ({ spacings }: Theme) =>
+    css({
+      padding: `${spacings.FULL}rem 0 ${spacings.DOUBLE}rem`,
+    }),
+  topLinkSpacing: ({ spacings }: Theme) =>
+    css({
+      padding: `${spacings.DOUBLE}rem 0 ${spacings.FULL}rem`,
+    }),
 };

src/app/components/LiteSiteCta/index.tsx

@@ -8,46 +8,7 @@ import { ServiceContext } from '../../contexts/ServiceContext';
 import { RequestContext } from '../../contexts/RequestContext';
 import styles from './index.styles';
 import { defaultTranslations } from './liteSiteConfig';
-
-type CtaLinkProps = {
-  isRtl: boolean;
-  href: string;
-  text: string;
-  fontVariant?: string;
-  showChevron?: boolean;
-  ignoreLiteExtension?: boolean;
-  className?: string;
-};
-
-const CtaLink = ({
-  isRtl,
-  href,
-  text,
-  fontVariant = 'sansRegular',
-  showChevron = false,
-  ignoreLiteExtension = false,
-  className,
-}: CtaLinkProps) => {
-  const chevron = isRtl ? (
-    <LeftChevron css={styles.chevron} />
-  ) : (
-    <RightChevron css={styles.chevron} />
-  );
-
-  return (
-    <a
-      href={href}
-      className={className}
-      css={styles.link}
-      {...(ignoreLiteExtension && { 'data-ignore-lite': true })}
-    >
-      <Text size="brevier" fontVariant={fontVariant} css={styles.linkText}>
-        {text}
-      </Text>
-      {showChevron && chevron}
-    </a>
-  );
-};
+import CallToActionLink from '../CallToActionLink';
 
 const LiteSiteCta = () => {
   const { dir, translations } = useContext(ServiceContext);
@@ -78,23 +39,36 @@ const LiteSiteCta = () => {
           {onboardingMessage}
         </Paragraph>
         <Paragraph data-e2e="to-main-site">
-          <CtaLink
-            fontVariant="sansBold"
-            isRtl={isRtl}
+          <CallToActionLink
             href={canonicalLink}
-            text={toMainSite}
-            css={styles.topLinkSpacing}
+            css={[styles.topLinkSpacing, styles.link]}
+            ignoreStyling
             ignoreLiteExtension
-            showChevron
-          />
+          >
+            <Text size="brevier" fontVariant="sansBold" css={styles.linkText}>
+              {toMainSite}
+            </Text>
+            {isRtl ? (
+              <LeftChevron css={styles.chevron} />
+            ) : (
+              <RightChevron css={styles.chevron} />
+            )}
+          </CallToActionLink>
         </Paragraph>
         <Paragraph data-e2e="information-page">
-          <CtaLink
-            isRtl={isRtl}
+          <CallToActionLink
             href={informationPageLink}
-            text={informationPage}
-            css={styles.bottomLinkSpacing}
-          />
+            css={[styles.bottomLinkSpacing, styles.link]}
+            ignoreStyling
+          >
+            <Text
+              size="brevier"
+              fontVariant="sansRegular"
+              css={styles.linkText}
+            >
+              {informationPage}
+            </Text>
+          </CallToActionLink>
         </Paragraph>
       </div>
     </section>

src/integration/pages/articles/gahuzaLiteSite/__snapshots__/lite.test.js.snap

@@ -27,7 +27,7 @@ exports[`Lite Site Articles Lite Site Cta should match snapshot 1`] = `
       data-e2e="to-main-site"
     >
       <a
-        class="bbc-12216v1"
+        class="bbc-2ezaih"
         data-ignore-lite="true"
         href="http://localhost:7080/gahuza/articles/cey23zx8wx8o"
       >
@@ -55,7 +55,7 @@ exports[`Lite Site Articles Lite Site Cta should match snapshot 1`] = `
       data-e2e="information-page"
     >
       <a
-        class="bbc-1hvke8g"
+        class="bbc-1c7rt7i"
         href="https://www.bbc.com/gahuza/articles/cn7y7pvem0vo.lite"
       >
         <span