fix: type & refactoring

SchwarzIT · Nov 25, 2024 · f1d2f7e · f1d2f7e
1 parent 60ed227
commit f1d2f7e
Showing 1 changed file with 108 additions and 127 deletions.
diff --git a/apps/docs/src/.vitepress/components/ColorPalette.vue b/apps/docs/src/.vitepress/components/ColorPalette.vue
@@ -9,8 +9,7 @@ const props = defineProps<{
   name: OnyxColor;
 }>();
 
-const AVAILABLE_TABS = ["Base", "Text & Icons", "States"];
-
+const AVAILABLE_TABS = ["Base", "Text & Icons", "States"] as const;
 type AvailableTab = (typeof AVAILABLE_TABS)[number];
 const currentTab = ref<AvailableTab>(AVAILABLE_TABS[0]);
 
@@ -26,129 +25,108 @@ const whiteTextColor = "var(--onyx-color-base-grayscale-white)";
 /**
  * Available color steps to display for the currently active tab (e.g. 100-900 for base colors).
  */
-const colorSteps = computed<ColorPaletteValueProps[]>(() => {
-  if (currentTab.value === "Base") {
-    return Array.from({ length: 9 }, (_, index) => {
-      const step = (index + 1) * 100;
-      return {
-        description: step,
-        name: baseStepNames[step],
-        color: `var(--onyx-color-base-${props.name}-${step})`,
-        textColor: step < 500 ? `var(--onyx-color-text-icons-${props.name}-bold)` : whiteTextColor,
-      };
-    });
-  } else if (currentTab.value === "Text & Icons") {
-    const textColor =
-      props.name === "neutral" ? whiteTextColor : `var(--onyx-color-text-icons-${props.name}-bold)`;
-    return [
-      {
-        description: "soft",
-        color: `var(--onyx-color-text-icons-${props.name}-soft)`,
-        textColor,
-      },
-      {
-        description: "medium",
-        color: `var(--onyx-color-text-icons-${props.name}-medium)`,
-        textColor,
-      },
-      {
-        description: "intense",
-        color: `var(--onyx-color-text-icons-${props.name}-intense)`,
-        textColor: whiteTextColor,
-      },
-      props.name === "neutral"
-        ? {
-            description: "inverted",
-            color: `var(--onyx-color-text-icons-inverted)`,
-            textColor: `var(--onyx-color-text-icons-intense)`,
-            showBorder: true,
-          }
-        : {
-            description: "bold",
-            color: `var(--onyx-color-text-icons-${props.name}-bold)`,
-            textColor: whiteTextColor,
-          },
-    ];
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const mappings: any = {
-      cta: {
-        primary: "default",
-        danger: "invalid",
-        neutral: "disabled",
-      },
-      border: {
-        danger: "invalid",
-        default: props.name,
-      },
-      borderHover: {
-        danger: "invalid-hover",
-        neutral: "disabled",
-        default: `${props.name}-hover`,
-      },
-      focus: {
-        danger: "invalid",
-        default: props.name,
-      },
+function getBaseColorSteps(name: OnyxColor): ColorPaletteValueProps[] {
+  return Array.from({ length: 9 }, (_, index) => {
+    const step = (index + 1) * 100;
+    return {
+      description: step,
+      name: baseStepNames[step],
+      color: `var(--onyx-color-base-${name}-${step})`,
+      textColor: step < 500 ? `var(--onyx-color-text-icons-${name}-bold)` : whiteTextColor,
     };
-    const cta = mappings.cta[props.name] || null;
-    const border = mappings.border[props.name] || props.name;
-    const borderHover = mappings.borderHover[props.name] || mappings.borderHover.default;
-    const focus = mappings.focus[props.name] || mappings.focus.default;
-    const textColor =
-      props.name === "neutral" ? `var(--onyx-color-text-icons-${props.name}-bold)` : whiteTextColor;
-
-    return [
-      //cta
-      props.name === "primary" || props.name === "danger" || props.name === "neutral"
-        ? {
-            description: props.name === "neutral" ? "cta-disabled" : "cta",
-            color: `var(--onyx-color-component-cta-${cta})`,
-            textColor,
-          }
-        : null,
-      //cta-hover
-      props.name === "primary" || props.name === "danger"
-        ? {
-            description: "cta-hover",
-            color: `var(--onyx-color-component-cta-${cta}-hover)`,
-            textColor,
-          }
-        : null,
-      props.name === "primary" ||
-      props.name === "danger" ||
-      props.name === "neutral" ||
-      props.name === "success"
-        ? // border
-          {
-            description: props.name === "neutral" ? "border-neutral" : "border",
-            color: `var(--onyx-color-component-border-${border})`,
-            textColor,
-          }
-        : null,
-      // border-hover
-      props.name === "primary" ||
-      props.name === "danger" ||
-      props.name === "neutral" ||
-      props.name === "success"
-        ? {
-            description: props.name === "neutral" ? "border-disabled" : "border-hover",
-            color: `var(--onyx-color-component-border-${borderHover})`,
-            textColor,
-          }
-        : null,
-      //focus
-      props.name === "primary" ||
-      props.name === "danger" ||
-      props.name === "neutral" ||
-      props.name === "success"
-        ? {
-            description: props.name === "neutral" ? "focus-neutral" : "focus",
-            color: `var(--onyx-color-component-focus-${focus})`,
-            textColor: `var(--onyx-color-text-icons-${props.name}-bold)`,
-          }
-        : null,
-    ].filter((item) => item !== null);
+  });
+}
+
+function getTextAndIconColorSteps(name: OnyxColor): ColorPaletteValueProps[] {
+  const textColor =
+    name === "neutral" ? whiteTextColor : `var(--onyx-color-text-icons-${name}-bold)`;
+
+  return [
+    { description: "soft", color: `var(--onyx-color-text-icons-${name}-soft)`, textColor },
+    { description: "medium", color: `var(--onyx-color-text-icons-${name}-medium)`, textColor },
+    {
+      description: "intense",
+      color: `var(--onyx-color-text-icons-${name}-intense)`,
+      textColor: whiteTextColor,
+    },
+    name === "neutral"
+      ? {
+          description: "inverted",
+          color: `var(--onyx-color-text-icons-inverted)`,
+          textColor: `var(--onyx-color-text-icons-intense)`,
+          showBorder: true,
+        }
+      : {
+          description: "bold",
+          color: `var(--onyx-color-text-icons-${name}-bold)`,
+          textColor: whiteTextColor,
+        },
+  ];
+}
+
+function getStateColorSteps(name: OnyxColor): ColorPaletteValueProps[] {
+  type ExtendedOnyxColor = OnyxColor | "default";
+
+  const mappings: {
+    cta: Partial<Record<ExtendedOnyxColor, string>>;
+    border: Partial<Record<ExtendedOnyxColor, string>>;
+    borderHover: Partial<Record<ExtendedOnyxColor, string>>;
+    focus: Partial<Record<ExtendedOnyxColor, string>>;
+  } = {
+    cta: { primary: "default", danger: "invalid", neutral: "disabled" },
+    border: { danger: "invalid", default: name },
+    borderHover: { danger: "invalid-hover", neutral: "disabled", default: `${name}-hover` },
+    focus: { danger: "invalid", default: name },
+  };
+
+  const cta = mappings.cta[name] || null;
+  const border = mappings.border[name] || name;
+  const borderHover = mappings.borderHover[name] || mappings.borderHover.default;
+  const focus = mappings.focus[name] || mappings.focus.default;
+  const textColor =
+    name === "neutral" ? `var(--onyx-color-text-icons-${name}-bold)` : whiteTextColor;
+
+  return [
+    name === "primary" || name === "danger" || name === "neutral"
+      ? {
+          description: name === "neutral" ? "cta-disabled" : "cta",
+          color: `var(--onyx-color-component-cta-${cta})`,
+          textColor,
+        }
+      : null,
+    name === "primary" || name === "danger"
+      ? {
+          description: "cta-hover",
+          color: `var(--onyx-color-component-cta-${cta}-hover)`,
+          textColor,
+        }
+      : null,
+    {
+      description: name === "neutral" ? "border-neutral" : "border",
+      color: `var(--onyx-color-component-border-${border})`,
+      textColor,
+    },
+    {
+      description: name === "neutral" ? "border-disabled" : "border-hover",
+      color: `var(--onyx-color-component-border-${borderHover})`,
+      textColor,
+    },
+    {
+      description: name === "neutral" ? "focus-neutral" : "focus",
+      color: `var(--onyx-color-component-focus-${focus})`,
+      textColor: `var(--onyx-color-text-icons-${name}-bold)`,
+    },
+  ].filter(Boolean) as ColorPaletteValueProps[];
+}
+
+const colorSteps = computed<ColorPaletteValueProps[]>(() => {
+  switch (currentTab.value) {
+    case "Base":
+      return getBaseColorSteps(props.name);
+    case "Text & Icons":
+      return getTextAndIconColorSteps(props.name);
+    default:
+      return getStateColorSteps(props.name);
   }
 });
 
@@ -159,18 +137,21 @@ let copyTimeout: ReturnType<typeof setTimeout> | undefined;
  * Copies the given color to the clipboard and sets the `copiedColor` to its value for 3 seconds.
  */
 const handleCopy = async (color: string) => {
+  const cssVariable = color.match(/var\(--(.*)\)/)?.[1] ?? color;
   await navigator.clipboard.writeText(color);
-  copiedColor.value = color.replace(/var\(--(.*)\)/, "$1");
+
+  copiedColor.value = cssVariable;
 
   // if multiple colors are copied quickly after each other, we need to
   // clear the previous timeout so we prevent race-conditions
   clearTimeout(copyTimeout);
-  copyTimeout = setTimeout(() => (copiedColor.value = ""), 3000);
+  copyTimeout = setTimeout(() => {
+    copiedColor.value = "";
+  }, 3000);
 };
 </script>
 
 <template>
-  <!-- Warning & Info don't have content for the "States" tab so we'll hide it -->
   <section class="palette">
     <DesignVariableHeader
       v-model="currentTab"