@chameleon-ds/toast

Chameleon toast

Usage no npm install needed!

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

README

Chameleon Toast

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

export default {
  title: "Components|Overlays/Toast",
  component: "chameleon-toast",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/knobs/panel" },
};

Properties

Property Name Type(s) Default Value Description
color String color The toast's color
showCloseable Boolean true Whether or not the toast can be closed
backgroundColor String null The toast's background color

Examples

Default

export const Default = () => {
  const color = text("Color", "");
  const backgroundColor = text("Background Color", "");
  const showCloseable = boolean("Show", true);
  const imageUrl = text(
    "Image Url",
    "https://media.istockphoto.com/photos/chocolate-chip-cookie-isolated-picture-id517109442?k=6&m=517109442&s=612x612&w=0&h=NvQ5y8ENWZvpr84vEFWmxUgV2rCgtOGEsjJXa3IYsZ4="
  );
  const toastText = text(
    "Text",
    "This website uses cookies to remember you and improve your experience. By using our site, you accept our use of cookies."
  );

  return html`
    <chameleon-toast
      color="${color}"
      backgroundColor="${backgroundColor}"
      ?showCloseable="${showCloseable}"
    >
      <span slot="toast-text">${toastText}</span>
      <img slot="close-icon" src="${imageUrl}" />
    </chameleon-toast>
  `;
};