Chameleon Hero

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

export default {
  title: "Components|Layout/Hero",
  component: "chameleon-hero",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

| Property Name | Type(s) | Default Value | Description | | --------------- | ------- | -------------------------------------------------------- | --------------------------------------- | | title | String | "" | The hero's title | | subTitle | String | "" | The hero's subtitle | | heroText | String | "" | The text of the hero | | imageUrl | String | "" | The hero's image url | | type | String | "gradient" | The hero type | | gradient | String | var(--color-primary-dark), var(--color-secondary-dark) | The hero's gradient value | | gradientAlpha | Number | 0.5 | The hero's gradient alpha value | | loading | Boolean | false | Whether or not the hero appears loading |

Examples

Default

export const Default = () => {
  const title = text("Title", "St. Louis, MO");
  const subtitle = text("Subtitle", "Destination");
  const heroText = text(
    "Text",
    "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."
  );
  const gradientColors = text("Hex Colors", "#B72126, #14264B");

  return html`
    <chameleon-hero
      title="${title}"
      subTitle="${subtitle}"
      heroText="${heroText}"
      gradient="${gradientColors}"
    >
    </chameleon-hero>
  `;
};

Background Image

export const BackgroundImage = () => {
  const imageUrl = text("Image URL", "https://picsum.photos/id/122/2100/856");

  return html`
    <chameleon-hero
      title="St. Louis, MO"
      subTitle="Destination"
      heroText="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."
      imageUrl="${imageUrl}"
      type="image"
    >
    </chameleon-hero>
  `;
};

Image Gradient

export const ImageGradient = () => {
  const imageUrl = text("Image URL", "https://picsum.photos/id/703/2100/856");
  const gradientColors = text("Hex Colors", "#B72126, #14264B");
  const gradientAlpha = number("Gradient Alpha", 0.5);

  return html`
    <chameleon-hero
      title="St. Louis, MO"
      subTitle="Destination"
      heroText="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."
      imageUrl="${imageUrl}"
      type="image-gradient"
      gradient="${gradientColors}"
      gradientAlpha="${gradientAlpha}"
    >
    </chameleon-hero>
  `;
};