poc for ws wrapped display (#11247)

poc
bbc · Nov 26, 2024 · cbf7c2b · cbf7c2b
1 parent 160bf8f
commit cbf7c2b
Show file tree

Hide file tree

Showing 8 changed files with 496 additions and 18 deletions.
diff --git a/src/app/components/icons/index.tsx b/src/app/components/icons/index.tsx
@@ -36,3 +36,96 @@ export const RightChevron = ({ className }: { className?: string }) => (
     <path d="M21.6 14.3L5.5 31h6.4l14.6-15L11.9 1H5.5l16.1 16.7v-3.4z" />
   </svg>
 );
+
+export const Clock = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M16 31c8.5 0 15-6.5 15-15S24.5 1 16 1 1 7.5 1 16s6.5 15 15 15zm0-2.7C9 28.3 3.7 23 3.7 16S9 3.7 16 3.7C23 3.7 28.3 9 28.3 16S23 28.3 16 28.3zm6.2-6.7 1-1.5-5.7-4.5-.6-8.6H15l-.7 10.5 7.9 4.1z" />
+  </svg>
+);
+
+export const Book = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M8.6 1.6c-3.1 0-5 1.8-5 5v18.9c0 3.1 1.8 5 5 5h19.7V6.1h-2.2v21.7H8.2c-1.2 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3h15.3V1.6H8.6z" />
+  </svg>
+);
+
+export const Words = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M6 15.9h10v2H6zm4-4h12v2H10zm8 4h8v2h-8z" />
+    <path d="M28 3.9H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h10.2v7l7.4-7H28c1.1 0 2-.9 2-2v-15c0-1.1-.9-2-2-2zm-6.4 17H20L16.2 25v-4.1H4v-15h24v15h-6.4z" />
+  </svg>
+);
+
+export const Articles = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M5 9v20h22V9Zm20 18h-3a5.89 5.89 0 0 0-6-5 5.89 5.89 0 0 0-6 5H7V11h18ZM7 6h18v2H7zm2-3h14v2H9z" />
+    <circle cx="15.998" cy="17.5" r="3.5" />
+  </svg>
+);
+
+export const Calendar = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M6.2 30.5h19.5c5 0 5.3-2.5 5.3-5.3V9.3h-2.6v16c0 2-.6 2.6-2.6 2.6H6.3c-2 0-2.6-.6-2.6-2.6v-16H1v15.9c0 2.8.2 5.3 5.2 5.3zM10.8 15h2v-2h-2v2zM1 9.6h30V1.5h-5.3v3h-3v-3H9.2v3h-3v-3H1v8.1zM15 15h2v-2h-2v2zm4.1 0h2v-2h-2v2zm4.2 0h2v-2h-2v2zm-12.5 4.7h2v-2h-2v2zm4.2 0h2v-2h-2v2zm4.1 0h2v-2h-2v2zm4.2 0h2v-2h-2v2zm-16.6 0h2v-2h-2v2zm4.1 4.7h2v-2h-2v2zm4.2 0h2v-2h-2v2zm4.1 0h2v-2h-2v2zm-12.4 0h2v-2h-2v2z" />
+  </svg>
+);
+
+export const Favourites = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M9.1 7.5h21.8V1.9H9.1v5.6zm0 22.6h21.8v-5.6H9.1v5.6zm7.2-11.3h14.6v-5.6H16.3v5.6zm-2.8-4.6H9.1V9.8H5.5v4.4H1.1v3.5h4.4v4.4h3.6v-4.4h4.4v-3.5z" />
+  </svg>
+);
+
+export const Calculator = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+    width="12"
+    height="12"
+    className={className}
+  >
+    <path d="M22.8 32H9.2c-1.2 0-2.1-.3-2.6-.8s-.8-1.4-.8-2.6V3.4c0-1.2.3-2.1.8-2.6S8 0 9.2 0h13.6c1.3 0 2.1.3 2.6.8s.8 1.4.8 2.6v25.2c0 1.2-.3 2.1-.8 2.6s-1.3.8-2.6.8zm.8-29.4H8.4V12h15.2V2.6zM12.1 14.2H8.4v3.7h3.7v-3.7zm0 5.7H8.4v3.7h3.7v-3.7zm0 5.8H8.4v3.7h3.7v-3.7zm5.7-11.5h-3.7v3.7h3.7v-3.7zm0 5.7h-3.7v3.7h3.7v-3.7zm0 5.8h-3.7v3.7h3.7v-3.7zm5.8-11.5h-3.7v3.7h3.7v-3.7zm0 5.7h-3.7v9.5h3.7v-9.5z" />
+  </svg>
+);
diff --git a/src/app/contexts/EventTrackingContext/index.tsx b/src/app/contexts/EventTrackingContext/index.tsx
@@ -68,7 +68,7 @@ const getCampaignID = (pageType: CampaignPageTypes) => {
     [LIVE_PAGE]: 'live-page',
     [HOME_PAGE]: 'index-home',
     [CPS_ASSET]: '',
-    [STATIC_PAGE]: '',
+    [STATIC_PAGE]: 'static-page',
     [UGC_PAGE]: '',
     [AV_EMBEDS]: 'av-embeds',
     [DOWNLOADS_PAGE]: 'downloads',

diff --git a/ws-nextjs-app/pages/[service]/downloads/downloadsPageLayout.tsx b/ws-nextjs-app/pages/[service]/downloads/downloadsPageLayout.tsx
@@ -62,7 +62,16 @@ const DownloadsPageLayout = ({ service, pageData }: PageProps) => {
                     padding={false}
                     isRelative={false}
                   />
-                  <CallToActionLink css={styles.cta} href={item.files[0].fileLink} download={true} eventTrackingData={{ componentName: 'koreanDownloads', campaignID: 'korean_downloads', advertiserID: index }}>
+                  <CallToActionLink
+                    css={styles.cta}
+                    href={item.files[0].fileLink}
+                    download
+                    eventTrackingData={{
+                      componentName: 'koreanDownloads',
+                      campaignID: 'korean_downloads',
+                      advertiserID: index,
+                    }}
+                  >
                     <svg
                       className="ws-o-download-icon"
                       viewBox="0 0 32 32"

diff --git a/ws-nextjs-app/pages/[service]/downloads/styles.ts b/ws-nextjs-app/pages/[service]/downloads/styles.ts
@@ -23,7 +23,7 @@ export default {
         gridColumn: '1 / span 12',
       },
     }),
