react-jupiter 5.12.0 → 6.0.0-beta.2

package/dist/components/card/card-template/index.test.js

@@ -0,0 +1,85 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+require("jest-styled-components");
+
+var _index = _interopRequireDefault(require("./index"));
+var _typography = require("../../typography");
+var _test = _interopRequireDefault(require("../../utils/test"));
+var _themes = _interopRequireDefault(require("../../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+const setupShallow = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.shallow)(/*#__PURE__*/
+      _react.default.createElement(_index.default, _extends({
+        level: props.level,
+        hoverToLevel: props.hoverToLevel,
+        maxWidth: props.maxWidth,
+        linkTo: props.linkTo },
+      props),
+
+      props.children
+      )
+    ));};
+
+
+const setupMount = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.mount)(/*#__PURE__*/
+      _react.default.createElement(_index.default, _extends({
+        level: props.level,
+        hoverToLevel: props.hoverToLevel,
+        maxWidth: props.maxWidth,
+        linkTo: props.linkTo },
+      props),
+
+      props.children
+      )
+    ));};
+
+
+describe('Card Template', () => {
+  it('should render correctly', () => {
+    const component = setupShallow({
+      level: 2,
+      hoverToLevel: 3,
+      children: /*#__PURE__*/_react.default.createElement(_typography.Text, null, "\u06CC\u06A9 \u0645\u062A\u0646 \u062A\u0633\u062A\u06CC")
+    });
+    const CardTemplate = (0, _test.default)(component, 'card-template');
+    expect(CardTemplate.length).toBe(1);
+  });
+
+  it('should render correctly with link wrapper', () => {
+    const component = setupShallow({
+      level: 2,
+      hoverToLevel: 3,
+      linkTo: '/link-address',
+      children: /*#__PURE__*/_react.default.createElement(_typography.Text, null, "\u06CC\u06A9 \u0645\u062A\u0646 \u062A\u0633\u062A\u06CC")
+    });
+    const CardTemplate = (0, _test.default)(component, 'card-template-link-wrapper');
+    expect(CardTemplate.length).toBe(1);
+  });
+
+  it('should has correct style', () => {
+    const props = {
+      level: 1,
+      hoverToLevel: 3,
+      children: 'یک متن تستی',
+      maxWidth: 300
+    };
+    const CardTemplate = setupMount(props);
+    expect(CardTemplate).toHaveStyleRule(
+      'box-shadow',
+      `0 0 ${_themes.default.shadows[1].blur}px ${_themes.default.shadows[1].spread}px rgba(0,0,0,${_themes.default.shadows[1].opacity})`
+    );
+    expect(CardTemplate).toHaveStyleRule(
+      'box-shadow',
+      `0 0 ${_themes.default.shadows[3].blur}px ${_themes.default.shadows[3].spread}px rgba(0,0,0,${_themes.default.shadows[3].opacity})`,
+      {
+        modifier: ':hover'
+      }
+    );
+    expect(CardTemplate).toHaveStyleRule(
+      'border-radius',
+      `${_themes.default.borderRadius.low}px`
+    );
+    expect(CardTemplate).toHaveStyleRule('max-width', `${props.maxWidth}px`);
+  });
+});

package/dist/components/card/event-card/constants.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.VERTICAL_CARD = exports.HORIZONTAL_MOBILE_CARD = exports.HORIZONTAL_CARD = void 0;const VERTICAL_CARD = exports.VERTICAL_CARD = 'vertical';
+const HORIZONTAL_CARD = exports.HORIZONTAL_CARD = 'horizontal';
+const HORIZONTAL_MOBILE_CARD = exports.HORIZONTAL_MOBILE_CARD = 'horizontal-mobile';

