@momentum-ui/web-components 2.16.8 → 2.16.9

package/src/components/combobox/tokens/lm-combobox-tokens.js

@@ -1,164 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const combobox = {
-  prefix: "lm",
-  component: "combobox",
-  "bg-color": {
-    light: colors.white[100].name,
-    dark: colors.gray[100].name
-  },
-  "border-color": {
-    light: colors.gray[40].name,
-    dark: colors.gray[80].name
-  },
-  "select-border-color": {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name
-  },
-  "text-color": {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[80].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.theme[70].name,
-      dark: colors.theme[50].name
-    },
-    "new-border-color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    },
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    },
-    "border-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    }
-  },
-  invalid: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    }
-  },
-  dropdown: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    item: {
-      "hover-bg-color": {
-        light: colors.blue[20].name,
-        dark: colors.blue[50].name
-      },
-      "focus-bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[40].name
-      },
-      "select-bg-color": {
-        light: colors.white[100].name,
-        dark: colors.gray[100].name
-      },
-      "select-font-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[90].name
-      },
-      "selected-bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[40].name
-      },
-      "checked-bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[50].name
-      },
-      "checked-icon-color": {
-        light: colors.white[60].name,
-        dark: colors.white[100].name
-      },
-      "icon-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  group: {
-    "button-bg-color": {
-      light: colors.gray[60].name,
-      dark: colors.gray[40].name
-    },
-    radius: {
-      light: "0.25rem",
-      dark: "0.25rem"
-    },
-    "focus-shadow": {
-      light: "0 0 4px 2px transparent",
-      dark: "0 0 4px 2px transparent"
-    },
-    "focus-border": {
-      light: "1px solid",
-      dark: "1px solid"
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    }
-  },
-  "group-label": {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    color: {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  },
-  placeholder: {
-    color: {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    }
-  }
-};
-
-module.exports = combobox;

package/src/components/combobox/tokens/md-combobox-tokens.js

@@ -1,168 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const combobox = {
-  prefix: "md",
-  component: "combobox",
-  "bg-color": {
-    light: colors.white[100].name,
-    dark: colors.gray[100].name
-  },
-  "border-color": {
-    light: colors.gray[30].name,
-    dark: colors.gray[70].name
-  },
-  "select-border-color": {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name
-  },
-  "text-color": {
-    light: colors.gray[80].name,
-    dark: colors.gray[30].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.theme[50].name,
-      dark: colors.theme[60].name
-    },
-    "new-border-color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    },
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    }
-  },
-  invalid: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    }
-  },
-  dropdown: {
-    "bg-color": {
-      light: colors.white[60].name,
-      dark: colors.gray[90].name
-    },
-    item: {
-      "hover-bg-color": {
-        light: colors.blue[20].name,
-        dark: colors.blue[50].name
-      },
-      "focus-bg-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[40].name
-      },
-      "focus-border-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[40].name
-      },
-      "select-bg-color": {
-        light: colors.white[60].name,
-        dark: colors.gray[90].name
-      },
-      "select-font-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[90].name
-      },
-      "selected-bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[40].name
-      },
-      "checked-bg-color": {
-        light: colors.theme[50].name,
-        dark: colors.theme[60].name
-      },
-      "checked-icon-color": {
-        light: colors.white[100].name,
-        dark: colors.white[60].name
-      },
-      "icon-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  group: {
-    "button-bg-color": {
-      light: colors.gray[60].name,
-      dark: colors.gray[40].name
-    },
-    radius: {
-      light: "0.25rem",
-      dark: "0.25rem"
-    },
-    "focus-shadow": {
-      light: "0 0 4px 2px #00a0d1",
-      dark: "0 0 4px 2px #00a0d1"
-    },
-    "focus-border": {
-      light: "0px solid",
-      dark: "0px solid"
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    }
-  },
-  "group-label": {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    color: {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  },
-  placeholder: {
-    color: {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].name
-    }
-  }
-};
-
-module.exports = combobox;

