@vimeo/iris/_deprecated/FeatureTour/Dot.esm.js

Vimeo Design System

import { b as __rest, c as __assign, a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import React__default, { forwardRef } from 'react';
import styled, { css, keyframes } from 'styled-components';
import { setLightness, saturate, rem, rgba } from 'polished';
import { white, blue } from '../../color/colors.esm.js';

var Dot = 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 = __rest(_a, ["beaconA11yText", "mode", "color", "beaconDelayIndex", "onClick", "clear"]);
    var adjustedColor = setLightness(0.4, saturate(0.1, color));
    return (React__default.createElement(WrapperStyled, __assign({ ref: ref }, props, { mode: mode, onClick: function (e) {
            onClick(e);
            clear();
        } }),
        React__default.createElement(HaloStyled, { isActive: mode === 'active', beaconDelayIndex: beaconDelayIndex, color: adjustedColor },
            React__default.createElement(DotStyled, { mode: mode, color: adjustedColor }, beaconA11yText))));
});
var beaconSize = 14;
var haloSize = 30;
var wrapperSize = 46;
var WrapperStyled = styled.span(templateObject_1 || (templateObject_1 = __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"])), rem(wrapperSize), rem(wrapperSize), rem((wrapperSize - haloSize) / 2));
var DotStyled = styled.span(templateObject_3 || (templateObject_3 = __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"])), rem(beaconSize), rem(beaconSize), rem(beaconSize / 2), function (props) { return props.color; }, function (props) {
    return props.mode === 'open' && css(templateObject_2 || (templateObject_2 = __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    "])), white, rem(2), props.color, rem(1), rem(4), rem(2), rgba(props.color, 0.66));
});
var haloAnimation = function (color, delay) { return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: 2500ms infinite ", " ", "ms;\n"], ["\n  animation: 2500ms infinite ", " ", "ms;\n"])), keyframes(templateObject_4 || (templateObject_4 = __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  "])), rgba(blue(500), 0.0), rgba(blue(500), 0), rgba(0, 0, 0, 0.0), rgba(blue(500), 0), rem(8), rem(6), rgba(color, 0.4), rem(12), rem(10), rem(12), rem(14), rgba(color, 0.4), rem(8), rem(6), rgba(color, 0), rem(80), rem(80), rgba(color, 0)), delay * 300); };
var HaloStyled = styled.span(templateObject_7 || (templateObject_7 = __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"])), rem(haloSize), rem(haloSize), rem((haloSize - beaconSize) / 2), rem(haloSize / 2), function (props) {
    return props.isActive && css(templateObject_6 || (templateObject_6 = __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    "])), white, white, rem(9), rgba(props.color, 0.25), rem(10), rgba(props.color, 0.25), rem(15), rgba(white, 0), rgba(white, 0), haloAnimation(props.color, props.beaconDelayIndex));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

export { Dot };