isomtrik-quickchat/dist/collection/stories/Components/Buttons/Buttons.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 { fn } from '@storybook/test';
import { Button } from './Buttons';

export default {
  title: 'Atoms/Button',
  tags: ['autodocs'],
  render: (args) => Button(args),
  argTypes: {
    backgroundColor: { control: 'color' },
    backgroundImage: { control: 'text' },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
    fontSize: {
      control: 'text',
      description: 'Set the font size of the button',
      table: {
        defaultValue: { summary: 'inherit' },
      },
    },
    fontFamily: {
      control: 'text',
      description: 'Set the font family of the button',
      table: {
        defaultValue: { summary: 'inherit' },
      },
    },
    borderWidth: {
      control: 'text',
      description: 'Set the border width of the button',
      table: {
        defaultValue: { summary: '1px' },
      },
    },
    borderColor: {
      control: 'color',
      description: 'Set the border color of the button',
      table: {
        defaultValue: { summary: 'transparent' },
      },
    },
    borderRadius: {
      control: 'text',
      description: 'Set the border radius of the button',
      table: {
        defaultValue: { summary: '4px' },
      },
    },
    textColor: {
      control: 'color',
      description: 'Set the text color of the button',
      table: {
        defaultValue: { summary: 'inherit' },
      },
    },
    textAlign: {
      control: 'select',
      options: ['left', 'center', 'right'],
      description: 'Set the text alignment of the button',
      table: {
        defaultValue: { summary: 'center' },
      },
    },
    width: {
      control: 'text',
      description: 'Set the width of the button',
      table: {
        defaultValue: { summary: 'auto' },
      },
    },
    height: {
      control: 'text',
      description: 'Set the height of the button',
      table: {
        defaultValue: { summary: 'auto' },
      },
    },
    fontStyle: {   
      control: 'select',
      options: ['normal', 'italic', 'oblique'],
      description: 'Set the font style of the button',
      table: {
        defaultValue: { summary: 'normal' },
      },
    },
    fontWeight: { 
      control: 'select',
      options: ['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
      description: 'Set the font weight of the button',
      table: {
        defaultValue: { summary: 'normal' },
      },
    },
    
  },
  args: {
    onClick: fn(),
    fontSize: 'inherit',
    fontFamily: 'inherit',
    borderWidth: '1px',
    borderColor: 'transparent',
    borderRadius: '4px',
    textColor: 'inherit',
    textAlign: 'center',
    width: 'auto',
    height: 'auto',
    fontStyle: 'normal',    
    fontWeight: 'normal',   
  },
};

export const Primary = {
  args:{
    primary:true,
    label:'Button',
    fontSize:"6px",
    fontFamily:'Arial, sans-serif',
    borderWidth:'5px',
    borderColor:'#23ae37',
    borderRadius:'40px',
    textColor:'#d80541',
    textAlign:'center',
    width:'100px',
    height:'50px',
    size:'small',
    fontStyle:'italic', 
    fontWeight:'bold',    
    backgroundImage:'' 
   // https://images.unsplash.com/photo-1593642532973-d31b6557fa68
  },
};