WSTEAM1-1367: Add styles

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import LiteSiteCTA from '.';
+
+export const Component = () => <LiteSiteCTA />;
+
+export default {
+  title: 'Components/LiteSiteCTA',
+  Component,
+};

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

@@ -1 +1,26 @@
-// import { css, Theme } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
+
+export default {
+  container: ({ spacings }: Theme) =>
+    css({
+      margin: `${spacings.TRIPLE}rem 0`,
+    }),
+  link: ({ palette, spacings }: Theme) =>
+    css({
+      svg: {
+        color: palette.GREY_10,
+        fill: 'currentColor',
+        marginInlineStart: `${spacings.HALF}rem`,
+        verticalAlign: 'middle',
+      },
+    }),
+  canonicalLink: ({ spacings, fontVariants }: Theme) =>
+    css({
+      ...fontVariants.sansBold,
+      margin: `${spacings.TRIPLE}rem 0`,
+    }),
+  linkContainer: ({ spacings }: Theme) =>
+    css({
+      margin: `${spacings.TRIPLE}rem 0`,
+    }),
+};

src/app/components/LiteSiteCta/index.tsx

@@ -1,51 +1,70 @@
 /** @jsx jsx */
 import { useContext } from 'react';
 import { jsx } from '@emotion/react';
-// import CallToActionLink from '../CallToActionLink';
-// import InlineLink from '../InlineLink';
 import Paragraph from '../Paragraph';
 import Text from '../Text';
 import { LeftChevron, RightChevron } from '../icons';
 import { ServiceContext } from '../../contexts/ServiceContext';
 import { RequestContext } from '../../contexts/RequestContext';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import styles from './index.styles';
 
-// TO DO - see if it's possible to refactor with existing components
-const CtaLink = ({
-  isRtl,
-  href,
-  text,
-}: {
+type CtaLinkProps = {
   isRtl: boolean;
   href: string;
   text: string;
-}) => {
+  className?: string;
+};
+
+const CtaLink = ({ isRtl, href, text, className }: CtaLinkProps) => {
   return (
-    <a href={href}>
-      <Text size="bodyCopy" fontVariant="sansBold">
-        {text}
-      </Text>
+    <Text as="a" size="brevier" href={href} className={className}>
+      {text}
       {isRtl ? <LeftChevron /> : <RightChevron />}
-    </a>
+    </Text>
   );
 };
 
+const defaultTranslations = {
+  disclaimer: `You’re viewing a text-only version of this website that uses less data. View the main version of the website including all images and videos.`,
+  backToCanonical: 'Take me to the main website',
+  findOutMore: 'Find out more about this data-saving version',
+  dataSaving: 'Data saving version',
+};
+
 const LiteSiteCta = () => {
   const { dir, translations } = useContext(ServiceContext);
   // TO DO - this is still taking to lite.
   const { canonicalLink } = useContext(RequestContext);
   const isRtl = dir === 'rtl';
   // TO DO - Add real translations
-  const { skipLinkText } = translations;
+  const { liteSite = defaultTranslations } = translations;
+  const { disclaimer, backToCanonical, findOutMore, dataSaving } = liteSite;
   const id = 'LiteSiteCta';
 
   return (
-    <section role="region" aria-labelledby={id}>
-      <strong aria-hidden="true" id={id}>
-        {skipLinkText}
-      </strong>
-      <Paragraph>{skipLinkText}</Paragraph>
+    <section role="region" aria-labelledby={id} css={styles.container}>
+      <VisuallyHiddenText as="strong" id={id} aria-hidden>
+        {dataSaving}
+      </VisuallyHiddenText>
+      <Paragraph>
+        <Text size="brevier">{disclaimer}</Text>
+      </Paragraph>
+      <Paragraph css={styles.linkContainer}>
+        <CtaLink
+          css={[styles.link, styles.canonicalLink]}
+          isRtl={isRtl}
+          href={canonicalLink}
+          text={backToCanonical}
+        />
+      </Paragraph>
       <Paragraph>
-        <CtaLink isRtl={isRtl} href={canonicalLink} text={skipLinkText} />
+        <CtaLink
+          css={styles.link}
+          isRtl={isRtl}
+          href={canonicalLink}
+          text={findOutMore}
+        />
       </Paragraph>
     </section>
   );

src/app/lib/config/services/gahuza.ts

@@ -73,6 +73,12 @@ export const service: DefaultServiceConfig = {
       relatedContent: 'Ibindi bisa n’ibi',
       relatedTopics: 'Ibindi bisa n’ibi',
       navMenuText: 'Imice',
+      liteSite: {
+        disclaimer: `You’re viewing a text-only version of this website that uses less data. View the main version of the website including all images and videos.`,
+        backToCanonical: 'Take me to the main website',
+        findOutMore: 'Find out more about this data-saving version',
+        dataSaving: 'Data saving',
+      },
       mediaAssetPage: {
         mediaPlayer: 'Ibikinwa',
         audioPlayer: 'Kina amajwi',

src/app/models/types/translations.ts

@@ -19,6 +19,12 @@ export interface Translations {
   topicsPath?: string;
   relatedTopics?: string;
   navMenuText: string;
+  liteSite?: {
+    disclaimer: string;
+    backToCanonical: string;
+    findOutMore: string;
+    dataSaving: string;
+  };
   mediaAssetPage: {
     mediaPlayer: string;
     audioPlayer: string;