isomtrik-quickchat/dist/collection/stories/Components/Inputbox/Input.stories.js

isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu

import { html } from 'lit';
import './Input.js';

export default {
  title: 'Atoms/Input',
  tags: ['autodocs'],
  render: (args) => html`<my-input .value=${args.value} .placeholder=${args.placeholder} .width=${args.width} .height=${args.height} .borderColor=${args.borderColor} .borderRadius=${args.borderRadius} .backgroundColor=${args.backgroundColor} .fontSize=${args.fontSize} .padding=${args.padding} .color=${args.color} .placeholderColor=${args.placeholderColor} .borderWidth=${args.borderWidth}></my-input>`,
  argTypes: {
    value: { control: 'text' },
    placeholder: { control: 'text' },
    width: { control: 'text' },
    height: { control: 'text' },
    borderColor: { control: 'color' },
    borderRadius: { control: 'text' },
    backgroundColor: { control: 'color' },
    fontSize: { control: 'text' },
    padding: { control: 'text' },
    color: { control: 'color' },
    placeholderColor: { control: 'color' },
    borderWidth: { control: 'text' }, 
  },
  args: {
    value: '',
    placeholder: 'Enter text',
    width: '300px',
    height: '50px',
    borderColor: 'gray',
    borderRadius: '4px',
    backgroundColor: 'white',
    fontSize: '16px',
    padding: '0 12px',
    color: 'black',
    placeholderColor: '#aaa',
    borderWidth: '1px', 
    
  },
};

export const Default = {
  args: {
    value: '',
    placeholder: 'Enter text',
    width: '300px',
    height: '40px',
    borderColor: 'gray',
    borderRadius: '4px',
    backgroundColor: 'white',
    fontSize: '16px',
    padding: '0 12px',
    placeholderColor: '#aaa',
    borderWidth: '1px',
  },
};

export const Tall = {
  args: {
    value: '',
    placeholder: 'Need some photos. It will be helpful to assess the workload',
    width: '300px',
    height: '60px',
    borderColor: 'gray',
    borderRadius: '4px',
    backgroundColor: '#EFF1FA',
    fontSize: '16px',
    padding: '0 12px',
    placeholderColor: '#888',
    borderWidth: '2px', 
  },
};

export const InputBox = {
  args: {
    value: '',
    placeholder: 'Enter text',
    width: '100%',
    height: '60px',
    borderColor: 'gray',
    borderRadius: '4px',
    backgroundColor: 'white',
    fontSize: '14px',
    padding: '0 10px',
    placeholderColor: '#666',
    borderWidth: '1px',
  },
};