fix: scales.html not loading in production (#237)

* fix: scales.html not loading in production, closes #236

.changeset/calm-starfishes-thank.md

@@ -0,0 +1,5 @@
+---
+"@adobe/leonardo-ui": patch
+---
+
+* Fix scales.html not loading in production

docs/ui/README.md

@@ -17,7 +17,7 @@ To get started developing Leonardo's UI:
 pnpm install
 
 # Run local server
-pnpm dev
+pnpm moon run dev
 ```
 
 Then, visit the live reloading web UIs here:
@@ -28,7 +28,7 @@ http://localhost:1234/tools.html
 
 ### Cross-package development
 
-When making updates to `@adobe/leonardo-contrast-colors` while also developing the user interface, some issues may occur while linking the local dependency. 
+When making updates to `@adobe/leonardo-contrast-colors` while also developing the user interface, some issues may occur while linking the local dependency.
 Follow these steps **every time you install or update an npm dependency**:
 
 1. Install your new dependency
@@ -41,6 +41,7 @@ pnpm add my-new-package
 
 ```
 rm -rf <leonardo-root>/.parcel-cache
+rm -rf <leonardo-root>/.moon/cache
 ```
 
 3. Link local Leonardo

docs/ui/moon.yml

@@ -82,6 +82,7 @@ tasks:
       - parcel
       - build
       - --no-optimize
+      - --no-cache
       - src/index.html
       - src/scales.html
       - src/tools.html

docs/ui/src/js/createHtmlElement.js

@@ -41,7 +41,7 @@ function createSvgElement({element, id, className, attributes, styles, textConte
   const svgns = 'http://www.w3.org/2000/svg';
   const el = document.createElementNS(svgns, element);
   if (id) el.id = id;
-  if (className) el.className = className;
+  if (className) el.setAttribute('class', className);
   if (styles) {
     for (const [prop, value] of Object.entries(styles)) {
       el.style[prop] = value;