Chameleon timezone

Usage no npm install needed!

<script type="module">
  import chameleonDsTimezone from 'https://cdn.skypack.dev/@chameleon-ds/timezone';


Chameleon Timezone

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-timezone.js";

export default {
  title: "Components|Form Elements/Timezone",
  component: "chameleon-timezone",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },


Property Name Type(s) Default Value Description
required Boolean false A Boolean which, if true, indicates that the timezone must have a value before the form can be submitted
invalid Boolean false Invalid boolean to allow validity access from higher level form errors
readonly Boolean false A Boolean attribute which, if true, indicates that the timezone cannot be edited
disabled Boolean false A Boolean attribute which is present if the timezone should be disabled
name String "cha-timezone" The timezone's form name
timezoneLabel String "" The timezone's label
timezoneSubLabel String "" The timezone's sub label
errors Array [] The skeleton's circle height



export const Default = () => {
  const timezoneLabel = text("Label", "Please select your Timezone");
  const timezoneSubLabel = text("Sub Label", "");
  const readonly = boolean("Read Only", false);
  const invalid = boolean("Invalid", false);
  const required = boolean("Required", false);
  const disabled = boolean("Disabled", false);

  return html`

Error State

export const ErrorState = () => html`
    timezoneLabel="Please select your Timezone"
    .errors="${["Field cannot be left blank"]}"