@empoweredvote/ev-ui 0.9.0 → 0.9.2

package/dist/index.js

@@ -136,7 +136,9 @@ function RadarChartCore({
   labelFontSize = 18,
   padding = 80,
   labelOffset = 20,
-  tightFit = false
+  tightFit = false,
+  maxLabelLines = 2,
+  showLabels = true
 }) {
   const { isDark } = useTheme();
   const radius = size / 2 - 40;
@@ -202,21 +204,22 @@ function RadarChartCore({
   });
   const labelMeta = spokes.map(([shortTitle], i) => {
     const angle = 2 * Math.PI * i / numSpokes;
+    const sinA = Math.sin(angle);
+    const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
+    if (!showLabels) return { estimatedWidth: 0, side };
     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
     );
     const fSize = adaptiveFontSize(longestLineLen, baseFSize);
     const estimatedWidth = longestLineLen * fSize * 0.6;
-    const sinA = Math.sin(angle);
-    const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
     return { estimatedWidth, side };
   });
   const leftLabelWidths = labelMeta.filter((m) => m.side === "left").map((m) => m.estimatedWidth);
   const rightLabelWidths = labelMeta.filter((m) => m.side === "right").map((m) => m.estimatedWidth);
-  const minPadding = 40;
+  const minPadding = showLabels ? 40 : 10;
   const maxPadding = padding * 2;
   const rawLeftPadding = Math.min(
     Math.max(
@@ -246,7 +249,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 = showLabels ? labelOffset + effLabelFSize * 1.1 * maxLabelLines : 8;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -291,14 +295,14 @@ function RadarChartCore({
         }
       );
     }),
-    spokes.map(([shortTitle], i) => {
+    showLabels && spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
       const anchor = angle > Math.PI ? "end" : angle < Math.PI && angle > 0 ? "start" : "middle";
       const cosA = Math.cos(angle);
       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 +443,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 +468,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,9 +1965,13 @@ function PoliticianCard({
   style = {},
   badge,
   imageFocalPoint,
-  footer
+  footer,
+  imageWidth = "90px",
+  contentStyle = {}
 }) {
   const isHorizontal = variant === "horizontal";
+  const imageWidthPx = parseInt(imageWidth, 10) || 90;
+  const imageMinHeight = isHorizontal ? Math.ceil(imageWidthPx * 4 / 3) : void 0;
   const handleCardClick = (e) => {
     if (e.target.closest(".ev-compass-button")) return;
     onClick == null ? void 0 : onClick();
@@ -1984,25 +1992,29 @@ function PoliticianCard({
       cursor: onClick ? "pointer" : "default",
       transition: "box-shadow 0.2s ease, transform 0.2s ease",
       position: "relative",
-      minHeight: isHorizontal ? "130px" : void 0,
+      minHeight: imageMinHeight,
       height: "100%",
       ...style
     },
     imageWrapper: {
-      width: isHorizontal ? "90px" : "100%",
+      // Horizontal: fixed width with 3:4 aspect ratio so portrait photos look
+      // consistent regardless of card content height.
+      position: "relative",
+      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,
@@ -2020,7 +2032,8 @@ function PoliticianCard({
       padding: isHorizontal ? `${spacing[2]} ${spacing[3]}` : spacing[3],
       minWidth: 0,
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      ...contentStyle
     },
     name: {
       fontFamily: fonts.primary,