package/dist/components/card/event-card/event-card-label/index.js

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = _interopRequireDefault(require("./index.style"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const adsLabelUrl = 'https://static.evand.net/assets/images/other/ads-label.svg';
+// const adsLabelUrl = require('../../../../docs/assets/ads-label.svg');
+
+const finishedLabelUrl = 'https://static.evand.net/assets/images/other/finished-text-label.svg';
+
+const EventCardLabel = (_ref) => {let { type } = _ref;
+  switch (type) {
+    case 'ads':
+      return /*#__PURE__*/_react.default.createElement(_index.default, { src: adsLabelUrl, "data-test": "ads-label" });
+    case 'finished':
+    default:
+      return /*#__PURE__*/_react.default.createElement(_index.default, { src: finishedLabelUrl, "data-test": "finished-label" });
+  }
+};
+
+EventCardLabel.propTypes = {
+  type: _propTypes.default.oneOf(['ads', 'finished']).isRequired
+};var _default = exports.default =
+
+EventCardLabel;

package/dist/components/card/event-card/event-card-label/index.style.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const ImageLabel = _styledComponents.default.img`
+  display: inline-block;
+  margin-left: 12px;
+  // margin-bottom: 5px;
+  width: 33px;
+`;var _default = exports.default =
+
+ImageLabel;

package/dist/components/card/event-card/event-card-label/index.test.js

@@ -0,0 +1,23 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("./index"));
+var _test = _interopRequireDefault(require("../../../utils/test"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const setupShallow = (_ref) => {let { type } = _ref;return (
+    (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { type: type })));};
+
+
+describe('EventCardLabel component', () => {
+  it('Should render ads label', () => {
+    const component = setupShallow({ type: 'ads' });
+    const AdsLabel = (0, _test.default)(component, 'ads-label');
+    expect(AdsLabel.length).toBe(1);
+  });
+
+  it('Should render finished label', () => {
+    const component = setupShallow({ type: 'finished' });
+    const AdsLabel = (0, _test.default)(component, 'finished-label');
+    expect(AdsLabel.length).toBe(1);
+  });
+});

package/dist/components/card/event-card/index.js

@@ -0,0 +1,227 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _constants = require("./constants");
+var _showDate = _interopRequireDefault(require("../../show-date"));
+var _typography = require("../../typography");
+var _titledAvatar = _interopRequireDefault(require("../../titled-avatar"));
+var _eventCardLabel = _interopRequireDefault(require("./event-card-label"));
+var _index = require("./index.style");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _icon = _interopRequireDefault(require("../../icon"));function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+const finishedClockLabelUrl = 'https://static.evand.net/assets/images/other/finished-clock-label.svg';
+const defaultCoverUrl = 'https://static.evand.net/assets/images/defaults/event-cover.jpg';
+const EventCard = (_ref) =>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{let { title, price, place, renderEventLink, clickBookmark, bookmarked = false, cover = '', type = _constants.VERTICAL_CARD, ads = false, finished = false, organization = undefined, renderOrganizationLink = () => false, date = '', showDate = '', partnership = { status: '' }, coverImage = null, ...rest } = _ref;
+  // date param used on main evand and because it wrong to use moment-jalali in react jupiter
+  // we ommmit it in evand-next and use showDate param instead but its still used in evand
+  // TODO: remove date params if no longer needed (in evand project)
+  // TODO: remove ShowDate component and remove used places
+  // TODO: remove moment-jalali from this package after removing ShowDate
+
+  // in new form of event-card we dont show organazation info as a titled-avatar
+  // TODO: if the new form was accepted and remove old one from evand clean these parts
+  const productPropertiesList = [
+  { iconName: 'place', text: place },
+  { iconName: 'ticket', text: price }];
+
+  if (organization && organization.logo === 'unset') {
+    productPropertiesList.push({ iconName: 'supervisor-account', text: organization.name });
+  }
+
+  const renderVerticalCard = () => /*#__PURE__*/
+  _react.default.createElement(_index.VerticalCardContainer, _extends({
+    direction: type,
+    hoverToLevel: 3,
+    maxWidth: 270 },
+  rest),
+
+  renderEventLink(coverImage || /*#__PURE__*/_react.default.createElement(_index.VerticalCover, { "data-test": "vertical-cover", src: cover || defaultCoverUrl, loading: "lazy", onError: (e) => {e.target.onerror = null;e.target.src = defaultCoverUrl;} })), /*#__PURE__*/
+  _react.default.createElement(_index.VerticalContentContainer, {
+    "data-test": "vertical-content",
+    background: finished ? finishedClockLabelUrl : null }, /*#__PURE__*/
+
+  _react.default.createElement("div", null, /*#__PURE__*/
+  _react.default.createElement(_index.DateBookmarkContainer, { "data-test": "vertical-date-bookmark" }, /*#__PURE__*/
+  _react.default.createElement(_index.DateLabelContainer, null,
+  finished && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "finished" }),
+  !finished && ads && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "ads" }),
+  !!partnership?.status && /*#__PURE__*/
+  _react.default.createElement(_index.PartnershipBox, null, /*#__PURE__*/
+  _react.default.createElement(_icon.default, { name: partnership?.status, color: "yellow", stickyLeft: true, marginRight: 3 }),
+  ' ',
+  partnership?.status === 'colleague' ? 'همکار' : 'همیار'
+  ),
+
+  date && /*#__PURE__*/_react.default.createElement(_showDate.default, { date: date, color: "gray", fontSize: "12" }),
+  showDate && /*#__PURE__*/
+  _react.default.createElement(_typography.Text, { size: "12", color: "gray", "data-test": "show-date" }, showDate)
+
+  ), /*#__PURE__*/
+  _react.default.createElement(_index.BookmarkIcon, {
+    name: bookmarked ? 'bookmark' : 'bookmark-border',
+    size: "lg",
+    color: "gray",
+    onClick: clickBookmark }
+  )
+  ),
+  renderEventLink(/*#__PURE__*/_react.default.createElement(_index.VerticalTitle, { level: 2, size: "sm" }, title)), /*#__PURE__*/
+  _react.default.createElement(_index.VerticalPlacePrice, { list: productPropertiesList })
+  ),
+  organization && organization.logo !== 'unset' && /*#__PURE__*/
+  _react.default.createElement(_titledAvatar.default, { title: organization.name, titleSize: 12, avatar: organization.logo, avatarSize: "xs", renderAvatarLink: renderOrganizationLink })
+
+  )
+  );
+
+
+  const renderHorizontalCard = () => /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalCardContainer, _extends({
+    direction: type,
+    hoverToLevel: 3,
+    maxWidth: 560 },
+  rest),
+
+  renderEventLink(/*#__PURE__*/_react.default.createElement(_index.HorizontalCover, { "data-test": "horizontal-cover", src: cover || defaultCoverUrl, loading: "lazy" })), /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalContentContainer, { "data-test": "horizontal-content" }, /*#__PURE__*/
+  _react.default.createElement(_index.DateBookmarkContainer, null, /*#__PURE__*/
+  _react.default.createElement(_index.DateLabelContainer, null,
+  finished && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "finished" }),
+  !finished && ads && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "ads" }),
+  date && /*#__PURE__*/_react.default.createElement(_showDate.default, { date: date, color: "gray", fontSize: "12" }),
+  showDate && /*#__PURE__*/
+  _react.default.createElement(_typography.Text, { size: "12", color: "gray", "data-test": "show-date" }, showDate)
+
+  ), /*#__PURE__*/
+  _react.default.createElement(_index.BookmarkIcon, {
+    name: bookmarked ? 'bookmark' : 'bookmark-border',
+    size: "lg",
+    color: "gray",
+    onClick: clickBookmark,
+    "data-test": bookmarked ? 'bookmark' : 'bookmark-border' }
+  )
+  ),
+  renderEventLink(/*#__PURE__*/_react.default.createElement(_index.HorizontalTitle, { level: 2, size: "sm" }, title)), /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalPlacePrice, { list: productPropertiesList, isHorizontal: true })
+  )
+  );
+
+
+  const renderHorizontalMobileCard = () => /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalCardContainer, _extends({
+    direction: type,
+    hoverToLevel: 3,
+    maxWidth: 560 },
+  rest),
+
+  renderEventLink(/*#__PURE__*/_react.default.createElement(_index.HorizontalMobileCover, { "data-test": "horizontal-mobile-cover", src: cover || defaultCoverUrl, loading: "lazy" })), /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalContentContainer, { "data-test": "horizontal-content" }, /*#__PURE__*/
+  _react.default.createElement(_index.DateBookmarkContainer, null, /*#__PURE__*/
+  _react.default.createElement(_index.DateLabelContainer, null,
+  finished && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "finished" }),
+  !finished && ads && /*#__PURE__*/_react.default.createElement(_eventCardLabel.default, { type: "ads" }),
+  date && /*#__PURE__*/_react.default.createElement(_showDate.default, { date: date, color: "gray", fontSize: "10" }),
+  showDate && /*#__PURE__*/
+  _react.default.createElement(_typography.Text, { size: "10", color: "gray", "data-test": "show-date" }, showDate)
+
+  ), /*#__PURE__*/
+  _react.default.createElement(_index.BookmarkIcon, {
+    name: bookmarked ? 'bookmark' : 'bookmark-border',
+    size: "sm",
+    color: "gray",
+    onClick: clickBookmark,
+    "data-test": bookmarked ? 'bookmark' : 'bookmark-border' }
+  )
+  ),
+  renderEventLink(/*#__PURE__*/_react.default.createElement(_index.HorizontalTitle, { level: 4, size: "sm" }, title)), /*#__PURE__*/
+  _react.default.createElement(_index.HorizontalPlacePrice, { list: productPropertiesList, isHorizontal: true })
+  )
+  );
+
+
+  const renderCard = () => {
+    switch (type) {
+      case _constants.HORIZONTAL_CARD:
+        return renderHorizontalCard();
+      case _constants.HORIZONTAL_MOBILE_CARD:
+        return renderHorizontalMobileCard();
+      case _constants.VERTICAL_CARD:
+      default:
+        return renderVerticalCard();
+    }
+  };
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null),
+    renderCard()
+    ));
+
+};
+
+EventCard.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  bookmarked: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  price: _propTypes.default.string.isRequired,
+  place: _propTypes.default.string.isRequired,
+  date: _propTypes.default.oneOfType([
+  _propTypes.default.string,
+  _propTypes.default.object]
+  ),
+  showDate: _propTypes.default.string,
+  cover: _propTypes.default.string,
+  ads: _propTypes.default.bool,
+  finished: _propTypes.default.bool,
+  organization: (0, _propTypes.oneOfType)([
+  _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    logo: _propTypes.default.string
+  }),
+  _propTypes.default.undefined]
+  ),
+  renderEventLink: _propTypes.default.func.isRequired,
+  renderOrganizationLink: _propTypes.default.func,
+  clickBookmark: _propTypes.default.func.isRequired,
+  partnership: _propTypes.default.shape({
+    status: _propTypes.default.string
+  }),
+  coverImage: _propTypes.default.node || null
+};var _default = exports.default =
+
+EventCard;

