Simplify styling approach

docs/widgets/services/iframe.md

@@ -23,9 +23,9 @@ widget:
 ```yaml
 widget:
   type: iframe
-  name: myIframe
+  name: myIframe # string - required - Also helps if you would like to target the iframe with a button
-  src: "http://example.com"
+  src: "http://example.com" # string - required - URL of the content to load within the iFrame
-  sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" } # optional, height of the iframe. The value for each breakpoint size must map directly to a field in the Tailwind Height CSS classes, see https://tailwindcss.com/docs/height
+  classes: "" # string - optional - Apply any tailwind height, rounding or width classes you would like Default: 'h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 w-full rounded'
   referrerPolicy: "same-origin" # string - optional - no default
   allowPolicy: "autoplay fullscreen gamepad" # optional, no default
   allowFullscreen: false # optional, default: true

src/utils/config/service-helpers.js

@@ -367,7 +367,7 @@ export function cleanServiceGroups(groups) {
           view,
           maxEvents,
           src, // iframe widget
-          sizes,
+          classes,
           referrerPolicy,
           allowPolicy,
           allowFullscreen,
@@ -423,7 +423,7 @@ export function cleanServiceGroups(groups) {
         }
         if (type === "iframe") {
           if (src) cleanedService.widget.src = src;
-          if (sizes) cleanedService.widget.sizes = sizes;
+          if (classes) cleanedService.widget.classes = classes;
           if (referrerPolicy) cleanedService.widget.referrerPolicy = referrerPolicy;
           if (allowPolicy) cleanedService.widget.allowPolicy = allowPolicy;
           if (allowFullscreen) cleanedService.widget.allowFullscreen = allowFullscreen;

src/widgets/iframe/component.jsx

@@ -12,23 +12,26 @@ export default function Component({ service }) {
     if (widget?.refreshInterval) {
       setInterval(
         () => setRefreshTimer(refreshTimer + 1),
-        widget?.refreshInterval < 1000 ? 1000 : widget?.refreshInterval,
+        widget?.refreshInterval < 1000 ? 1000 : widget?.refreshInterval
       );
     }
   }, [refreshTimer, widget?.refreshInterval]);
 
-  const scrollingDisableStyle = widget?.allowScrolling === "no" ? { pointerEvents: "none", overflow: "hidden" } : {};
+  const scrollingDisableStyle =
+    widget?.allowScrolling === "no"
+      ? { pointerEvents: "none", overflow: "hidden" }
+      : {};
 
-  const sizeClasses = `h-${widget?.sizes?.xs || 80} sm:h-${widget?.sizes?.sm || 80} md:h-${
+  const classes =
-    widget?.sizes?.md || 80
+    widget?.classes ||
-  } lg:h-${widget?.sizes?.lg || 80} xl:h-${widget?.sizes?.xl || 80} 2xl:h-${widget?.sizes?.["2xl"] || 80}`;
+    "h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 w-full rounded";
 
   return (
     <Container service={service}>
       <div
         className={classNames(
           "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center",
-          "service-block",
+          "service-block"
         )}
       >
         <iframe
@@ -43,11 +46,9 @@ export default function Component({ service }) {
           scrolling={widget?.allowScrolling}
           frameBorder={widget?.border}
           style={{
-            width: "100%",
-            "border-radius": "4px",
             scrollingDisableStyle,
           }}
-          className={sizeClasses}
+          className={classes}
         />
       </div>
     </Container>

tailwind.config.js

@@ -80,5 +80,13 @@ module.exports = {
       pattern: /h-([0-96])/,
       variants: ["sm", "md", "lg", "xl", "2xl"],
     },
+    {
+      pattern: /w-([0-96])/,
+      variants: ["sm", "md", "lg", "xl", "2xl"],
+    },
+    {
+      pattern: /rounded-(sm|md|lg|xl|2xl|3xl|full)/,
+      variants: ["sm", "md", "lg", "xl", "2xl"],
+    },
   ],
 };