render()

in src/amo/components/Card/index.js [29:100]


  render() {
    const {
      children,
      className,
      footer: footerNode,
      footerLink,
      footerText,
      isHomepageShelf,
      header,
      photonStyle,
    } = this.props;

    let footer;
    let footerClass;

    if (
      (footerText && footerLink) ||
      (footerLink && footerNode) ||
      (footerText && footerNode)
    ) {
      throw new Error(oneLine`You can only specify exactly one of these props:
        footer, footerLink or footerText.`);
    } else if (footerText) {
      footer = footerText;
      footerClass = 'Card-footer-text';
    } else if (footerLink) {
      footer = footerLink;
      footerClass = 'Card-footer-link';
    } else {
      footer = footerNode;
    }

    return (
      <section
        className={makeClassName('Card', className, {
          'Card--photon': photonStyle,
          'Card--no-header': !header,
          'Card--no-footer': !footer,
        })}
      >
        {header ? (
          <header
            className={makeClassName('Card-header', {
              'Card-shelf-header': isHomepageShelf,
            })}
          >
            <div className="Card-header-text">{header}</div>

            {isHomepageShelf && footer ? (
              <footer className="Card-shelf-footer-in-header">{footer}</footer>
            ) : null}
          </header>
        ) : null}

        {children ? <div className="Card-contents">{children}</div> : null}

        {footer ? (
          <footer
            className={makeClassName(
              'Card-footer',
              {
                'Card-shelf-footer': isHomepageShelf,
              },
              footerClass,
            )}
          >
            {footer}
          </footer>
        ) : null}
      </section>
    );
  }