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

package/dist/style.css

@@ -299,8 +299,8 @@ button {
 .bg-color--dup {
   background-color: var(--dup) !important;
 }
-.bg-color--alliance {
-  background-color: var(--alliance) !important;
+.bg-color--al {
+  background-color: var(--al) !important;
 }
 .bg-color--uup {
   background-color: var(--uup) !important;
@@ -308,11 +308,11 @@ button {
 .bg-color--sdlp {
   background-color: var(--sdlp) !important;
 }
-.bg-color--plaid {
-  background-color: var(--plaid) !important;
+.bg-color--pc {
+  background-color: var(--pc) !important;
 }
-.bg-color--sinnfein {
-  background-color: var(--sinnfein) !important;
+.bg-color--sf {
+  background-color: var(--sf) !important;
 }
 .bg-color--reform {
   background-color: var(--reform) !important;
@@ -326,8 +326,8 @@ button {
 .bg-color--speaker {
   background-color: var(--speaker) !important;
 }
-.bg-color--change {
-  background-color: var(--change) !important;
+.bg-color--tig {
+  background-color: var(--tig) !important;
 }
 .bg-color--undeclared {
   background-color: var(--undeclared) !important;
@@ -357,8 +357,8 @@ button {
 .fill-color--dup {
   fill: var(--dup) !important;
 }
-.fill-color--alliance {
-  fill: var(--alliance) !important;
+.fill-color--al {
+  fill: var(--al) !important;
 }
 .fill-color--uup {
   fill: var(--uup) !important;
@@ -366,11 +366,11 @@ button {
 .fill-color--sdlp {
   fill: var(--sdlp) !important;
 }
-.fill-color--plaid {
-  fill: var(--plaid) !important;
+.fill-color--pc {
+  fill: var(--pc) !important;
 }
-.fill-color--sinnfein {
-  fill: var(--sinnfein) !important;
+.fill-color--sf {
+  fill: var(--sf) !important;
 }
 .fill-color--reform {
   fill: var(--reform) !important;
@@ -384,8 +384,8 @@ button {
 .fill-color--speaker {
   fill: var(--speaker) !important;
 }
-.fill-color--change {
-  fill: var(--change) !important;
+.fill-color--tig {
+  fill: var(--tig) !important;
 }
 .fill-color--undeclared {
   fill: var(--undeclared) !important;
@@ -415,8 +415,8 @@ button {
 .stop-color--dup {
   stop-color: var(--dup) !important;
 }
-.stop-color--alliance {
-  stop-color: var(--alliance) !important;
+.stop-color--al {
+  stop-color: var(--al) !important;
 }
 .stop-color--uup {
   stop-color: var(--uup) !important;
@@ -424,11 +424,11 @@ button {
 .stop-color--sdlp {
   stop-color: var(--sdlp) !important;
 }
-.stop-color--plaid {
-  stop-color: var(--plaid) !important;
+.stop-color--pc {
+  stop-color: var(--pc) !important;
 }
-.stop-color--sinnfein {
-  stop-color: var(--sinnfein) !important;
+.stop-color--sf {
+  stop-color: var(--sf) !important;
 }
 .stop-color--reform {
   stop-color: var(--reform) !important;
@@ -442,8 +442,8 @@ button {
 .stop-color--speaker {
   stop-color: var(--speaker) !important;
 }
-.stop-color--change {
-  stop-color: var(--change) !important;
+.stop-color--tig {
+  stop-color: var(--tig) !important;
 }
 .stop-color--undeclared {
   stop-color: var(--undeclared) !important;
@@ -473,8 +473,8 @@ button {
 .stroke-color--dup {
   stroke: var(--dup) !important;
 }
-.stroke-color--alliance {
-  stroke: var(--alliance) !important;
+.stroke-color--al {
+  stroke: var(--al) !important;
 }
 .stroke-color--uup {
   stroke: var(--uup) !important;
@@ -482,11 +482,11 @@ button {
 .stroke-color--sdlp {
   stroke: var(--sdlp) !important;
 }
-.stroke-color--plaid {
-  stroke: var(--plaid) !important;
+.stroke-color--pc {
+  stroke: var(--pc) !important;
 }
-.stroke-color--sinnfein {
-  stroke: var(--sinnfein) !important;
+.stroke-color--sf {
+  stroke: var(--sf) !important;
 }
 .stroke-color--reform {
   stroke: var(--reform) !important;
@@ -500,8 +500,8 @@ button {
 .stroke-color--speaker {
   stroke: var(--speaker) !important;
 }
-.stroke-color--change {
-  stroke: var(--change) !important;
+.stroke-color--tig {
+  stroke: var(--tig) !important;
 }
 .stroke-color--undeclared {
   stroke: var(--undeclared) !important;
@@ -531,8 +531,8 @@ button {
 .color--dup {
   color: var(--dup) !important;
 }
-.color--alliance {
-  color: var(--alliance) !important;
+.color--al {
+  color: var(--al) !important;
 }
 .color--uup {
   color: var(--uup) !important;
@@ -540,11 +540,11 @@ button {
 .color--sdlp {
   color: var(--sdlp) !important;
 }
-.color--plaid {
-  color: var(--plaid) !important;
+.color--pc {
+  color: var(--pc) !important;
 }
-.color--sinnfein {
-  color: var(--sinnfein) !important;
+.color--sf {
+  color: var(--sf) !important;
 }
 .color--reform {
   color: var(--reform) !important;
@@ -558,8 +558,8 @@ button {
 .color--speaker {
   color: var(--speaker) !important;
 }
-.color--change {
-  color: var(--change) !important;
+.color--tig {
+  color: var(--tig) !important;
 }
 .color--undeclared {
   color: var(--undeclared) !important;
@@ -586,8 +586,8 @@ button {
 .border-color--dup {
   border-color: var(--dup) !important;
 }
-.border-color--alliance {
-  border-color: var(--alliance) !important;
+.border-color--al {
+  border-color: var(--al) !important;
 }
 .border-color--uup {
   border-color: var(--uup) !important;
@@ -595,11 +595,11 @@ button {
 .border-color--sdlp {
   border-color: var(--sdlp) !important;
 }
-.border-color--plaid {
-  border-color: var(--plaid) !important;
+.border-color--pc {
+  border-color: var(--pc) !important;
 }
-.border-color--sinnfein {
-  border-color: var(--sinnfein) !important;
+.border-color--sf {
+  border-color: var(--sf) !important;
 }
 .border-color--reform {
   border-color: var(--reform) !important;
@@ -613,8 +613,8 @@ button {
 .border-color--speaker {
   border-color: var(--speaker) !important;
 }
-.border-color--change {
-  border-color: var(--change) !important;
+.border-color--tig {
+  border-color: var(--tig) !important;
 }
 .border-color--undeclared {
   border-color: var(--undeclared) !important;
@@ -644,8 +644,8 @@ button {
 .before-color--dup:before {
   background-color: var(--dup) !important;
 }
-.before-color--alliance:before {
-  background-color: var(--alliance) !important;
+.before-color--al:before {
+  background-color: var(--al) !important;
 }
 .before-color--uup:before {
   background-color: var(--uup) !important;
@@ -653,11 +653,11 @@ button {
 .before-color--sdlp:before {
   background-color: var(--sdlp) !important;
 }
-.before-color--plaid:before {
-  background-color: var(--plaid) !important;
+.before-color--pc:before {
+  background-color: var(--pc) !important;
 }
-.before-color--sinnfein:before {
-  background-color: var(--sinnfein) !important;
+.before-color--sf:before {
+  background-color: var(--sf) !important;
 }
 .before-color--reform:before {
   background-color: var(--reform) !important;
@@ -671,8 +671,8 @@ button {
 .before-color--speaker:before {
   background-color: var(--speaker) !important;
 }
-.before-color--change:before {
-  background-color: var(--change) !important;
+.before-color--tig:before {
+  background-color: var(--tig) !important;
 }
 .before-color--undeclared:before {
   background-color: var(--undeclared) !important;
@@ -681,24 +681,66 @@ button {
 .bg-color--left {
   background-color: var(--left) !important;
 }
+.bg-color--left--01 {
+  background-color: var(--left-01) !important;
+}
+.bg-color--left--02 {
+  background-color: var(--left-02) !important;
+}
 .bg-color--sd {
   background-color: var(--sd) !important;
 }
+.bg-color--sd--01 {
+  background-color: var(--sd-01) !important;
+}
+.bg-color--sd--02 {
+  background-color: var(--sd-02) !important;
+}
 .bg-color--greenefa {
   background-color: var(--greenefa) !important;
 }
+.bg-color--greenefa--01 {
+  background-color: var(--greenefa-01) !important;
+}
+.bg-color--greenefa--02 {
+  background-color: var(--greenefa-02) !important;
+}
 .bg-color--renew {
   background-color: var(--renew) !important;
 }
+.bg-color--renew--01 {
+  background-color: var(--renew-01) !important;
+}
+.bg-color--renew--02 {
+  background-color: var(--renew-02) !important;
+}
 .bg-color--epp {
   background-color: var(--epp) !important;
 }
+.bg-color--epp--01 {
+  background-color: var(--epp-01) !important;
+}
+.bg-color--epp--02 {
+  background-color: var(--epp-02) !important;
+}
 .bg-color--ecr {
   background-color: var(--ecr) !important;
 }
+.bg-color--ecr--01 {
+  background-color: var(--ecr-01) !important;
+}
+.bg-color--ecr--02 {
+  background-color: var(--ecr-02) !important;
+}
 .bg-color--id {
   background-color: var(--id) !important;
 }
+.bg-color--id--01 {
+  background-color: var(--id-01) !important;
+}
+.bg-color--id--02 {
+  background-color: var(--id-02) !important;
+}
 .bg-color--ni {
   background-color: var(--ni) !important;
 }
@@ -736,6 +778,9 @@ button {
 .fill-color--other {
   fill: var(--other) !important;
 }
+.fill-color--undeclared {
+  fill: var(--undeclared) !important;
+}
 /* STROKE-COLOR --------------------------------------------------- */
 .stroke-color--left {
   stroke: var(--left) !important;
@@ -764,6 +809,9 @@ button {
 .stroke-color--other {
   stroke: var(--other) !important;
 }
+.stroke-color--undeclared {
+  stroke: var(--undeclared) !important;
+}
 /* COLOR ----------------------------------------------------------- */
 .color--left {
   color: var(--left) !important;
@@ -792,6 +840,9 @@ button {
 .color--other {
   color: var(--other) !important;
 }
+.color--undeclared {
+  color: var(--undeclared) !important;
+}
 /* BORDER-COLOR ----------------------------------------------------- */
 .border-color--left {
   border-color: var(--left) !important;
@@ -820,6 +871,9 @@ button {
 .border-color--other {
   border-color: var(--other) !important;
 }
+.border-color--undeclared {
+  border-color: var(--undeclared) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--left:before {
   background-color: var(--left) !important;
@@ -848,6 +902,9 @@ button {
 .before-color--other:before {
   background-color: var(--other) !important;
 }
+.before-color--undeclared:before {
+  background-color: var(--undeclared) !important;
+}
 body {
   --border-divider-color: #DCDCDC;
   --primary-text-color: #121212;
@@ -884,27 +941,41 @@ body {
   --ukip: #BB3B80;
   --snp: #F5DC00;
   --dup: #8B0000;
-  --alliance: #C9BB19;
+  --al: #C9BB19;
   --uup: #004975;
   --sdlp: #23B4A9;
-  --plaid: #135E58;
-  --sinnfein: #22874D;
+  --pc: #135E58;
+  --sf: #22874D;
   --reform: #3DBBE2;
   --ind: #333333;
   --other: #848484;
   --noc: #c8c8c8;
   --speaker: #767676;
-  --change: #333;
+  --tig: #333;
   --undeclared: #E7E7E7;
   --left: #8B0000;
+  --left-01: #e3b0a3;
+  --left-02: #bc634f;
   --sd: #C70000;
+  --sd-01:#fbb8a6;
+  --sd-02:#e77054;
   --greenefa: #39A566;
+  --greenefa-01: #c1e1ca;
+  --greenefa-02: #82c397;
   --renew: #FF7F0F;
-  --epp: #13bece;
+  --renew-01: #ffd8ba;
+  --renew-02: #ffaf71;
+  --epp: #3dBBE2;
+  --epp-01: #cae8f5;
+  --epp-02: #8fd1ec;
   --ecr: #0079B7;
+  --ecr-01: #bdcfe7;
+  --ecr-02: #77a2ce;
   --id:#DC559D;
-  --ni: #333333;
-  --other: #707070;
+  --id-01:#edc0d3;
+  --id-02:#d681a9;
+  --ni: #606060;
+  --other: #a0a0a0;
   --undeclared: #ededed;
 }
 @media (prefers-color-scheme: dark) {
@@ -944,26 +1015,40 @@ body {
     --ukip: #DC559D;
     --snp: #F5DC00;
     --dup: #B23C2D;
-    --alliance: #ab9f00;
+    --al: #ab9f00;
     --uup: #346896;
     --sdlp: #28b8ad;
-    --plaid: #37716b;
-    --sinnfein: #22874D;
+    --pc: #37716b;
+    --sf: #22874D;
     --reform: #3DBBE2;
     --ind: #A1A1A1;
     --other: #707070;
     --speaker: #707070;
-    --change: #494949;
+    --tig: #494949;
     --undeclared: #494949;
     --left: #8B0000;
-    --sd: #dc2e1c;
+    --left-01: #e3b0a3;
+    --left-02: #bc634f;
+    --sd: #C70000;
+    --sd-01:#fbb8a6;
+    --sd-02:#e77054;
     --greenefa: #39A566;
+    --greenefa-01: #c1e1ca;
+    --greenefa-02: #82c397;
     --renew: #FF7F0F;
-    --epp: #3DBBE2;
-    --ecr: #009ae1;
-    --id: #DC559D;
+    --renew-01: #ffd8ba;
+    --renew-02: #ffaf71;
+    --epp: #3dBBE2;
+    --epp-01: #cae8f5;
+    --epp-02: #8fd1ec;
+    --ecr: #0079B7;
+    --ecr-01: #bdcfe7;
+    --ecr-02: #77a2ce;
+    --id:#DC559D;
+    --id-01:#edc0d3;
+    --id-02:#d681a9;
     --ni: #A1A1A1;
-    --other: #707070;
+    --other: #a0a0a0;
     --undeclared: #ededed;
   }
 }._svg_b5io0_1 {
@@ -1040,7 +1125,14 @@ body {
 ._next_1cajk_16 {
   stop-color: var(--lab);
 }
-._button_oqopj_1 {
+._unit_mo5d9_1 {
+  stroke: var(--primary-bg-color);
+  stroke-width: 1px;
+}
+
+._container_mo5d9_6 {
+  width: 100%;
+}._button_oqopj_1 {
   display: block;
   border: 1px solid var(--news-grey-05);
   border-radius: 999px;
@@ -1439,45 +1531,6 @@ body.android {
 ._axisLabel_gj7pr_37 {
   transform: translateY(var(--space-1));
 }
-._transitionContainer_1gzlr_1 {
-  pointer-events: none;
-  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;
-}
-
-._modalBox_1gzlr_13 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: all 300ms ease-in-out;
-}
-
-._enter_1gzlr_21,
-._exitDone_1gzlr_22 {
-  background-color: transparent;
-  backdrop-filter: none;
-
-  ._modalBox_1gzlr_13 {
-    transform: translateY(100%);
-  }
-}
-
-._enterActive_1gzlr_31,
-._exit_1gzlr_22 {
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
-
-  ._modalBox_1gzlr_13 {
-    transform: translateY(0);
-  }
-}
 ._tooltip_11t5d_1 {
   pointer-events: none;
 }
@@ -1493,7 +1546,29 @@ body.android {
 ._container_1b8t2_10 {
   font-weight: 700;
 }
-body {
+._wrapper_8vo05_1 {
+  position: relative;
+}
+
+._line_8vo05_5 {
+    height: calc(100% - 3px - 20px);
+    width: 1px;
+    left: calc(50% - 0.5px);
+    background-color: var(--primary-text-color);
+    position: absolute;
+    bottom: 3px;
+    z-index: 2;
+}
+
+._halfLineText_8vo05_15 {
+  width: 100%;
+  text-align: center;
+  font-family: var(--text-sans);
+  line-height: var(--line-height-regular);
+  font-size: var(--sans-xsmall);
+  color: var(--primary-text-color);
+  position: relative;
+}body {
   --top-inset: 0;
 }
 
@@ -2106,7 +2181,12 @@ body.android {
     transform: translateY(0);
   }
 }
-._button_xeyqm_1 {
+._container_iozsb_1 {
+  position: relative;
+  display: inline-block;
+}
+
+._button_iozsb_6 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2117,30 +2197,32 @@ body.android {
   padding: var(--space-2) var(--space-3);
 }
 
-._button_xeyqm_1:hover:enabled {
+._button_iozsb_6:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._icon_xeyqm_17 {
+._icon_iozsb_22 {
   width: 17px;
   height: 17px;
 }
 
-._title_xeyqm_22 {
+._title_iozsb_27 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-medium);
   line-height: var(--sans-line-height);
 }
 
-._popout_xeyqm_29 {
+._popout_iozsb_34 {
+  min-width: 100%;
   background-color: var(--secondary-bg-color);
 
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
 
   position: absolute;
+  z-index: 99;
   margin-top: var(--space-2);
   padding: var(--space-2);
 
@@ -2149,14 +2231,14 @@ body.android {
   gap: var(--space-2);
 }
 
-._hint_xeyqm_44 {
+._hint_iozsb_51 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_xeyqm_51 {
+._option_iozsb_58 {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -2167,21 +2249,22 @@ body.android {
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
   padding: var(--space-1) var(--space-2);
+  padding-right: 24px;
 
   background-color: var(--primary-bg-color);
 }
 
-._option_xeyqm_51:hover:enabled {
+._option_iozsb_58:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIcon_xeyqm_71 {
+._optionIcon_iozsb_79 {
   width: 23px;
   height: 23px;
 }
 
-._optionTitle_xeyqm_76 {
+._optionTitle_iozsb_84 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
@@ -2189,20 +2272,20 @@ body.android {
   font-weight: 700;
 }
 
-._optionDescription_xeyqm_84 {
+._optionDescription_iozsb_92 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
 }
 
-._checkmark_xeyqm_91 {
+._checkmark_iozsb_99 {
   position: absolute;
   top: 4px;
   right: 6px;
 }
 
-._checkmarkPath_xeyqm_97 {
+._checkmarkPath_iozsb_105 {
   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.21",
+  "version": "v0.1.0-alpha.23",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -28,12 +28,13 @@
     "build": "storybook build",
     "build:lib": "vite build",
     "build:lib:watch": "vite build --watch",
-    "lint": "eslint src/** --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint \"src/**/*.{js,jsx}\"",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "test": "vitest",
     "test:cov": "vitest run --coverage",
     "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
-    "generate:styles": "node scripts/generateStyles.js"
+    "generate:styles": "node scripts/generateStyles.js",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "d3-geo": "^3.1.1",
@@ -44,8 +45,7 @@
     "preact": "^10.12.1"
   },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx,json,css,md}": [
-      "prettier -w"
-    ]
+    "*.{js,jsx}": "eslint --fix \"src/**/*.{js,jsx}\"",
+    "*.{js,jsx,json,css,scss,md}": "prettier --write"
   }
 }