@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
269 lines (268 loc) • 15 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.WithStatus = exports.Radios = exports.IndeterminateCheckbox = exports.MultipleCheckboxes = exports.Checkbox = exports.ClearIcon = exports.StatusIcons = exports.FieldWithIcons = exports.Sizes = exports.Captions = exports.WithLabels = exports.Default = void 0;
var React = __importStar(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var Field_1 = __importDefault(require("./Field"));
var Icon_1 = require("../Icon");
var types_1 = require("../../types");
exports.default = {
title: 'Field',
};
var statusOptions = {
success: 'success',
error: 'error',
warning: 'warning',
default: null,
};
var sizeOptions = {
small: 'small',
large: 'large',
default: null,
};
var Default = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var size = addon_knobs_1.select('size', sizeOptions, sizeOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(Field_1.default, { isDisabled: disabled, name: "Sample", formFieldProps: {
placeholder: placeholder,
size: size,
}, status: status }));
};
exports.Default = Default;
var WithLabels = function () {
var status = addon_knobs_1.select('status', statusOptions, null);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var size = addon_knobs_1.select('size', sizeOptions, null);
var label = addon_knobs_1.text('Label', 'First Name');
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(Field_1.default, { isDisabled: disabled, label: label, name: "Sample", formFieldProps: {
placeholder: placeholder,
size: size,
}, status: status }));
};
exports.WithLabels = WithLabels;
var Captions = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var placeholder = addon_knobs_1.text('Placeholder', 'sample@teamsnap.com');
var caption = addon_knobs_1.text('Captions', 'This is the primary email address that we will use to contact you.');
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "Captions can be added to explain how the entered data is used, why is required, or similar."),
React.createElement("br", null),
React.createElement(Field_1.default, { caption: caption, isDisabled: disabled, label: "Primary Email Address", formFieldProps: {
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
placeholder: placeholder,
}, name: "Sample", status: status })));
};
exports.Captions = Captions;
var Sizes = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "Inputs match their container's width, but height, font size and more can be controlled via the Size property."),
React.createElement("br", null),
React.createElement(Field_1.default, { caption: "This input is small", isDisabled: disabled, label: "Sizes.SMALL or 'small'", formFieldProps: {
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
placeholder: placeholder,
size: types_1.Sizes.SMALL,
}, name: "Sample", status: status }),
React.createElement(Field_1.default, { caption: "This input is default", isDisabled: disabled, label: "No size provided (default/medium)", formFieldProps: {
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
placeholder: placeholder,
}, name: "Sample2", status: status }),
React.createElement(Field_1.default, { caption: "This input is large", isDisabled: disabled, label: "Sizes.LARGE or 'large'", formFieldProps: {
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
placeholder: placeholder,
size: types_1.Sizes.LARGE,
}, name: "Sample3", status: status })));
};
exports.Sizes = Sizes;
var FieldWithIcons = function () {
var status = addon_knobs_1.select('status', statusOptions, null);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var size = addon_knobs_1.select('size', sizeOptions, sizeOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(Field_1.default, { caption: "This input is...", isDisabled: disabled, label: "This is a sample input", formFieldProps: {
rightIcon: React.createElement(Icon_1.Icon, { name: "search" }),
placeholder: placeholder,
size: size,
}, name: "Sample", status: status }));
};
exports.FieldWithIcons = FieldWithIcons;
var StatusIcons = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var size = addon_knobs_1.select('size', sizeOptions, sizeOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
return (React.createElement(Field_1.default, { caption: "This input is...", isDisabled: disabled, label: "This is a sample input", formFieldProps: {
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
rightIcon: React.createElement(Icon_1.Icon, { name: "search" }),
placeholder: placeholder,
showStatus: true,
size: size,
}, name: "Sample", status: status }));
};
exports.StatusIcons = StatusIcons;
var ClearIcon = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var placeholder = addon_knobs_1.text('Placeholder', 'Input Placeholder');
var size = addon_knobs_1.select('size', sizeOptions, sizeOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
var _a = React.useState(''), value = _a[0], setValue = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "Providing an onClearClicked callback and `showClear` allows you to wire up whatever form management logic you have. Generally, you'll want to clear the value when the clear icon is clicked, but the implementation is entirely in your control."),
React.createElement("br", null),
React.createElement(Field_1.default, { caption: "This input clears when the right-most icon is clicked.", isDisabled: disabled, label: "Clearable Input", formFieldProps: {
inputProps: { value: value, onChange: function (e) { return setValue(e.target.value); } },
leftIcon: React.createElement(Icon_1.Icon, { name: "home" }),
rightIcon: React.createElement(Icon_1.Icon, { name: "search" }),
placeholder: placeholder,
size: size,
showClear: true,
onClearClicked: function () {
setValue('');
},
}, name: "Sample", status: status })));
};
exports.ClearIcon = ClearIcon;
var Checkbox = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
var _a = React.useState(false), value = _a[0], setValue = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement("br", null),
React.createElement(Field_1.default, { caption: "By accepting the terms of service, you agree to be a friendly human!", isDisabled: disabled, type: "checkbox", label: "Accept Terms of Service", formFieldProps: {
text: 'Click me!',
checked: value,
onClick: function () {
setValue(!value);
},
}, name: "Sample", status: status })));
};
exports.Checkbox = Checkbox;
var MultipleCheckboxes = function () {
var _a = React.useState(false), dogs = _a[0], setDogs = _a[1];
var _b = React.useState(false), cats = _b[0], setCats = _b[1];
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "This example omits the label and caption on the field components, instead opting to work with those manually."),
React.createElement("br", null),
React.createElement(Field_1.default.Label, null, "Cats/Dogs/Both?"),
React.createElement(Field_1.default, { isInline: true, style: { marginRight: '12px' }, type: "checkbox", formFieldProps: {
text: 'Cats',
checked: cats,
onClick: function () {
setCats(!cats);
},
}, name: "Cats" }),
React.createElement(Field_1.default, { isInline: true, type: "checkbox", formFieldProps: {
text: 'Dogs',
checked: dogs,
onClick: function () {
setDogs(!dogs);
},
}, name: "Dogs" }),
React.createElement(Field_1.default.Caption, null, "This determines if you'll see cat gifs, dog gifs, or both.")));
};
exports.MultipleCheckboxes = MultipleCheckboxes;
var IndeterminateCheckbox = function () {
var status = addon_knobs_1.select('status', statusOptions, statusOptions[0]);
var disabled = addon_knobs_1.boolean('Disabled', false);
var _a = React.useState(types_1.CheckboxStates.FALSE), state = _a[0], setState = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "Checkboxes can have an indeterminate status. It's up to you to determine how this is managed and what can cause an indeterminate status. This example catches false to true transitions and sets indeterminate instead. This often can feel more complicated than it actually is. Please refer to the storybook source code for an example on how to emulate this functionality."),
React.createElement("br", null),
React.createElement(Field_1.default, { caption: "By accepting the terms of service, you agree to be a friendly human!", isDisabled: disabled, label: "Accept Terms of Service", name: "Sample", status: status, type: "checkbox", formFieldProps: {
text: 'Click me!',
checked: state,
onClick: function () {
// TINY little state machine to help model the transitions here.
switch (state) {
case types_1.CheckboxStates.FALSE:
setState(types_1.CheckboxStates.INDETERMINATE);
break;
case types_1.CheckboxStates.INDETERMINATE:
setState(types_1.CheckboxStates.TRUE);
break;
default:
setState(types_1.CheckboxStates.FALSE);
break;
}
},
} })));
};
exports.IndeterminateCheckbox = IndeterminateCheckbox;
var Radios = function () {
var _a = React.useState(''), favoritePet = _a[0], setFavoritePet = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement("h4", null, "This example omits the label and caption on the field components, instead opting to work with those manually."),
React.createElement("br", null),
React.createElement(Field_1.default.Label, null, "Favorite Pet?"),
React.createElement(Field_1.default, { isInline: true, style: { marginRight: '12px' }, type: "radio", formFieldProps: {
text: 'Cats',
checked: favoritePet === 'cat',
onClick: function () {
setFavoritePet('cat');
},
}, name: "Cats" }),
React.createElement(Field_1.default, { isInline: true, type: "radio", style: { marginRight: '12px' }, formFieldProps: {
text: 'Dogs',
checked: favoritePet === 'dog',
onClick: function () {
setFavoritePet('dog');
},
}, name: "Dogs" }),
React.createElement(Field_1.default, { isDisabled: true, isInline: true, type: "radio", style: { marginRight: '12px' }, formFieldProps: {
text: 'Birds',
checked: true,
onClick: function () {
setFavoritePet('bird');
},
}, name: "Birds" }),
React.createElement(Field_1.default, { isDisabled: true, isInline: true, type: "radio", formFieldProps: {
text: 'Fish',
checked: false,
onClick: function () {
setFavoritePet('fish');
},
}, name: "Fish" }),
React.createElement(Field_1.default.Caption, null, "Pick one!")));
};
exports.Radios = Radios;
var WithStatus = function () { return (React.createElement(React.Fragment, null,
React.createElement(Field_1.default, { label: "success", name: "success", formFieldProps: {
placeholder: 'success',
}, status: "success" }),
React.createElement("br", null),
React.createElement(Field_1.default, { label: "error", name: "error", formFieldProps: {
placeholder: 'error',
}, status: "error" }),
React.createElement("br", null),
React.createElement(Field_1.default, { label: "warning", name: "warning", formFieldProps: {
placeholder: 'warning',
}, status: "warning" }))); };
exports.WithStatus = WithStatus;