package/src/components/combobox/tokens/mdv2-combobox-tokens.js

@@ -1,146 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const combobox = {
-  prefix: "mdv2",
-  component: "combobox",
-  "bg-color": {
-    common: "$mds-color-theme-background-solid-primary-normal"
-  },
-  "border-color": {
-    common: "$mds-color-theme-outline-input-normal"
-  },
-  "text-color": {
-    common: "$mds-color-theme-text-primary-normal"
-  },
-  hover: {
-    "bg-color": {
-      common: "$mds-color-theme-background-primary-hover"
-    }
-  },
-  pressed: {
-    "bg-color": {
-      common: "$mds-color-theme-background-primary-active"
-    }
-  },
-  focus: {
-    "border-color": {
-      common: "$mds-color-theme-outline-theme-normal"
-    },
-    "new-border-color": {
-      common: "$mds-color-theme-outline-input-active"
-    },
-    "bg-color": {
-      common: "$mds-color-theme-background-primary-active"
-    }
-  },
-  disabled: {
-    "bg-color": {
-      common: "$mds-color-theme-background-primary-disabled"
-    },
-    "border-color": {
-      common: "$mds-color-theme-outline-primary-disabled"
-    }
-  },
-  invalid: {
-    "bg-color": {
-      common: "$mds-color-theme-background-solid-primary-normal"
-    },
-    "border-color": {
-      common: "$mds-color-theme-outline-cancel-normal"
-    }
-  },
-  dropdown: {
-    "bg-color": {
-      common: "$mds-color-theme-background-solid-primary-normal"
-    },
-    item: {
-      "hover-bg-color": {
-        common: "$mds-color-theme-background-primary-hover"
-      },
-      "focus-bg-color": {
-        common: "$mds-color-theme-background-primary-active"
-      },
-      "focus-border-color": {
-        common: "$mds-color-theme-control-active-normal"
-      },
-      "select-bg-color": {
-        common: "$mds-color-theme-background-primary-active"
-      },
-      "select-font-color": {
-        common: "$mds-color-theme-text-primary-normal"
-      },
-      "selected-bg-color": {
-        common: "$mds-color-theme-background-primary-active"
-      },
-      "checked-bg-color": {
-        common: "$mds-color-theme-control-active-normal"
-      },
-      "checked-icon-color": {
-        common: "$mds-color-theme-inverted-text-primary-normal"
-      },
-      "icon-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  group: {
-    "button-bg-color": {
-      common: "$mds-color-theme-background-solid-primary-normal"
-    },
-    radius: {
-      common: "0.25rem"
-    },
-    "focus-shadow": {
-      common: "0 0 4px 2px transparent"
-    },
-    "focus-border": {
-      common: "1px solid"
-    }
-  },
-  selected: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-default-normal"
-    },
-    "new-bg-color": {
-      common: "$mds-color-theme-background-solid-tertiary-normal"
-    },
-    "border-color": {
-      common: "mds-color-theme-background-alert-default-normal"
-    },
-    "new-border-color": {
-      common: "mds-color-theme-inverted-outline-button-normal"
-    },
-    hover: {
-      common: "$mds-color-theme-background-alert-default-hover"
-    }
-  },
-  "group-label": {
-    "bg-color": {
-      common: "$mds-color-theme-background-solid-primary-normal"
-    },
-    color: {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    "border-color": {
-      common: "unset"
-    }
-  },
-  placeholder: {
-    color: {
-      common: "$mds-color-theme-text-secondary-normal"
-    }
-  },
-  "primary-button": {
-    "bg-color": {
-      common: "$mds-color-theme-background-solid-primary-normal"
-    },
-    test: {
-      common: "$mds-color-theme-inverted-text-primary-normal"
-    }
-  }
-};
-
-module.exports = combobox;

package/src/components/date-range-picker/DateRangePicker.stories.ts

