@empoweredvote/ev-ui 0.9.0 → 0.9.1

package/dist/index.js

@@ -136,7 +136,8 @@ function RadarChartCore({
   labelFontSize = 18,
   padding = 80,
   labelOffset = 20,
-  tightFit = false
+  tightFit = false,
+  maxLabelLines = 2
 }) {
   const { isDark } = useTheme();
   const radius = size / 2 - 40;
@@ -203,7 +204,7 @@ function RadarChartCore({
   const labelMeta = spokes.map(([shortTitle], i) => {
     const angle = 2 * Math.PI * i / numSpokes;
     const baseFSize = labelFontSize;
-    const lines = wrapLabel(shortTitle, 12);
+    const lines = wrapLabel(shortTitle, 12, maxLabelLines);
     const longestLineLen = lines.reduce(
       (max, ln) => ln.length > max ? ln.length : max,
       0
@@ -246,7 +247,8 @@ function RadarChartCore({
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    const labelMargin = labelOffset + labelFontSize * 1.4 + labelFontSize * 1.1;
+    const effLabelFSize = adaptiveFontSize(12, labelFontSize);
+    const labelMargin = labelOffset + effLabelFSize * 1.1 * maxLabelLines;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -298,7 +300,7 @@ function RadarChartCore({
       const isTop = cosA > 0.5;
       const isBottom = cosA < -0.5;
       const baseFSize = labelFontSize;
-      const lines = wrapLabel(shortTitle, 12);
+      const lines = wrapLabel(shortTitle, 12, maxLabelLines);
       const longestLine = lines.reduce(
         (max, ln) => ln.length > max ? ln.length : max,
         0
@@ -439,7 +441,7 @@ function RadarChartCore({
 function adaptiveFontSize(longestLineLen, baseFSize) {
   return Math.max(baseFSize, 10);
 }
-function wrapLabel(label, maxChars = 12) {
+function wrapLabel(label, maxChars = 12, maxLines = 2) {
   const str = String(label);
   let rawWords;
   if (str.includes("/")) {
@@ -464,9 +466,9 @@ function wrapLabel(label, maxChars = 12) {
     }
   }
   if (line) lines.push(line);
-  if (lines.length > 2) {
-    const overflow = lines.splice(2).join(" ");
-    lines[1] = lines[1] + " " + overflow;
+  if (lines.length > maxLines) {
+    const overflow = lines.splice(maxLines).join(" ");
+    lines[maxLines - 1] = lines[maxLines - 1] + " " + overflow;
   }
   return lines;
 }
@@ -1961,7 +1963,8 @@ function PoliticianCard({
   style = {},
   badge,
   imageFocalPoint,
-  footer
+  footer,
+  imageWidth = "90px"
 }) {
   const isHorizontal = variant === "horizontal";
   const handleCardClick = (e) => {
@@ -1989,20 +1992,25 @@ function PoliticianCard({
       ...style
     },
     imageWrapper: {
-      width: isHorizontal ? "90px" : "100%",
+      // Horizontal: relative box whose height comes from the card (flex stretch),
+      // so the photo fills the card height instead of dictating it. Absolutely
+      // positioned children below mean a wider photo can't inflate the card.
+      position: isHorizontal ? "relative" : void 0,
+      width: isHorizontal ? imageWidth : "100%",
       height: isHorizontal ? "100%" : "auto",
-      maxHeight: isHorizontal ? "200px" : void 0,
       aspectRatio: isHorizontal ? void 0 : "4/5",
       flexShrink: 0,
       overflow: "hidden"
     },
     image: {
+      ...isHorizontal ? { position: "absolute", top: 0, left: 0 } : {},
       width: "100%",
       height: "100%",
       objectFit: "cover",
       objectPosition: imageFocalPoint != null ? imageFocalPoint : "center 20%"
     },
     imagePlaceholder: {
+      ...isHorizontal ? { position: "absolute", top: 0, left: 0 } : {},
       width: "100%",
       height: "100%",
       backgroundColor: colors.evTeal,