@thednp/color-picker 2.0.0-alpha1 → 2.0.0-alpha10

package/src/ts/interface/ColorNames.ts

@@ -0,0 +1,20 @@
+export default interface ColorNames {
+  white: string;
+  black: string;
+  grey: string;
+  red: string;
+  orange: string;
+  brown: string;
+  gold: string;
+  olive: string;
+  yellow: string;
+  lime: string;
+  green: string;
+  teal: string;
+  cyan: string;
+  blue: string;
+  violet: string;
+  magenta: string;
+  pink: string;
+  [key: string]: string;
+}

package/src/ts/util/setMarkup.ts

@@ -36,13 +36,14 @@ const setMarkup = (self: ColorPicker) => {
   // set initial controls dimensions
   const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
 
-  const pickerBtn = createElement({
+  const pickerBtn = createElement<HTMLButtonElement>({
     id: `picker-btn-${id}`,
     tagName: 'button',
+    type: 'button',
     className: 'picker-toggle btn-appearance',
     ariaExpanded: 'false',
     ariaHasPopup: 'true',
-  }) as HTMLElement;
+  }) as HTMLButtonElement;
 
   pickerBtn.append(
     createElement({
@@ -84,13 +85,14 @@ const setMarkup = (self: ColorPicker) => {
       presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
     }
 
-    const presetsBtn = createElement({
+    const presetsBtn = createElement<HTMLButtonElement>({
       tagName: 'button',
+      type: 'button',
       className: 'menu-toggle btn-appearance',
       tabIndex: -1,
       ariaExpanded: 'false',
       ariaHasPopup: 'true',
-    }) as HTMLElement;
+    }) as HTMLButtonElement;
 
     const xmlns = encodeURI('http://www.w3.org/2000/svg');
     const presetsIcon = createElementNS(xmlns, {

package/tsconfig.json

@@ -2,7 +2,7 @@
   // https://janessagarrow.com/blog/typescript-and-esbuild/
  "compilerOptions": {
    "lib": ["DOM", "ESNext", "DOM.Iterable"],
-   "types": ["vite", "vite/client", "cypress", "@thednp/shorty", "@thednp/event-listener", "@thednp/color"],
+   "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
    "rootDir": "./",
    "baseUrl": "./",
    "module": "ESNext",

package/cypress/fixtures/getCEMarkup.js

@@ -1,29 +0,0 @@
-import ColorPickerElement from '../../src/js/color-picker-element';
-
-import getRandomInt from './getRandomInt';
-import testSample from './testSample';
-import FORMAT from './format';
-import colorNamesFrench from './colorNamesFrench';
-import componentLabelsFrench from './componentLabelsFrench';
-
-export default function getCEMarkup(body) {
-  const id = getRandomInt(0,9999);
-  const format = FORMAT[getRandomInt(0,3)];
-  const sample = testSample[getRandomInt(0,2)];
-  const value = sample[format];
-
-  // const cpe = document.createElement('color-picker');
-  const cpe = new ColorPickerElement();
-  cpe.setAttribute('data-id', `cpe-${format}-${id}`);
-  cpe.setAttribute('data-format', format);
-  cpe.setAttribute('data-value', value);
-  cpe.setAttribute('data-component-labels', JSON.stringify(componentLabelsFrench));
-  cpe.setAttribute('data-color-labels', colorNamesFrench);
-  cpe.setAttribute('data-color-keywords', 'red,gree,blue');
-  cpe.setAttribute('data-color-presets', '#330000,#990000,#ff0000,#ff6666,#ffcccc,#003333,#009999,#00ffff,#66ffff,#ccffff');
-
-  if (body) {
-    body.append(cpe);
-  }
-  return {value, id, format};
-}