@@ -1,44 +0,0 @@
-import "@/components/date-range-picker/DateRangePicker";
-import { now } from "@/utils/dateUtils";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-html";
-import { DatePicker as DP } from "../datepicker/DatePicker"; // Keep type import as a relative path
-import "../theme/Theme";
-
-export default {
-  title: "Components/Date Range Picker",
-  component: "md-date-range-picker",
-  argTypes: {
-    shouldCloseOnSelect: { control: "boolean" },
-    weekStart: { control: { type: "select", options: DP.weekStartDays }, defaultValue: "" },
-    locale: { control: "text", defaultValue: "en-US" },
-    disabled: { control: "boolean" },
-    minDate: { control: "text", defaultValue: now().minus({ day: 5 }).toISODate() },
-    maxDate: { control: "text", defaultValue: now().plus({ day: 30 }).toISODate() },
-    value: { control: "text", defaultValue: now().toISODate() },
-    startDate: { control: "text", defaultValue: now().toISODate() },
-    endDate: { control: "text", defaultValue: now().toISODate() }
-  },
-  parameters: {
-    a11y: {
-      element: "md-date-range-picker"
-    }
-  }
-};
-
-export const DateRangePicker = (args: Args) => {
-  return html`
-    <md-date-range-picker
-      ?disabled=${args.disabled}
-      ?should-close-on-select=${args.shouldCloseOnSelect}
-      value=${args.value}
-      weekStart=${args.weekStart}
-      locale=${args.locale}
-      minDate=${args.minDate}
-      maxDate=${args.maxDate}
-      start-date=${args.startDate}
-      end-date=${args.endDate}
-    >
-    </md-date-range-picker>
-  `;
-};

package/src/components/date-range-picker/DateRangePicker.test.ts

