2.0.1 • Published 4 years ago
@chameleon-ds/input v2.0.1
Chameleon Input
import { html, svg } from "lit-html";
import {
withKnobs,
text,
number,
boolean,
radios,
} from "@open-wc/demoing-storybook";
import "./chameleon-input.js";
const searchIcon = (slot) => svg`
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-search"
slot="${slot}"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
`;
export default {
title: "Components|Form Elements/Input",
component: "chameleon-input",
decorators: [withKnobs],
options: { selectedPanel: "storybookjs/docs/panel" },
};
Properties
Property Name | Type(s) | Default Value | Description |
---|---|---|---|
autocomplete | Boolean | false | A string indicating the type of autocomplete functionality, if any, to allow on the input |
name | String | "cha-input" | The input's form name |
autofocus | Boolean | false | A Boolean which, if present, makes the input take focus when the form is presented |
disabled | Boolean | false | A Boolean attribute which is present if the input should be disabled |
noStepper | Boolean | false | A Boolean attribute which, if true, indicates that the input with number type will not display increment arrows |
step | Number | null | The input's number interval (available in type="number") |
readonly | Boolean | false | A Boolean attribute which, if true, indicates that the input cannot be edited |
required | Boolean | false | A Boolean which, if true, indicates that the input must have a value before the form can be submitted |
toggleable | Boolean | false | A Boolean which, if present and the input type is 'password', allows visibility of password characters to be toggled |
touched | Boolean | false | A Boolean which, if true, indicates that the input field has had a blur event |
type | String | "text" | A string indicating which input type the <input> element represents |
placeholder | String | "" | The input's placeholder value |
value | String | "" | The input's current value |
min | Number | null | The input's min value (available in type="number") |
max | Number | null | The input's max value (available in type="number") |
maxLength | Number | null | The input's max length (availabile in all types expect type="number") |
label | String | "" | The input's label text |
invalid | Boolean | false | Invalid boolean to allow validity access from higher level form errors |
validationMessage | String | "" | The input's error message |
icon-left | Boolean | false | Element has a left icon |
icon-right | Boolean | false | Element has a right icon |
Examples
Default
export const Default = () => {
const name = text("Name", "input-form-name");
const disabled = boolean("Disabled", false);
const readonly = boolean("Read Only", false);
const toggleable = boolean("Toggleable password visibility", false);
const label = text("Label", "Name");
const invalid = boolean("Invalid", false);
const error = text("Error", "");
const placeholder = text("Placeholder", "Text...");
const required = boolean("Required", false);
const step = number("Step", 0.01);
const noStepper = boolean(
"Hide increment arrows/disable incrementing",
false
);
const typeOptions = {
Text: "text",
Password: "password",
Email: "email",
Number: "number",
Search: "search",
Tel: "tel",
Url: "url",
};
const defaultThemeValue = "text";
const typeSelection = radios("Type", typeOptions, defaultThemeValue);
return html`
<chameleon-input
name="${name}"
?required="${required}"
?disabled="${disabled}"
?readonly="${readonly}"
?invalid="${invalid}"
?noStepper="${noStepper}"
?toggleable="${toggleable}"
.type="${typeSelection}"
.placeholder="${placeholder}"
.label="${label}"
.validationMessage="${error}"
.step="${step}"
></chameleon-input>
`;
};
Icon Left
export const IconLeft = () => html`
<chameleon-input label="Search" icon-left>
${searchIcon("icon-left")}
</chameleon-input>
`;
Icon Right
export const IconRight = () => html`
<chameleon-input label="Search" icon-right>
${searchIcon("icon-right")}
</chameleon-input>
`;
Error State
export const ErrorState = () => html`
<chameleon-input
label="Search *"
validationMessage="Field must not be empty"
invalid="true"
icon-right
>
${searchIcon("icon-right")}
</chameleon-input>
`;
2.0.1
4 years ago
2.0.0
4 years ago
1.4.7
4 years ago
1.4.6
4 years ago
1.4.5
4 years ago
1.4.2
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.6.0
5 years ago
0.5.1
5 years ago
0.5.0
5 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.13
5 years ago
0.2.12
5 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.1
5 years ago