@massds/mayflower-react/dist/TeaserListing/index.mjs

React versions of Mayflower design system UI components

/**
 * TeaserListing module.
 * @module @massds/mayflower-react/TeaserListing
 * @requires module:@massds/mayflower-assets/scss/03-organisms/teaser-listing
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

/**
  List wrapper
  */

const TeaserListing = _ref => {
  let children = _ref.children;
  return /*#__PURE__*/React.createElement("section", {
    className: "ma__teaser-listing"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__teaser-listing__container"
  }, children));
};
TeaserListing.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};
TeaserListing.displayName = 'TeaserListing';
export default TeaserListing;

/**
  Feature Items wrapper
  */

const TeaserListingFeatures = _ref2 => {
  let children = _ref2.children,
    stacked = _ref2.stacked;
  const featuredClasses = classNames('ma__teaser-listing__featured-items', {
    stacked: stacked,
    'side-by-side': !stacked
  });
  return /*#__PURE__*/React.createElement("div", {
    className: featuredClasses
  }, children);
};
TeaserListingFeatures.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Stacked if true, side-by-side if false. */
  stacked: PropTypes.bool,
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};
TeaserListingFeatures.defaultProps = {
  stacked: false
};
TeaserListing.Features = TeaserListingFeatures;
TeaserListing.Features.displayName = 'TeaserListing.Features';

/**
  List Items wrapper
  */

const TeaserListingItems = _ref3 => {
  var _classNames;
  let columns = _ref3.columns,
    children = _ref3.children;
  const itemsClasses = classNames((_classNames = {
    'ma__teaser-listing__items': true
  }, _classNames["ma__teaser-listing__" + columns + "-col-grid"] = columns, _classNames));
  return /*#__PURE__*/React.createElement("ul", {
    className: itemsClasses
  }, children);
};
TeaserListingItems.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Set for two column or three column layout for large screens. (Both display the same at smaller screen widths) */
  columns: PropTypes.oneOf([2, 3]),
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};
TeaserListingItems.defaultProps = {
  columns: 2
};
TeaserListing.Items = TeaserListingItems;
TeaserListing.Items.displayName = 'TeaserListing.Items';

/**
  List Item
  */

const TeaserListingItem = _ref4 => {
  let children = _ref4.children;
  return /*#__PURE__*/React.createElement("li", {
    className: "ma__teaser-listing__item"
  }, children);
};
TeaserListingItem.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};
TeaserListing.Item = TeaserListingItem;
TeaserListing.Item.displayName = 'TeaserListing.Item';