@chameleon-ds/date v2.0.1

Chameleon Date

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

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

Properties

Examples

Default

export const Default = () => {
  const placeholder = text("Placeholder", "Select Date");
  const label = text("Label", "Date *");
  const minValue = text("Min Value (YYYY-MM-DD)", "");
  const maxValue = text("Max Value (YYYY-MM-DD)", "");
  const readonly = boolean("Read Only", false);
  const invalid = boolean("Invalid", false);
  const required = boolean("Required", false);
  const disabled = boolean("Disabled", false);
  const error = text("Error", "");
  const name = text("Name", "input-form-name");

  return html`
    <chameleon-date
      name="${name}"
      .placeholder="${placeholder}"
      ?readonly="${readonly}"
      .label="${label}"
      .min="${minValue}"
      .max="${maxValue}"
      ?required="${required}"
      ?invalid="${invalid}"
      ?disabled="${disabled}"
      .validationMessage="${error}"
    ></chameleon-date>
  `;
};

Error State

export const ErrorState = () => html`
  <chameleon-date
    placeholder="Select Date"
    label="Date *"
    invalid="true"
    validationMessage="Date must be selected"
  ></chameleon-date>
`;