@guardian/interactive-component-library 0.1.0-alpha.52 → 0.1.0-alpha.57

package/dist/style.css

@@ -9,65 +9,69 @@ button {
   border-radius: 0;
 }
 :root {
---text-sans: "GuardianTextSans", "Guardian Text Sans Web", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", "sans-serif";
---text-serif: "GuardianTextEgyptian", "Guardian Text Egyptian Web", "Georgia", "serif";
---text-headline: "GH Guardian Headline", "Guardian Egyptian Web", "Georgia", "serif";
---text-titlepiece: "Guardian Titlepiece", "Guardian Headline Full", "Guardian Headline", "Guardian Egyptian Web", "Georgia", "serif";
+  --text-sans: "GuardianTextSans", "Guardian Text Sans Web", "Helvetica Neue",
+    "Helvetica", "Arial", "Lucida Grande", "sans-serif";
+  --text-serif: "GuardianTextEgyptian", "Guardian Text Egyptian Web", "Georgia",
+    "serif";
+  --text-headline: "GH Guardian Headline", "Guardian Egyptian Web", "Georgia",
+    "serif";
+  --text-titlepiece: "Guardian Titlepiece", "Guardian Headline Full",
+    "Guardian Headline", "Guardian Egyptian Web", "Georgia", "serif";
 }
 :root {
---headline-xxxsmall: 17px;
---headline-xxsmall: 20px;
---headline-xsmall: 24px;
---headline-small: 28px;
---headline-medium: 34px;
---headline-large: 42px;
---headline-xlarge: 50px;
-
---sans-xxsmall: 12px;
---sans-xsmall: 14px;
---sans-small: 15px;
---sans-medium: 17px;
---sans-large: 20px;
---sans-xlarge: 24px;
---sans-xxlarge: 28px;
---sans-xxxlarge: 34px;
-
---titlepiece-xxxsmall: 16px;
---titlepiece-xxsmall: 24px;
---titlepiece-xsmall: 36px;
---titlepiece-small: 42px;
---titlepiece-medium: 50px;
---titlepiece-large: 70px;
-
---body-xsmall: 14px;
---body-small: 15px;
---body-medium: 17px;
-
---line-height-tight: 1.15;
---line-height-regular: 1.3;
---line-height-loose: 1.4;
-
---headline-line-height: 1.15;
---sans-line-height: 1.3;
---titlepiece-line-height: 1.15;
---body-line-height: 1.4;
+  --headline-xxxsmall: 17px;
+  --headline-xxsmall: 20px;
+  --headline-xsmall: 24px;
+  --headline-small: 28px;
+  --headline-medium: 34px;
+  --headline-large: 42px;
+  --headline-xlarge: 50px;
+
+  --sans-xxsmall: 12px;
+  --sans-xsmall: 14px;
+  --sans-small: 15px;
+  --sans-medium: 17px;
+  --sans-large: 20px;
+  --sans-xlarge: 24px;
+  --sans-xxlarge: 28px;
+  --sans-xxxlarge: 34px;
+
+  --titlepiece-xxxsmall: 16px;
+  --titlepiece-xxsmall: 24px;
+  --titlepiece-xsmall: 36px;
+  --titlepiece-small: 42px;
+  --titlepiece-medium: 50px;
+  --titlepiece-large: 70px;
+
+  --body-xsmall: 14px;
+  --body-small: 15px;
+  --body-medium: 17px;
+
+  --line-height-tight: 1.15;
+  --line-height-regular: 1.3;
+  --line-height-loose: 1.4;
+
+  --headline-line-height: 1.15;
+  --sans-line-height: 1.3;
+  --titlepiece-line-height: 1.15;
+  --body-line-height: 1.4;
 }
 :root {
---space-0: 2px;
---space-1: 4px;
---space-2: 8px;
---space-3: 12px;
---space-4: 16px;
---space-5: 20px;
---space-6: 24px;
---space-8: 32px;
---space-9: 36px;
---space-10: 40px;
---space-12: 48px;
---space-14: 56px;
---space-16: 64px;
---space-18: 72px;
---space-24: 96px;
+  --space-0: 2px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-18: 72px;
+  --space-24: 96px;
 }
 :global(body) {
   --top-inset: 0;
@@ -1063,6 +1067,117 @@ button {
 .before-color--new-group-01:before {
   background-color: var(--new-group-01) !important;
 }
+/* BACKGROUND-COLOR -------------------------------------------- */
+/* include secondary (-2) colors ---*/
+.bg-color--dem {
+  background-color: var(--dem) !important;
+}
+.bg-color--gop {
+  background-color: var(--gop) !important;
+}
+.bg-color--oth {
+  background-color: var(--oth) !important;
+}
+.bg-color--dem-2 {
+  background-color: var(--dem-2) !important;
+}
+.bg-color--gop-2 {
+  background-color: var(--gop2) !important;
+}
+.bg-color--oth-2 {
+  background-color: var(--oth-2) !important;
+}
+.bg-color--undeclared {
+  background-color: var(--undeclared) !important;
+}
+/* FILL ----------------------------------------------------------- */
+/* include secondary (-2) colors ---*/
+.fill-color--dem {
+  fill: var(--dem) !important;
+}
+.fill-color--gop {
+  fill: var(--gop) !important;
+}
+.fill-color--oth {
+  fill: var(--oth) !important;
+}
+.fill-color--dem-2 {
+  fill: var(--dem-2) !important;
+}
+.fill-color--gop-2 {
+  fill: var(--gop-2) !important;
+}
+.fill-color--oth-2 {
+  fill: var(--oth-2) !important;
+}
+.fill-color--undeclared {
+  fill: var(--undeclared) !important;
+}
+/* STOP ----------------------------------------------------------- */
+.stop-color--dem {
+  stop-color: var(--dem) !important;
+}
+.stop-color--gop {
+  stop-color: var(--gop) !important;
+}
+.stop-color--oth {
+  stop-color: var(--oth) !important;
+}
+.stop-color--undeclared {
+  stop-color: var(--undeclared) !important;
+}
+/* STROKE-COLOR --------------------------------------------------- */
+.stroke-color--dem {
+  stroke: var(--dem) !important;
+}
+.stroke-color--gop {
+  stroke: var(--gop) !important;
+}
+.stroke-color--oth {
+  stroke: var(--oth) !important;
+}
+.stroke-color--undeclared {
+  stroke: var(--undeclared) !important;
+}
+/* COLOR ----------------------------------------------------------- */
+.color--dem {
+  color: var(--dem) !important;
+}
+.color--gop {
+  color: var(--gop) !important;
+}
+.color--oth {
+  color: var(--oth) !important;
+}
+.color--undeclared {
+  color: var(--undeclared) !important;
+}
+/* BORDER-COLOR ----------------------------------------------------- */
+.border-color--dem {
+  border-color: var(--dem) !important;
+}
+.border-color--gop {
+  border-color: var(--gop) !important;
+}
+.border-color--oth {
+  border-color: var(--oth) !important;
+}
+.border-color--undeclared {
+  border-color: var(--undeclared) !important;
+}
+/* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
+.before-color--dem:before {
+  background-color: var(--dem) !important;
+}
+.before-color--gop:before {
+  background-color: var(--gop) !important;
+}
+.before-color--oth:before {
+  background-color: var(--oth) !important;
+}
+.before-color--undeclared:before {
+  background-color: var(--undeclared) !important;
+}
 body {
   --border-divider-color: #dcdcdc;
   --primary-text-color: #121212;
@@ -1158,6 +1273,13 @@ body {
   --undeclared: #ededed;
   --declared: #fff;
   --new-group-01: #333333;
+  --dem: #2f3192;
+  --gop: #c70000;
+  --oth: #848484;
+  --dem-2: #bdbeea;
+  --gop-2: #ffdbd4;
+  --oth-2: #c8c8c8;
+  --undeclared: #e7e7e7;
 }
 @media (prefers-color-scheme: dark) {
   body.ios,
@@ -1255,6 +1377,13 @@ body {
     --undeclared: #ededed;
     --declared: #bababa;
     --new-group-01: #cccccc;
+    --dem: #3c3eb9;
+    --gop: #dc2e1c;
+    --oth: #707070;
+    --dem-2: #292b7f;
+    --gop-2: #833a2b;
+    --oth-2: #333333;
+    --undeclared: #494949;
   }
 }._svg_b5io0_1 {
   display: block;
@@ -1337,14 +1466,15 @@ body {
 ._next_ihy3w_16 {
   stop-color: var(--other);
 }
-._unit_mo5d9_1 {
+._unit_1jxth_1 {
   stroke: var(--primary-bg-color);
   stroke-width: 1px;
 }
 
-._container_mo5d9_6 {
+._container_1jxth_6 {
   width: 100%;
-}._button_oqopj_1 {
+}
+._button_oqopj_1 {
   display: block;
   border: 1px solid var(--news-grey-05);
   border-radius: 999px;
@@ -1792,21 +1922,21 @@ body.android {
 ._container_1b8t2_10 {
   font-weight: 700;
 }
-._wrapper_8vo05_1 {
+._wrapper_kh25l_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;
+._line_kh25l_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 {
+._halfLineText_kh25l_15 {
   width: 100%;
   text-align: center;
   font-family: var(--text-sans);
@@ -1814,7 +1944,8 @@ body.android {
   font-size: var(--sans-xsmall);
   color: var(--primary-text-color);
   position: relative;
-}body {
+}
+body {
   --top-inset: 0;
 }
 
@@ -1822,12 +1953,13 @@ body.android {
   --top-inset: 58px;
 }
 
-._toplineResult_49z3u_9 {
+._toplineResult_1su0d_9 {
   width: fit-content;
   display: flex;
   flex-direction: column;
 }
-._toplineResult_49z3u_9 ._primaryname_49z3u_14 {
+
+._primaryname_1su0d_15 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
@@ -1835,35 +1967,38 @@ body.android {
   font-weight: 500;
   font-style: italic;
 }
-._toplineResult_49z3u_9 ._primaryname_49z3u_14:before {
+._primaryname_1su0d_15:before {
   content: "";
   height: 4px;
   width: 2.2em;
   border-radius: 50px;
   display: block;
 }
-._toplineResult_49z3u_9 ._secondaryname_49z3u_29 {
+
+._secondaryname_1su0d_31 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   font-weight: 500;
   line-height: var(--headline-line-height);
 }
-._toplineResult_49z3u_9 ._name_49z3u_36 {
+
+._name_1su0d_39 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   line-height: var(--headline-line-height);
   font-weight: 500;
 }
-._toplineResult_49z3u_9 ._name_49z3u_36:before {
+._name_1su0d_39:before {
   content: "";
   height: 4px;
   width: 2.2em;
   border-radius: 50px;
   display: block;
 }
-._toplineResult_49z3u_9 ._displayNumbers_49z3u_50 {
+
+._displayNumbers_1su0d_54 {
   display: flex;
   align-items: baseline;
   margin-top: auto;
@@ -1874,32 +2009,37 @@ body.android {
   font-feature-settings: "lnum";
   line-height: var(--titlepiece-line-height);
 }
-._toplineResult_49z3u_9 ._displayNumbers_49z3u_50 ._mainNumber_49z3u_61 {
+._displayNumbers_1su0d_54 > div {
+  flex-shrink: 0;
+}
+
+._mainNumber_1su0d_69 {
   color: var(--primary-text-color);
   font-size: var(--titlepiece-xsmall);
   white-space: nowrap;
 }
-._toplineResult_49z3u_9 ._displayNumbers_49z3u_50 ._mainNumberSuffix_49z3u_66 {
+
+._mainNumberSuffix_1su0d_75 {
   font-size: var(--titlepiece-xxxsmall);
 }
-._toplineResult_49z3u_9 ._displayNumbers_49z3u_50 ._secondaryNumber_49z3u_69 {
+
+._secondaryNumber_1su0d_79 {
   color: var(--secondary-text-color-alt);
   font-size: var(--titlepiece-xxsmall);
 }
-._toplineResult_49z3u_9 ._displayNumbers_49z3u_50 > div {
-  flex-shrink: 0;
-}
-._toplineResult_49z3u_9 ._displayRow_49z3u_76 {
+
+._displayRow_1su0d_84 {
   flex-direction: row;
 }
-._toplineResult_49z3u_9 ._displayRow_49z3u_76 ._mainNumber_49z3u_61 {
+._displayRow_1su0d_84 ._mainNumber_1su0d_69 {
   margin-right: var(--space-0);
 }
-._toplineResult_49z3u_9 ._displayColumn_49z3u_82 {
+
+._displayColumn_1su0d_91 {
   flex-direction: column;
 }
 
-._topRow_49z3u_86 {
+._topRow_1su0d_95 {
   width: fit-content;
   padding-bottom: 1px;
   display: flex;
@@ -1908,11 +2048,11 @@ body.android {
   align-items: flex-end;
 }
 @media (min-width: 61.25em) {
-  ._topRow_49z3u_86 {
+  ._topRow_1su0d_95 {
     border-bottom: none;
   }
 }
-._topRow_49z3u_86 > * {
+._topRow_1su0d_95 > * {
   display: block;
 }body {
   --top-inset: 0;
@@ -2118,16 +2258,16 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
 
 ._content_1xpz0_187._fullWidth_1xpz0_39::before {
   display: none;
-}._text_lo5h3_1 {
-    font-family: var(--text-sans);
-    fill: var(--primary-text-color);
+}._text_1ci1k_1 {
+  font-family: var(--text-sans);
+  fill: var(--primary-text-color);
 }
 
-._axis_lo5h3_6 {
-    fill: var(--primary-line-color);
-} 
+._axis_1ci1k_6 {
+  fill: var(--primary-line-color);
+}
 
-._bar_lo5h3_10 {
+._bar_1ci1k_10 {
 }
 ._container_hbk39_1 {
   font-weight: 700;
@@ -2667,58 +2807,17 @@ body.android {
 ._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_1ta61_1 {
+}._container_9pdyv_1 {
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-._svg_1ta61_7 {
+._svg_9pdyv_7 {
   fill: none;
   stroke: #121212;
   stroke-width: 1;
 }
-
-._controls_1ta61_13 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-._zoomControl_1ta61_21 {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
 body {
   --top-inset: 0;
 }
@@ -2907,24 +3006,24 @@ body.android {
   --top-inset: 58px;
 }
 
-._ticker_1jg88_9 {
+._ticker_15ezr_9 {
   position: relative;
   padding-bottom: 44px;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._ticker_1jg88_9 {
+  ._ticker_15ezr_9 {
     --ticker-item-width: 200px;
     padding: 0;
   }
 }
 
-._tickerItems_1jg88_21 {
+._tickerItems_15ezr_21 {
   width: 100%;
   overflow: clip;
 }
 
-._tickerScroll_1jg88_26 {
+._tickerScroll_15ezr_26 {
   display: flex;
   flex-direction: column;
   row-gap: var(--space-2);
@@ -2933,7 +3032,7 @@ body.android {
   overflow: visible;
 }
 @media (min-width: 30em) {
-  ._tickerScroll_1jg88_26 {
+  ._tickerScroll_15ezr_26 {
     flex-direction: row;
     column-gap: var(--space-2);
     transform: translateX(var(--ticker-offset));
@@ -2941,19 +3040,19 @@ body.android {
   }
 }
 
-._tickerItem_1jg88_21 {
+._tickerItem_15ezr_21 {
   width: var(--ticker-item-width);
   flex-shrink: 0;
 }
 
-._controls_1jg88_48 {
+._controls_15ezr_48 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 130px;
 }
 @media (min-width: 30em) {
-  ._controls_1jg88_48 {
+  ._controls_15ezr_48 {
     top: 0;
     right: 0;
     width: 86px;
@@ -2961,23 +3060,23 @@ body.android {
   }
 }
 
-._gradient_1jg88_63 {
+._gradient_15ezr_63 {
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_1jg88_63 {
+  ._gradient_15ezr_63 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._buttons_1jg88_75 {
+._buttons_15ezr_75 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_1jg88_75 {
+  ._buttons_15ezr_75 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -2988,35 +3087,36 @@ body.android {
   }
 }
 
-._button_1jg88_75 {
+._button_15ezr_75 {
   min-height: 40px;
   background-color: var(--tertiary-bg-color);
   padding-bottom: 20px;
 }
 @media (min-width: 30em) {
-  ._button_1jg88_75 {
+  ._button_15ezr_75 {
     display: none;
   }
 }
 
-._buttonInner_1jg88_101 {
+._buttonInner_15ezr_101 {
   background-color: var(--tertiary-bg-color);
 }
 
-._ticker_1jg88_9[data-expanded=true] {
+._ticker_15ezr_9[data-expanded=true] {
   padding-bottom: 0;
 }
 
-._ticker_1jg88_9[data-expanded=true] ._tickerScroll_1jg88_26 {
+._ticker_15ezr_9[data-expanded=true] ._tickerScroll_15ezr_26 {
   max-height: fit-content;
   margin-bottom: -40px;
 }
 
-._ticker_1jg88_9[data-expanded=true] ._controls_1jg88_48 {
+._ticker_15ezr_9[data-expanded=true] ._controls_15ezr_48 {
   position: sticky;
   margin-top: -40px;
 }
-._ticker_1jg88_9[data-expanded=true] ._controls_1jg88_48 ._button_1jg88_75 {
+
+._ticker_15ezr_9[data-expanded=true] ._button_15ezr_75 {
   position: absolute;
   width: 100%;
   left: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.52",
+  "version": "v0.1.0-alpha.57",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -21,15 +21,17 @@
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=18",
+    "pnpm": "^8.4.0"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
     "build:lib": "vite build",
     "build:lib:watch": "vite build --watch",
-    "lint": "eslint \"src/**/*.{js,jsx}\"",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
     "test": "vitest",
     "test:cov": "vitest run --coverage",
     "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
@@ -44,7 +46,7 @@
     "preact": "10.21.0"
   },
   "lint-staged": {
-    "*.{js,jsx}": "eslint --fix",
-    "*.{js,jsx,json,css,scss,md}": "prettier --write"
+    "*.{js,jsx,ts,tsx,svelte}": "eslint --cache --fix",
+    "*.{js,jsx,ts,tsx,svelte,css,scss,html,json}": "prettier --write"
   }
 }