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" + } + } +}