package/dist/components/card/event-card/index.stories.js

@@ -0,0 +1,166 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.VerticalWithPartnership = exports.VerticalWithFinished = exports.VerticalWithCustomCover = exports.VerticalWithAds = exports.Vertical = exports.HorizontalWithFinished = exports.HorizontalWithAds = exports.HorizontalMobile = exports.Horizontal = void 0;var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+
+var _index2 = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };} // import '../storybook.css';
+
+const defaultArgs = {
+  title: "تایتل یک رویداد نسبتا طولانی در اینجاست که باید و باید و قرار است اضافه بیاید و بزند به بیرون",
+  cover: "https://static.evand.net/assets/images/defaults/event-cover.jpg",
+  date: "2020-01-10T14:00:00+0330",
+  place: "تهران",
+  price: "از ۴۴۰۰۰ تومان",
+  clickBookmark: () => true,
+  queryString: "icn=trendEvents&ici=fp5",
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewhere" }, element)
+};
+
+const organizationArgs = {
+  organization: {
+    name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
+    logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg'
+  },
+  renderOrganizationLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/toorganization" }, element)
+};var _default = exports.default =
+
+{
+  title: 'Components/Card/EventCard',
+  component: _index.default,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['horizontal-mobile', 'horizontal', 'vertical'],
+      description: 'The type of the event card'
+    },
+    title: {
+      control: 'text',
+      description: 'The title of the event'
+    },
+    cover: {
+      control: 'text',
+      description: 'The cover image URL'
+    },
+    date: {
+      control: 'text',
+      description: 'The event date'
+    },
+    place: {
+      control: 'text',
+      description: 'The event location'
+    },
+    price: {
+      control: 'text',
+      description: 'The event price'
+    },
+    ads: {
+      control: 'boolean',
+      description: 'Whether the card is an advertisement'
+    },
+    finished: {
+      control: 'boolean',
+      description: 'Whether the event is finished'
+    },
+    partnership: {
+      control: 'object',
+      description: 'Partnership information'
+    },
+    organization: {
+      control: 'object',
+      description: 'Organization information'
+    },
+    clickBookmark: {
+      control: 'function',
+      description: 'Function to handle bookmark click'
+    },
+    renderEventLink: {
+      control: 'function',
+      description: 'Function to render event link'
+    },
+    renderOrganizationLink: {
+      control: 'function',
+      description: 'Function to render organization link'
+    },
+    coverImage: {
+      control: 'element',
+      description: 'Custom cover image element'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const HorizontalMobile = exports.HorizontalMobile = Template.bind({});
+HorizontalMobile.args = {
+  ...defaultArgs,
+  type: 'horizontal-mobile'
+};
+
+const Horizontal = exports.Horizontal = Template.bind({});
+Horizontal.args = {
+  ...defaultArgs,
+  type: 'horizontal'
+};
+
+const HorizontalWithAds = exports.HorizontalWithAds = Template.bind({});
+HorizontalWithAds.args = {
+  ...defaultArgs,
+  type: 'horizontal',
+  ads: true
+};
+
+const HorizontalWithFinished = exports.HorizontalWithFinished = Template.bind({});
+HorizontalWithFinished.args = {
+  ...defaultArgs,
+  type: 'horizontal',
+  finished: true
+};
+
+const Vertical = exports.Vertical = Template.bind({});
+Vertical.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewherenew" }, element)
+};
+
+const VerticalWithCustomCover = exports.VerticalWithCustomCover = Template.bind({});
+VerticalWithCustomCover.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewherenew" }, element),
+  coverImage: /*#__PURE__*/_react.default.createElement(_index2.VerticalCover, { src: "https://static.evand.net/assets/images/defaults/event-cover.jpg" })
+};
+
+const VerticalWithFinished = exports.VerticalWithFinished = Template.bind({});
+VerticalWithFinished.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  finished: true,
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewherenew" }, element)
+};
+
+const VerticalWithAds = exports.VerticalWithAds = Template.bind({});
+VerticalWithAds.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  ads: true,
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewherenew" }, element)
+};
+
+const VerticalWithPartnership = exports.VerticalWithPartnership = Template.bind({});
+VerticalWithPartnership.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  partnership: {
+    status: 'colleague'
+  },
+  renderEventLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "/tosomewherenew" }, element)
+};

