a-giuliano / stencil-storybook-html

MIT License
14 stars 6 forks source link

Example: Call open a modal from a button inside the story #6

Open JavierPozoDelevoper opened 2 years ago

JavierPozoDelevoper commented 2 years ago

Hi,

I am working in a modal component of Stencil for create standar modal of success, warning, error ... I would like to implement a story with a button that when clicking on the button calls the open modal method.Is this possible?

I've been trying to implement a simple console log but it's not working for me. Example:

  return `
    <mpf-button color="primary" appearance="solid" onClick=${() => console.log('test')}> Open Modal </mpf-button>
    <mpf-modal icon=${args.icon} headerClose=${args.headerClose}>
      body content
      ${args.actionButtons?.length > 0 && ` ${stringActionsButtons} `}      
    </mpf-modal>`;

But the console log it's not showing. Full file: mpf-modal.stories.jsx.txt

Example of how it is implemented in an angular application: HTML:

<div class="grid">
  <mpf-button color="primary" appearance="solid" (click)="openModal()">Open Modal</mpf-button>
  <mpf-modal #modal [isOpen]="isOpenModal" icon="success">
    body content
    <mpf-modal-actions>
      <mpf-button color="secondary" appearance="solid"> Cancel </mpf-button>
      <mpf-button color="primary" appearance="solid" (click)="closeModal()"> Confirm </mpf-button>
    </mpf-modal-actions>
  </mpf-modal>
</div>

TS:

export class DemoModalComponent implements OnInit {
  @ViewChild('modal') modal!: HTMLMpfModalElement;

  public isOpenModal = true;

  constructor() {}

  ngOnInit() {}

  public openModal() {
    this.modal.openModal();
  }
  public closeModal() {
    this.modal.closeModal();
  }
}
JavierPozoDelevoper commented 2 years ago

Hi, I update my code with the next part and the button click is working, but only if any control it's modified

Story Update:

export const Default = Template.bind({});
Default.args = defaultArgs;
Default.play = async () => {
  const modal = document.querySelector('mpf-modal');
  const button = document.getElementById('open-button');

  button.onclick = () => {
    modal.openModal();
  };
};

is this the right way to do it or is there a better way? thx