Merge branch 'latest' into WSTEAMA-1382-remove-media-player-component…

…-and-add-mediaLoaders
bbc · Sep 30, 2024 · 50ca11f · 50ca11f
2 parents 06aa2db + 225ef28
commit 50ca11f
Show file tree

Hide file tree

Showing 23 changed files with 167 additions and 149 deletions.
diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
@@ -6,7 +6,6 @@ Please familiarise yourself with our:
 - [Coding Standards](https://github.com/bbc/simorgh/blob/latest/docs/Coding-Standards/README.md)
 - [Contributing guidelines](https://github.com/bbc/simorgh/blob/latest/CONTRIBUTING.md)
 - [Guide to Code Reviews](https://github.com/bbc/simorgh/blob/latest/docs/Code-Reviews.mdx)
-- [Github Project Board Guide](https://github.com/bbc/simorgh/blob/latest/docs/Project-Board-Guide.mdx)
 - [Primary README](https://github.com/bbc/simorgh/blob/latest/README.md)
 - [Recommended Tools](https://github.com/bbc/simorgh/blob/latest/docs/Recommended-Tools.mdx)
 - [Troubleshooting](https://github.com/bbc/simorgh/blob/latest/docs/Troubleshooting.mdx)

diff --git a/AdHocCypress/README.mdx b/AdHocCypress/README.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/blocks';
 
 <Meta title="cypress/Ad Hoc Tests" />
 
@@ -14,10 +14,14 @@ The purpose of this test suite is to allow for testing of ad-hoc functionality w
 
 ## Running Ad Hoc Tests
 
+<Markdown>
+{`
 | Environment | Command                                    |
 | ----------- | ------------------------------------------ |
-| local       | `CYPRESS_APP_ENV=local yarn cypress:adhoc` |
-| test        | `CYPRESS_APP_ENV=test yarn cypress:adhoc`  |
-| live        | `CYPRESS_APP_ENV=live yarn cypress:adhoc`  |
+| local       | \`CYPRESS_APP_ENV=local yarn cypress:adhoc\` |
+| test        | \`CYPRESS_APP_ENV=test yarn cypress:adhoc\`  |
+| live        | \`CYPRESS_APP_ENV=live yarn cypress:adhoc\`  |
+`}
+</Markdown>
 
 As with the primary Cypress tests, the same [environment variables](https://github.com/bbc/simorgh#environment-variables) can also be used with the `cypress:adhoc` command
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -12,7 +12,6 @@ Please familiarise yourself with our:
 - [Coding Standards](https://github.com/bbc/simorgh/blob/latest/docs/Coding-Standards/README.md)
 - [Contributing guidelines](https://github.com/bbc/simorgh/blob/latest/CONTRIBUTING.md) (you are here)
 - [Guide to Code Reviews](https://github.com/bbc/simorgh/blob/latest/docs/Code-Reviews.mdx)
-- [Github Project Board Guide](https://github.com/bbc/simorgh/blob/latest/docs/Project-Board-Guide.mdx)
 - [GPG Signing Guide](https://github.com/bbc/simorgh/blob/latest/docs/GPG-Signing-Guide.mdx)
 - [Primary README](https://github.com/bbc/simorgh/blob/latest/README.md)
 - [Recommended Tools](https://github.com/bbc/simorgh/blob/latest/docs/Recommended-Tools.mdx)
@@ -28,8 +27,6 @@ If the work you want to carry out is not captured in an issue, please open one.
 
 There are issue templates available for bug fix and feature requests, so you know what details to include.
 
-Once you find an issue you would like to work on, please see this [guide about our project board workflow](https://github.com/bbc/simorgh/blob/latest/docs/Project-Board-Guide.mdx)
-
 ## Pull Requests
 
 If you never created a pull request before, [here is a great tutorial on how to send a PR](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).

diff --git a/README.md b/README.md
@@ -19,7 +19,6 @@ Please familiarise yourself with our:
 - [Coding Standards](https://github.com/bbc/simorgh/blob/latest/docs/Coding-Standards/README.md)
 - [Contributing guidelines](https://github.com/bbc/simorgh/blob/latest/CONTRIBUTING.md)
 - [Guide to Code Reviews](https://github.com/bbc/simorgh/blob/latest/docs/Code-Reviews.mdx)
-- [Github Project Board Guide](https://github.com/bbc/simorgh/blob/latest/docs/Project-Board-Guide.mdx)
 - [GPG Signing Guide](https://github.com/bbc/simorgh/blob/latest/docs/GPG-Signing-Guide.mdx)
 - [Primary README](https://github.com/bbc/simorgh/blob/latest/README.md) (you are here)
 - [Recommended Tools](https://github.com/bbc/simorgh/blob/latest/docs/Recommended-Tools.mdx)

diff --git a/docs/A11y-Testing-Cross-Device.mdx b/docs/A11y-Testing-Cross-Device.mdx
@@ -12,7 +12,7 @@ In this document we specify some instructions to allow you to test cross device
 3. Replace `localhost` on [line 56](https://github.com/bbc/simorgh/blob/e54ee00e04b2a4feffb1d298550b7aa6b3ca4d62/webpack.config.client.js#L56) and [line 88](https://github.com/bbc/simorgh/blob/e54ee00e04b2a4feffb1d298550b7aa6b3ca4d62/webpack.config.client.js#L88) to `0.0.0.0`
 4. Open up a new terminal window and type `ifconfig`
 5. CMD + F for `inet` and find your local network IP address, it will likely be in this format `inet 192.168.x.xx` with the `xx` at the end being your device's unique number on the network.
-6. In the `local.env` file, change [these lines](https://github.com/bbc/simorgh/blob/4521b30e356673c68472cef2c67c234955e889b3/envConfig/local.env#L2..L3) to match your dev machine's IP address: `http://192.168.x.xx:7080`
+6. In the `local.env` file, change [these lines](https://github.com/bbc/simorgh/blob/4521b30e356673c68472cef2c67c234955e889b3/envConfig/local.env#L2..L3) to match your dev machine's IP address: [http://192.168.x.xx:7080](http://192.168.x.xx:7080)
 7. Replace [this line](https://github.com/bbc/simorgh/blob/4521b30e356673c68472cef2c67c234955e889b3/src/server/index.jsx#L64) with the following code: `const injectCspHeaderProdBuild = skipMiddleware;` to disable the csp policy for testing; allowing javascript files to be loaded in the browser from your dev machine.
-8. Start up your Simorgh with a production build: `npm run build && npm run start` and visit http://192.168.0.xx:7080/mundo/23263889
-9. Now you should be able to access any page on any device that's connected on your local network by prefixing your Simorgh's host machines IP http://192.168.0.xx:7080/foobar instead of http://localhost:7080/foobar
+8. Start up your Simorgh with a production build: `npm run build && npm run start` and visit [http://192.168.0.xx:7080/mundo/23263889](http://192.168.0.xx:7080/mundo/23263889)
+9. Now you should be able to access any page on any device that's connected on your local network by prefixing your Simorgh's host machines IP [http://192.168.0.xx:7080/foobar](http://192.168.0.xx:7080/foobar) instead of [http://localhost:7080/foobar](http://localhost:7080/foobar)
diff --git a/docs/Coding-Standards/Clean-Code.mdx b/docs/Coding-Standards/Clean-Code.mdx
@@ -18,7 +18,7 @@ Variables and functions should be declared close to their usage. A component’s
 
 ### Resources
 
-* https://kentcdodds.com/blog/colocation
+* [Kent C. Dodd's Blog on Colocation](https://kentcdodds.com/blog/colocation)
 
 ## Code commenting
 
@@ -313,5 +313,5 @@ The scout rule is “Always leave the campground cleaner than you found it”. T
 
 #### Resources
 
-* https://x-team.com/blog/principles-clean-code/
-* https://www.goodreads.com/book/show/8677004-the-art-of-readable-code
+* [X-TEAM: A Few Principles of Clean Code](https://x-team.com/blog/principles-clean-code/)
+* [The Art of Readable Code: Simple and Practical Techniques for Writing Better Code](https://www.goodreads.com/book/show/8677004-the-art-of-readable-code)
diff --git a/docs/Coding-Standards/Migrating-Legacy-Components.mdx b/docs/Coding-Standards/Migrating-Legacy-Components.mdx
@@ -1,4 +1,18 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/blocks';
+import {
+  GEL_GROUP_1_SCREEN_WIDTH_MIN,
+  GEL_GROUP_1_SCREEN_WIDTH_MAX,
+  GEL_GROUP_2_SCREEN_WIDTH_MIN,
+  GEL_GROUP_2_SCREEN_WIDTH_MAX,
+  GEL_GROUP_3_SCREEN_WIDTH_MIN,
+  GEL_GROUP_3_SCREEN_WIDTH_MAX,
+  GEL_GROUP_4_SCREEN_WIDTH_MIN,
+  GEL_GROUP_4_SCREEN_WIDTH_MAX,
+  GEL_GROUP_5_SCREEN_WIDTH_MIN,
+  GEL_GROUP_0_SCREEN_WIDTH_MAX,
+} from '../../src/app/legacy/psammead/gel-foundations/src/breakpoints';
+import * as spacings from '../../src/app/components/ThemeProvider/spacings'
+import {MARGIN_BELOW_400PX, MARGIN_ABOVE_400PX, GUTTER_BELOW_600PX, GUTTER_ABOVE_600PX} from '../../src/app/components/ThemeProvider/spacings'
 
 <Meta title="Coding Standards/Migrating Legacy Components" />
 
@@ -191,15 +205,23 @@ export const styles;
 
 ### Font Sizes Mappings
 
+<Markdown>
+  {`
 | Before                                                                                                                                                     | After                |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| `${({ script }) => script && getCanon(script)}` <br /> **OR** <br />`${({ script }) => getCanon(script)}` <br /> **OR** <br /> `${() => getCanon(script)}` | `...fontSizes.canon` |
+| \`${({ script }) => script && getCanon(script)}\` <br /> **OR** <br />\`${({ script }) => getCanon(script)}\` <br /> **OR** <br /> \`${() => getCanon(script)}\` | \`...fontSizes.canon\` |
+`}
+</Markdown>
 
 ### Font Variants Mappings
 
+<Markdown>
+  {`
 | Before                                                                                                | After                         |
 | ----------------------------------------------------------------------------------------------------- | ----------------------------- |
-| `${({ service }) => getSerifMedium(service)}` <br /> **OR** <br /> `${() => getSerifMedium(service)}` | `...fontVariants.serifMedium` |
+| \`${({ service }) => getSerifMedium(service)}\` <br /> **OR** <br /> \`${() => getSerifMedium(service)}\` | \`...fontVariants.serifMedium\` |
+`}
+</Markdown>
 
 ## Migrating Media Queries
 
@@ -232,47 +254,55 @@ export default styles;
 
 ### Media Query / Breakpoint Mappings
 
+<Markdown>
+  {`
 | Before                                                                                                   | After                         |
 | -------------------------------------------------------------------------------------------------------- | ----------------------------- |
 | **Min Widths**                                                                                           |                               |
-| `@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) {`                                                  | `[mq.GROUP_1_MIN_WIDTH]: {`   |
-| `@media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {`                                                  | `[mq.GROUP_2_MIN_WIDTH]: {`   |
-| `@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {`                                                  | `[mq.GROUP_3_MIN_WIDTH]: {`   |
-| `@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {`                                                  | `[mq.GROUP_4_MIN_WIDTH]: {`   |
-| `@media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {`                                                  | `[mq.GROUP_5_MIN_WIDTH]: {`   |
+| \`@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) {\`                                                  | \`[mq.GROUP_1_MIN_WIDTH]: {\`   |
+| \`@media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {\`                                                  | \`[mq.GROUP_2_MIN_WIDTH]: {\`   |
+| \`@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {\`                                                  | \`[mq.GROUP_3_MIN_WIDTH]: {\`   |
+| \`@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {\`                                                  | \`[mq.GROUP_4_MIN_WIDTH]: {\`   |
+| \`@media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {\`                                                  | \`[mq.GROUP_5_MIN_WIDTH]: {\`   |
 | **Max Widths**                                                                                           |                               |
-| `@media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {`                                                  | `[mq.GROUP_0_MAX_WIDTH]: {`   |
-| `@media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {`                                                  | `[mq.GROUP_1_MAX_WIDTH]: {`   |
-| `@media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {`                                                  | `[mq.GROUP_2_MAX_WIDTH]: {`   |
-| `@media (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {`                                                  | `[mq.GROUP_3_MAX_WIDTH]: {`   |
-| `@media (max-width: ${GEL_GROUP_4_SCREEN_WIDTH_MAX}) {`                                                  | `[mq.GROUP_4_MAX_WIDTH]: {`   |
+| \`@media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {\`                                                  | \`[mq.GROUP_0_MAX_WIDTH]: {\`   |
+| \`@media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {\`                                                  | \`[mq.GROUP_1_MAX_WIDTH]: {\`   |
+| \`@media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {\`                                                  | \`[mq.GROUP_2_MAX_WIDTH]: {\`   |
+| \`@media (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {\`                                                  | \`[mq.GROUP_3_MAX_WIDTH]: {\`   |
+| \`@media (max-width: ${GEL_GROUP_4_SCREEN_WIDTH_MAX}) {\`                                                  | \`[mq.GROUP_4_MAX_WIDTH]: {\`   |
 | **Min and Max Widths**                                                                                   |                               |
-| `@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {` | `[mq.GROUP_1_ONLY]: {`        |
-| `@media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {` | `[mq.GROUP_2_ONLY]: {`        |
-| `@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {` | `[mq.GROUP_1_AND_GROUP_2]: {` |
-| `@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {` | `[mq.GROUP_3_ONLY]: {`        |
-| `@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_4_SCREEN_WIDTH_MAX}) {` | `[mq.GROUP_4_ONLY]: {`        |
+| \`@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {\` | \`[mq.GROUP_1_ONLY]: {\`        |
+| \`@media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {\` | \`[mq.GROUP_2_ONLY]: {\`        |
+| \`@media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {\` | \`[mq.GROUP_1_AND_GROUP_2]: {\` |
+| \`@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX}) {\` | \`[mq.GROUP_3_ONLY]: {\`        |
+| \`@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_4_SCREEN_WIDTH_MAX}) {\` | \`[mq.GROUP_4_ONLY]: {\`        |
 | **Forced Colours/High Contrast**                                                                         |                               |
-| `@media screen and (forced-colors: active)`                                                              | `[mq.FORCED_COLOURS]: {`      |
+| \`@media screen and (forced-colors: active)\`                                                              | \`[mq.FORCED_COLOURS]: {\`      |
+`}
+</Markdown>
 
 ### Migrating GEL Breakpoints (Spacing)
 
+<Markdown>
+  {`
 | Rems (Pixels)  | GEL Spacing              | New Theme Spacing          |
 | -------------- | ------------------------ | -------------------------- |
-| 0.25rem (4px)  | `GEL_SPACING_HLF`        | `${spacings.HALF}rem`      |
-| 0.5rem (8px)   | `GEL_SPACING`            | `${spacings.FULL}rem`      |
-| 0.75rem (12px) | `GEL_SPACING_HLF_TRPL`   | `0.75rem`                  |
-| 1rem (16px)    | `GEL_SPACING_DBL`        | `${spacings.DOUBLE}rem`    |
-| 1.5rem (24px)  | `GEL_SPACING_TRPL`       | `${spacings.TRIPLE}rem`    |
-| 2rem (32px)    | `GEL_SPACING_QUAD`       | `${spacings.QUADRUPLE}rem` |
-| 2.5rem (40px)  | `GEL_SPACING_QUIN`       | `${spacings.QUINTUPLE}rem` |
-| 3rem (48px)    | `GEL_SPACING_SEXT`       | `${spacings.SEXTUPLE}rem`  |
-| 3.5rem (56px)  | `GEL_SPACING_SEPT`       | `3.5rem`                   |
+| 0.25rem (4px)  | \`GEL_SPACING_HLF\`        | \`${spacings.HALF}rem\`      |
+| 0.5rem (8px)   | \`GEL_SPACING\`            | \`${spacings.FULL}rem\`      |
+| 0.75rem (12px) | \`GEL_SPACING_HLF_TRPL\`   | \`0.75rem\`                  |
+| 1rem (16px)    | \`GEL_SPACING_DBL\`        | \`${spacings.DOUBLE}rem\`    |
+| 1.5rem (24px)  | \`GEL_SPACING_TRPL\`       | \`${spacings.TRIPLE}rem\`    |
+| 2rem (32px)    | \`GEL_SPACING_QUAD\`       | \`${spacings.QUADRUPLE}rem\` |
+| 2.5rem (40px)  | \`GEL_SPACING_QUIN\`       | \`${spacings.QUINTUPLE}rem\` |
+| 3rem (48px)    | \`GEL_SPACING_SEXT\`       | \`${spacings.SEXTUPLE}rem\`  |
+| 3.5rem (56px)  | \`GEL_SPACING_SEPT\`       | \`3.5rem\`                   |
 | **Other**      |                          |                            |
-| 0.5rem (8px)   | `GEL_MARGIN_BELOW_400PX` | `${MARGIN_BELOW_400PX}`    |
-| 1rem (16px)    | `GEL_MARGIN_ABOVE_400PX` | `${MARGIN_ABOVE_400PX}`    |
-| 0.5rem (8px)   | `GEL_GUTTER_BELOW_600PX` | `${GUTTER_BELOW_600PX}`    |
-| 1rem (16px)    | `GEL_GUTTER_ABOVE_600PX` | `${GUTTER_ABOVE_600PX}`    |
+| 0.5rem (8px)   | \`GEL_MARGIN_BELOW_400PX\` | \`${MARGIN_BELOW_400PX}\`    |
+| 1rem (16px)    | \`GEL_MARGIN_ABOVE_400PX\` | \`${MARGIN_ABOVE_400PX}\`    |
+| 0.5rem (8px)   | \`GEL_GUTTER_BELOW_600PX\` | \`${GUTTER_BELOW_600PX}\`    |
+| 1rem (16px)    | \`GEL_GUTTER_ABOVE_600PX\` | \`${GUTTER_ABOVE_600PX}\`    |
+`}
+</Markdown>
 
 ## Using `CSS` library with values driven by props
 

diff --git a/docs/Coding-Standards/README.md b/docs/Coding-Standards/README.md
@@ -6,7 +6,6 @@
 - [Coding Standards](https://github.com/bbc/simorgh/blob/latest/docs/Coding-Standards/README.md) (you are here)
 - [Contributing guidelines](https://github.com/bbc/simorgh/blob/latest/CONTRIBUTING.md)
 - [Guide to Code Reviews](https://github.com/bbc/simorgh/blob/latest/docs/Code-Reviews.mdx)
-- [Github Project Board Guide](https://github.com/bbc/simorgh/blob/latest/docs/Project-Board-Guide.mdx)
 - [GPG Signing Guide](https://github.com/bbc/simorgh/blob/latest/docs/GPG-Signing-Guide.mdx)
 - [Primary README](https://github.com/bbc/simorgh/blob/latest/README.md)
 - [Recommended Tools](https://github.com/bbc/simorgh/blob/latest/docs/Recommended-Tools.mdx)