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

React components to support the MCP styleguide

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;
};
import React from 'react';
import { css, cx } from '@emotion/css';
import { BlockButton } from './internal';
import cvar from './theme/cvar';
const toggle = css `
  border-radius: ${cvar('spacing-2')};
  width: 96px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;

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

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