@vimeo/iris
Version:
Vimeo Design System
126 lines (123 loc) • 7.28 kB
JavaScript
import { b as __rest, c as __assign, a as __makeTemplateObject } from '../../../tslib.es6-7f0e734f.js';
import React__default, { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { Text } from '../../../typography/Text/Text.esm.js';
import { core } from '../../../tokens/core.esm.js';
import { Paragraph } from '../../../typography/Paragraph/Paragraph.esm.js';
import '../../../typography/Text/Text.style.esm.js';
import 'polished';
import '../../../typography/typography.esm.js';
import '../../../tokens/color/index.esm.js';
import '../../../tokens/color/background/background.esm.js';
import '../../../tokens/util/readToken.esm.js';
import '../../../color/colors.esm.js';
import '../../../tokens/util/clamp.esm.js';
import '../../../tokens/color/format/format.esm.js';
import '../../../tokens/color/format/primary.esm.js';
import '../../../tokens/color/format/secondary.esm.js';
import '../../../tokens/color/format/tertiary.esm.js';
import '../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../tokens/color/livestream/livestream.esm.js';
import '../../../tokens/color/status/status.esm.js';
import '../../../tokens/color/status/caution.esm.js';
import '../../../tokens/color/status/negative.esm.js';
import '../../../tokens/color/status/positive.esm.js';
import '../../../tokens/color/stroke/stroke.esm.js';
import '../../../tokens/color/surface/surface.esm.js';
import '../../../tokens/color/text/text.esm.js';
import '../../../tokens/util/round.esm.js';
import '../../../tokens/color/upsell/upsell.esm.js';
import '../../../tokens/color/upsell/sm.esm.js';
import '../../../tokens/color/upsell/xl.esm.js';
import '../../../tokens/color/upsell/new.esm.js';
import '../../../tokens/edge/edge.esm.js';
import '../../../tokens/space/space.esm.js';
import '../../../tokens/typography/index.esm.js';
import '../../../tokens/typography/size/size.esm.js';
import '../../../typography/Text/EditableText.esm.js';
import '../../../utils/HOCs/withIris.esm.js';
import '../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../utils/DOM/geometry.esm.js';
import '../../../utils/css.esm.js';
import '../../../typography/Paragraph/Paragraph.style.esm.js';
var Wrapper = forwardRef(function (_a, ref) {
var children = _a.children; _a.defaultValue; var disabled = _a.disabled, floating = _a.floating, floatLabel = _a.floatLabel; _a.icon; var id = _a.id, label = _a.label, _b = _a.messages, messages = _b === void 0 ? {} : _b, status = _a.status, style = _a.style, size = _a.size, theme = _a.theme; _a.value; var props = __rest(_a, ["children", "defaultValue", "disabled", "floating", "floatLabel", "icon", "id", "label", "messages", "status", "style", "size", "theme", "value"]);
var active = floating && floatLabel;
var preMessage = messages.pre && messages.pre;
var postMessage = messages.post && messages.post;
var error = status === 'negative' && messages.error;
var help = status === 'positive' && messages.help;
return (React__default.createElement("div", __assign({}, props, { ref: ref, style: __assign(__assign({}, style), { position: 'relative' }) }),
preMessage,
label && (React__default.createElement(Label, { floating: floating, active: active, sizeInput: size, htmlFor: id, disabled: disabled }, label)),
children,
Object.values(messages).length > 0 && (React__default.createElement(MessageArea, { error: error, help: help, post: postMessage, status: status, theme: theme }))));
});
// NOTE!
// 09/2021
// ——————————
// The following was quickly eye-balled to add floating support
// to inputs of all sizes. This is not ideal and should be replaced
// by values derived from higher-order input size tokens.
var sizes = {
xxs: 0.5,
xs: 0.75,
sm: 0.75,
md: 1,
lg: 1.5,
xl: 1.75,
xxl: 2,
};
var tops = {
xxs: 0.25,
xs: 0.55,
sm: 0.95,
md: 0.95,
lg: 1.1,
xl: 1.55,
xxl: 2,
};
var lefts = {
xxs: 0.25,
xs: 0.35,
sm: 0.5,
md: 0.6,
lg: 0.7,
xl: 0.9,
xxl: 1.1,
};
var Label = styled(Text).attrs({ element: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: inline-block;\n transition: 120ms ease-in-out;\n cursor: ", ";\n font-size: ", "rem;\n color: ", ";\n margin-bottom: 0.2rem;\n font-weight: 400;\n\n ", ";\n\n ", ";\n"], ["\n display: inline-block;\n transition: 120ms ease-in-out;\n cursor: ", ";\n font-size: ", "rem;\n color: ", ";\n margin-bottom: 0.2rem;\n font-weight: 400;\n\n ", ";\n\n ", ";\n"])), function (p) { return (p.disabled ? 'not-allowed' : 'pointer'); }, function (p) { return 0.315 + sizes[p.sizeInput] / 1.8; }, core.color.text(600), function (p) {
return p.floating &&
!p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: 0.75rem;\n "], ["\n pointer-events: none;\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: 0.75rem;\n "])), sizes[p.sizeInput], tops[p.sizeInput]);
}, function (p) {
return p.floating &&
p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: ", "rem;\n "], ["\n position: absolute;\n z-index: 1;\n font-size: ", "rem;\n top: ", "rem;\n left: ", "rem;\n "])), 0.315 + sizes[p.sizeInput] / 1.8, 0.25 + tops[p.sizeInput] / 4, lefts[p.sizeInput]);
});
var MessageArea = forwardRef(function (_a, ref) {
var error = _a.error, _b = _a.position, position = _b === void 0 ? 'bottom' : _b, help = _a.help, post = _a.post; _a.theme; var props = __rest(_a, ["error", "position", "help", "post", "theme"]);
if (post)
props.children = post;
if (help)
props.children = help;
if (error)
props.children = error;
return (React__default.createElement("div", __assign({}, props, { style: {
display: 'inline-flex',
marginBottom: position === 'sublabel' && '0.5rem',
} }),
post && React__default.createElement(Message, __assign({ ref: ref }, props)),
help && React__default.createElement(Message, __assign({ ref: ref }, props)),
error && React__default.createElement(Message, __assign({ ref: ref }, props))));
});
function Message(_a) {
var children = _a.children, status = _a.status, props = __rest(_a, ["children", "status"]);
return (React__default.createElement(Paragraph, __assign({}, props, { size: "3", element: "span", role: status === 'negative' ? 'alert' : 'note', status: status, style: { overflow: 'hidden' } }), children));
}
var templateObject_1, templateObject_2, templateObject_3;
export { Wrapper };