@telia/styleguide/atoms/Box/Box.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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

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

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

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

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

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

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

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

var _SvgIcon = _interopRequireDefault(require("../../atoms/SvgIcon/SvgIcon"));

var _ref = _react.default.createElement("div", {
  className: "box__speech-bubble box__speech-bubble--empty"
});

var _ref2 = _react.default.createElement("span", {
  className: "box__close-text"
}, "LUKK");

var _ref3 = _react.default.createElement(_SvgIcon.default, {
  className: "box__close-icon",
  iconName: "ico_delete",
  color: "black"
});

/**
 * Status: *finished*.
 *
 * A Box component has a default size, but can be made into a small or a medium box.
 * It serves as a container with a colored border, and do not have any padding since the content
 * should be able to control that part.
 *
 * One or more Boxes can be used inside a <a href="/components/molecules#BoxGrid">BoxGrid</a> component.
 */
var Box =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Box, _React$Component);

  function Box(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Box);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Box).call(this, props));
    _this.state = {
      isExpanded: _this.props.isExpanded ? _this.props.isExpanded : false
    };

    if (_this.props.canExpand) {
      _this.boxContainerClick = _this.boxContainerClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
      _this.closeBoxClick = _this.closeBoxClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    }

    return _this;
  }

  (0, _createClass2.default)(Box, [{
    key: "boxContainerClick",
    value: function boxContainerClick(e) {
      if (!this.props.canExpand) return;

      if (e.type === 'click' || e.type === 'keyup' && (e.which === 13 || e.which === 32)) {
        if (!this.state.isExpanded) {
          this.setState({
            isExpanded: true
          });
        }
      }
    }
  }, {
    key: "closeBoxClick",
    value: function closeBoxClick(e) {
      e.stopPropagation();
      this.setState({
        isExpanded: false
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames;

      var _this$props = this.props,
          className = _this$props.className,
          color = _this$props.color,
          size = _this$props.size,
          canExpand = _this$props.canExpand;
      var isExpanded = this.state.isExpanded;
      return _react.default.createElement("article", {
        id: this.props.id,
        className: (0, _classnames2.default)('box', (_classnames = {}, (0, _defineProperty2.default)(_classnames, className, className), (0, _defineProperty2.default)(_classnames, "box--".concat(color), color), (0, _defineProperty2.default)(_classnames, "box--".concat(size), size), (0, _defineProperty2.default)(_classnames, 'box--expandable', canExpand), (0, _defineProperty2.default)(_classnames, 'box--is-expanded', isExpanded), _classnames)),
        onClick: this.boxContainerClick,
        onKeyUp: this.boxContainerClick,
        "aria-expanded": this.props.canExpand ? this.state.isExpanded : null,
        tabIndex: this.props.canExpand && !this.state.isExpanded ? '0' : null
      }, this.props.speechBubbleText ? _react.default.createElement("div", {
        className: "box__speech-bubble"
      }, _react.default.createElement("div", {
        className: "box__speech-bubble-text"
      }, this.props.speechBubbleText)) : _ref, this.state.isExpanded ? _react.default.createElement("button", {
        className: "box__close-expanded-info",
        onClick: this.closeBoxClick,
        "aria-controls": this.props.id
      }, _ref2, _ref3) : null, this.props.children);
    }
  }]);
  return Box;
}(_react.default.Component);

exports.default = Box;
Box.propTypes = process.env.NODE_ENV !== "production" ? {
  isExpanded: _propTypes.default.bool,
  canExpand: _propTypes.default.bool,
  color: _propTypes.default.oneOf(['purple', 'pink', 'light-orange', 'green', 'blue', 'teal', 'grey', 'black']),
  size: _propTypes.default.oneOf(['small', 'medium']),
  speechBubbleText: _propTypes.default.string,

  /** close button aria-controls */
  id: _propTypes.default.string
} : {};