-  orderedList : ({ mq }: Theme) => 
+  orderedList: ({ mq }: Theme) =>
     css({
       display: 'grid',
       gridTemplateColumns: 'repeat(auto-fill, minmax(100%, 1fr))',
@@ -33,13 +33,13 @@ export default {
         gridTemplateColumns: 'repeat(auto-fill, minmax(50%, 1fr))',
       },
     }),
-  cta: () => 
+  cta: () =>
     css({
-        div: {
-            display: 'block',
-        },
+      div: {
+        display: 'block',
+      },
     }),
-  listItem : ({ fontSizes, palette }: Theme) => 
+  listItem: ({ fontSizes, palette }: Theme) =>
     css({
       borderBottom: '1px solid #000',
       paddingBottom: '15px',
@@ -60,7 +60,7 @@ export default {
           textDecoration: 'underline',
           color: palette.POSTBOX,
         },
-      }
+      },
     }),
   mainContent: ({ spacings }: Theme) =>
     css({

diff --git a/ws-nextjs-app/pages/[service]/downloads/types.ts b/ws-nextjs-app/pages/[service]/downloads/types.ts
@@ -2,16 +2,16 @@ import { Services, Variants } from '#app/models/types/global';
 import { ATIData } from '#app/components/ATIAnalytics/types';
 
 export type DownloadData = {
-    fileCreated: string;
-    files: DownloadDataFile[];
+  fileCreated: string;
+  files: DownloadDataFile[];
 };
 
 export type DownloadDataFile = {
-    fileCreatedDate: string;
-    fileName: string;
-    fileLink: string;
-    lastModified: string;
-    fileSize: number;
+  fileCreatedDate: string;
+  fileName: string;
+  fileLink: string;
+  lastModified: string;
+  fileSize: number;
 };
 
 export type Metadata = {
@@ -29,4 +29,4 @@ export type PageProps = {
     downloadData?: DownloadData[];
     metadata?: Metadata;
   };
-};
+};
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/live.test.tsx b/ws-nextjs-app/pages/[service]/live/[id]/live.test.tsx
@@ -374,7 +374,7 @@ describe('Live Page', () => {
 
     expect(
       screen.getByText(
-        'The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering'
+        'The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering',
       ),
     ).toBeInTheDocument();
   });