@@ -1,156 +0,0 @@
-import { now } from "@/utils/dateUtils";
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { DateTime } from "luxon";
-import "./DateRangePicker";
-import { DateRangePicker } from "./DateRangePicker";
-
-const fixtureFactory = async (): Promise<DateRangePicker.ELEMENT> => {
-  return await fixture(html` <md-date-range-picker></md-date-range-picker> `);
-};
-
-describe("DatePicker Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    expect(el).not.toBeNull();
-  });
-  test("should return a SQL formatted date string", async () => {
-    const el: DateRangePicker.ELEMENT = await fixture(html` <md-date-range-picker></md-date-range-picker> `);
-    const date = now();
-    const formatted = date.toSQLDate();
-    expect(el.dateToSqlTranslate(date)).toEqual(formatted);
-  });
-  test("should format a SQL date string with slashes instead of dashes", async () => {
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    const date = "2021-12-12";
-    const formatted = "2021/12/12";
-    expect(el.sqlDateToSlashes(date)).toEqual(formatted);
-  });
-  test("should handle date selection and value update", async () => {
-    const firstDate = DateTime.fromObject({ month: 11, day: 15 });
-    const secondDate = firstDate.plus({ days: 5 });
-
-    const el: DateRangePicker.ELEMENT = await fixture(html` <md-date-range-picker value=""></md-date-range-picker> `);
-
-    const selectFunc = jest.spyOn(el, "handleDateSelection");
-    const updateFunc = jest.spyOn(el, "updateValue");
-    const initialValue = el.value;
-
-    el.handleDateSelection({ detail: { data: firstDate } });
-    expect(selectFunc).toHaveBeenCalled();
-    expect(updateFunc).toHaveBeenCalled();
-
-    el.handleDateSelection({ detail: { data: secondDate } });
-    expect(selectFunc).toHaveBeenCalled();
-    expect(updateFunc).toHaveBeenCalled();
-    expect(el.value?.length).toBeGreaterThan(initialValue!.length);
-  });
-
-  test("should correctly assign start/end values if use enters in reverse order", async () => {
-    const firstDate = DateTime.fromObject({ month: 11, day: 15 });
-    const secondDate = firstDate.minus({ days: 5 });
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    const firstSelect = new CustomEvent("day-select", {
-      detail: {
-        date: firstDate
-      }
-    });
-    const secondSelect = new CustomEvent("day-select", {
-      detail: {
-        date: secondDate
-      }
-    });
-    el.handleSelect(firstSelect);
-    el.handleSelect(secondSelect);
-    expect(el.startDate).toEqual(secondDate.toSQLDate());
-    expect(el.endDate).toEqual(firstDate.toSQLDate());
-  });
-
-  test("should only emit date-range-change event when both start and end dates set", async () => {
-    const el: DateRangePicker.ELEMENT = new DateRangePicker.ELEMENT();
-    expect(el.startDate).toBeUndefined();
-    expect(el.endDate).toBeUndefined();
-
-    let capturedEvent: CustomEvent | null = null;
-    const eventSpy = jest.fn((event: CustomEvent) => {
-      capturedEvent = event;
-    }) as unknown as EventListener;
-    el.addEventListener("date-range-change", eventSpy as EventListener);
-
-    el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 1 }) } });
-    expect(el.startDate).not.toBeUndefined();
-    expect(el.endDate).toBeUndefined();
-
-    expect(eventSpy).not.toHaveBeenCalled();
-    expect(capturedEvent).toBeNull();
-
-    el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 2 }) } });
-    expect(el.startDate).not.toBeUndefined();
-    expect(el.startDate).not.toBeUndefined();
-
-    expect(eventSpy).toHaveBeenCalledTimes(1);
-    expect(capturedEvent).not.toBeNull();
-    expect(capturedEvent!.detail).toEqual({
-      startDate: el.startDate,
-      endDate: el.endDate
-    });
-  });
-
-  describe("should handle range modification scenarios", () => {
-    const date1 = DateTime.fromObject({ month: 11, day: 15 });
-    const date2 = date1.plus({ days: 10 });
-    const date3 = date2.plus({ days: 10 });
-    const date4 = date3.plus({ days: 10 });
-
-    test.each([
-      [date1, date2, date3, date4],
-      [date4, date3, date2, date1],
-      [date2, date1, date4, date3],
-      [date3, date4, date1, date2]
-    ])("should handle date selection in order %s %s %s %s", async (dateA, dateB, dateC, dateD) => {
-      const el = await fixtureFactory();
-      expect(el.startDate).toBeUndefined();
-      expect(el.endDate).toBeUndefined();
-
-      const firstSelect = new CustomEvent("day-select", {
-        detail: {
-          date: dateA
-        }
-      });
-      el.handleSelect(firstSelect);
-      expect(el.startDate).toEqual(dateA.toSQLDate());
-      expect(el.endDate).toBeUndefined();
-
-      const secondSelect = new CustomEvent("day-select", {
-        detail: {
-          date: dateB
-        }
-      });
-      el.handleSelect(secondSelect);
-      // why use OR for the following two expects?
-      // see above "should correctly assign start/end values if use enters in reverse order" test
-      expect(el.startDate === dateA.toSQLDate() || el.startDate === dateB.toSQLDate()).toBeTruthy();
-      expect(el.endDate === dateA.toSQLDate() || el.endDate === dateB.toSQLDate()).toBeTruthy();
-
-      const thirdSelect = new CustomEvent("day-select", {
-        detail: {
-          date: dateC
-        }
-      });
-      el.handleSelect(thirdSelect);
-      expect(el.startDate).toEqual(dateC.toSQLDate());
-      expect(el.endDate).toBeUndefined();
-
-      const fourthSelect = new CustomEvent("day-select", {
-        detail: {
-          date: dateD
-        }
-      });
-      el.handleSelect(fourthSelect);
-      expect(el.startDate === dateC.toSQLDate() || el.startDate === dateD.toSQLDate()).toBeTruthy();
-      expect(el.endDate === dateC.toSQLDate() || el.endDate === dateD.toSQLDate()).toBeTruthy();
-    });
-  });
-});