@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
30 lines • 1.37 kB
JavaScript
import React from "react";
import Card from "./Card.js";
import { Pill, GroupPill, GreenPill, WarningPill } from "./Pill.js";
import ReportDecorator from "./storybook/ReportDecorator.js";
export default {
component: Pill,
title: "Components/Pill",
decorators: [ReportDecorator],
};
const groupColorMap = {
high: "#BEE4BE",
med: "#FFE1A3",
low: "#F7A6B4",
};
export const pill = () => (React.createElement(Card, { title: "Report Title" },
React.createElement("p", null, "Basic"),
React.createElement("p", null,
React.createElement(Pill, null, "Default"),
React.createElement(Pill, { color: "#FFE1A3" }, "Yellow"),
React.createElement(Pill, { color: "#BEE4BE" }, "Green")),
React.createElement("p", null, "Helper Pills"),
React.createElement("p", null,
React.createElement(WarningPill, null, "WarningPill"),
React.createElement(GreenPill, null, "GreenPill")),
React.createElement("p", null, "GroupPill with color map:"),
React.createElement("p", null,
React.createElement(GroupPill, { groupColorMap: groupColorMap, group: "high" }, "High"),
React.createElement(GroupPill, { groupColorMap: groupColorMap, group: "med" }, "Medium"),
React.createElement(GroupPill, { groupColorMap: groupColorMap, group: "low" }, "Low"))));
//# sourceMappingURL=Pill.stories.js.map