isomtrik-quickchat/dist/collection/stories/Components/TestFooter/TestFooter.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 './TestFooter';

export default {
  title: 'Molecules/FinalFooter',
  component: 'my-test-footer',
  tags: ['autodocs'],
  argTypes: {
    inputBorderColor: { control: 'color' },
    inputBorderWidth: { control: 'text' },
    inputBorderStyle: {
      control: 'select',
      options: ['dashed', 'double', 'solid', 'dotted'],
    },
    inputPlaceholder: { control: 'text' },
    inputBgColor: { control: 'color' },
    inputFontSize: { control: 'text' },
    inputFontColor: { control: 'color' },
    inputBorderRadius: { control: 'text' },
    attachmentIcon: { control: 'text' },
    sendButtonIcon: { control: 'text' },
    attachmentIconWidth: { control: 'text' },
    attachmentIconHeight: { control: 'text' },
    sendButtonIconWidth: { control: 'text' },
    sendButtonIconHeight: { control: 'text' },
    sendButtonIconRadius: { control: 'text' },
    containerPadding: { control: 'text' },
    containerBoxShadow: { control: 'text' },
    inputContainerBorderColor: {control: 'color'},
    inputContainerBorderWidth: {control: 'text'},
    inputContainerBorderRadius: {control: 'text'},
    inputPlaceholderColor: {control: 'color'},
    inputContainerPadding: {control: 'text'}
  },
  render: (args) => html`
    <my-test-footer
      .inputContainerPadding=${args.inputContainerPadding}
      .inputPlaceholderColor=${args.inputPlaceholderColor}
      .inputContainerBorderColor=${args.inputContainerBorderColor}
      .inputContainerBorderWidth=${args.inputContainerBorderWidth}
      .inputContainerBorderRadius=${args.inputContainerBorderRadius}
      .containerBoxShadow=${args.containerBoxShadow}
      .containerPadding=${args.containerPadding}
      .attachmentIconWidth=${args.attachmentIconWidth}
      .attachmentIconHeight=${args.attachmentIconHeight}
      .sendButtonIconHeight=${args.sendButtonIconHeight}
      .sendButtonIconWidth=${args.sendButtonIconWidth}
      .sendButtonIconRadius=${args.sendButtonIconRadius}
      .sendButtonIcon=${args.sendButtonIcon}
      .attachmentIcon=${args.attachmentIcon}
      .inputFontColor=${args.inputFontColor}
      .inputBgColor=${args.inputBgColor}
      .inputFontSize=${args.inputFontSize}
      .inputBorderRadius=${args.inputBorderRadius}
      .inputBorderColor=${args.inputBorderColor}
      .inputBorderWidth=${args.inputBorderWidth}
      .inputBorderStyle=${args.inputBorderStyle}
      .inputPlaceholder=${args.inputPlaceholder}
    ></my-test-footer>
  `,
};

export const Default = {
  args:{
    inputBorderColor:"transparent",
    inputBorderWidth:"1px",
    inputBorderStyle:"dashed",
    inputPlaceholder:"Type in your message here",
    sendButtonIcon:'https://flexcrew.s3.us-west-1.amazonaws.com/Group_1171280804_28e21ab22f.svg',
    attachmentIcon:'https://flexcrew.s3.us-west-1.amazonaws.com/gallery_add_4272954ac0.svg',
    attachmentIconHeight:"25px",
    attachmentIconWidth:"25px",
    sendButtonIconHeight:'50px',
    sendButtonIconWidth:'50px',
    sendButtonIconRadius:'50%',
    inputBgColor:"transparent",
    inputFontSize:"16px",
    containerPadding:"10px",
    containerBoxShadow:"0px -4px 4px 0px #DCDDDE40;",
    inputBorderRadius:"20px",
    inputContainerBorderColor:"#D4D8EB",
    inputContainerBorderWidth:"1px",
    inputContainerBorderRadius:"10px",
    inputFontColor:"gray",
    inputContainerBorderStyle:"solid",
    inputPlaceholderColor:"#D4D8EB",
    inputContainerPadding:"0 10px"
  },
};