import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-linear-progress
  percent="90"
  scale="large"
  stroke-color="#588D60"
/>`;
const demo2 = `<dvn-linear-progress
  show-percent="true"
  percent="50"
  scale="medium"
  tint="secondary"
/>`;
const demo3 = `<dvn-linear-progress
  percent="20"
  scale="small"
  status="error"
  tint="primary"
/>`;
const demo4 = `<dvn-linear-progress
  percent="50"
  scale="small"
  tint="secondary"
  status="success"
/>`;
export class ShowcaseBadge {
  render() {
    return (h(Host, null,
      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 })))));
  }
  static get is() { return "showcase-linear-progress"; }
}
