finos/a11y-theme-builder#1058: fixing getDefaultName and getColorName…

TUTORIAL.md

@@ -85,7 +85,7 @@ The following is a tutorial of how to use this SDK in order to generate code whi
    // The 1st parameter is the name of the color (e.g. "blue")
    // The 2nd parameter is the hex value for the color (e.g. "#E2F3FF")
    const blue = myDesignSystem.atoms.colorPalette.addColor("blue", "#E2F3FF");
-   const red = myDesignSystem.atoms.colorPalette.addColor("red", "#DC143C);
+   const red = myDesignSystem.atoms.colorPalette.addColor("red", "#DC143C");
    const green = myDesignSystem.atoms.colorPalette.addColor("green", "#32CD32");
    ```
 
@@ -157,10 +157,10 @@ The following is a tutorial of how to use this SDK in order to generate code whi
 
    Now that the default color theme has been initialized, everything else should now be enabled including:
 
-   * All other atoms (e.g. `myTheme.atoms.gridSettings.isEnabled() is true`)
-   * All molecules (i.e. `myTheme.molecules.isEnabled() is true`)
-   * All organisms (i.e. `myTheme.organisms.isEnabled() is true`)
-   * Code generation (i.e. `myTheme.code.isEnabled() is true`)
+   * All other atoms (e.g. `myDesignSystem.atoms.gridSettings.isEnabled() is true`)
+   * All molecules (i.e. `myDesignSystem.molecules.isEnabled() is true`)
+   * All organisms (i.e. `myDesignSystem.organisms.isEnabled() is true`)
+   * Code generation (i.e. `myDesignSystem.code.isEnabled() is true`)
 
    All of these remaining properties are either optional (i.e. are not required to have a value) or have a default value.  The `listProperties` method of a design system may be used as shown below to list all properties of a design system, along with it's key, whether or not it is required, and the default value (or undefined if it has no default value).
 

src/atoms/colorPalette.ts

@@ -86,7 +86,7 @@ export class ColorPalette extends Atom implements IColorPalette {
      * @returns Return a list of string names for the colors.
      */
     public getColorNames(): string[] {
-        return Object.keys(this.colors);
+        return this.colors.keys() ? Array.from(this.colors.keys()) : [];
     }
 
     /**

src/atoms/colorThemes.ts

@@ -246,8 +246,6 @@ export class ColorTheme extends Node implements IColorTheme {
         this.gradientHeaderText = new GradientColors2(this, "Gradient Header Text", selOpts);
         // Accent color
         this.accent = new PropertyColorShade("Accent", true, this, opts);
-        this.addTheme = new PropertyBoolean("Add Theme", false, this);
-        this.addTheme.addDependency(this);
         this.accent.addDependency(this.primary);
         this.addTheme = new PropertyBoolean("Add Theme", false, this);
         this.addTheme.addDependency(this);
@@ -461,7 +459,7 @@ export class ColorTheme extends Node implements IColorTheme {
         const gradient2Shade = this.gradient2.from.getValue();
         if (!primaryShade) throw new Error(`No primary color has been set`);
         if (!gradient1Shade) throw new Error(`No gradient 1 color has been set`);
-        if (!gradient2Shade) throw new Error(`No gradient 1 color has been set`);
+        if (!gradient2Shade) throw new Error(`No gradient 2 color has been set`);
         const buttonShadeGroup = {
             shade: shade,
             halfShade: Shade.fromHex(shade.hex).setOpacity(0.5).setMode(shade.getMode()),

test/dotest.ts

@@ -126,6 +126,10 @@ async function test() {
     console.log("TEST: Adding new color after primary was selected");
     colorPalette.addColor("newColor","#0047AB");
     assert(ct.primary.getValue() !== undefined, `Adding a color to the theme should not change the primary color`);
+    const defaultColorName = colorPalette.getDefaultColorName();
+    assert(!!defaultColorName, `Retrieving default color name from populated palette should be non-empty`);
+    const colors = colorPalette.getColorNames();
+    assert((colors && colors.length > 0), `Retrieving color names from populated palette should be non-empty`);
     console.log("TEST: Added new color after primary was selected");
 
     // list all properties
@@ -181,7 +185,7 @@ async function test() {
     const sels = ct.button.getSelectableValues();
     for (let i = 0; i < sels.length; i++) {
         console.log(`TEST: BUTTON SELECTION ${i}`);
-        selectColorShade(ct.button, 0);
+        selectColorShade(ct.button, 0, i);
     }
     console.log("TEST: END BUTTON SELECTIONS");
 
@@ -704,7 +708,7 @@ const expectedCssVars = [
     "--hotlinkOnGradient3-visited",
     "--hotlinkOnGradient3",
     "--min-target",
-    "--mobile-target",
+    "--mobile-min-target",
     "--animation-speed",
     "--animation-distance",
     "--animation-focus-distance",
@@ -913,7 +917,7 @@ const expectedCssVars = [
     "--on-dropdown-focus-bg",
     "--dm-dropdown-focus-bg",
     "--dm-on-dropdown-focus-bg",
-    "--dropdown-elevation",
+    "--dropdown-shadow",
     "--dropdown-hover-style",
     "--dm-dropdown-hover-bg",
     "--dm-on-dropdown-hover-bg",
@@ -937,8 +941,6 @@ const expectedCssVars = [
     "--buttonTextDecoration",
     "--buttonTextTransform",
     "--buttonLetterSpacing",
-    "--button-elevation",
-    "--button-bevel",
     "--button-shadow",
     "--sm-button-padding",
     "--sm-button-height",
@@ -962,12 +964,7 @@ const expectedCssVars = [
     "--chipTypography",
     "--chipTextTransform",
     "--chipLetterSpacing",
-    "--chip-bevel",
-    "--chip-elevation",
-    "--switch-height",
-    "--switch-radius",
-    "--switch-bar-height",
-    "--switch-bar-radius",
+    "--chip-shadow",
     "--leftNav",
     "--on-leftNav",
     "--leftNavPadding",
@@ -988,37 +985,30 @@ const expectedCssVars = [
     "--card-border",
     "--card-border-color",
     "--card-radius",
-    "--card-elevation",
-    "--card-bevel",
+    "--card-shadow",
     "--card-shadow",
     "--modal-padding",
     "--modal-border",
     "--modal-radius",
-    "--modal-elevation",
     "--modal-shadow",
     "--modal-overlay",
     "--tooltip-padding",
     "--tooltip-border",
     "--tooltip-elevation",
     "--toast-padding",
     "--toast-radius",
-    "--toast-bevel",
-    "--toast-elevation",
-    "--toast-boxshadow",
-    "--image-elevation",
+    "--toast-shadow",
     "--image-radius",
     "--image-shadow",
     "--inline-image-height",
     "--inline-image-radius",
     "--avatar-border",
     "--avatar-border-lg",
-    "--avatar-elevation",
     "--avatar-shadow",
     "--sliderhandleHeight",
     "--sliderhandleRadius",
-    "--barInBevel",
-    "--popoverBevel",
-    "--popoverShadow",
+    "--sliderbar-shadow",
+    "--popover-shadow",
     "--popoverRadius",
     "--navbarPrimary-padding",
     "--navbarSecondary-padding",
@@ -1322,8 +1312,7 @@ const expectedCssVars = [
     "--statLetterSpacing",
     "--buttonLetterSpacing",
     "--sm-buttonLetterSpacing",
-    "--sliderhandleElevation",
-    "--popoverElevation",
+    "--sliderhandle-shadow",
 ];
 
 const expectedCssVarsPostMVP = [