import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-button
  tint="primary"
  leaned="true"
  leaned="true"
>
  View Details
</dvn-button>`;
const demo2 = `<dvn-button
  scale="large"
  view="outline"
  leaned="true"
>
  Sign Up
</dvn-button>`;
const demo3 = `<dvn-button
  tint="secondary"
  shape="circle"
  leaned="true"
>
  i
</dvn-button>`;
const demo4 = `<dvn-button
  tint="secondary"
  shape="rounded"
  view="flat"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo5 = `<dvn-button
  tint="secondary"
  shape="rounded"
  progressing="true"
  disabled="true"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo6 = `<dvn-button
  tint="secondary"
  shape="circle"
  progressing="true"
  leaned="true"
>
  i
</dvn-button>`;
export class ShowcaseButton {
  render() {
    return (h(Host, null,
      h("h3", null, "Button"),
      h("dvn-card", { leaned: true },
        h("div", { class: "d-flex" },
          h("dvn-component-demo", { domString: demo1 }),
          h("dvn-component-demo", { domString: demo2 }),
          h("dvn-component-demo", { domString: demo3 }),
          h("dvn-component-demo", { domString: demo4 }),
          h("dvn-component-demo", { domString: demo5 }),
          h("dvn-component-demo", { domString: demo6 })))));
  }
  static get is() { return "showcase-button"; }
}
