Chameleon dialog

Usage no npm install needed!

<script type="module">
  import chameleonDsDialog from 'https://cdn.skypack.dev/@chameleon-ds/dialog';


Chameleon Dialog

import { html, svg } from "lit-html";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-dialog.js";

export default {
  title: "Components|Overlays/Dialog",
  component: "chameleon-dialog",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },


Property Name Type(s) Default Value Description
open Boolean false Whether or not the dialog is open
icon Boolean false Whether or not the card has an icon
dismissible Boolean false Whether or not the card has a close icon
canGoBack Boolean false Whether or not the dialog can go back
fullScreen Boolean false Display full screen



export const Default = () => {
  const defaultIcon = svg`
    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" slot="icon"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12" y2="17"></line></svg>

  return html`
    <chameleon-dialog open="true" dismissible="true">
      <h1 slot="title">Title</h1>
      We’re sorry but your session has expired. You will need to log back in to
      <div slot="accept-action">
        <chameleon-button full-width theme="primary">
      <div slot="decline-action">
        <chameleon-button full-width theme="secondary">