@guardian/interactive-component-library 0.8.1 → 0.8.5-alpha.7

package/dist/components/molecules/page-section/index.js

@@ -14,6 +14,7 @@ const PageSection = forwardRef(
     layout = SectionLayout.default,
     styles,
     borderTop = false,
+    borderLeftCol = true,
     backgroundColor = "transparent"
   }, ref) => {
     styles = mergeStyles({ ...defaultStyles }, styles);
@@ -25,15 +26,21 @@ const PageSection = forwardRef(
         setMinHeight(headerElement.offsetHeight);
       }
     }, [children]);
+    const classes = [styles.section, styles[layout]];
+    if (borderTop) {
+      classes.push(styles.borderTop);
+    }
+    if (borderLeftCol) {
+      classes.push(styles.borderLeftCol);
+    }
     return /* @__PURE__ */ jsxs(
       "section",
       {
         id,
         ref,
-        className: [styles.section, styles[layout]].join(" "),
+        className: classes.join(" "),
         style: { "--background-color": backgroundColor, minHeight },
         children: [
-          borderTop && /* @__PURE__ */ jsx("div", { className: styles.borderTop }),
           children.header && /* @__PURE__ */ jsx(
             "div",
             {

package/dist/components/molecules/page-section/style.module.scss.js

@@ -1,16 +1,19 @@
-const borderTop = "_borderTop_1v72w_9";
-const section = "_section_1v72w_39";
-const fullWidth = "_fullWidth_1v72w_39";
-const header = "_header_1v72w_150";
-const content = "_content_1v72w_187";
+const section = "_section_s7ln2_9";
+const fullWidth = "_fullWidth_s7ln2_58";
+const borderLeftCol = "_borderLeftCol_s7ln2_75";
+const header = "_header_s7ln2_82";
+const content = "_content_s7ln2_87";
+const borderTop = "_borderTop_s7ln2_92";
 const defaultStyles = {
-  borderTop,
   section,
   fullWidth,
+  borderLeftCol,
   header,
-  content
+  content,
+  borderTop
 };
 export {
+  borderLeftCol,
   borderTop,
   content,
   defaultStyles as default,

package/dist/style.css

@@ -2185,206 +2185,91 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_1v72w_9 {
-  border-top: 1px solid var(--border-divider-color);
-  transform: translate(-10px);
-  width: calc(100% + 20px);
-}
-@media (min-width: 30em) {
-  ._borderTop_1v72w_9 {
-    transform: translate(-20px);
-    width: calc(100% + 40px);
-  }
-}
-@media (min-width: 46.25em) {
-  ._borderTop_1v72w_9 {
-    width: calc(100% + 40px);
-  }
-}
-@media (min-width: 71.25em) {
-  ._borderTop_1v72w_9 {
-    transform: translate(-180px);
-    width: calc(100% + 197px);
-    background-color: transparent;
-  }
-}
-@media (min-width: 81.25em) {
-  ._borderTop_1v72w_9 {
-    transform: translate(-260px);
-    width: calc(100% + 279px);
-  }
-}
-
-._section_1v72w_39._fullWidth_1v72w_39 ._borderTop_1v72w_9 {
-  transform: none;
-  width: calc(100% - 1px);
-}
-
-._section_1v72w_39 {
-  position: relative;
-  z-index: 0;
-  padding-bottom: var(--space-8);
-}
-
-._section_1v72w_39._fullWidth_1v72w_39 {
-  transform: translate(-10px);
-  width: calc(100% + 20px);
-  margin: 0;
-  padding: 0;
-}
-@media (min-width: 30em) {
-  ._section_1v72w_39._fullWidth_1v72w_39 {
-    transform: translate(-20px);
-    width: calc(100% + 40px);
-  }
-}
-@media (min-width: 46.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39 {
-    transform: translate(-20px);
-    width: calc(100% + 40px);
-  }
-}
-@media (min-width: 71.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39 {
-    transform: translate(-180px);
-    width: calc(100% + 197px);
-  }
-}
-@media (min-width: 81.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39 {
-    transform: translate(-260px);
-    width: calc(100% + 280px);
-  }
-}
-
-._section_1v72w_39::before {
-  display: block;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(-10px);
-  width: calc(100% + 20px);
-  height: 100%;
-  z-index: -1;
+._section_s7ln2_9 {
   background-color: var(--background-color);
+  display: grid;
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  grid-template-areas: "header" "content";
+  --padding: 10px;
+  --bleed: 10px;
+  width: calc(100% + var(--bleed) * 2);
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  margin-left: calc(var(--bleed) * -1);
+  margin-right: calc(var(--bleed) * -1);
 }
-@media (min-width: 30em) {
-  ._section_1v72w_39::before {
-    transform: translate(-20px);
-    width: calc(100% + 40px);
-  }
-}
-@media (min-width: 46.25em) {
-  ._section_1v72w_39::before {
-    width: calc(100% + 40px);
+@media (min-width: 480px) {
+  ._section_s7ln2_9 {
+    --padding: 20px;
+    --bleed: 20px;
   }
 }
-@media (min-width: 71.25em) {
-  ._section_1v72w_39::before {
-    transform: translateX(-9px);
-    width: calc(100% + 26px);
+@media (min-width: 740px) and (max-width: 1140px) {
+  ._section_s7ln2_9 {
+    --bleed: 0px;
   }
 }
-@media (min-width: 81.25em) {
-  ._section_1v72w_39::before {
-    width: calc(100% + 27px);
-  }
-}
-
-._section_1v72w_39._fullWidth_1v72w_39::before {
-  transform: none;
-  width: calc(100% - 3px);
-  height: 100%;
-  left: 1px;
-  background-color: var(--background-color);
-  transform: translate(-10px);
-  width: calc(100% + 20px);
-}
-@media (min-width: 30em) {
-  ._section_1v72w_39._fullWidth_1v72w_39::before {
-    transform: translate(-20px);
-    width: calc(100% + 40px);
+@media (min-width: 980px) {
+  ._section_s7ln2_9 {
+    width: calc(100% + var(--bleed) * 2 - 2px);
+    grid-template-columns: 620px;
   }
 }
-@media (min-width: 46.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39::before {
-    width: 100%;
-    transform: translateX(-1px);
+@media (min-width: 1140px) and (max-width: 1300px) {
+  ._section_s7ln2_9 {
+    margin-left: calc(var(--bleed) * -1 - 1px);
   }
 }
-@media (min-width: 71.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39::before {
-    transform: translateX(-1px);
-    width: 100%;
+@media (min-width: 1140px) {
+  ._section_s7ln2_9 {
+    grid-template-columns: 140px 1px 620px 1fr;
+    grid-template-areas: "header border content .";
   }
 }
-@media (min-width: 81.25em) {
-  ._section_1v72w_39._fullWidth_1v72w_39::before {
-    transform: none;
-    width: calc(100% - 3px);
+@media (min-width: 1300px) {
+  ._section_s7ln2_9 {
+    grid-template-columns: 219px 1px 620px;
   }
 }
 
-._header_1v72w_150 {
-  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_1v72w_150 {
-    position: absolute;
-    max-width: 160px;
-    transform: translateX(-170px);
-    margin-bottom: 0;
+@media (min-width: 980px) {
+  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+    grid-template-columns: 1fr;
   }
 }
-@media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_1v72w_150 {
-    max-width: 220px;
-    transform: translateX(-250px);
+@media (min-width: 1140px) {
+  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+    grid-template-columns: 140px 1px 1fr;
+    grid-template-areas: "header border content";
   }
 }
-
-body ._header_1v72w_150._fullWidth_1v72w_39 {
-  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_1v72w_150._fullWidth_1v72w_39 {
-    margin-bottom: 0;
+@media (min-width: 1300px) {
+  ._section_s7ln2_9._fullWidth_s7ln2_58 {
+    grid-template-columns: 219px 1px 1fr;
   }
 }
 
-._content_1v72w_187 {
-  position: relative;
-  padding-top: 0;
-  z-index: 0;
-  color: var(--primary-text-color);
-}
-@media (min-width: 71.25em) {
-  ._content_1v72w_187 {
-    padding-top: var(--space-2);
+@media (min-width: 1140px) {
+  ._section_s7ln2_9._borderLeftCol_s7ln2_75:before {
+    content: "";
+    grid-area: border;
+    border-left: 1px solid var(--border-divider-color);
   }
 }
 
-:not(._header_1v72w_150) + ._content_1v72w_187 {
-  padding-top: var(--space-2);
+._header_s7ln2_82 {
+  padding-top: 10px;
+  grid-area: header;
 }
 
-._content_1v72w_187._fullWidth_1v72w_39 {
-  padding-top: 0;
+._content_s7ln2_87 {
+  padding-top: 10px;
+  grid-area: content;
 }
 
-._content_1v72w_187._fullWidth_1v72w_39::before {
-  display: none;
+._borderTop_s7ln2_92 {
+  border-top: 1px solid var(--border-divider-color);
 }._text_1ci1k_1 {
   font-family: var(--text-sans);
   fill: var(--primary-text-color);

package/package.json

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