@guardian/interactive-component-library 0.1.0-alpha.32 → 0.1.0-alpha.34

package/dist/style.css

@@ -1064,34 +1064,35 @@ button {
   background-color: var(--new-group-01) !important;
 }
 body {
-  --border-divider-color: #DCDCDC;
+  --border-divider-color: #dcdcdc;
   --primary-text-color: #121212;
   --secondary-text-color: #707070;
   --secondary-text-color-alt: #707070;
-  --primary-bg-color: #FFFFFF;
-  --secondary-bg-color: #F3F3F3;
+  --tertiary-text-color: #fff;
+  --primary-bg-color: #ffffff;
+  --secondary-bg-color: #f3f3f3;
   --tertiary-bg-color: #f6f6f6;
-  --quaternary-bg-color: #FFF;
+  --quaternary-bg-color: #fff;
   --primary-line-color: #333333;
-  --secondary-line-color: #DCDCDC;
+  --secondary-line-color: #dcdcdc;
   --primary-button-color: #121212;
-  --primary-button-text-color: #FFFFFF;
+  --primary-button-text-color: #ffffff;
   --primary-button-highlight-color: #333;
   --highlight-color: #ffe500;
   --highlighted-text-color: #121212;
-  --info-color: #00B2FF;
+  --info-color: #00b2ff;
   --news-core-01: #005689;
-  --news-core-02: #0094DA;
-  --news-core-03: #C70000;
-  --news-core-04: #23B4A9;
+  --news-core-02: #0094da;
+  --news-core-03: #c70000;
+  --news-core-04: #23b4a9;
   --news-core-05: #494949;
   --news-core-06: #cca36e;
   --news-grey-01: #121212;
   --news-grey-02: #707070;
-  --news-grey-03: #A1A1A1;
-  --news-grey-04: #BABABA;
-  --news-grey-05: #DCDCDC;
-  --news-grey-06: #F3F3F3;
+  --news-grey-03: #a1a1a1;
+  --news-grey-04: #bababa;
+  --news-grey-05: #dcdcdc;
+  --news-grey-06: #f3f3f3;
   --con: #0077b6;
   --lab: #c70000;
   --libdem: #e05e00;
@@ -1162,29 +1163,30 @@ body {
   body.ios,
   body.android {
     --border-divider-color: #606060;
-    --primary-text-color: #DCDCDC;
-    --secondary-text-color: #C8C8C8;
+    --primary-text-color: #dcdcdc;
+    --secondary-text-color: #c8c8c8;
     --secondary-text-color-alt: #999999;
-    --primary-bg-color: #1A1A1A;
+    --tertiary-text-color: #1a1a1a;
+    --primary-bg-color: #1a1a1a;
     --secondary-bg-color: #383838;
-    --tertiary-bg-color: #1A1A1A;
+    --tertiary-bg-color: #1a1a1a;
     --quaternary-bg-color: #121212;
-    --primary-line-color: #DCDCDC;
+    --primary-line-color: #dcdcdc;
     --secondary-line-color: #707070;
     --primary-button-color: #383838;
-    --primary-button-text-color: #DCDCDC;
+    --primary-button-text-color: #dcdcdc;
     --primary-button-highlight-color: #707070;
-    --highlight-color: #CDA500;
-    --info-color: #0077B6;
-    --news-core-01: #0077B6;
-    --news-core-02: #00B2FF;
-    --news-core-03: #E33824;
-    --news-core-04: #23B4A9;
+    --highlight-color: #cda500;
+    --info-color: #0077b6;
+    --news-core-01: #0077b6;
+    --news-core-02: #00b2ff;
+    --news-core-03: #e33824;
+    --news-core-04: #23b4a9;
     --news-core-05: #494949;
     --news-core-06: #cca36e;
-    --news-grey-01: #DCDCDC;
-    --news-grey-02: #C8C8C8;
-    --news-grey-03: #A1A1A1;
+    --news-grey-01: #dcdcdc;
+    --news-grey-02: #c8c8c8;
+    --news-grey-03: #a1a1a1;
     --news-grey-04: #707070;
     --news-grey-05: #494949;
     --news-grey-06: #383838;
@@ -1902,17 +1904,18 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_1b1s0_9::before {
+._borderTop_1yz7f_9::before {
   border-top: 1px solid var(--border-divider-color);
+  z-index: 1;
 }
 
-._section_1b1s0_13 {
+._section_1yz7f_14 {
   position: relative;
   z-index: 0;
   margin-bottom: var(--space-8);
 }
 
-._section_1b1s0_13::before {
+._section_1yz7f_14::before {
   display: block;
   content: "";
   position: absolute;
@@ -1925,31 +1928,31 @@ body.android {
   z-index: -1;
 }
 @media (min-width: 30em) {
-  ._section_1b1s0_13::before {
+  ._section_1yz7f_14::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1b1s0_13::before {
+  ._section_1yz7f_14::before {
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1b1s0_13::before {
+  ._section_1yz7f_14::before {
     transform: translate(-180px);
     width: calc(100% + 200px);
     background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1b1s0_13::before {
+  ._section_1yz7f_14::before {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_1b1s0_13._fullWidth_1b1s0_56 {
+._section_1yz7f_14._fullWidth_1yz7f_57 {
   transform: translate(-10px);
   width: calc(100% + 20px);
   margin: 0;
@@ -1957,45 +1960,45 @@ body.android {
   background-color: var(--background-color);
 }
 @media (min-width: 30em) {
-  ._section_1b1s0_13._fullWidth_1b1s0_56 {
+  ._section_1yz7f_14._fullWidth_1yz7f_57 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1b1s0_13._fullWidth_1b1s0_56 {
+  ._section_1yz7f_14._fullWidth_1yz7f_57 {
     transform: translate(-20px);
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1b1s0_13._fullWidth_1b1s0_56 {
+  ._section_1yz7f_14._fullWidth_1yz7f_57 {
     transform: translate(-180px);
     width: calc(100% + 200px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1b1s0_13._fullWidth_1b1s0_56 {
+  ._section_1yz7f_14._fullWidth_1yz7f_57 {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_1b1s0_13._fullWidth_1b1s0_56::before {
+._section_1yz7f_14._fullWidth_1yz7f_57::before {
   transform: none;
   width: 100%;
   height: 100%;
   background-color: transparent;
 }
 
-._header_1b1s0_95 {
+._header_1yz7f_96 {
   color: var(--primary-text-color);
   padding-top: var(--space-2);
   margin-bottom: var(--space-5);
 }
 
 @media (min-width: 71.25em) {
-  body:not(.ios, .android) ._header_1b1s0_95 {
+  body:not(.ios, .android) ._header_1yz7f_96 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -2003,13 +2006,13 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_1b1s0_95 {
+  body:not(.ios, .android) ._header_1yz7f_96 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-body ._header_1b1s0_95._fullWidth_1b1s0_56 {
+body ._header_1yz7f_96._fullWidth_1yz7f_57 {
   position: absolute;
   top: 0;
   left: 0;
@@ -2020,22 +2023,22 @@ body ._header_1b1s0_95._fullWidth_1b1s0_56 {
   max-width: 100%;
 }
 @media (min-width: 71.25em) {
-  body ._header_1b1s0_95._fullWidth_1b1s0_56 {
+  body ._header_1yz7f_96._fullWidth_1yz7f_57 {
     margin-bottom: 0;
   }
 }
 
-._content_1b1s0_132 {
+._content_1yz7f_133 {
   position: relative;
   padding-top: 0;
   z-index: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_1b1s0_132 {
+  ._content_1yz7f_133 {
     padding-top: var(--space-2);
   }
-  ._content_1b1s0_132::before {
+  ._content_1yz7f_133::before {
     content: "";
     position: absolute;
     top: 0;
@@ -2048,11 +2051,11 @@ body ._header_1b1s0_95._fullWidth_1b1s0_56 {
   }
 }
 
-._content_1b1s0_132._fullWidth_1b1s0_56 {
+._content_1yz7f_133._fullWidth_1yz7f_57 {
   padding-top: 0;
 }
 
-._content_1b1s0_132._fullWidth_1b1s0_56::before {
+._content_1yz7f_133._fullWidth_1yz7f_57::before {
   display: none;
 }._text_lo5h3_1 {
     font-family: var(--text-sans);
@@ -2418,42 +2421,51 @@ body.android {
   ._grid_xps7m_9[data-grid-type=large] > *:nth-child(2n+1):nth-last-child(-n+2), ._grid_xps7m_9[data-grid-type=large] > *:nth-child(2n+1):nth-last-child(-n+2) ~ * {
     border-bottom: 0;
   }
-}._transitionContainer_wws3j_1 {
+}._transitionContainer_15ioc_1 {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
   transition: all 300ms ease-in-out;
   z-index: 9999;
+  pointer-events: none;
+}
+
+._blur_15ioc_12 {
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
 }
 
-._modalBox_wws3j_13 {
+._modalBox_15ioc_17 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   transition: all 300ms ease-in-out;
+  pointer-events: all;
 }
 
-._enter_wws3j_21,
-._exitDone_wws3j_22 {
-  background-color: transparent;
-  backdrop-filter: none;
+._enter_15ioc_26,
+._exitDone_15ioc_27 {
+  ._blur_15ioc_12 {
+    background-color: transparent;
+    backdrop-filter: none;
+  }
 
-  ._modalBox_wws3j_13 {
+  ._modalBox_15ioc_17 {
     transform: translateY(100%);
   }
 }
 
-._enterActive_wws3j_31,
-._exit_wws3j_22 {
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
+._enterActive_15ioc_38,
+._exit_15ioc_27 {
+  ._blur_15ioc_12 {
+    background-color: rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(4px);
+  }
 
-  ._modalBox_wws3j_13 {
+  ._modalBox_15ioc_17 {
     transform: translateY(0);
   }
 }
@@ -2650,40 +2662,48 @@ body.android {
   --top-inset: 58px;
 }
 
-._mapContainer_y5eeh_9 {
+._mapContainer_qlxau_9 {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-._helpTextContainer_y5eeh_15 {
+._helpTextContainer_qlxau_15 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 9;
+  z-index: 1;
   pointer-events: none;
+  background-color: rgba(18, 18, 18, 0.4);
   display: flex;
   justify-content: center;
-  align-items: flex-end;
+  align-items: center;
   transition: opacity 0.2s linear;
 }
 
-._helpText_y5eeh_15 {
+._helpText_qlxau_15 {
   margin-top: var(--space-5);
   font-family: var(--text-sans);
   font-weight: 700;
-  font-size: var(--sans-small);
+  font-size: var(--sans-large);
   line-height: var(--sans-line-height);
-  color: #a1a1a1 !important;
-  transition: all 0.2s linear;
+  color: var(--tertiary-text-color) !important;
   margin-bottom: var(--space-3);
 }
 
-._highlight_y5eeh_40 {
-  color: #121212 !important;
-  text-shadow: 1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px white;
+._desktopHelpText_qlxau_40 {
+  display: none;
+}
+
+@media (any-hover: hover) {
+  ._desktopHelpText_qlxau_40 {
+    display: block;
+  }
+  ._mobileHelpText_qlxau_48 {
+    display: none;
+  }
 }._zoomControl_13wd1_1 {
   display: inline-flex;
   flex-direction: column;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.32",
+  "version": "v0.1.0-alpha.34",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",