orcs-design-system/es/components/TextInput/TextInput.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import TextInput from ".";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/TextInput",
  component: TextInput
};
export const defaultTextInput = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(TextInput, {
    id: "textInput1",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    my: "20px"
  }, "textInput1"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput2",
    type: "text",
    label: "Full name - invalid message",
    placeholder: "E.g. John Smith",
    invalid: true
  }, "textInput2"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput3",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    valid: true
  }, "textInput3"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput4",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    mandatory: true
  }, "textInput4")]
});
defaultTextInput.story = {
  name: "Default"
};
const numberProps = {
  decimalScale: 2,
  prefix: "$"
};
export const number = () => [/*#__PURE__*/_jsx(TextInput, {
  id: "numInput1",
  numberProps: numberProps,
  label: "Currency",
  value: "345345.55"
}, "numInput1")];
export const floatingLabel = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(TextInput, {
    id: "textInput5",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    floating: true
  }, "textInput5"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput6",
    type: "text",
    label: "Full name - invalid message",
    placeholder: "E.g. John Smith",
    floating: true,
    invalid: true
  }, "textInput6"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput7",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    floating: true,
    valid: true
  }, "textInput7"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput8",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    floating: true,
    mandatory: true
  }, "textInput8")]
});
export const withIcons = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(TextInput, {
    id: "textInput9",
    type: "text",
    label: "Phone number",
    placeholder: "E.g. (03) 9451 1786",
    iconLeft: ["fas", "phone"],
    "data-testid": "test-id"
  }, "textInput9"), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput10",
    type: "text",
    label: "Phone number",
    placeholder: "E.g. (03) 9451 1786",
    floating: true,
    iconLeft: ["fas", "phone"]
  }, "textInput10"), /*#__PURE__*/_jsx(TextInput, {
    fullWidth: true,
    id: "textInput11",
    type: "text",
    label: "What are you looking for?",
    placeholder: "E.g. agile teams",
    iconRight: ["fas", "search"]
  }, "textInput11"), /*#__PURE__*/_jsx(TextInput, {
    fullWidth: true,
    id: "textInput12",
    type: "text",
    label: "What are you looking for?",
    placeholder: "E.g. agile teams",
    floating: true,
    iconRight: ["fas", "search"]
  }, "textInput12")]
});
export const disabled = () => /*#__PURE__*/_jsx(TextInput, {
  id: "textInput13",
  type: "text",
  label: "Full name",
  placeholder: "E.g. John Smith",
  my: "20px",
  value: "This is uneditable",
  disabled: true
}, "textInput13");
defaultTextInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultTextInput"
};
floatingLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "floatingLabel"
};
withIcons.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withIcons"
};
disabled.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "disabled"
};