Merge branch 'latest' into WSTEAMA-402-amp-component-uses-bff

cypress/integration/pages/homePage/urls.js

@@ -3,7 +3,7 @@ const urls = [
     service: 'kyrgyz',
     local: '/kyrgyz',
     test: '/kyrgyz',
-    live: null,
+    live: '/kyrgyz',
   },
 ];
 

lighthouse/lighthouserc.js

@@ -68,8 +68,8 @@ const AUDIT_URLS = {
   },
 
   TIPO_HOME_PAGE: {
-    live: ['https://www.test.bbc.com/kyrgyz?renderer_env=live'],
-    test: ['https://www.test.bbc.com/kyrgyz'],
+    live: ['https://www.bbc.com/kyrgyz'],
+    test: ['https://www.test.bbc.com/kyrgyz?renderer_env=live'],
   },
 
   MEDIA_ARTICLE_PAGE: {

src/app/components/MostRead/README.md

@@ -1,17 +1,25 @@
-# MostRead
-
 ## Description
 
+This component renders a collection of most read articles to a news page so that relevant and trusted onward journeys are provided for the audience. It is featured on Homepages, Topic, Article, and Story pages and comprises a number rank, a title, and a link to the article. These elements sit within a region landmark. The component limits the number of Most Read items to be displayed based on the [`mostRead -> numberOfItems`](https://github.com/bbc/simorgh/blob/561414ae7c1e6636372381a8e0deddf48f926c1c/src/app/lib/config/services/mundo.ts#L256-L257) value for each service.
+
+The component uses a [MostReadData](https://github.com/bbc/simorgh/blob/c4d38ae16587f29306d1109ea19bd55205c5709b/src/app/components/MostRead/types.ts#L79-L90) type, which contains an items array with the following fields: id, rank, title, href, and timestamp.
+
+It also uses a [ColumnLayout](https://github.com/bbc/simorgh/blob/c4d38ae16587f29306d1109ea19bd55205c5709b/src/app/components/MostRead/types.ts#L7) type that determines how many columns the component is spread across: `oneColumn`, `twoColumn` or `multiColumn`. `multiColumn` will spread the data across 5 columns.
+
+A [Size](https://github.com/bbc/simorgh/blob/c4d38ae16587f29306d1109ea19bd55205c5709b/src/app/components/MostRead/types.ts#L5) type is also used, which determines the sizing of the fonts used. This has values of `default` and `small`.
+
 ## Props
 
-| Name | type | Description |
-| ---- | ---- | ----------- |
-|      |      |             |
+| Name         | type         | Description                                                                            |
+| ------------ | ------------ | -------------------------------------------------------------------------------------- |
+| data         | MostReadData | Contains the data rendered to the browser. i.e rank, title, and appropriate href link  |
+| columnLayout | ColumnLayout | Determines how many columns the component is spread across. Defaults to `multiColumn`. |
+| size         | Size         | Determines the font size used by the component. Defaults to `default`.                 |
 
 ## How to use
 
 ```tsx
 {
-  <MostRead />;
+  <MostRead data={mostRead} columnLayout="twoColumn" size="small" />;
 }
 ```

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
+import metadata from './metadata.json';
+import md from './README.md';
 import ThemeProvider from '../ThemeProvider';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import { Services } from '../../models/types/global';
@@ -57,6 +59,10 @@ export default {
     chromatic: {
       viewports: [1280],
     },
+    metadata,
+    docs: {
+      page: md,
+    },
   },
 };
 

src/app/components/MostRead/metadata.json

@@ -0,0 +1,28 @@
+{
+  "lastUpdated": {
+    "day": 15,
+    "month": "June",
+    "year": 2023
+  },
+  "uxAccessibilityDoc": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Screen Reader UX"
+    }
+  },
+  "acceptanceCriteria": {
+    "done": true,
+    "reference": {
+      "url": "https://paper.dropbox.com/doc/Most-Read-Accessibility-Acceptance-Criteria--B6T7sKDpGdzV~Pblb_UYYf6dAg-31z8j3gmy1rIdbCByQHfY",
+      "label": "Accessibility Acceptance Criteria"
+    }
+  },
+  "swarm": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "A11y swarm notes"
+    }
+  }
+}