chore: make component styles more readable

GovAlta · Jul 17, 2024 · 863d2d5 · 863d2d5
1 parent 28bd5ce
commit 863d2d5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 32 deletions.
diff --git a/libs/web-components/src/common/utils.ts b/libs/web-components/src/common/utils.ts
@@ -1,4 +1,33 @@
-export function getSlottedChildren(rootEl?: HTMLElement, parentTestSelector?: string): Element[] {
+// Creates a style string from a list of styles.
+// This function accepts booleans to prevent the need for ternary ops when passing
+// in conditional styles
+//
+// ```
+// <div
+//  style={styles(
+//   isImportant && "color: red",  // when isImportant === false a false value will be passed
+// )}>
+//   ...
+// </div>
+// ```
+export function styles(...css: (string | boolean)[]): string {
+  return css
+    .filter((item: string | boolean) => !!item)
+    .map((item: string | boolean) =>
+      typeof item === "string" ? item.replace(";", "") : item,
+    )
+    .join(";");
+}
+
+// creates a style attribute/value or empty string
+export function style(name: string, value: string | number): string {
+  return value ? `${name}: ${value}` : "";
+}
+
+export function getSlottedChildren(
+  rootEl?: HTMLElement,
+  parentTestSelector?: string,
+): Element[] {
   const slot = rootEl?.querySelector("slot");
   if (slot) {
     return slot.assignedElements();
@@ -35,7 +64,7 @@ export function isValidDate(d: Date): boolean {
 }
 
 export function validateRequired(componentName: string, props: Record<string, unknown>) {
-  Object.entries(props).forEach(prop => {
+  Object.entries(props).forEach((prop) => {
     if (!prop[1]) {
       console.warn(`${componentName}: ${prop[0]} is required`);
     }
@@ -97,21 +126,13 @@ export function getTimestamp(val?: Date) {
   return `${month} ${date}${ordinal} ${year}, ${hour}:${min} ${meridium}`;
 }
 
-export function cssVar(name: string, value: string | number): string {
-  return value ? `${name}: ${value};` : "";
-}
-
 export function pluralize(word: string, count: number) {
   if (count === 1) return word;
   return `${word}s`;
 }
 
 export function clamp(value: number, min: number, max: number): number {
-  return value > max
-    ? max
-    : value < min
-      ? min
-      : value
+  return value > max ? max : value < min ? min : value;
 }
 
 export function generateRandomId() {

diff --git a/libs/web-components/src/components/icon/Icon.svelte b/libs/web-components/src/components/icon/Icon.svelte
@@ -529,7 +529,7 @@
 
 <script lang="ts">
   import type { Spacing } from "../../common/styling";
-  import { cssVar, toBoolean } from "../../common/utils";
+  import { style, toBoolean } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
   import { onMount } from "svelte";
 
@@ -609,8 +609,8 @@
   {title}
   style={`
     ${calculateMargin(mt, mr, mb, ml)}
-    ${cssVar("--fill-color", fillcolor)};
-    ${cssVar("--opacity", opacity)};
+    ${style("--fill-color", fillcolor)};
+    ${style("--opacity", opacity)};
   `}
 >
   {#if type}

diff --git a/libs/web-components/src/components/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte
@@ -11,7 +11,7 @@
 <script lang="ts">
   import { onMount, tick } from "svelte";
   import { calculateMargin } from "../../common/styling";
-  import { cssVar, getSlottedChildren, toBoolean } from "../../common/utils";
+  import { style, getSlottedChildren, styles, toBoolean } from "../../common/utils";
   import type { Spacing } from "../../common/styling";
 
   // Public
@@ -23,6 +23,8 @@
   export let minwidth: string = "";
   // allow width to be hardcoded
   export let width: string = "";
+  export let height: "full" | "wrap-content" = "wrap-content";
+
   // allows to override the default padding when content needs to be flush with boundries
   export let padded: string = "true";
   // provides control to where the popover content is positioned
@@ -214,17 +216,18 @@
 <div
   bind:this={_rootEl}
   data-testid={testid}
-  style={`
-    ${(_relative && "position: relative;") || ""}
-    ${calculateMargin(mt, mr, mb, ml)}
-    ${cssVar("--offset-top", voffset)}
-    ${cssVar("--offset-bottom", voffset)}
-    ${cssVar("--offset-left", hoffset)}
-    ${cssVar("--offset-right", hoffset)}
-    ${cssVar("--focus-border-width", focusborderwidth)}
-    ${cssVar("--border-radius", borderradius)}
-    ${cssVar("width", width)}
-`}
+  style={styles(
+    _relative && "position: relative",
+    height === "full" && "height: 100%;",
+    calculateMargin(mt, mr, mb, ml),
+    style("--offset-top", voffset),
+    style("--offset-bottom", voffset),
+    style("--offset-left", hoffset),
+    style("--offset-right", hoffset),
+    style("--focus-border-width", focusborderwidth),
+    style("--border-radius", borderradius),
+    style("width", width),
+  )}
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -253,12 +256,12 @@
         bind:this={_popoverEl}
         data-testid="popover-content"
         class="popover-content"
-        style={`
-          ${cssVar("width", width)}
-          min-width: ${minwidth};
-          max-width: ${maxwidth};
-          padding: ${_padded ? "var(--goa-space-m)" : "0"};
-        `}
+        style={styles(
+          style("width", width),
+          style("min-width", minwidth),
+          style("max-width", maxwidth),
+          style("padding", _padded ? "var(--goa-space-m)" : "0"),
+        )}
       >
         <goa-focus-trap open="true">
           <div bind:this={_focusTrapEl}>