@telia/styleguide/atoms/ToggleSwitch/ToggleSwitch.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames2 = _interopRequireDefault(require("classnames"));

var PANEL = {
  LEFT: 'left',
  RIGHT: 'right'
};
/**
 * Status: *In progress*.
 */

var ToggleSwitch = function ToggleSwitch(_ref) {
  var _classnames;

  var leftLabel = _ref.leftLabel,
      rightLabel = _ref.rightLabel,
      leftOnClickHandler = _ref.leftOnClickHandler,
      rightOnClickHandler = _ref.rightOnClickHandler,
      active = _ref.active,
      backgroundColor = _ref.backgroundColor,
      className = _ref.className;
  return _react.default.createElement("div", {
    className: (0, _classnames2.default)('toggle-switch', (_classnames = {}, (0, _defineProperty2.default)(_classnames, "toggle-switch__".concat(backgroundColor), true), (0, _defineProperty2.default)(_classnames, className, className), _classnames)),
    role: "group"
  }, _react.default.createElement("button", {
    type: "button",
    "aria-pressed": active === PANEL.LEFT,
    className: "toggle-switch__button",
    onClick: leftOnClickHandler
  }, leftLabel), _react.default.createElement("button", {
    type: "button",
    "aria-pressed": active === PANEL.RIGHT,
    className: "toggle-switch__button",
    onClick: rightOnClickHandler
  }, rightLabel));
};

ToggleSwitch.defaultProps = {
  leftOnClickHandler: function leftOnClickHandler() {},
  rightOnClickHandler: function rightOnClickHandler() {},
  backgroundColor: 'white'
};
ToggleSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
  active: _propTypes.default.oneOf(Object.keys(PANEL).map(function (k) {
    return PANEL[k];
  })),
  backgroundColor: _propTypes.default.oneOf(['white', 'grey']),
  className: _propTypes.default.string,
  leftLabel: _propTypes.default.string,
  rightLabel: _propTypes.default.string,
  leftOnClickHandler: _propTypes.default.func,
  rightOnClickHandler: _propTypes.default.func
} : {};
var _default = ToggleSwitch;
exports.default = _default;