Merge branch 'latest' into WSTEAM1-733-display-audio-live-page

bbc · Dec 15, 2023 · e577a34 · e577a34
2 parents 468bf47 + 7c31886
commit e577a34
Show file tree

Hide file tree

Showing 13 changed files with 238 additions and 65 deletions.
diff --git a/scripts/lighthouseRun.sh b/scripts/lighthouseRun.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
 set -e
 
-npx -p lighthouse@11 lighthouse http://localhost:7080/news/articles/cn7k01xp8kxo --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run
-npx -p lighthouse@11 lighthouse http://localhost:7080/kyrgyz --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run
+npx -p lighthouse@11.3.0 lighthouse http://localhost:7080/news/articles/cn7k01xp8kxo --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run
+npx -p lighthouse@11.3.0 lighthouse http://localhost:7080/kyrgyz --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run
diff --git a/src/app/components/LiveLabel/__snapshots__/index.test.tsx.snap b/src/app/components/LiveLabel/__snapshots__/index.test.tsx.snap
@@ -19,8 +19,8 @@ exports[`LiveLabel should correctly render for RTL service 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -31,6 +31,13 @@ exports[`LiveLabel should correctly render for RTL service 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-0 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-1:before {
   content: '';
   position: absolute;
@@ -106,8 +113,8 @@ exports[`LiveLabel should render correctly with English live text 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -118,6 +125,13 @@ exports[`LiveLabel should render correctly with English live text 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-0 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-1:before {
   content: '';
   position: absolute;
@@ -211,8 +225,8 @@ exports[`LiveLabel should render correctly with English live text and children 1
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -223,6 +237,13 @@ exports[`LiveLabel should render correctly with English live text and children 1
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-0 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-1:before {
   content: '';
   position: absolute;
@@ -317,8 +338,8 @@ exports[`LiveLabel should render correctly with custom offscreen text 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -329,6 +350,13 @@ exports[`LiveLabel should render correctly with custom offscreen text 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-0 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-1:before {
   content: '';
   position: absolute;
@@ -422,8 +450,8 @@ exports[`LiveLabel should render correctly with localised live text 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -434,6 +462,13 @@ exports[`LiveLabel should render correctly with localised live text 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-0 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-1:before {
   content: '';
   position: absolute;

diff --git a/src/app/components/LiveLabel/index.styles.ts b/src/app/components/LiveLabel/index.styles.ts
@@ -22,28 +22,30 @@ const styles = {
       ...fontVariants.sansBold,
     }),
 
-  liveLabelCircle: ({ palette, spacings }: Theme) =>
+  liveLabelCircle: ({ mq, palette, spacings }: Theme) =>
     css({
       color: palette.LIVE_DARK,
       borderRadius: '50%',
       display: 'inline-block',
-      width: `${spacings.DOUBLE}rem`,
-      height: `${spacings.DOUBLE}rem`,
+      width: `${pixelsToRem(15)}rem`,
+      height: `${pixelsToRem(15)}rem`,
       background: `radial-gradient(circle, transparent 53%, ${palette.LIVE_DARK} 53.5%, ${palette.LIVE_DARK} 54%)`,
       marginInlineEnd: `${spacings.HALF}rem`,
       position: 'relative',
       transform: 'translate(0, 12%)',
+      [mq.GROUP_2_MIN_WIDTH]: {
+        width: `${spacings.DOUBLE}rem`,
+        height: `${spacings.DOUBLE}rem`,
+      },
     }),
 
-  firstPromo: ({ mq, spacings }: Theme) =>
+  firstPromo: ({ mq }: Theme) =>
     css({
-      [mq.GROUP_1_ONLY]: {
-        width: `${pixelsToRem(18)}rem`,
-        height: `${pixelsToRem(18)}rem`,
-      },
+      width: `${pixelsToRem(20)}rem`,
+      height: `${pixelsToRem(20)}rem`,
       [mq.GROUP_2_ONLY]: {
-        width: `${spacings.TRIPLE}rem`,
-        height: `${spacings.TRIPLE}rem`,
+        width: `${pixelsToRem(22)}rem`,
+        height: `${pixelsToRem(22)}rem`,
       },
       [mq.GROUP_3_MIN_WIDTH]: {
         width: `${pixelsToRem(28)}rem`,

diff --git a/src/app/legacy/components/RadioSchedule/ProgramCard/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/RadioSchedule/ProgramCard/__snapshots__/index.test.jsx.snap
@@ -106,8 +106,8 @@ exports[`ProgramCard should render correctly for live 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -118,6 +118,13 @@ exports[`ProgramCard should render correctly for live 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-8 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-9:before {
   content: '';
   position: absolute;
@@ -1367,8 +1374,8 @@ exports[`ProgramCard should render correctly without summary 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -1379,6 +1386,13 @@ exports[`ProgramCard should render correctly without summary 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-8 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-9:before {
   content: '';
   position: absolute;

diff --git a/src/app/legacy/components/RadioSchedule/__snapshots__/index.test.jsx.snap b/src/app/legacy/components/RadioSchedule/__snapshots__/index.test.jsx.snap
@@ -434,8 +434,8 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -446,6 +446,13 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-26 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-27:before {
   content: '';
   position: absolute;
@@ -1743,8 +1750,8 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -1755,6 +1762,13 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-26 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-27:before {
   content: '';
   position: absolute;

diff --git a/src/app/legacy/containers/Bulletin/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Bulletin/__snapshots__/index.test.jsx.snap
@@ -178,8 +178,8 @@ exports[`Bulletin Container snapshots should render a Live Radio bulletin correc
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -190,6 +190,13 @@ exports[`Bulletin Container snapshots should render a Live Radio bulletin correc
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-12 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-13:before {
   content: '';
   position: absolute;
@@ -626,8 +633,8 @@ exports[`Bulletin Container snapshots should render a Live TV bulletin correctly
   color: #006666;
   border-radius: 50%;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
   background: radial-gradient(circle, transparent 53%, #006666 53.5%, #006666 54%);
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
@@ -638,6 +645,13 @@ exports[`Bulletin Container snapshots should render a Live TV bulletin correctly
   transform: translate(0, 12%);
 }
 
+@media (min-width: 25rem) {
+  .emotion-12 {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .emotion-13:before {
   content: '';
   position: absolute;