diff --git a/cypress/integration/pages/homePage/urls.js b/cypress/integration/pages/homePage/urls.js
index 9ed35d389d6..d684c705d63 100644
--- a/cypress/integration/pages/homePage/urls.js
+++ b/cypress/integration/pages/homePage/urls.js
@@ -3,7 +3,7 @@ const urls = [
service: 'kyrgyz',
local: '/kyrgyz',
test: '/kyrgyz',
- live: null,
+ live: '/kyrgyz',
},
];
diff --git a/lighthouse/lighthouserc.js b/lighthouse/lighthouserc.js
index 9629613e1ab..357959db865 100644
--- a/lighthouse/lighthouserc.js
+++ b/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: {
diff --git a/src/app/components/MostRead/README.md b/src/app/components/MostRead/README.md
index 4cecc1ea006..14792a495f9 100644
--- a/src/app/components/MostRead/README.md
+++ b/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
{
- ;
+ ;
}
```
diff --git a/src/app/components/MostRead/index.stories.tsx b/src/app/components/MostRead/index.stories.tsx
index 5e2519cc0f6..2e2a54b9381 100644
--- a/src/app/components/MostRead/index.stories.tsx
+++ b/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,
+ },
},
};
diff --git a/src/app/components/MostRead/metadata.json b/src/app/components/MostRead/metadata.json
new file mode 100644
index 00000000000..6b28c650686
--- /dev/null
+++ b/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"
+ }
+ }
+}