isomtrik-quickchat/dist/collection/stories/Components/Footer/Footer.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 './Footer.css'; 
import '../Inputbox/Input'; 

export default {
  title: 'Molecules/Footer',
  component: 'my-input', 
  tags: ['autodocs'],
  render: (args) => html`
    <div class="input-with-svg">
      <!-- Hidden file input -->
      <input
        type="file"
        id="file-input"
        style="display: none;"
        @change="${(event) => handleFileSelect(event)}"
      />
      <!-- SVG that triggers file input -->
      <svg
        class="inside-svg"
        width="18"
        height="19"
        viewBox="0 0 18 19"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        @click="${() => {
          const fileInput = document.getElementById('file-input');
          if (fileInput) {
            fileInput.click();
          } else {
            console.error('File input element not found');
          }
        }}"
      >
        <path d="M6.75 8C7.57843 8 8.25 7.32843 8.25 6.5C8.25 5.67157 7.57843 5 6.75 5C5.92157 5 5.25 5.67157 5.25 6.5C5.25 7.32843 5.92157 8 6.75 8Z" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.75 2H6.75C3 2 1.5 3.5 1.5 7.25V11.75C1.5 15.5 3 17 6.75 17H11.25C15 17 16.5 15.5 16.5 11.75V8" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M11.8125 4.25H15.9375" stroke="black" stroke-width="1.125" stroke-linecap="round"/>
        <path d="M13.875 6.3125V2.1875" stroke="black" stroke-width="1.125" stroke-linecap="round"/>
        <path d="M2 14.7124L5.6975 12.2299C6.29 11.8324 7.145 11.8774 7.6775 12.3349L7.925 12.5524C8.51 13.0549 9.455 13.0549 10.04 12.5524L13.16 9.87492C13.745 9.37242 14.69 9.37242 15.275 9.87492L16.4975 10.9249" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>

      <!-- Use the custom element as a tag -->
      <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}" <!-- New attribute -->
      ></my-input>

      <svg class="outside-svg" width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="45" height="45" rx="22.5" fill="black"/>
        <path d="M29.3165 19.1561L21.1131 15.0544C15.6027 12.2944 13.3411 14.5561 16.1011 20.0665L16.9348 21.734C17.1744 22.2228 17.1744 22.7882 16.9348 23.2769L16.1011 24.9348C13.3411 30.4453 15.5931 32.7069 21.1131 29.9469L29.3165 25.8453C32.9965 24.0053 32.9965 20.9961 29.3165 19.1561ZM26.2211 23.2194H21.0461C20.6531 23.2194 20.3273 22.8936 20.3273 22.5007C20.3273 22.1078 20.6531 21.7819 21.0461 21.7819H26.2211C26.614 21.7819 26.9398 22.1078 26.9398 22.5007C26.9398 22.8936 26.614 23.2194 26.2211 23.2194Z" fill="white"/>
      </svg>
    </div>
  `,
  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: 'Type in your message',
    width: '230px',
    height: '45px',
    borderColor: '#D4D8EB',
    borderRadius: '4px',
    backgroundColor: 'white',
    fontSize: '16px',
    padding: '0 40px',
    color: 'black',
    placeholderColor: '#aaa',
    borderWidth: '1px'
  },
};

function handleFileSelect(event) {
  const file = event.target.files[0];
  if (file) {
    console.log(`File selected: ${file.name}`);
  } else {
    console.log('No file selected');
  }
}

export const Default = (args) => html`
  <div class="input-with-svg">
    <input
      type="file"
      id="file-input"
      style="display: none;"
      @change="${(event) => handleFileSelect(event)}"
    />
    <svg
      class="inside-svg"
      width="18"
      height="19"
      viewBox="0 0 18 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      @click="${() => {
        const fileInput = document.getElementById('file-input');
        if (fileInput) {
          fileInput.click();
        } else {
          console.error('File input element not found');
        }
      }}"
    >
      <path d="M6.75 8C7.57843 8 8.25 7.32843 8.25 6.5C8.25 5.67157 7.57843 5 6.75 5C5.92157 5 5.25 5.67157 5.25 6.5C5.25 7.32843 5.92157 8 6.75 8Z" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M9.75 2H6.75C3 2 1.5 3.5 1.5 7.25V11.75C1.5 15.5 3 17 6.75 17H11.25C15 17 16.5 15.5 16.5 11.75V8" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M11.8125 4.25H15.9375" stroke="black" stroke-width="1.125" stroke-linecap="round"/>
      <path d="M13.875 6.3125V2.1875" stroke="black" stroke-width="1.125" stroke-linecap="round"/>
      <path d="M2 14.7124L5.6975 12.2299C6.29 11.8324 7.145 11.8774 7.6775 12.3349L7.925 12.5524C8.51 13.0549 9.455 13.0549 10.04 12.5524L13.16 9.87492C13.745 9.37242 14.69 9.37242 15.275 9.87492L16.4975 10.9249" stroke="black" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>

    <!-- Render the custom input component -->
    <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}" <!-- New attribute -->
    ></my-input>

    <svg class="outside-svg" width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="45" height="45" rx="22.5" fill="black"/>
      <path d="M29.3165 19.1561L21.1131 15.0544C15.6027 12.2944 13.3411 14.5561 16.1011 20.0665L16.9348 21.734C17.1744 22.2228 17.1744 22.7882 16.9348 23.2769L16.1011 24.9348C13.3411 30.4453 15.5931 32.7069 21.1131 29.9469L29.3165 25.8453C32.9965 24.0053 32.9965 20.9961 29.3165 19.1561ZM26.2211 23.2194H21.0461C20.6531 23.2194 20.3273 22.8936 20.3273 22.5007C20.3273 22.1078 20.6531 21.7819 21.0461 21.7819H26.2211C26.614 21.7819 26.9398 22.1078 26.9398 22.5007C26.9398 22.8936 26.614 23.2194 26.2211 23.2194Z" fill="white"/>
    </svg>
  </div>
`;