Chameleon Select

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

const options = [
  {
    value: "arch",
    label: "Gateway Arch",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/00/St_Louis_night_expblend_cropped.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "union-station",
    label: "Union Station",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/St._Louis_Union_Station_%2817577826564%29.jpg/320px-St._Louis_Union_Station_%2817577826564%29.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "scott-joplin-house",
    label: "Scott Joplin House",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Scott_Joplin_House.jpg/568px-Scott_Joplin_House.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
];

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

Properties

Property Name	Type(s)	Default Value	Description
name	Boolean	false	The select's form name
options	Array	false	An array of the possible options to be selected
filteredOptions	Array	false	An array of filtered options
selectedOptions	Array	false	An array of the selected options
active	Boolean	false	A Boolean attribute which, if present, displays the filtered options
disabled	Boolean	false	A Boolean attribute which is present if the input should be disabled
readonly	Boolean	false	A Boolean attribute which, if true, indicates that the select cannot be edited
searchable	Boolean	false	A Boolean attribute which, if true, select can be searched
invalid	Boolean	false	A Boolean which, if true, indicates that the input is valid
label	String	false	The input's label
placeholder	String	false	The input's placeholder text
loading	Boolean	false	Whether or not select is loading
validationMessage	String	false	The select's error message

Examples

Default

export const Default = () => {
  const placeholder = text("Placeholder", "Please select an option");
  const label = text("Label", "Landmarks");
  const readonly = boolean("Read Only", false);
  const invalid = boolean("Invalid", false);
  const disabled = boolean("Disabled", false);
  const error = text("Error", "");

  return html`
    <chameleon-select
      .options="${options}"
      label="${label}"
      ?readonly="${readonly}"
      placeholder="${placeholder}"
      ?invalid="${invalid}"
      ?disabled="${disabled}"
      validationMessage="${error}"
    >
    </chameleon-select>
  `;
};

Error State

export const ErrorState = () => html`
  <chameleon-select
    label="Landmarks"
    ?invalid="${true}"
    validationMessage="Please select an option"
  >
  </chameleon-select>
`;