isomtrik-quickchat
Version:
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
63 lines (59 loc) • 2.75 kB
JavaScript
import "./OutgoingTextMessageBubble"
import { html } from "lit"
export default {
title: 'Atoms/OutgoingTextMessageBubble',
component:'outgoing-text-message-bubble',
tags: ['autodocs'],
argTypes: {
bgColor: {control :'color'},
borderWidth: {control: 'text'},
borderColor: {control: 'color'},
borderStyle: {
control: 'select',
options: ['dashed', 'solid', 'dotted', 'double']
},
borderRadius: {control: 'text'},
padding: {control: 'text'},
imageSrc: {control: 'text'},
width: {control :'text'},
height: {control:'text'},
time: {control: 'text'},
textContent: {control: 'text'},
alignSelf: {control: 'text'},
display: {control: 'text'},
justifyContent:{control:'text'},
fontFamily:{control:'text'}
},
render: (args) => html`
<outgoing-text-message-bubble
.bgColor=${args.bgColor || '#ECECE0'}
.borderWidth=${args.borderWidth}
.borderColor=${args.borderColor}
.borderStyle=${args.borderStyle}
.borderRadius=${args.borderRadius}
.padding=${args.padding}
\ .height=${args.height || 'fit-content'}
.width=${'100%'}
.display= 'flex'
.justifyContent = 'center'
.time=${args.time || new Date().toISOString()}
.textContent= ${args.textContent}
.alignSelf=${args.alignSelf}
.fontFamily=${args.fontFamily}
></outgoing-text-message-bubble>
`
}
export const Default = {
args: {
bgColor:"transparent",
height: "auto",
padding: "10px 10px 10px 10px",
borderRadius: "6px",
time: "",
textContent: "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwww wwww wwww wwww nmnmnm mba nbn nbhbhjbjbjbn n j hjj sdbdshdbhsabdsahfbfbhjfbafbabahfabhfbahfbahfbajbfjabfjabffjfhjdbfhdsbfhdsbfhsbfhdsbfj dsfdsj fhdsbfhdbfbfjdsbfjdsfskkkkfkjdfndkjfkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkdkkhskjnfjndkjfkjndsjnfjnfkjndskjnfkn,mnd,.n.nfamnfna,m,nm,n,njkbfjkalfjkdfndjkfnjd.fnm,a.nmf,.anmf,.nanmfnaklnfafn jjajfafn janjnf anjanansjdjfnbfjajajfbajbj jnjbjjbjjfjanjnfkanfkjankjfankjnkjnkjfkjnkjnkjnknkjnkjnkjnkj m jbnjbjbjbkjjbhjbkjnbkjbnjbknnbkhkjnkjkjkjlkajlkjlkj;lkj lkjlk jk jlk jlk f kjfkjf kj dfkjd fnk k mkmkkkmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm",
borderColor: "#D4D8EB",
borderWidth: "2px",
borderStyle: "solid",
alignSelf: "left"
}
}