@guardian/interactive-component-library 0.1.0-alpha.20 → 0.1.0-alpha.21

package/dist/style.css

@@ -702,6 +702,12 @@ button {
 .bg-color--ni {
   background-color: var(--ni) !important;
 }
+.bg-color--other {
+  background-color: var(--other) !important;
+}
+.bg-color--undeclared {
+  background-color: var(--undeclared) !important;
+}
 /* FILL ----------------------------------------------------------- */
 .fill-color--left {
   fill: var(--left) !important;
@@ -727,6 +733,9 @@ button {
 .fill-color--ni {
   fill: var(--ni) !important;
 }
+.fill-color--other {
+  fill: var(--other) !important;
+}
 /* STROKE-COLOR --------------------------------------------------- */
 .stroke-color--left {
   stroke: var(--left) !important;
@@ -752,6 +761,9 @@ button {
 .stroke-color--ni {
   stroke: var(--ni) !important;
 }
+.stroke-color--other {
+  stroke: var(--other) !important;
+}
 /* COLOR ----------------------------------------------------------- */
 .color--left {
   color: var(--left) !important;
@@ -777,6 +789,9 @@ button {
 .color--ni {
   color: var(--ni) !important;
 }
+.color--other {
+  color: var(--other) !important;
+}
 /* BORDER-COLOR ----------------------------------------------------- */
 .border-color--left {
   border-color: var(--left) !important;
@@ -802,6 +817,9 @@ button {
 .border-color--ni {
   border-color: var(--ni) !important;
 }
+.border-color--other {
+  border-color: var(--other) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--left:before {
   background-color: var(--left) !important;
@@ -827,6 +845,9 @@ button {
 .before-color--ni:before {
   background-color: var(--ni) !important;
 }
+.before-color--other:before {
+  background-color: var(--other) !important;
+}
 body {
   --border-divider-color: #DCDCDC;
   --primary-text-color: #121212;
@@ -883,7 +904,8 @@ body {
   --ecr: #0079B7;
   --id:#DC559D;
   --ni: #333333;
-  --undeclared: #848484;
+  --other: #707070;
+  --undeclared: #ededed;
 }
 @media (prefers-color-scheme: dark) {
   body.ios,
@@ -941,7 +963,8 @@ body {
     --ecr: #009ae1;
     --id: #DC559D;
     --ni: #A1A1A1;
-    --undeclared: #848484;
+    --other: #707070;
+    --undeclared: #ededed;
   }
 }._svg_b5io0_1 {
   display: block;
@@ -1676,22 +1699,21 @@ body.android {
 
 ._bar_lo5h3_10 {
 }
-._text_vd5ly_1 {
-  font-family: var(--text-sans);
-  font-size: var(--sans-small);
-  line-height: var(--sans-line-height);
-  font-weight: 700;
-  margin-left: var(--space-1);
-}
-
-._container_vd5ly_9 {
+._container_1snyq_1 {
   font-weight: 700;
   min-width: 290px;
   max-width: 530px;
-  margin-right: 6px;
 }
 
-._title_vd5ly_16 {
+._img_1snyq_7 {
+  height: 140px;
+  width: 140px;
+  border-radius: 50%;
+  float: right;
+  margin-left: var(--space-2);
+}
+
+._title_1snyq_15 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
@@ -1705,57 +1727,45 @@ body.android {
     border-radius: 50px;
     display: block;
   }
-
 }
 
-._subtitle_vd5ly_33 {
+._subtitle_1snyq_31 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
+  line-height: var(--body-line-height);
   font-style: italic;
   font-weight: 500;
-  line-height: 1.3;
   margin-bottom: 6px;
-
 }
 
-._blurb_vd5ly_44 {
+._small_1snyq_41 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
+  line-height: var(--body-line-height);
   color: var(--primary-text-color);
-
-  font-weight: 300;
-  margin-right: 6px;
-  line-height: 1.2;
-
-}
-
-._leftCell_vd5ly_55,._rightCell_vd5ly_55 {
-  display: inline-block;
-  vertical-align: top;
-}
-
-._leftCell_vd5ly_55 {
-  width: calc(100% - 150px);
-}
-
-
-
-._rightCell_vd5ly_55 {
-  vertical-align: top;
+  font-weight: 700;
+  font-style: normal;
+  margin-top: var(--space-1);
 }
 
-
-._mugshot_vd5ly_71 {
-  height: 140px;
-  width: 140px;
-
-  border-radius: 50%;
-
+._blurb_1snyq_51 {
+  font-family: var(--text-serif);
+  font-size: var(--body-small);
+  line-height: var(--body-line-height);
+  color: var(--primary-text-color);
+  font-weight: 300;
 }
 
-
-body {
+._footnote_1snyq_59 {
+  font-family: var(--text-serif);
+  font-size: var(--body-small);
+  line-height: var(--body-line-height);
+  font-weight: 300;
+  font-style: italic;
+  color: var(--primary-text-color);
+  margin-top: var(--space-2);
+}body {
   --top-inset: 0;
 }
 
@@ -1871,29 +1881,51 @@ body.android {
   color: var(--highlighted-text-color);
   background-color: var(--highlight-color);
 }
-._refreshIndicator_u6lji_1 {
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._refreshIndicator_3z0ji_9 {
   display: flex;
   flex-direction: row;
   column-gap: var(--space-0);
-  align-items: center;
+  align-items: stretch;
+  flex-wrap: wrap;
 }
 
-._liveText_u6lji_8,
-._refreshText_u6lji_9 {
+._icon_3z0ji_17 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 1px;
+  font-size: var(--sans-small);
+  line-height: var(--sans-line-height);
+}
+
+._liveText_3z0ji_26,
+._refreshText_3z0ji_27 {
   font-family: var(--text-sans);
   color: var(--secondary-text-color);
   line-height: var(--sans-line-height);
   font-size: var(--sans-small);
 }
 
-._liveText_u6lji_8 {
+._liveText_3z0ji_26 {
   font-weight: 700;
 }
 
-._refreshText_u6lji_9 {
+._refreshText_3z0ji_27 {
   margin-left: var(--space-0);
 }
-body {
+@media (min-width: 71.25em) and (max-width: 81.24em) {
+  ._refreshText_3z0ji_27 {
+    flex-basis: 100%;
+  }
+}body {
   --top-inset: 0;
 }
 
@@ -2074,7 +2106,105 @@ body.android {
     transform: translateY(0);
   }
 }
-body {
+._button_xeyqm_1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+
+  border: 1px solid var(--border-divider-color);
+  border-radius: 999px;
+  padding: var(--space-2) var(--space-3);
+}
+
+._button_xeyqm_1:hover:enabled {
+  background-color: var(--news-grey-05);
+  cursor: pointer;
+}
+
+._icon_xeyqm_17 {
+  width: 17px;
+  height: 17px;
+}
+
+._title_xeyqm_22 {
+  color: var(--primary-text-color);
+  font-family: var(--text-sans);
+  font-size: var(--sans-medium);
+  line-height: var(--sans-line-height);
+}
+
+._popout_xeyqm_29 {
+  background-color: var(--secondary-bg-color);
+
+  border: 1px solid var(--border-divider-color);
+  border-radius: 8px;
+
+  position: absolute;
+  margin-top: var(--space-2);
+  padding: var(--space-2);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+._hint_xeyqm_44 {
+  color: var(--secondary-text-color);
+  font-family: var(--text-sans);
+  font-size: var(--sans-xsmall);
+  line-height: var(--sans-line-height);
+}
+
+._option_xeyqm_51 {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 175px;
+
+  border: 1px solid var(--border-divider-color);
+  border-radius: 8px;
+  padding: var(--space-1) var(--space-2);
+
+  background-color: var(--primary-bg-color);
+}
+
+._option_xeyqm_51:hover:enabled {
+  background-color: var(--news-grey-05);
+  cursor: pointer;
+}
+
+._optionIcon_xeyqm_71 {
+  width: 23px;
+  height: 23px;
+}
+
+._optionTitle_xeyqm_76 {
+  color: var(--primary-text-color);
+  font-family: var(--text-sans);
+  font-size: var(--sans-xsmall);
+  line-height: var(--sans-line-height);
+  font-weight: 700;
+}
+
+._optionDescription_xeyqm_84 {
+  color: var(--primary-text-color);
+  font-family: var(--text-sans);
+  font-size: var(--sans-xsmall);
+  line-height: var(--sans-line-height);
+}
+
+._checkmark_xeyqm_91 {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+}
+
+._checkmarkPath_xeyqm_97 {
+  fill: var(--primary-text-color);
+}body {
   --top-inset: 0;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.20",
+  "version": "v0.1.0-alpha.21",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
-    "node": "18"
+    "node": ">=18"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -38,9 +38,9 @@
   "peerDependencies": {
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
-    "d3-zoom": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
     "preact": "^10.12.1"
   },
   "lint-staged": {