Chameleon Card

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

export default {
  title: "Components|Data and Visualizations/Card",
  component: "chameleon-card",
  decorators: [withKnobs],
  parameters: {
    backgrounds: [
      { name: "gray", value: "#f5f5f8", default: true },
      { name: "black", value: "#252a33" },
    ],
  },
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

chameleon-card

| Property Name | Type(s) | Default Value | Description | | -------------- | ------- | ------------- | ---------------------------- | | accentColor | String | null | The accent color of the card | | complication | String | null | The complication text |

chameleon-card-header

| Property Name | Type(s) | Default Value | Description | | ------------- | ------- | ------------- | ------------------------ | | title | String | "" | The card header title | | subtitle | String | "" | The card header subtitle |

chameleon-card-image

| Property Name | Type(s) | Default Value | Description | | ------------- | ------- | ------------- | ------------------------- | | src | String | "" | The card image's src | | alt | String | "" | The card image's alt text |

Examples

Default

export const Default = () => {
  const titleText = text("Title", "St. Louis, MO");
  const subtitleText = text("Subtitle", "Destination");
  const rounded = boolean("Rounded", false);
  const outline = boolean("Outline", false);

  return html`
    <style>
      chameleon-card {
        max-width: 400px;
      }
    </style>

    <chameleon-card ?rounded="${rounded}" ?outline="${outline}">
      <chameleon-card-header
        title="${titleText}"
        subtitle="${subtitleText}"
      ></chameleon-card-header>
      <p>
        St. Louis is a major city in Missouri along the Mississippi River. Its
        iconic, 630-ft. Gateway Arch, built in the 1960s, honors the early
        19th-century explorations of Lewis and Clark and America's westward
        expansion in general. Replica paddlewheelers ply the river, offering
        views of the arch. The Soulard district is home to barbecue restaurants
        and clubs playing blues music.
      </p>
    </chameleon-card>
  `;
};

Image

export const Image = () => {
  const imageSrc = text(
    "Image Source",
    "https://images.unsplash.com/photo-1474644746397-786f431dc663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1080&q=80"
  );
  const altText = text("ALT Text", "St. Louis Landscape");

  return html`
    <style>
      chameleon-card {
        max-width: 400px;
      }
    </style>

    <chameleon-card rounded>
      <chameleon-card-header
        title="St. Louis, MO"
        subtitle="Destination"
      ></chameleon-card-header>
      <chameleon-card-image
        src="${imageSrc}"
        alt="${altText}"
      ></chameleon-card-image>
      <p>
        St. Louis is a major city in Missouri along the Mississippi River. Its
        iconic, 630-ft. Gateway Arch, built in the 1960s, honors the early
        19th-century explorations of Lewis and Clark and America's westward
        expansion in general. Replica paddlewheelers ply the river, offering
        views of the arch. The Soulard district is home to barbecue restaurants
        and clubs playing blues music.
      </p>
    </chameleon-card>
  `;
};

Accent Color

export const AccentColor = () => {
  const accentColor = text("Accent Color", "");

  return html`
    <style>
      chameleon-card {
        max-width: 400px;
      }
    </style>

    <chameleon-card rounded accentColor="${accentColor}">
      <chameleon-card-header
        title="St. Louis, MO"
        subtitle="Destination"
      ></chameleon-card-header>
      <p>
        St. Louis is a major city in Missouri along the Mississippi River. Its
        iconic, 630-ft. Gateway Arch, built in the 1960s, honors the early
        19th-century explorations of Lewis and Clark and America's westward
        expansion in general. Replica paddlewheelers ply the river, offering
        views of the arch. The Soulard district is home to barbecue restaurants
        and clubs playing blues music.
      </p>
    </chameleon-card>
  `;
};

Footer

export const Footer = () => html`
  <style>
    chameleon-card {
      max-width: 400px;
    }
  </style>
  <chameleon-card>
    <chameleon-card-header
      title="St. Louis, MO"
      subtitle="Destination"
    ></chameleon-card-header>
    <p>
      St. Louis is a major city in Missouri along the Mississippi River. Its
      iconic, 630-ft. Gateway Arch, built in the 1960s, honors the early
      19th-century explorations of Lewis and Clark and America's westward
      expansion in general. Replica paddlewheelers ply the river, offering views
      of the arch. The Soulard district is home to barbecue restaurants and
      clubs playing blues music.
    </p>
    <chameleon-card-footer>
      <chameleon-button theme="secondary">Button</chameleon-button>
    </chameleon-card-footer>
  </chameleon-card>
`;