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

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

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

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

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

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

/**
 * Status: *finished*
 */
var DescriptionList = function DescriptionList(_ref) {
  var _classnames;

  var children = _ref.children,
      wrapByTwo = _ref.wrapByTwo,
      className = _ref.className,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "wrapByTwo", "className"]);
  return _react.default.createElement("dl", (0, _extends2.default)({
    className: (0, _classnames4.default)('description-list', (_classnames = {}, (0, _defineProperty2.default)(_classnames, className, className), (0, _defineProperty2.default)(_classnames, 'description-list--wrap description-list--wrap-by-two', wrapByTwo), _classnames))
  }, rest), children);
};

DescriptionList.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Pairs of Dt or Dd. */
  children: _propTypes.default.node,

  /** Whenever should each column contain only two pairs. */
  wrapByTwo: _propTypes.default.bool
} : {};

DescriptionList.Dd = function (_ref2) {
  var children = _ref2.children,
      className = _ref2.className,
      rest = (0, _objectWithoutProperties2.default)(_ref2, ["children", "className"]);
  return _react.default.createElement("dd", (0, _extends2.default)({
    className: (0, _classnames4.default)('description-list__details', (0, _defineProperty2.default)({}, className, className))
  }, rest), children);
};

DescriptionList.Dt = function (_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = (0, _objectWithoutProperties2.default)(_ref3, ["children", "className"]);
  return _react.default.createElement("dt", (0, _extends2.default)({
    className: (0, _classnames4.default)('description-list__term', (0, _defineProperty2.default)({}, className, className))
  }, rest), children);
};

var _default = DescriptionList;
exports.default = _default;