{"size": 1617, "ext": "js", "max_stars_repo_path": "elements/hax-iconset/hax-iconset.stories.js", "max_stars_repo_name": "aam198/a11y-image-compare", "max_stars_repo_stars_event_min_datetime": "2020-08-03T05:36:58.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-03T05:36:58.000Z", "max_issues_repo_path": "elements/hax-iconset/hax-iconset.stories.js", "max_issues_repo_name": "lucasa/lrnwebcomponents", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "elements/hax-iconset/hax-iconset.stories.js", "max_forks_repo_name": "lucasa/lrnwebcomponents", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.3684210526, "max_line_length": 98, "alphanum_fraction": 0.6295609153}
import { html } from "lit-element/lit-element.js";
import "@polymer/iron-icon/iron-icon.js";
import "@lrnwebcomponents/hax-iconset/hax-iconset.js";
import {
  withKnobs,
  withWebComponentsKnobs,
  select,
  text
} from "@open-wc/demoing-storybook";
import { StorybookUtilities } from "@lrnwebcomponents/storybook-utilities/storybook-utilities.js";

export default {
  title: "Icons|Hax",
  component: "hax-iconset",
  decorators: [withKnobs, withWebComponentsKnobs],
  parameters: {
    options: { selectedPanel: "storybookjs/knobs/panel" }
  }
};
const utils = new StorybookUtilities();
export const HaxIconsetStory = () => {
  return utils.getDemo(
    `<iconset-demo include-sets="hax"></iconset-demo>`,
    `<p>The following is a full list of hax-iconset's icons.</p>`
  );
};

export const HaxIconsetDemo = () => {
  let iconset = document.createElement("iconset-demo");
  iconset.includeSets = "hax";
  iconset.hidden = "hidden";
  document.body.appendChild(iconset);

  let icons =
      iconset && iconset.__iconList
        ? iconset.__iconList
        : [{ name: "icons", icons: ["star", "check", "history"] }],
    iconlist =
      icons && icons[0] ? icons[0].icons : ["star", "check", "history"];
  return utils.getDemo(
    `<iron-icon 
      icon="${select(
        "icon",
        iconlist,
        utils.getRandomOption(iconlist),
        "Properties"
      )}"
      style="display:inline-block;width:${text(
        "width",
        "",
        "CSS"
      )};height:${text("height", "", "CSS")};">
    </iron-icon>`,
    `<p>The following is a demo of how to use a hax-iconset icon.</p>`
  );
};
