@telia/styleguide/molecules/ProductList/ProductList.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 _classnames = _interopRequireDefault(require("classnames"));

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

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

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

var _ref2 = _react.default.createElement(_SvgIcon.default, {
  className: "product-list__item--link-icon",
  iconName: "ico_linkarrow",
  color: "purple"
});

/**
 * Status: *finished*.
 *
 * Used for showing lists of products like subscriptions and services, in a less "in your face" manner than the Subscription component.
 */
var ProductList = function ProductList(_ref) {
  var _ref$items = _ref.items,
      items = _ref$items === void 0 ? [] : _ref$items;
  return _react.default.createElement("div", {
    className: "product-list"
  }, items.map(function (item, index) {
    var productItemClassNames = (0, _classnames.default)('product-list__item', {
      'product-list__item--promo': item.style === 'promo'
    });

    var icon = _react.default.createElement(_SvgIcon.default, {
      className: "product-list__item-icon",
      iconName: item.iconName,
      color: item.iconColor
    });

    var content = _react.default.createElement("div", {
      className: "product-list__item-content"
    }, _react.default.createElement("div", {
      className: "product-list__item-heading"
    }, item.title), item.description && _react.default.createElement("div", {
      className: "product-list__item-description"
    }, item.description));

    if (item.href) {
      return _react.default.createElement("a", {
        href: item.href,
        key: index,
        className: "".concat(productItemClassNames, " product-list__item--link"),
        onClick: item.onClick
      }, icon, content, _ref2);
    }

    return _react.default.createElement("article", {
      key: index,
      className: productItemClassNames,
      onClick: item.onClick
    }, icon, content);
  }));
};

ProductList.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An array of items where each item can have properties of icon name, icon color, title, description and href. */
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
    /** Name of the icon e.g. arrow_ico */
    iconName: _propTypes.default.string.isRequired,

    /** Color of the icon (white, black or purple) */
    iconColor: _propTypes.default.oneOf(['white', 'black', 'purple']),

    /** Title of product */
    title: _propTypes.default.string.isRequired,

    /** Description of product */
    description: _propTypes.default.string,

    /** A link to the product */
    href: _propTypes.default.string,

    /** A click-handler for the product */
    onClick: _propTypes.default.func,

    /** Decide the style of the box */
    style: _propTypes.default.oneOf(['promo'])
  }))
} : {};
var _default = ProductList;
exports.default = _default;