@telia/styleguide/atoms/ToggleButton/ToggleButton.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 _react = _interopRequireDefault(require("react"));

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

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

/**
 * Status: *in progress*.
 *
 * Work remaining: test in more browsers; use rem instead of px in the CSS.
 *
 * This component should be used when there are things that can be toggled on and off.
 * Extra `descriptionText` can be displayed below the toggle button.
 */
var ToggleButton = function ToggleButton(_ref) {
  var id = _ref.id,
      labelText = _ref.labelText,
      descriptionText = _ref.descriptionText,
      _ref$defaultChecked = _ref.defaultChecked,
      defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
      checked = _ref.checked,
      onChange = _ref.onChange,
      _ref$toggleOnLeftSide = _ref.toggleOnLeftSide,
      toggleOnLeftSide = _ref$toggleOnLeftSide === void 0 ? false : _ref$toggleOnLeftSide;
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('toggle-button', {
      'left-side': toggleOnLeftSide,
      'right-side': !toggleOnLeftSide
    })
  }, _react.default.createElement("input", {
    id: id,
    className: "toggle-button__checkbox",
    type: "checkbox",
    onChange: onChange,
    checked: checked,
    defaultChecked: defaultChecked
  }), _react.default.createElement("label", {
    htmlFor: id,
    className: "toggle-button__label"
  }, labelText), descriptionText ? _react.default.createElement("p", {
    className: "toggle-button__description"
  }, descriptionText) : null);
};

ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
  defaultChecked: _propTypes.default.bool,
  id: _propTypes.default.string.isRequired,
  labelText: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func,
  checked: _propTypes.default.bool,
  descriptionText: _propTypes.default.string,
  toggleOnLeftSide: _propTypes.default.bool
} : {};
var _default = ToggleButton;
exports.default = _default;