jobiqo-cl/lib/src/components/04-organisms/03-job/02-teaser/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index$2 = require('../../../02-atoms/06-layout/03-flex/index.js');
var index = require('../../../02-atoms/19-image/index.js');
var Calendar = require('../../../../icons/Calendar.js');
var MapMarker = require('../../../../icons/MapMarker.js');
var Office = require('../../../../icons/Office.js');

/**
 * @file index.test.tsx
 *
 * @fileoverview The Job teaser component.
 */
const StyledJobTeaserWrapper = styled__default.div `
  display: flex;
  text-decoration: none;
  flex-direction: row;
  transition: all 0.15s ease;
  padding: ${props => props.theme.job.teaser.padding};
  border-width: ${props => props.theme.job.teaser.borderWidth};
  border-style: ${props => props.theme.job.teaser.borderStyle};
  border-color: ${props => props.theme.job.teaser.borderColor};
  ${props => props.theme.mediaQueries.small} {
    ${props => props.active
    ? `
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: ${props.theme.colors.primary}
  `
    : ``};
  }
  &:hover {
    background: ${props => props.theme.job.teaser.hoverBackground};

    .job-teaser-title {
      color: ${props => props.theme.job.teaser.title.hover.color};
    }
  }

  .image {
    margin-right: 1rem;
  }
`;
const StyledTeaserImage = styled__default(index.default) `
  max-width: ${props => props.theme.job.teaser.image.mobile.maxWidth};
  ${props => props.theme.mediaQueries.small} {
    max-width: ${props => props.theme.job.teaser.image.maxWidth};
  }
  border-radius: ${props => props.theme.job.teaser.image.borderRadius};
`;
const StyledTeaserTitle = styled__default.h3 `
  font-weight: 600;
  width: 100%;
  color: ${props => props.theme.job.teaser.title.color};
  font-size: ${props => props.theme.job.teaser.title.fontSize};
  margin-bottom: ${props => props.theme.job.teaser.title.marginBottom};
`;
const StyledTeaserCompany = styled__default.div `
  margin-right: 0.5rem;
  color: ${props => props.theme.job.teaser.company.color};
`;
const StyledTeaserLocation = styled__default.div `
  margin-right: 0.5rem;
  color: ${props => props.theme.job.teaser.location.color};
`;
const StyledTeaserOccupation = styled__default.div `
  margin-right: 0.5rem;
  color: ${props => props.theme.job.teaser.occupation.color};
`;
const StyledTeaserDescription = styled__default.div `
  margin-right: 0.5rem;
  color: ${props => props.theme.job.teaser.description.color};
`;
const StyledTeaserDate = styled__default.div `
  margin-right: 0.5rem;
  color: ${props => props.theme.job.teaser.date.color};
  font-size: ${props => props.theme.job.teaser.date.fontSize};
`;
const StyledJobIcon = styled__default.span `
  margin-right: 0.5rem;
`;
/**
 * The job teaser presents information about a job in a condensed way.
 */
const JobTeaser = (props) => {
    const defaultImage = 'http://via.placeholder.com/400x400?text=.';
    const { image, title, company, location, occupations, description, published, active } = props;
    return (React__default.createElement(StyledJobTeaserWrapper, { active: active, "data-testid": "job-teaser-wrapper" },
        React__default.createElement("div", { className: "image" },
            React__default.createElement(StyledTeaserImage, { src: image ? image : defaultImage, alt: company ? company : title, height: "50px", width: "50px" })),
        React__default.createElement("div", { className: "content" },
            React__default.createElement(StyledTeaserTitle, { className: "job-teaser-title" }, title),
            React__default.createElement("div", { className: "info" },
                company && (React__default.createElement(StyledTeaserCompany, null,
                    React__default.createElement(StyledJobIcon, null,
                        React__default.createElement(Office.OfficeIcon, { color: "secondary", title: "Company" })),
                    company)),
                React__default.createElement(index$2.default, { alignItems: "center" },
                    location && (React__default.createElement(StyledTeaserLocation, null,
                        React__default.createElement(StyledJobIcon, null,
                            React__default.createElement(MapMarker.MapMarkerIcon, { color: "gray4", title: "location" })),
                        location)),
                    published && (React__default.createElement(StyledTeaserDate, null,
                        React__default.createElement(StyledJobIcon, null,
                            React__default.createElement(Calendar.CalendarIcon, { color: "gray4", title: "Published date" })),
                        published)))),
            React__default.createElement(StyledTeaserOccupation, null, occupations && occupations.join(' | ')),
            React__default.createElement(StyledTeaserDescription, null, description))));
};

exports.JobTeaser = JobTeaser;
exports.StyledJobIcon = StyledJobIcon;
exports.StyledTeaserCompany = StyledTeaserCompany;
exports.StyledTeaserDate = StyledTeaserDate;
exports.StyledTeaserDescription = StyledTeaserDescription;
exports.StyledTeaserImage = StyledTeaserImage;
exports.StyledTeaserLocation = StyledTeaserLocation;
exports.StyledTeaserOccupation = StyledTeaserOccupation;
exports.StyledTeaserTitle = StyledTeaserTitle;