@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
131 lines (130 loc) • 4.16 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@storybook/react");
var addon_knobs_1 = require("@storybook/addon-knobs");
var Icon_1 = __importDefault(require("./Icon"));
var stories = (0, react_1.storiesOf)("Icon", module);
exports.default = {
title: 'Icon',
component: Icon_1.default,
};
var iconNames = {
home: "home",
roster: "roster",
team: "team",
divisions: "divisions",
rostering: "rostering",
"add-member": "add-member",
"remove-member": "remove-member",
"non-player": "non-player",
registration: "registration",
directory: "directory",
"new-season": "new-season",
seasons: "seasons",
schedule: "schedule",
availability: "availability",
tracking: "tracking",
"add-event": "add-event",
assignments: "assignments",
messages: "messages",
mail: "mail",
alerts: "alerts",
posts: "posts",
inbox: "inbox",
sent: "sent",
send: "send",
"credit-card": "credit-card",
money: "money",
piggybank: "piggybank",
installments: "installments",
fees: "fees",
scale: "scale",
cart: "cart",
media: "media",
photos: "photos",
video: "video",
statistics: "statistics",
dashboard: "dashboard",
settings: "settings",
megaphone: "megaphone",
public: "public",
computer: "computer",
pointer: "pointer",
notifications: "notifications",
star: "star",
alert: "alert",
info: "info",
"arrow-left": "arrow-left",
"arrow-right": "arrow-right",
"arrow-up": "arrow-up",
up: "up",
down: "down",
left: "left",
right: "right",
"caret-down": "caret-down",
sort: "sort",
check: "check",
dismiss: "dismiss",
plus: "plus",
edit: "edit",
trash: "trash",
search: "search",
refresh: "refresh",
preview: "preview",
drag: "drag",
export: "export",
import: "import",
download: "download",
archive: "archive",
doc: "doc",
file: "file",
waiver: "waiver",
forms: "forms",
grid: "grid",
"page-layout": "page-layout",
lock: "lock",
location: "location",
loader: "loader"
};
var iconSizes = {
Default: "",
"Extra Small": "u-fontSizeXs",
Small: "u-fontSizeSm",
Medium: "u-fontSizeMd",
Large: "u-fontSizeLg",
"X-Large": "u-fontSizeXl",
"XX-Large": "u-fontSizeXxl"
};
var iconColors = {
Default: "",
"Text Color": "u-colorInfo",
Negative: "u-colorNegative",
Positive: "u-colorPositive",
Primary: "u-colorPrimary"
};
stories.add("Default", function () { return (React.createElement(Icon_1.default, { name: (0, addon_knobs_1.select)("Icon", iconNames, "home"), mods: (0, addon_knobs_1.select)("Size", iconSizes, "") + " " + (0, addon_knobs_1.select)("Color", iconColors, "") })); }, {
info: "Icons inherit the text color and size of their parent element by default. Apply text and color utility classes as mods to alter the size and color of the icon. For a full list of icons, visit UI Patterns: https://teamsnap-ui-patterns.netlify.com/icons.html."
});