@guardian/interactive-component-library 0.7.3 → 0.7.4

package/dist/components/molecules/result-summary/index.d.ts

@@ -1,4 +1,4 @@
-export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, styles, }: {
+export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, lineClamp, styles, }: {
     previous: any;
     next: any;
     title: any;
@@ -6,5 +6,6 @@ export function ResultSummary({ previous, next, title, text, timestamp, onClick,
     timestamp: any;
     onClick: any;
     isSlim?: boolean;
+    lineClamp?: boolean;
     styles: any;
 }): import("preact").JSX.Element;

package/dist/components/molecules/result-summary/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
+import { jsx, jsxs } from "preact/jsx-runtime";
 import "preact/hooks";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
 import "preact/compat";
@@ -30,17 +30,18 @@ function ResultSummary({
   timestamp,
   onClick,
   isSlim = false,
+  lineClamp = false,
   styles
 }) {
   styles = mergeStyles({ ...defaultStyles }, styles);
   if (isSlim) {
     let hasChanged = next !== previous;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: `${styles.container} ${styles.containerSlim}`,
         onClick,
-        children: [
+        children: /* @__PURE__ */ jsxs("p", { className: `${styles.titleSlim} ${lineClamp && styles.lineClamp}`, children: [
           hasChanged ? /* @__PURE__ */ jsx(
             GradientIcon,
             {
@@ -52,18 +53,17 @@ function ResultSummary({
               }
             }
           ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
-          /* @__PURE__ */ jsxs("p", { className: styles.titleSlim, children: [
-            title,
-            " "
-          ] }),
+          " ",
+          title,
+          " ",
           /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
-        ]
+        ] })
       }
     );
   } else {
     return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
       /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
-      /* @__PURE__ */ jsx("p", { className: styles.paragraph, children: text }),
+      /* @__PURE__ */ jsx("p", { className: `${styles.paragraph} ${lineClamp && styles.lineClamp}`, children: text }),
       /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
     ] });
   }

package/dist/components/molecules/result-summary/style.module.css.js

@@ -1,12 +1,14 @@
-const container = "_container_14h9i_1";
-const containerSlim = "_containerSlim_14h9i_12";
-const titleSlim = "_titleSlim_14h9i_17";
-const dateStampLinePosition = "_dateStampLinePosition_14h9i_27";
-const paragraph = "_paragraph_14h9i_31";
+const container = "_container_32bi7_1";
+const containerSlim = "_containerSlim_32bi7_12";
+const titleSlim = "_titleSlim_32bi7_17";
+const lineClamp = "_lineClamp_32bi7_27";
+const dateStampLinePosition = "_dateStampLinePosition_32bi7_40";
+const paragraph = "_paragraph_32bi7_44";
 const defaultStyles = {
   container,
   containerSlim,
   titleSlim,
+  lineClamp,
   dateStampLinePosition,
   paragraph
 };
@@ -15,6 +17,7 @@ export {
   containerSlim,
   dateStampLinePosition,
   defaultStyles as default,
+  lineClamp,
   paragraph,
   titleSlim
 };

package/dist/style.css

@@ -2455,7 +2455,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   color: var(--primary-text-color);
   margin-top: var(--space-2);
 }
-._container_14h9i_1 {
+._container_32bi7_1 {
   background-color: var(--quaternary-bg-color);
   border-radius: 4px;
   padding: 4px 8px 6px 8px;
@@ -2466,12 +2466,12 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   height: 100%;
 }
 
-._containerSlim_14h9i_12 {
+._containerSlim_32bi7_12 {
   min-width: 260px;
   display: inline-block;
 }
 
-._titleSlim_14h9i_17 {
+._titleSlim_32bi7_17 {
   display: inline;
   color: var(--primary-text-color) !important;
   font-family: var(--text-sans) !important;
@@ -2481,11 +2481,24 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   margin-left: var(--space-1) !important;
 }
 
-._dateStampLinePosition_14h9i_27 {
+._lineClamp_32bi7_27 {
+  /* restrict lines of text to 2, or else add ellipses */
+  display: -webkit-inline-box !important;
+  display: -moz-inline-box !important;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -moz-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._dateStampLinePosition_32bi7_40 {
   display: block;
 }
 
-._paragraph_14h9i_31 {
+._paragraph_32bi7_44 {
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);

package/package.json

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