#1478 - added "remove max-width" option to stats-cards and updated docs

undp · Jan 20, 2025 · 373957d · 373957d
1 parent 53ce378
commit 373957d
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 153 deletions.
diff --git a/docs/css/components/stats-cards.min.css b/docs/css/components/stats-cards.min.css
diff --git a/docs/js/all.min.js b/docs/js/all.min.js
diff --git a/docs/js/swiper.min.js b/docs/js/swiper.min.js
diff --git a/stories/Components/UIcomponents/Cards/StatsCards/StatsCards.jsx b/stories/Components/UIcomponents/Cards/StatsCards/StatsCards.jsx
@@ -1,57 +1,73 @@
-import React, { useEffect } from 'react';
-import { fitText } from '../../../../assets/js/fitText';
-import './stats-cards.scss';
-import { Heading } from '../../../../Atom/Typography/Heading/Heading';
-import { P } from '../../../../Atom/BaseTypography/Paragraph/Paragraph';
+import React, { useEffect } from "react";
+import { fitText } from "../../../../assets/js/fitText";
+import "./stats-cards.scss";
+import { Heading } from "../../../../Atom/Typography/Heading/Heading";
+import { P } from "../../../../Atom/BaseTypography/Paragraph/Paragraph";
 
 const cls = (...classes) => {
-  if (typeof fitText == 'function') {
-    setTimeout(() => { fitText('.stats-card h2'); }, 200);
+  if (typeof fitText == "function") {
+    setTimeout(() => {
+      fitText(".stats-card h2");
+    }, 200);
   }
-  return classes.filter(Boolean).length > 0 ? classes.filter(Boolean).join(' ') : null;
+  return classes.filter(Boolean).length > 0
+    ? classes.filter(Boolean).join(" ")
+    : null;
 };
 
 export const accent_color_options = {
-  yellow: 'yellow',
-  red: 'red',
-  green: 'green',
-  blue: 'blue',
+  yellow: "yellow",
+  red: "red",
+  green: "green",
+  blue: "blue",
 };
 
-export function StatsCards({
-  title, number, percent, content, Size, ...args
-}) {
+export function StatsCards({ title, number, percent, content, Size, ...args }) {
   let size;
   switch (Size) {
-    case 'Small':
-      size = 'small';
+    case "Small":
+      size = "small";
       break;
-    case 'Medium':
-      size = 'medium';
+    case "Medium":
+      size = "medium";
       break;
-    case 'Large':
-      size = 'large';
+    case "Large":
+      size = "large";
       break;
-    case 'Extra large':
-      size = 'x-large';
+    case "Extra large":
+      size = "x-large";
       break;
     default:
-      size = 'medium';
+      size = "medium";
   }
 
   useEffect(() => {
-    if (typeof fitText == 'function') {
-      fitText('.stats-card h2');
+    if (typeof fitText == "function") {
+      fitText(".stats-card h2");
     }
   }, []);
-  let color = (args.Hovercolor) ? accent_color_options[`${args.Hovercolor}`] : accent_color_options[`${args.accent}`];
-  let accent_color = color ? `accent-${color}` : '';
+  let color = args.Hovercolor
+    ? accent_color_options[`${args.Hovercolor}`]
+    : accent_color_options[`${args.accent}`];
+  let accent_color = color ? `accent-${color}` : "";
+  let max_width = args.MaxWidth === "No" ? "full-width" : "";
 
   return (
-    <div className={cls('stats-card', `${size}`, `${accent_color}`)}>
+    <div
+      className={cls(
+        "stats-card",
+        `${size}`,
+        `${accent_color}`,
+        `${max_width}`,
+      )}
+    >
       <div>
-        {size == 'x-large' || size == 'large' ? (<Heading type="3" label={title} />) : null}
-        <div><Heading type="2" label={number} /></div>
+        {size == "x-large" || size == "large" ? (
+          <Heading type="3" label={title} />
+        ) : null}
+        <div>
+          <Heading type="2" label={number} />
+        </div>
       </div>
       <div>
         <Heading type="4" label={percent} />