@aegov/design-system-react/dist/components/Input/Input.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithIcons = exports.WithHelperText = exports.WithError = exports.Variants = exports.Sizes = exports.Search = exports.Required = exports.Password = exports.Disabled = exports.Basic = void 0;
var _react = _interopRequireDefault(require("react"));
var _Input = _interopRequireDefault(require("./Input"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Input',
  component: _Input.default,
  parameters: {
    layout: 'centered'
  },
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'base', 'lg']
    },
    variant: {
      control: 'select',
      options: ['primary', 'secondary']
    },
    type: {
      control: 'select',
      options: ['text', 'email', 'password', 'search', 'tel', 'url', 'number']
    },
    disabled: {
      control: 'boolean'
    },
    required: {
      control: 'boolean'
    }
  }
}; // Basic Input
const Basic = exports.Basic = {
  args: {
    label: 'First Name',
    placeholder: 'Enter your first name',
    id: 'firstName'
  }
};

// Input with Helper Text
const WithHelperText = exports.WithHelperText = {
  args: {
    label: 'Email',
    type: 'email',
    placeholder: 'Enter your email',
    helperText: 'We will never share your email with anyone else.',
    id: 'email'
  }
};

// Input with Error
const WithError = exports.WithError = {
  args: {
    label: 'Username',
    placeholder: 'Enter username',
    error: 'This username is already taken',
    id: 'username'
  }
};

// Password Input
const Password = exports.Password = {
  args: {
    label: 'Password',
    type: 'password',
    placeholder: '••••••••',
    id: 'password'
  }
};

// Search Input
const Search = exports.Search = {
  args: {
    type: 'search',
    placeholder: 'Search...',
    id: 'search'
  }
};

// Input Sizes
const Sizes = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
  size: "sm",
  label: "Small Input",
  placeholder: "Small size",
  id: "small"
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
  size: "base",
  label: "Base Input",
  placeholder: "Base size",
  id: "base"
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
  size: "lg",
  label: "Large Input",
  placeholder: "Large size",
  id: "large"
}));

// Input with Icons
exports.Sizes = Sizes;
const WithIcons = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
  label: "Email",
  type: "email",
  placeholder: "Enter your email",
  prefix: /*#__PURE__*/_react.default.createElement(_react2.EnvelopeSimple, {
    className: "h-5 w-5"
  }),
  id: "email-prefix"
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
  label: "Username",
  placeholder: "Enter username",
  prefix: /*#__PURE__*/_react.default.createElement(_react2.User, {
    className: "h-5 w-5"
  }),
  id: "username-prefix"
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
  label: "Phone",
  type: "text",
  placeholder: "Enter phone number",
  prefix: /*#__PURE__*/_react.default.createElement(_react2.Phone, {
    className: "h-5 w-5"
  }),
  id: "phone-prefix"
}));

// Input Variants
exports.WithIcons = WithIcons;
const Variants = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col space-y-4"
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
  variant: "primary",
  label: "Primary Input",
  placeholder: "Primary variant",
  id: "primary"
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
  variant: "secondary",
  label: "Secondary Input",
  placeholder: "Secondary variant",
  id: "secondary"
}));

// Required Input
exports.Variants = Variants;
const Required = exports.Required = {
  args: {
    label: 'Email',
    type: 'email',
    placeholder: 'Enter your email',
    required: true,
    id: 'required-email'
  }
};

// Disabled Input
const Disabled = exports.Disabled = {
  args: {
    label: 'Disabled Input',
    placeholder: 'This input is disabled',
    disabled: true,
    id: 'disabled'
  }
};