@cimpress/react-components/dist/src/Toggle.js

React components to support the MCP styleguide

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toggle = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const internal_1 = require("./internal");
const cvar_1 = __importDefault(require("./theme/cvar"));
const toggle = (0, css_1.css) `
  border-radius: ${(0, cvar_1.default)('spacing-2')};
  width: 96px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;

  .toggle-label {
    width: 58px;
    padding: ${(0, cvar_1.default)('spacing-8')};
    text-align: center;
    color: ${(0, cvar_1.default)('color-text-inverse')};
    font-weight: 600;
  }

  .toggle-switch {
    width: 30px;
    height: 30px;
    margin: 5px;
    background: ${(0, cvar_1.default)('color-background')};
    border-radius: ${(0, cvar_1.default)('spacing-2')};
  }
`;
const toggleOn = (0, css_1.css) `
  flex-direction: row;
  background: ${(0, cvar_1.default)('color-interactive')};
`;
const toggleOff = (0, css_1.css) `
  flex-direction: row-reverse;
  background: ${(0, cvar_1.default)('color-toggle-background-off')};
`;
const toggleDisabled = (0, css_1.css) `
  cursor: not-allowed;
  opacity: 0.65;
  background-color: ${(0, cvar_1.default)('color-background-disabled')};
  .toggle-label {
    color: ${(0, cvar_1.default)('color-text-disabled-dark')};
  }
`;
const toggleSmall = (0, css_1.css) `
  border-radius: 1px;
  width: 40px;
  height: ${(0, cvar_1.default)('spacing-16')};
  font-size: 0;
  justify-content: flex-end;
  .toggle-switch {
    width: 10px;
    height: 10px;
    margin: 3px;
    border-radius: 1px;
  }
  .toggle-label {
    display: none;
  }
`;
const Toggle = (_a) => {
    var { className, disabled = false, offText = 'Off', on, onClick, onText = 'On', size, style } = _a, props = __rest(_a, ["className", "disabled", "offText", "on", "onClick", "onText", "size", "style"]);
    return (react_1.default.createElement(internal_1.BlockButton, Object.assign({ className: (0, css_1.cx)('crc-toggle', toggle, { [toggleSmall]: size === 'sm' }, { [toggleOn]: on }, { [toggleOff]: !on }, { [toggleDisabled]: disabled }, className), onClick: disabled ? undefined : onClick, style: style }, props),
        react_1.default.createElement("div", { className: "toggle-label" }, on ? onText : offText),
        react_1.default.createElement("div", { className: "toggle-switch" })));
};
exports.Toggle = Toggle;
//# sourceMappingURL=Toggle.js.map