@vimeo/iris
Version:
Vimeo Design System
40 lines (33 loc) • 6.42 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var polished = require('polished');
var color_colors = require('../../color/colors.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var Dot = React.forwardRef(function (_a, ref) {
var beaconA11yText = _a.beaconA11yText, _b = _a.mode, mode = _b === void 0 ? 'inactive' : _b, color = _a.color, beaconDelayIndex = _a.beaconDelayIndex, onClick = _a.onClick, clear = _a.clear, props = tslib_es6.__rest(_a, ["beaconA11yText", "mode", "color", "beaconDelayIndex", "onClick", "clear"]);
var adjustedColor = polished.setLightness(0.4, polished.saturate(0.1, color));
return (React__default["default"].createElement(WrapperStyled, tslib_es6.__assign({ ref: ref }, props, { mode: mode, onClick: function (e) {
onClick(e);
clear();
} }),
React__default["default"].createElement(HaloStyled, { isActive: mode === 'active', beaconDelayIndex: beaconDelayIndex, color: adjustedColor },
React__default["default"].createElement(DotStyled, { mode: mode, color: adjustedColor }, beaconA11yText))));
});
var beaconSize = 14;
var haloSize = 30;
var wrapperSize = 46;
var WrapperStyled = styled__default["default"].span(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n display: block;\n position: relative;\n overflow: visible;\n width: ", ";\n height: ", ";\n padding: ", ";\n transition: 120ms ease-in-out;\n transform-origin: 50 50;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.14);\n }\n"], ["\n display: block;\n position: relative;\n overflow: visible;\n width: ", ";\n height: ", ";\n padding: ", ";\n transition: 120ms ease-in-out;\n transform-origin: 50 50;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.14);\n }\n"])), polished.rem(wrapperSize), polished.rem(wrapperSize), polished.rem((wrapperSize - haloSize) / 2));
var DotStyled = styled__default["default"].span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n display: inline-block;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n transition: all 0.1s ease-in-out;\n text-indent: -9999px;\n background-color: ", ";\n\n ", ";\n"], ["\n display: inline-block;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n transition: all 0.1s ease-in-out;\n text-indent: -9999px;\n background-color: ", ";\n\n ", ";\n"])), polished.rem(beaconSize), polished.rem(beaconSize), polished.rem(beaconSize / 2), function (props) { return props.color; }, function (props) {
return props.mode === 'open' && styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0 0 0 ", " ", ",\n 0 ", " ", " ", " ", ";\n "], ["\n background-color: ", ";\n box-shadow: 0 0 0 ", " ", ",\n 0 ", " ", " ", " ", ";\n "])), color_colors.white, polished.rem(2), props.color, polished.rem(1), polished.rem(4), polished.rem(2), polished.rgba(props.color, 0.66));
});
var haloAnimation = function (color, delay) { return styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n animation: 2500ms infinite ", " ", "ms;\n"], ["\n animation: 2500ms infinite ", " ", "ms;\n"])), styled.keyframes(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n 0%, 30%, 100% {\n box-shadow: 0 0 0.25rem 0.25rem ", ",\n 0 0 0.5rem 0.375rem ", ",\n 0 0 0 0 ", ", 0 0 0 0 ", ";\n }\n\n 10% {\n box-shadow: 0 0 ", " ", " ", ",\n 0 0 ", " ", " rgba(0,0,0,0.0),\n 0 0 ", " ", " ", ";\n }\n\n 25% {\n box-shadow: 0 0 0 ", " ", " ", ",\n 0 0 0 ", " rgba(0,0,0,0.0),\n 0 0 0 ", " ", ";\n }\n "], ["\n 0%, 30%, 100% {\n box-shadow: 0 0 0.25rem 0.25rem ", ",\n 0 0 0.5rem 0.375rem ", ",\n 0 0 0 0 ", ", 0 0 0 0 ", ";\n }\n\n 10% {\n box-shadow: 0 0 ", " ", " ", ",\n 0 0 ", " ", " rgba(0,0,0,0.0),\n 0 0 ", " ", " ", ";\n }\n\n 25% {\n box-shadow: 0 0 0 ", " ", " ", ",\n 0 0 0 ", " rgba(0,0,0,0.0),\n 0 0 0 ", " ", ";\n }\n "])), polished.rgba(color_colors.blue(500), 0.0), polished.rgba(color_colors.blue(500), 0), polished.rgba(0, 0, 0, 0.0), polished.rgba(color_colors.blue(500), 0), polished.rem(8), polished.rem(6), polished.rgba(color, 0.4), polished.rem(12), polished.rem(10), polished.rem(12), polished.rem(14), polished.rgba(color, 0.4), polished.rem(8), polished.rem(6), polished.rgba(color, 0), polished.rem(80), polished.rem(80), polished.rgba(color, 0)), delay * 300); };
var HaloStyled = styled__default["default"].span(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n display: inline-block;\n width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n\n ", ";\n"], ["\n display: inline-block;\n width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n\n ", ";\n"])), polished.rem(haloSize), polished.rem(haloSize), polished.rem((haloSize - beaconSize) / 2), polished.rem(haloSize / 2), function (props) {
return props.isActive && styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n background-image: radial-gradient(\n circle,\n ", ",\n ", " ", ",\n ", " ", ",\n ", " ", ",\n ", " 1rem,\n ", "\n );\n\n ", ";\n "], ["\n background-image: radial-gradient(\n circle,\n ", ",\n ", " ", ",\n ", " ", ",\n ", " ", ",\n ", " 1rem,\n ", "\n );\n\n ", ";\n "])), color_colors.white, color_colors.white, polished.rem(9), polished.rgba(props.color, 0.25), polished.rem(10), polished.rgba(props.color, 0.25), polished.rem(15), polished.rgba(color_colors.white, 0), polished.rgba(color_colors.white, 0), haloAnimation(props.color, props.beaconDelayIndex));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
exports.Dot = Dot;