@guardian/interactive-component-library 0.7.3 → 0.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/canvas-map/lib/renderers/FeatureRenderer.js +3 -0
- package/dist/components/molecules/result-summary/index.d.ts +2 -1
- package/dist/components/molecules/result-summary/index.js +9 -9
- package/dist/components/molecules/result-summary/style.module.css.js +8 -5
- package/dist/style.css +18 -5
- package/package.json +1 -1
|
@@ -19,6 +19,9 @@ class FeatureRenderer {
|
|
|
19
19
|
const feature = this.feature;
|
|
20
20
|
const { projection, transform, pixelRatio } = frameState.viewState;
|
|
21
21
|
const { stroke, fill, pointRadius } = this.style;
|
|
22
|
+
if (typeof pointRadius === "number" && pointRadius <= 0) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
22
25
|
const geometries = feature.getProjectedGeometries(projection);
|
|
23
26
|
if (frameState.debug) {
|
|
24
27
|
try {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, styles, }: {
|
|
1
|
+
export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, lineClamp, styles, }: {
|
|
2
2
|
previous: any;
|
|
3
3
|
next: any;
|
|
4
4
|
title: any;
|
|
@@ -6,5 +6,6 @@ export function ResultSummary({ previous, next, title, text, timestamp, onClick,
|
|
|
6
6
|
timestamp: any;
|
|
7
7
|
onClick: any;
|
|
8
8
|
isSlim?: boolean;
|
|
9
|
+
lineClamp?: boolean;
|
|
9
10
|
styles: any;
|
|
10
11
|
}): import("preact").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "preact/jsx-runtime";
|
|
2
2
|
import "preact/hooks";
|
|
3
3
|
import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
|
|
4
4
|
import "preact/compat";
|
|
@@ -30,17 +30,18 @@ function ResultSummary({
|
|
|
30
30
|
timestamp,
|
|
31
31
|
onClick,
|
|
32
32
|
isSlim = false,
|
|
33
|
+
lineClamp = false,
|
|
33
34
|
styles
|
|
34
35
|
}) {
|
|
35
36
|
styles = mergeStyles({ ...defaultStyles }, styles);
|
|
36
37
|
if (isSlim) {
|
|
37
38
|
let hasChanged = next !== previous;
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
39
40
|
"div",
|
|
40
41
|
{
|
|
41
42
|
className: `${styles.container} ${styles.containerSlim}`,
|
|
42
43
|
onClick,
|
|
43
|
-
children: [
|
|
44
|
+
children: /* @__PURE__ */ jsxs("p", { className: `${styles.titleSlim} ${lineClamp && styles.lineClamp}`, children: [
|
|
44
45
|
hasChanged ? /* @__PURE__ */ jsx(
|
|
45
46
|
GradientIcon,
|
|
46
47
|
{
|
|
@@ -52,18 +53,17 @@ function ResultSummary({
|
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
] }),
|
|
56
|
+
" ",
|
|
57
|
+
title,
|
|
58
|
+
" ",
|
|
59
59
|
/* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
|
|
60
|
-
]
|
|
60
|
+
] })
|
|
61
61
|
}
|
|
62
62
|
);
|
|
63
63
|
} else {
|
|
64
64
|
return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
|
|
65
65
|
/* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
|
|
66
|
-
/* @__PURE__ */ jsx("p", { className: styles.paragraph
|
|
66
|
+
/* @__PURE__ */ jsx("p", { className: `${styles.paragraph} ${lineClamp && styles.lineClamp}`, children: text }),
|
|
67
67
|
/* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
|
|
68
68
|
] });
|
|
69
69
|
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
const container = "
|
|
2
|
-
const containerSlim = "
|
|
3
|
-
const titleSlim = "
|
|
4
|
-
const
|
|
5
|
-
const
|
|
1
|
+
const container = "_container_32bi7_1";
|
|
2
|
+
const containerSlim = "_containerSlim_32bi7_12";
|
|
3
|
+
const titleSlim = "_titleSlim_32bi7_17";
|
|
4
|
+
const lineClamp = "_lineClamp_32bi7_27";
|
|
5
|
+
const dateStampLinePosition = "_dateStampLinePosition_32bi7_40";
|
|
6
|
+
const paragraph = "_paragraph_32bi7_44";
|
|
6
7
|
const defaultStyles = {
|
|
7
8
|
container,
|
|
8
9
|
containerSlim,
|
|
9
10
|
titleSlim,
|
|
11
|
+
lineClamp,
|
|
10
12
|
dateStampLinePosition,
|
|
11
13
|
paragraph
|
|
12
14
|
};
|
|
@@ -15,6 +17,7 @@ export {
|
|
|
15
17
|
containerSlim,
|
|
16
18
|
dateStampLinePosition,
|
|
17
19
|
defaultStyles as default,
|
|
20
|
+
lineClamp,
|
|
18
21
|
paragraph,
|
|
19
22
|
titleSlim
|
|
20
23
|
};
|
package/dist/style.css
CHANGED
|
@@ -2455,7 +2455,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
|
|
|
2455
2455
|
color: var(--primary-text-color);
|
|
2456
2456
|
margin-top: var(--space-2);
|
|
2457
2457
|
}
|
|
2458
|
-
.
|
|
2458
|
+
._container_32bi7_1 {
|
|
2459
2459
|
background-color: var(--quaternary-bg-color);
|
|
2460
2460
|
border-radius: 4px;
|
|
2461
2461
|
padding: 4px 8px 6px 8px;
|
|
@@ -2466,12 +2466,12 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
|
|
|
2466
2466
|
height: 100%;
|
|
2467
2467
|
}
|
|
2468
2468
|
|
|
2469
|
-
.
|
|
2469
|
+
._containerSlim_32bi7_12 {
|
|
2470
2470
|
min-width: 260px;
|
|
2471
2471
|
display: inline-block;
|
|
2472
2472
|
}
|
|
2473
2473
|
|
|
2474
|
-
.
|
|
2474
|
+
._titleSlim_32bi7_17 {
|
|
2475
2475
|
display: inline;
|
|
2476
2476
|
color: var(--primary-text-color) !important;
|
|
2477
2477
|
font-family: var(--text-sans) !important;
|
|
@@ -2481,11 +2481,24 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
|
|
|
2481
2481
|
margin-left: var(--space-1) !important;
|
|
2482
2482
|
}
|
|
2483
2483
|
|
|
2484
|
-
.
|
|
2484
|
+
._lineClamp_32bi7_27 {
|
|
2485
|
+
/* restrict lines of text to 2, or else add ellipses */
|
|
2486
|
+
display: -webkit-inline-box !important;
|
|
2487
|
+
display: -moz-inline-box !important;
|
|
2488
|
+
-webkit-box-orient: vertical;
|
|
2489
|
+
-moz-box-orient: vertical;
|
|
2490
|
+
line-clamp: 2;
|
|
2491
|
+
-webkit-line-clamp: 2;
|
|
2492
|
+
-moz-line-clamp: 2;
|
|
2493
|
+
overflow: hidden;
|
|
2494
|
+
text-overflow: ellipsis;
|
|
2495
|
+
}
|
|
2496
|
+
|
|
2497
|
+
._dateStampLinePosition_32bi7_40 {
|
|
2485
2498
|
display: block;
|
|
2486
2499
|
}
|
|
2487
2500
|
|
|
2488
|
-
.
|
|
2501
|
+
._paragraph_32bi7_44 {
|
|
2489
2502
|
font-family: var(--text-sans);
|
|
2490
2503
|
font-size: var(--sans-xsmall);
|
|
2491
2504
|
line-height: var(--sans-line-height);
|