@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
498 lines (497 loc) • 30.2 kB
JavaScript
"use strict";
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 });
exports.WithoutHeader = exports.WithSingleOrganization = exports.WithNavSelectedClass = exports.WithNavChildClass = exports.WithAllItemsOpen = exports.WithContentOverlay = exports.WithSubheading = exports.Default = void 0;
var React = __importStar(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var Nav_1 = __importDefault(require("./Nav"));
exports.default = {
title: 'Nav',
};
var Default = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: addon_knobs_1.text('Team Name', 'Boulder Youth Soccer'),
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
} },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.Default = Default;
var WithSubheading = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: addon_knobs_1.text('Team Name', 'Boulder Youth Soccer'),
subtitle: addon_knobs_1.text('Season', '2021 Fall Season'),
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
heading: 'Organizations',
tree: [
{
title: 'Boulder Sports',
tree: [
{
title: 'Organization Home',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Soccer Start',
useBadge: true,
tree: [
{
title: '2021 Spring Season',
},
{
title: '2021 Spring Playoffs',
},
],
},
{
title: '6U-8U Rec',
useBadge: true,
},
{
title: '9U Rec',
useBadge: true,
},
],
},
{
title: 'Colorado Soccer',
},
],
},
{
heading: 'Teams',
tree: [
{
title: 'Strikers',
useBadge: true,
},
{
title: 'Panthers',
useBadge: true,
},
{
title: 'Bobcats',
useBadge: true,
},
],
},
] },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithSubheading = WithSubheading;
var WithContentOverlay = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: addon_knobs_1.text('Team Name', 'Boulder Youth Soccer'),
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
tree: [
{
title: 'Boulder Sports',
tree: [
{
title: 'Organization Home',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Soccer Start',
useBadge: true,
tree: [
{
title: '2021 Spring Season',
},
{
title: '2021 Spring Playoffs',
},
],
},
{
title: '6U-8U Rec',
useBadge: true,
},
{
title: '9U Rec',
useBadge: true,
},
],
},
{
title: 'Colorado Soccer',
},
],
},
{
heading: 'Teams',
tree: [
{
title: 'Strikers',
useBadge: true,
},
{
title: 'Panthers',
useBadge: true,
},
{
title: 'Bobcats',
useBadge: true,
},
],
},
], includeOverlay: true },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithContentOverlay = WithContentOverlay;
var WithAllItemsOpen = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: addon_knobs_1.text('Team Name', 'Boulder Youth Soccer'),
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
heading: 'Organizations',
tree: [
{
title: 'Boulder Sports',
tree: [
{
title: 'Spectacular Amazing Soccer Start',
useBadge: true,
tree: [
{
title: '2021 Spring Spectacular Amazing Season',
},
{
title: '2021 Spring Spectacular Amazing Playoffs',
},
],
},
{
title: '6U-8U Rec',
useBadge: true,
},
{
title: '9U Rec',
useBadge: true,
},
],
},
{
title: 'Colorado Soccer',
},
],
},
{
heading: 'Teams',
tree: [
{
title: 'Strikers',
useBadge: true,
},
{
title: 'Panthers',
useBadge: true,
},
{
title: 'Llamas',
useBadge: true,
},
{
title: 'Tigers',
useBadge: true,
},
{
title: 'Bobcats',
useBadge: true,
},
],
},
] },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithAllItemsOpen = WithAllItemsOpen;
var WithNavChildClass = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: addon_knobs_1.text('Team Name', 'Boulder Youth Soccer'),
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
heading: 'Organizations',
tree: [
{
title: 'Boulder Sports',
tree: [
{
title: 'Organization Home',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { className: "Nav-child", href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Spectacular Amazing Soccer Start',
useBadge: true,
tree: [
{
title: '2021 Spring Spectacular Amazing Season',
},
{
title: '2021 Spring Spectacular Amazing Playoffs',
},
],
},
{
title: '6U-8U Rec',
useBadge: true,
},
{
title: '9U Rec',
useBadge: true,
},
],
},
{
title: 'Colorado Soccer',
},
],
},
{
heading: 'Teams',
tree: [
{
title: 'Strikers',
useBadge: true,
},
{
title: 'Panthers',
useBadge: true,
},
{
title: 'Llamas',
useBadge: true,
},
{
title: 'Tigers',
useBadge: true,
},
{
title: 'Bobcats',
useBadge: true,
},
],
},
] },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithNavChildClass = WithNavChildClass;
var WithNavSelectedClass = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: 'Soar Hockey Club',
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
tree: [
{
title: 'Soar Hockey Club',
tree: [
{
title: 'Spectacular Amazing Travel',
useBadge: true,
tree: [
{
title: 'Spectacular Amazing Spring 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { className: "Nav-selected", href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Spectacular Amazing Fall 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Summer 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
],
},
{
title: 'House',
useBadge: true,
tree: [
{
title: 'Spring 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
],
},
],
},
],
},
], includeOverlay: true },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithNavSelectedClass = WithNavSelectedClass;
var WithSingleOrganization = function () { return (React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12", headerItem: {
title: 'Soar Hockey Club',
image: addon_knobs_1.text('Image Source', 'https://aa5498032991a101442c-34c0f4eec246050dfc1ee92670a7b97d.ssl.cf1.rackcdn.com/logo-icon-dafd29abff7b6ca55ad71c35bd34d679.png'),
}, flyoutSections: [
{
tree: [
{
title: 'Soar Hockey Club',
tree: [
{
title: 'Spectacular Amazing Travel',
useBadge: true,
tree: [
{
title: 'Spectacular Amazing Spring 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { className: "Nav-selected", href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Spectacular Amazing Fall 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
{
title: 'Summer 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
],
},
{
title: 'House',
useBadge: true,
tree: [
{
title: 'Spring 2021',
wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://organization.teamsnap.com", target: "_blank", rel: "noopener noreferrer" }, children));
},
},
],
},
],
},
],
},
], includeOverlay: true },
React.createElement(Nav_1.default.Item, { icon: "dashboard", isActive: true, wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://go.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "Dashboard"),
React.createElement(Nav_1.default.Item, { icon: "medal", onClick: function () { return alert('Fire Custom On Click'); } }, "Programs"),
React.createElement(Nav_1.default.Item, { icon: "user" }, "Members"),
React.createElement(Nav_1.default.Item, { icon: "star" }, "Staff"),
React.createElement(Nav_1.default.Item, { icon: "settings" }, "Settings")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div.")))); };
exports.WithSingleOrganization = WithSingleOrganization;
var WithoutHeader = function () { return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "Removing the header items from the Nav allows us to have a more generic, left-aligned collapsible bar. Possible use cases could involve a collapsible bar for rich editing experience (possibly drag-and-drop) and more."),
React.createElement("div", { className: "u-flex", style: { backgroundColor: '#FFEFA5', minHeight: '800px' } },
React.createElement(Nav_1.default, { mods: "u-size3of12" },
React.createElement(Nav_1.default.Item, { icon: "tracking", wrapItem: function (_a) {
var children = _a.children;
return (React.createElement("a", { href: "https://www.teamsnap.com", target: "_blank", rel: "noreferrer" }, children));
} }, "TeamSnap Home"),
React.createElement(Nav_1.default.Item, { icon: "money" }, "Show me the money"),
React.createElement(Nav_1.default.Item, { icon: "messages", isActive: true }, "Txt me, maybe?")),
React.createElement("main", { className: "u-sizeFill u-flex u-flexAlignItemsCenter u-flexJustifyCenter" },
React.createElement("div", { style: { width: '40%' } }, "This main and the nav are contained in a div that acts as a frame. The left nav is as tall as the frame, which, in this case, has a height manually set to 800px. By default, the nav is as wide as its container, so we use a grid to scope it to the size that we'd like. In this case, It's a flex grid where the nav is contained in a u-size2of12 div."))))); };
exports.WithoutHeader = WithoutHeader;