feat(input-time-zone): add input-time-zone component

packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts

@@ -0,0 +1,106 @@
+import { newE2EPage } from "@stencil/core/testing";
+import {
+  accessible,
+  defaults,
+  disabled,
+  focusable,
+  formAssociated,
+  hidden,
+  labelable,
+  reflects,
+  renders,
+  t9n,
+} from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { toGMTLabel } from "./utils";
+
+describe("calcite-input-time-zone", () => {
+  describe("accessible", () => {
+    accessible("calcite-input-time-zone");
+  });
+
+  describe("focusable", () => {
+    focusable("calcite-input-time-zone");
+  });
+
+  describe("formAssociated", () => {
+    formAssociated("calcite-input-time-zone", { testValue: "-360", clearable: false });
+  });
+
+  describe("hidden", () => {
+    hidden("calcite-input-time-zone");
+  });
+
+  describe("renders", () => {
+    renders("calcite-input-time-zone", { display: "block" });
+  });
+
+  describe("labelable", () => {
+    labelable("calcite-input-time-zone");
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-input-time-zone", [
+      { propertyName: "disabled", value: true },
+      { propertyName: "open", value: true },
+      { propertyName: "scale", value: "m" },
+      { propertyName: "overlayPositioning", value: "absolute" },
+    ]);
+  });
+
+  describe("defaults", () => {
+    defaults("calcite-input-time-zone", [
+      { propertyName: "disabled", defaultValue: false },
+      { propertyName: "messageOverrides", defaultValue: undefined },
+      { propertyName: "open", defaultValue: false },
+      { propertyName: "overlayPositioning", defaultValue: "absolute" },
+      { propertyName: "scale", defaultValue: "m" },
+    ]);
+  });
+
+  describe("disabled", () => {
+    disabled("calcite-input-time-zone", { shadowAriaAttributeTargetSelector: "calcite-combobox" });
+  });
+
+  describe("t9n", () => {
+    t9n("calcite-input-time-zone");
+  });
+
+  describe("selects user's matching timezone offset by default", () => {
+    const timeZoneNamesAndOffsets = [
+      { name: "America/Los_Angeles", offset: -420 },
+      { name: "Europe/London", offset: 60 },
+    ];
+
+    timeZoneNamesAndOffsets.forEach(({ name, offset }) => {
+      it(`selects default timezone for "${name}"`, async () => {
+        const page = await newE2EPage();
+        await page.emulateTimezone(name);
+        await page.setContent(html`<calcite-input-time-zone></calcite-input-time-zone>`);
+        await page.waitForTimeout(1000);
+
+        const input = await page.find("calcite-input-time-zone");
+
+        expect(await input.getProperty("value")).toBe(`${offset}`);
+
+        const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
+
+        expect(await timeZoneItem.getProperty("textLabel")).toMatch(toGMTLabel(offset / 60));
+      });
+    });
+  });
+
+  it("allows users to preselect a timezone offset", async () => {
+    const page = await newE2EPage();
+    await page.emulateTimezone("America/Los_Angeles");
+    await page.setContent(html`<calcite-input-time-zone value="-360"></calcite-input-time-zone>`);
+
+    const input = await page.find("calcite-input-time-zone");
+
+    expect(await input.getProperty("value")).toBe("-360");
+
+    const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
+
+    expect(await timeZoneItem.getProperty("textLabel")).toMatch("GMT-6");
+  });
+});

packages/calcite-components/src/components/input-time-zone/input-time-zone.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+@include base-component();
+@include disabled();
+@include hidden-form-input();

packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts

@@ -0,0 +1,38 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
+
+export default {
+  title: "Components/Controls/InputTimeZone",
+  parameters: {
+    notes: readme,
+    options: {
+      timezone: "America/Los_Angeles",
+    },
+  },
+  ...storyFilters(),
+};
+
+export const simple = (): string => html`
+  <calcite-input-time-zone
+    ${boolean("disabled", false)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-input-time-zone>
+`;
+
+export const initialOffsetSelected_TestOnly = (): string => html`
+  <calcite-input-time-zone value="-360"></calcite-input-time-zone>
+`;
+
+export const displayingTimeZoneOffsets_TestOnly = (): string => html`
+  <calcite-input-time-zone open></calcite-input-time-zone>
+`;
+
+export const disabled_TestOnly = (): string => html`<calcite-input-time-zone disabled></calcite-input-time-zone>`;
+
+export const darkModeRTL_TestOnly = (): string => html`
+  <calcite-input-time-zone dir="rtl" class="calcite-mode-dark"></calcite-input-time-zone>
+`;
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };