@guardian/interactive-component-library 0.1.0-alpha.28 → 0.1.0-alpha.30

package/dist/style.css

@@ -1865,13 +1865,17 @@ body.android {
   --top-inset: 58px;
 }
 
-._section_4s2t4_9 {
+._borderTop_lw99b_9::before {
+  border-top: 1px solid var(--border-divider-color);
+}
+
+._section_lw99b_13 {
   position: relative;
   z-index: 0;
   margin-bottom: var(--space-8);
 }
 
-._section_4s2t4_9::before {
+._section_lw99b_13::before {
   display: block;
   content: "";
   position: absolute;
@@ -1884,42 +1888,77 @@ body.android {
   z-index: -1;
 }
 @media (min-width: 30em) {
-  ._section_4s2t4_9::before {
+  ._section_lw99b_13::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_4s2t4_9::before {
+  ._section_lw99b_13::before {
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_4s2t4_9::before {
+  ._section_lw99b_13::before {
     transform: translate(-180px);
     width: calc(100% + 200px);
     background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_4s2t4_9::before {
+  ._section_lw99b_13::before {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._borderTop_4s2t4_52::before {
-  border-top: 1px solid var(--border-divider-color);
+._section_lw99b_13._fullWidth_lw99b_56 {
+  transform: translate(-10px);
+  width: calc(100% + 20px);
+  margin: 0;
+  padding: 0;
+  background-color: var(--background-color);
+}
+@media (min-width: 30em) {
+  ._section_lw99b_13._fullWidth_lw99b_56 {
+    transform: translate(-20px);
+    width: calc(100% + 40px);
+  }
+}
+@media (min-width: 46.25em) {
+  ._section_lw99b_13._fullWidth_lw99b_56 {
+    transform: translate(-20px);
+    width: calc(100% + 60px);
+  }
+}
+@media (min-width: 71.25em) {
+  ._section_lw99b_13._fullWidth_lw99b_56 {
+    transform: translate(-180px);
+    width: calc(100% + 200px);
+  }
+}
+@media (min-width: 81.25em) {
+  ._section_lw99b_13._fullWidth_lw99b_56 {
+    transform: translate(-260px);
+    width: calc(100% + 280px);
+  }
+}
+
+._section_lw99b_13._fullWidth_lw99b_56::before {
+  transform: none;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
 }
 
-._header_4s2t4_56 {
+._header_lw99b_95 {
   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_4s2t4_56 {
+  body:not(.ios, .android) ._header_lw99b_95 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -1927,23 +1966,38 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_4s2t4_56 {
+  body:not(.ios, .android) ._header_lw99b_95 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-._content_4s2t4_77 {
+body ._header_lw99b_95._fullWidth_lw99b_56 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  transform: none;
+  padding-top: 0;
+  margin-bottom: var(--space-2);
+  max-width: 100%;
+}
+@media (min-width: 71.25em) {
+  body ._header_lw99b_95._fullWidth_lw99b_56 {
+    margin-bottom: 0;
+  }
+}
+
+._content_lw99b_132 {
   position: relative;
   padding-top: 0;
   color: var(--primary-text-color);
 }
-
 @media (min-width: 71.25em) {
-  body:not(.ios, .android) ._content_4s2t4_77 {
+  ._content_lw99b_132 {
     padding-top: var(--space-2);
   }
-  body:not(.ios, .android) ._content_4s2t4_77::before {
+  ._content_lw99b_132::before {
     content: "";
     position: absolute;
     top: 0;
@@ -1954,6 +2008,14 @@ body.android {
     background-color: var(--background-color);
     z-index: -2;
   }
+}
+
+._content_lw99b_132._fullWidth_lw99b_56 {
+  padding-top: 0;
+}
+
+._content_lw99b_132._fullWidth_lw99b_56::before {
+  display: none;
 }._text_lo5h3_1 {
     font-family: var(--text-sans);
     fill: var(--primary-text-color);
@@ -2030,27 +2092,6 @@ body.android {
   color: var(--primary-text-color);
   margin-top: var(--space-2);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._path_1cwd5_9 {
-  stroke: var(--secondary-line-color);
-  fill: none;
-}._container_cyrny_1 {
-  width: 100%;
-  height: 100%;
-}
-
-._svg_cyrny_6 {
-  fill: none;
-  stroke: #121212;
-  stroke-width: 1;
-}
 ._container_azu4a_1 {
   background-color: var(--quaternary-bg-color);
   border-radius: 4px;
@@ -2371,40 +2412,44 @@ body.android {
     transform: translateY(0);
   }
 }
-._container_1enis_1 {
+._container_6u92g_1 {
   position: relative;
-  display: inline-block;
 }
 
-._button_1enis_6 {
+._button_6u92g_5 {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
+  float: left;
 
   border: 1px solid var(--border-divider-color);
   border-radius: 999px;
   padding: var(--space-2) var(--space-3);
 }
 
-._button_1enis_6:hover:enabled {
+._button_6u92g_5:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._icon_1enis_22 {
+._icon_6u92g_22 {
   width: 17px;
   height: 17px;
 }
 
-._title_1enis_27 {
+._title_6u92g_27 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-medium);
   line-height: var(--sans-line-height);
 }
 
-._popout_1enis_34 {
+._clearFix_6u92g_34 {
+  clear: both;
+}
+
+._popout_6u92g_38 {
   min-width: 100%;
   background-color: var(--secondary-bg-color);
 
@@ -2421,27 +2466,27 @@ body.android {
   gap: var(--space-2);
 }
 
-._hint_1enis_51 {
+._hint_6u92g_55 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._groupHeader_1enis_58 {
+._groupHeader_6u92g_62 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_1enis_65 {
+._option_6u92g_69 {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
-  max-width: 175px;
+  min-height: 40px;
 
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -2451,17 +2496,21 @@ body.android {
   background-color: var(--primary-bg-color);
 }
 
-._option_1enis_65:hover:enabled {
+._option_6u92g_69._selected_6u92g_85 {
+  border: 1px solid var(--primary-text-color);
+}
+
+._option_6u92g_69:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIcon_1enis_86 {
+._optionIcon_6u92g_94 {
   width: 23px;
   height: 23px;
 }
 
-._optionTitle_1enis_91 {
+._optionTitle_6u92g_99 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
@@ -2469,20 +2518,20 @@ body.android {
   font-weight: 700;
 }
 
-._optionDescription_1enis_99 {
+._optionDescription_6u92g_107 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._checkmark_1enis_106 {
+._checkmark_6u92g_114 {
   position: absolute;
   top: 4px;
   right: 6px;
 }
 
-._checkmarkPath_1enis_112 {
+._checkmarkPath_6u92g_120 {
   fill: var(--primary-text-color);
 }
 body {
@@ -2493,6 +2542,158 @@ body.android {
   --top-inset: 58px;
 }
 
+._path_1cwd5_9 {
+  stroke: var(--secondary-line-color);
+  fill: none;
+}._zoomControl_1qhlz_1 {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+._button_1qhlz_7 {
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  padding: 0;
+
+  border: 1px solid var(--border-divider-color);
+  border-radius: 999px;
+
+  background-color: var(--primary-bg-color);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+}
+
+._button_1qhlz_7:hover:enabled {
+  background-color: var(--news-grey-05);
+}
+._container_aj5oa_1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  border: 1px solid var(--border-divider-color);
+}
+
+._svg_aj5oa_9 {
+  fill: none;
+  stroke: #121212;
+  stroke-width: 1;
+}
+
+._controls_aj5oa_15 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+._zoomControl_aj5oa_23 {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+._zoomControl_13wd1_1 {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+._button_13wd1_7 {
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  padding: 0;
+
+  border: 1px solid var(--border-divider-color);
+  border-radius: 999px;
+
+  background-color: var(--primary-bg-color);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+}
+
+._button_13wd1_7:hover:enabled {
+  background-color: var(--news-grey-05);
+}
+
+._button_13wd1_7:disabled {
+  cursor: auto;
+  background-color: var(--tertiary-bg-color);
+}
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._mapContainer_aknz0_9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._helpTextContainer_aknz0_15 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  transition: opacity 0.2s linear;
+}
+
+._helpText_aknz0_15 {
+  margin-top: var(--space-5);
+  font-family: var(--text-sans);
+  font-weight: 700;
+  font-size: var(--sans-small);
+  line-height: var(--sans-line-height);
+  color: #a1a1a1 !important;
+  transition: all 0.2s linear;
+  margin-bottom: var(--space-3);
+}
+
+._highlight_aknz0_40 {
+  color: #121212 !important;
+  text-shadow: 1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px white;
+}
+
+._zoomControl_aknz0_45 {
+  position: absolute;
+  top: var(--space-10);
+  right: 10px;
+  z-index: 10;
+}
+@media (min-width: 71.25em) {
+  ._zoomControl_aknz0_45 {
+    top: var(--space-5);
+    right: var(--space-5);
+  }
+}body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
 ._coalitionsWrapper_4egbd_9 {
   max-width: 100%;
   position: relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.28",
+  "version": "v0.1.0-alpha.30",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -40,12 +40,11 @@
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "d3-transition": "^3.0.1",
     "d3-zoom": "^3.0.0",
-    "preact": "^10.12.1"
+    "preact": "10.21.0"
   },
   "lint-staged": {
-    "*.{js,jsx}": "eslint --fix \"src/**/*.{js,jsx}\"",
+    "*.{js,jsx}": "eslint --fix",
     "*.{js,jsx,json,css,scss,md}": "prettier --write"
   }
 }