isomtrik-quickchat/dist/collection/stories/Components/Head/Head.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 { Head } from './Head';

export default {
  title: 'Molecules/Head',
  component: Head,
  tags: ['autodocs'],
  argTypes: {
    borderRadius: {control :  'text'},
    borderColor: {control: 'color'},
    borderWidth: {control: 'text'},
    borderStyle: {control: 'select' ,
      options: ['dashed', 'dotted', 'solid', 'double']
    },
    boxShadow: {control: 'text'},
    padding: {control: 'text'},
    image: {
      control: {
        type: 'object',
        properties: {
          src: { control: 'text' },
          alt: { control: 'text' },
          width: { control: 'text' },
          height: { control: 'text' },
          borderRadius: { control: 'text' },
        }
      }
    },
    text: {
      control: {
        type: 'object',
        properties: {
          content: { control: 'text' },
          color: { control: 'color' },
          fontSize: { control: 'text' },
          fontWeight: { control: 'select', options: ['normal', 'bold', 'bolder', 'lighter'] },
          fontStyle: { control: 'select', options: ['normal', 'italic', 'oblique'] },
          textAlign: { control: 'select', options: ['left', 'center', 'right'] },
        }
      }
    },
    lastSeenText: { control: 'text' },
    lastSeenTextColor: { control: 'color' },
    lastSeenTextFontSize: { control: 'text' },
    textHref: { control: 'text' },
    onFirstSvgClick: { action: 'firstSvgClicked' },
    onSecondSvgClick: { action: 'secondSvgClicked' },
  },
  args: {
    image: {
      src: '/assets/images/iso-img.svg',
      alt: 'Nature image',
      width: '45px',
      height: '45px',
      borderRadius: '50%',
    },
    text: {
      content: 'Kristin Watson',
      color: 'black',
      fontSize: '18px',
      textAlign: 'left',
      fontWeight: 'bolder',
      fontStyle: 'normal',
    },
    borderWidth: '0px 0px 2px 0px',
    borderColor: '#E6E8F3',
    borderStyle: 'solid',
    padding: '15px 10px 15px 10px'
  },
};

export const Default = (args) => html`
  <my-head
    .image=${args.image}
    .text=${args.text}
    .lastSeenText=${args.lastSeenText}
    .lastSeenTextColor=${args.lastSeenTextColor}
    .lastSeenTextFontSize=${args.lastSeenTextFontSize}
    .textHref=${args.textHref}
    .onFirstSvgClick=${args.onFirstSvgClick}
    .onSecondSvgClick=${args.onSecondSvgClick}
    .borderRadius=${args.borderRadius}
    .borderColor=${args.borderColor}
    .borderWidth=${args.borderWidth}
    .borderStyle=${args.borderStyle}
    .padding=${args.padding}
    .boxShadow=${args.boxShadow}
  ></my-head>
`;