package/dist/components/card/event-card/index.style.js

@@ -0,0 +1,129 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.VerticalTitle = exports.VerticalPlacePrice = exports.VerticalCover = exports.VerticalContentContainer = exports.VerticalCardContainer = exports.PartnershipBox = exports.Link = exports.HorizontalTitle = exports.HorizontalPlacePrice = exports.HorizontalMobileCover = exports.HorizontalMobileContentContainer = exports.HorizontalCover = exports.HorizontalContentContainer = exports.HorizontalCardContainer = exports.DateLabelContainer = exports.DateBookmarkContainer = exports.BookmarkIcon = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _cardTemplate = _interopRequireDefault(require("../card-template"));
+var _typography = require("../../typography");
+var _productProperties = _interopRequireDefault(require("../../product-properties"));
+var _icon = _interopRequireDefault(require("../../icon"));
+var _themes = _interopRequireDefault(require("../../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+/* Common event card styles */
+
+const Link = exports.Link = _styledComponents.default.a`
+  text-decoration: none;
+`;
+
+const DateBookmarkContainer = exports.DateBookmarkContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const DateLabelContainer = exports.DateLabelContainer = _styledComponents.default.div`
+  display: inline-block;
+  & > * {
+    vertical-align:middle;
+  }
+`;
+
+const BookmarkIcon = exports.BookmarkIcon = (0, _styledComponents.default)(_icon.default)`
+  margin-left: 0;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+/* Vertical event card styles */
+const VerticalCardContainer = exports.VerticalCardContainer = (0, _styledComponents.default)(_cardTemplate.default)`
+  background: white;
+  a {
+    text-decoration: none;
+  }
+  @media only screen and (min-width: ${_themes.default.breakpoints.sm}px) {
+    min-height: 358px;
+  }
+`;
+
+const VerticalCover = exports.VerticalCover = _styledComponents.default.img`
+  width: 100%;
+  min-width: 270px;
+  height: auto;
+  min-height: 150px;
+`;
+
+const VerticalContentContainer = exports.VerticalContentContainer = _styledComponents.default.div`
+  background-image: url(${(props) => props.background});
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 12px 16px 16px;
+  min-height: 180px;
+  max-height: 200px;
+  direction: rtl;
+  text-align: right;
+`;
+
+const VerticalTitle = exports.VerticalTitle = (0, _styledComponents.default)(_typography.Heading)`
+  margin: 0;
+  overflow: hidden;
+  height: 60px;
+`;
+
+const VerticalPlacePrice = exports.VerticalPlacePrice = (0, _styledComponents.default)(_productProperties.default)`
+  margin: 4px 0;
+`;
+
+/* Horizontal event card styles */
+
+const HorizontalCardContainer = exports.HorizontalCardContainer = (0, _styledComponents.default)(VerticalCardContainer)`
+  height: 116px;
+`;
+
+const HorizontalCover = exports.HorizontalCover = _styledComponents.default.img`
+  width: 206px;
+  min-width: 206px;
+  height: auto;
+`;
+
+const HorizontalMobileCover = exports.HorizontalMobileCover = _styledComponents.default.img`
+  width: 146px;
+  min-width: 146px;
+  height: 100%;
+`;
+
+const HorizontalContentContainer = exports.HorizontalContentContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 250px;
+`;
+
+const HorizontalMobileContentContainer = exports.HorizontalMobileContentContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0px;
+`;
+
+const HorizontalTitle = exports.HorizontalTitle = (0, _styledComponents.default)(_typography.Heading)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const HorizontalPlacePrice = exports.HorizontalPlacePrice = (0, _styledComponents.default)(_productProperties.default)``;
+
+const PartnershipBox = exports.PartnershipBox = _styledComponents.default.div`
+  background: #FFC72724;
+  border-radius: 5px;
+  margin-left: 5px;
+  color: #FFD324;
+  display: inline-flex;
+  align-items: center;
+  min-width: 60px;
+  height: 25px;
+  justify-content: center;
+`;