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

var _HorizontalRule = _interopRequireDefault(require("../../atoms/HorizontalRule/HorizontalRule"));

var _ref2 = _react.default.createElement(_HorizontalRule.default, {
  short: true
});

/**
 * Status: *in progress*
 */
var ImageHeadingLink = function ImageHeadingLink(_ref) {
  var children = _ref.children,
      className = _ref.className,
      src = _ref.src,
      alt = _ref.alt,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "className", "src", "alt"]);
  return _react.default.createElement("a", (0, _extends2.default)({
    className: (0, _classnames3.default)('image-heading-link heading-link', (0, _defineProperty2.default)({}, className, className))
  }, rest), _react.default.createElement("img", {
    className: "image-heading-link__image",
    src: src,
    alt: alt
  }), _react.default.createElement("div", {
    className: "image-heading-link__box heading-link--focus-area"
  }, _react.default.createElement("h2", {
    className: "image-heading-link__heading"
  }, children), _ref2));
};

ImageHeadingLink.Small = function (_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = (0, _objectWithoutProperties2.default)(_ref3, ["children", "className"]);
  return _react.default.createElement("span", (0, _extends2.default)({
    className: (0, _classnames3.default)('image-heading-link__heading--small', (0, _defineProperty2.default)({}, className, className))
  }, rest), children);
};

ImageHeadingLink.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes.default.node,
  src: _propTypes.default.string.isRequired,
  alt: _propTypes.default.string,
  href: _propTypes.default.string,
  onClick: _propTypes.default.func
} : {};
var _default = ImageHeadingLink;
exports.default = _default;