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

package/dist/style.css

@@ -335,6 +335,9 @@ button {
 .bg-color--noc {
   background-color: var(--noc) !important;
 }
+.bg-color--wpb {
+  background-color: var(--wpb) !important;
+}
 /* BACKGROUND-COLOR 2 -------------------------------------------- */
 .bg-color--con-2 {
   background-color: var(--con-2) !important;
@@ -390,6 +393,9 @@ button {
 .bg-color--undeclared-2 {
   background-color: var(--undeclared-2) !important;
 }
+.bg-color--wpb-2 {
+  background-color: var(--wpb) !important;
+}
 /* FILL ----------------------------------------------------------- */
 .fill-color--con {
   fill: var(--con) !important;
@@ -448,6 +454,9 @@ button {
 .fill-color--noc {
   fill: var(--noc) !important;
 }
+.fill-color--wpb {
+  fill: var(--wpb) !important;
+}
 /* FILL 2 ----------------------------------------------------------- */
 .fill-color--con-2 {
   fill: var(--con-2) !important;
@@ -503,6 +512,9 @@ button {
 .fill-color--undeclared-2 {
   fill: var(--undeclared-2) !important;
 }
+.fill-color--wpb-2 {
+  fill: var(--wpb-2) !important;
+}
 /* STOP ----------------------------------------------------------- */
 .stop-color--con {
   stop-color: var(--con) !important;
@@ -561,6 +573,9 @@ button {
 .stop-color--noc {
   stop-color: var(--noc) !important;
 }
+.stop-color--wpb {
+  stop-color: var(--wpb) !important;
+}
 /* STROKE-COLOR --------------------------------------------------- */
 .stroke-color--con {
   stroke: var(--con) !important;
@@ -619,6 +634,9 @@ button {
 .stroke-color--noc {
   stroke: var(--noc) !important;
 }
+.stroke-color--wpb {
+  stroke: var(--wpb) !important;
+}
 /* COLOR ----------------------------------------------------------- */
 .color--con {
   color: var(--con) !important;
@@ -674,6 +692,9 @@ button {
 .color--undeclared {
   color: var(--undeclared) !important;
 }
+.color--wpb {
+  color: var(--wpb) !important;
+}
 /* BORDER-COLOR ----------------------------------------------------- */
 .border-color--con {
   border-color: var(--con) !important;
@@ -729,6 +750,9 @@ button {
 .border-color--undeclared {
   border-color: var(--undeclared) !important;
 }
+.border-color--wpb {
+  border-color: var(--wpb) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--con:before {
   background-color: var(--con) !important;
@@ -787,6 +811,9 @@ button {
 .before-color--undeclared:before {
   background-color: var(--undeclared) !important;
 }
+.before-color--wpb:before {
+  background-color: var(--wpb) !important;
+}
 /* BACKGROUND-COLOR -------------------------------------------- */
 .bg-color--left {
   background-color: var(--left) !important;
@@ -1083,6 +1110,7 @@ body {
   --other: #848484;
   --speaker: #848484;
   --noc: #c8c8c8;
+  --wpb: #7d0068;
   --undeclared: #e7e7e7;
   --con-2: #d4edff;
   --lab-2: #ffdbd4;
@@ -1101,6 +1129,7 @@ body {
   --ind-2: #e7e7e7;
   --other-2: #c8c8c8;
   --speaker-2: #c8c8c8;
+  --wpb-2: #d8b2d1;
   --undeclared-2: #e7e7e7;
   --left: #8b0000;
   --left-01: #e3b0a3;
@@ -1177,6 +1206,7 @@ body {
     --noc: #333333;
     --other: #707070;
     --speaker: #707070;
+    --wpb: #8c136e;
     --undeclared: #494949;
     --con-2: #244057;
     --lab-2: #592318;
@@ -1195,6 +1225,7 @@ body {
     --ind-2: #383838;
     --other-2: #333333;
     --speaker-2: #333333;
+    --wpb-2: #571644;
     --undeclared-2: #e7e7e7;
     --left: #8b0000;
     --left-01: #e3b0a3;
@@ -1266,17 +1297,23 @@ body {
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
-._bar_bf839_1 {
+._bar_1jxh9_1 {
   fill: var(--undeclared);
 }
 
-._label_bf839_5 {
+._label_1jxh9_5 {
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._backgroundRect_bf839_11 {
+._labelStroke_1jxh9_11 {
+  stroke: var(--primary-bg-color);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+._backgroundRect_1jxh9_17 {
   fill: var(--undeclared);
 }
 #gv-gradient-defs {
@@ -1865,17 +1902,17 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_lw99b_9::before {
+._borderTop_1b1s0_9::before {
   border-top: 1px solid var(--border-divider-color);
 }
 
-._section_lw99b_13 {
+._section_1b1s0_13 {
   position: relative;
   z-index: 0;
   margin-bottom: var(--space-8);
 }
 
-._section_lw99b_13::before {
+._section_1b1s0_13::before {
   display: block;
   content: "";
   position: absolute;
@@ -1888,31 +1925,31 @@ body.android {
   z-index: -1;
 }
 @media (min-width: 30em) {
-  ._section_lw99b_13::before {
+  ._section_1b1s0_13::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_lw99b_13::before {
+  ._section_1b1s0_13::before {
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_lw99b_13::before {
+  ._section_1b1s0_13::before {
     transform: translate(-180px);
     width: calc(100% + 200px);
     background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_lw99b_13::before {
+  ._section_1b1s0_13::before {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_lw99b_13._fullWidth_lw99b_56 {
+._section_1b1s0_13._fullWidth_1b1s0_56 {
   transform: translate(-10px);
   width: calc(100% + 20px);
   margin: 0;
@@ -1920,45 +1957,45 @@ body.android {
   background-color: var(--background-color);
 }
 @media (min-width: 30em) {
-  ._section_lw99b_13._fullWidth_lw99b_56 {
+  ._section_1b1s0_13._fullWidth_1b1s0_56 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_lw99b_13._fullWidth_lw99b_56 {
+  ._section_1b1s0_13._fullWidth_1b1s0_56 {
     transform: translate(-20px);
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_lw99b_13._fullWidth_lw99b_56 {
+  ._section_1b1s0_13._fullWidth_1b1s0_56 {
     transform: translate(-180px);
     width: calc(100% + 200px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_lw99b_13._fullWidth_lw99b_56 {
+  ._section_1b1s0_13._fullWidth_1b1s0_56 {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_lw99b_13._fullWidth_lw99b_56::before {
+._section_1b1s0_13._fullWidth_1b1s0_56::before {
   transform: none;
   width: 100%;
   height: 100%;
   background-color: transparent;
 }
 
-._header_lw99b_95 {
+._header_1b1s0_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_lw99b_95 {
+  body:not(.ios, .android) ._header_1b1s0_95 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -1966,13 +2003,13 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_lw99b_95 {
+  body:not(.ios, .android) ._header_1b1s0_95 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-body ._header_lw99b_95._fullWidth_lw99b_56 {
+body ._header_1b1s0_95._fullWidth_1b1s0_56 {
   position: absolute;
   top: 0;
   left: 0;
@@ -1983,21 +2020,22 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
   max-width: 100%;
 }
 @media (min-width: 71.25em) {
-  body ._header_lw99b_95._fullWidth_lw99b_56 {
+  body ._header_1b1s0_95._fullWidth_1b1s0_56 {
     margin-bottom: 0;
   }
 }
 
-._content_lw99b_132 {
+._content_1b1s0_132 {
   position: relative;
   padding-top: 0;
+  z-index: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_lw99b_132 {
+  ._content_1b1s0_132 {
     padding-top: var(--space-2);
   }
-  ._content_lw99b_132::before {
+  ._content_1b1s0_132::before {
     content: "";
     position: absolute;
     top: 0;
@@ -2010,11 +2048,11 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
   }
 }
 
-._content_lw99b_132._fullWidth_lw99b_56 {
+._content_1b1s0_132._fullWidth_1b1s0_56 {
   padding-top: 0;
 }
 
-._content_lw99b_132._fullWidth_lw99b_56::before {
+._content_1b1s0_132._fullWidth_1b1s0_56::before {
   display: none;
 }._text_lo5h3_1 {
     font-family: var(--text-sans);
@@ -2119,11 +2157,11 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
 ._path_1dms8_8 {
   pointer-events: none;
 }
-._searchContainer_1883t_1 {
+._searchContainer_116es_1 {
   position: relative;
 }
 
-._input_1883t_5 {
+._input_116es_5 {
   width: 100%;
   color: var(--primary-text-color);
   font-family: var(--text-sans);
@@ -2141,7 +2179,11 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
   box-sizing: border-box;
 }
 
-._searchIcon_1883t_23 {
+input:focus {
+  border: 1px solid var(--primary-text-color);
+}
+
+._searchIcon_116es_27 {
   position: absolute;
   top: 11px;
   left: 12px;
@@ -2150,25 +2192,28 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
   pointer-events: none;
 }
 
-._clearButton_1883t_32 {
+._clearButton_116es_36 {
   position: absolute;
   top: 3px;
   right: 4px;
 }
 
-._suggestions_1883t_38 {
+._suggestions_116es_42 {
   position: absolute;
   width: 100%;
-  z-index: 1;
+  margin-top: var(--space-2);
+  z-index: 100;
 
   background-color: var(--primary-bg-color);
   border: 1px solid var(--border-divider-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: clip;
 
   pointer-events: all;
 }
 
-._suggestion_1883t_38 {
+._suggestion_116es_42 {
   cursor: pointer;
   padding: 6px 8px;
   background-color: var(--primary-bg-color);
@@ -2179,11 +2224,11 @@ body ._header_lw99b_95._fullWidth_lw99b_56 {
   line-height: var(--sans-line-height);
 }
 
-._selected_1883t_61 {
+._selected_116es_68 {
   background-color: var(--secondary-bg-color);
 }
 
-._highlighted_1883t_65 {
+._highlighted_116es_72 {
   color: var(--highlighted-text-color);
   background-color: var(--highlight-color);
 }
@@ -2572,21 +2617,19 @@ body.android {
 ._button_1qhlz_7:hover:enabled {
   background-color: var(--news-grey-05);
 }
-._container_aj5oa_1 {
+._container_1ta61_1 {
   width: 100%;
   height: 100%;
   position: relative;
-
-  border: 1px solid var(--border-divider-color);
 }
 
-._svg_aj5oa_9 {
+._svg_1ta61_7 {
   fill: none;
   stroke: #121212;
   stroke-width: 1;
 }
 
-._controls_aj5oa_15 {
+._controls_1ta61_13 {
   position: absolute;
   top: 0;
   left: 0;
@@ -2594,43 +2637,11 @@ body.android {
   height: 100%;
 }
 
-._zoomControl_aj5oa_23 {
+._zoomControl_1ta61_21 {
   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;
 }
@@ -2639,13 +2650,13 @@ body.android {
   --top-inset: 58px;
 }
 
-._mapContainer_aknz0_9 {
+._mapContainer_y5eeh_9 {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-._helpTextContainer_aknz0_15 {
+._helpTextContainer_y5eeh_15 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -2659,7 +2670,7 @@ body.android {
   transition: opacity 0.2s linear;
 }
 
-._helpText_aknz0_15 {
+._helpText_y5eeh_15 {
   margin-top: var(--space-5);
   font-family: var(--text-sans);
   font-weight: 700;
@@ -2670,23 +2681,42 @@ body.android {
   margin-bottom: var(--space-3);
 }
 
-._highlight_aknz0_40 {
+._highlight_y5eeh_40 {
   color: #121212 !important;
   text-shadow: 1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px white;
+}._zoomControl_13wd1_1 {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
 }
 
-._zoomControl_aknz0_45 {
-  position: absolute;
-  top: var(--space-10);
-  right: 10px;
-  z-index: 10;
+._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;
 }
-@media (min-width: 71.25em) {
-  ._zoomControl_aknz0_45 {
-    top: var(--space-5);
-    right: var(--space-5);
-  }
-}body {
+
+._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;
 }
 

package/package.json

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