react-jupiter 5.12.0 → 6.0.0-beta.1

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import 'jest-styled-components';
+
+import CardTemplate from './index';
+import { Text } from '../../typography';
+import findByTestAtrr from '../../utils/test';
+import theme from '../../themes';
+
+const setupShallow = (props = {}) => (
+  shallow(
+    <CardTemplate
+      level={props.level}
+      hoverToLevel={props.hoverToLevel}
+      maxWidth={props.maxWidth}
+      linkTo={props.linkTo}
+      {...props}
+    >
+      {props.children}
+    </CardTemplate>,
+  )
+);
+
+const setupMount = (props = {}) => (
+  mount(
+    <CardTemplate
+      level={props.level}
+      hoverToLevel={props.hoverToLevel}
+      maxWidth={props.maxWidth}
+      linkTo={props.linkTo}
+      {...props}
+    >
+      {props.children}
+    </CardTemplate>,
+  )
+);
+
+describe('Card Template', () => {
+  it('should render correctly', () => {
+    const component = setupShallow({
+      level: 2,
+      hoverToLevel: 3,
+      children: <Text>یک متن تستی</Text>,
+    });
+    const CardTemplate = findByTestAtrr(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: <Text>یک متن تستی</Text>,
+    });
+    const CardTemplate = findByTestAtrr(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 ${theme.shadows[1].blur}px ${theme.shadows[1].spread}px rgba(0,0,0,${theme.shadows[1].opacity})`,
+    );
+    expect(CardTemplate).toHaveStyleRule(
+      'box-shadow',
+      `0 0 ${theme.shadows[3].blur}px ${theme.shadows[3].spread}px rgba(0,0,0,${theme.shadows[3].opacity})`,
+      {
+        modifier: ':hover',
+      },
+    );
+    expect(CardTemplate).toHaveStyleRule(
+      'border-radius',
+      `${theme.borderRadius.low}px`,
+    );
+    expect(CardTemplate).toHaveStyleRule('max-width', `${props.maxWidth}px`);
+  });
+});

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

@@ -0,0 +1,3 @@
+export const VERTICAL_CARD = 'vertical';
+export const HORIZONTAL_CARD = 'horizontal';
+export const HORIZONTAL_MOBILE_CARD = 'horizontal-mobile';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageLabel from './index.style';
+
+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 = ({ type }) => {
+  switch (type) {
+    case 'ads':
+      return <ImageLabel src={adsLabelUrl} data-test="ads-label" />;
+    case 'finished':
+    default:
+      return <ImageLabel src={finishedLabelUrl} data-test="finished-label" />;
+  }
+};
+
+EventCardLabel.propTypes = {
+  type: PropTypes.oneOf(['ads', 'finished']).isRequired,
+};
+
+export default EventCardLabel;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const ImageLabel = styled.img`
+  display: inline-block;
+  margin-left: 12px;
+  // margin-bottom: 5px;
+  width: 33px;
+`;
+
+export default ImageLabel;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import EventCardLabel from './index';
+import findByTestAtrr from '../../../utils/test';
+
+const setupShallow = ({ type }) => (
+  shallow(<EventCardLabel type={type} />)
+);
+
+describe('EventCardLabel component', () => {
+  it('Should render ads label', () => {
+    const component = setupShallow({ type: 'ads' });
+    const AdsLabel = findByTestAtrr(component, 'ads-label');
+    expect(AdsLabel.length).toBe(1);
+  });
+
+  it('Should render finished label', () => {
+    const component = setupShallow({ type: 'finished' });
+    const AdsLabel = findByTestAtrr(component, 'finished-label');
+    expect(AdsLabel.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,227 @@
+import React from 'react';
+import PropTypes, { oneOfType } from 'prop-types';
+import GlobalStyle from '../../globalStyle';
+import { VERTICAL_CARD, HORIZONTAL_CARD, HORIZONTAL_MOBILE_CARD } from './constants';
+import ShowDate from '../../show-date';
+import { Text } from '../../typography';
+import TitledAvatar from '../../titled-avatar';
+import EventCardLabel from './event-card-label';
+import {
+  VerticalCardContainer,
+  VerticalCover,
+  VerticalContentContainer,
+  DateLabelContainer,
+  DateBookmarkContainer,
+  BookmarkIcon,
+  VerticalPlacePrice,
+  VerticalTitle,
+  HorizontalCardContainer,
+  HorizontalCover,
+  HorizontalMobileCover,
+  HorizontalContentContainer,
+  HorizontalTitle,
+  HorizontalPlacePrice,
+  PartnershipBox,
+} from './index.style';
+import Icon from '../../icon';
+
+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 = ({
+  title,
+  price,
+  place,
+  renderEventLink,
+  clickBookmark,
+  bookmarked = false,
+  cover = '',
+  type = VERTICAL_CARD,
+  ads = false,
+  finished = false,
+  organization = undefined,
+  renderOrganizationLink = () => false,
+  date = '',
+  showDate = '',
+  partnership = {
+    status: '',
+  },
+  coverImage = null,
+  ...rest
+}) => {
+  // 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 = () => (
+    <VerticalCardContainer
+      direction={type}
+      hoverToLevel={3}
+      maxWidth={270}
+      {...rest}
+    >
+      {renderEventLink(coverImage || <VerticalCover data-test="vertical-cover" src={cover || defaultCoverUrl} loading="lazy" onError={(e) => { e.target.onerror = null; e.target.src = defaultCoverUrl; }} />) }
+      <VerticalContentContainer
+        data-test="vertical-content"
+        background={finished ? finishedClockLabelUrl : null}
+      >
+        <div>
+          <DateBookmarkContainer data-test="vertical-date-bookmark">
+            <DateLabelContainer>
+              {finished && <EventCardLabel type="finished" />}
+              {!finished && ads && <EventCardLabel type="ads" />}
+              {!!partnership?.status && (
+              <PartnershipBox>
+                <Icon name={partnership?.status} color="yellow" stickyLeft marginRight={3} />
+                {' '}
+                {partnership?.status === 'colleague' ? 'همکار' : 'همیار'}
+              </PartnershipBox>
+              )}
+              {date && <ShowDate date={date} color="gray" fontSize="12" />}
+              {showDate && (
+                <Text size="12" color="gray" data-test="show-date">{showDate}</Text>
+              )}
+            </DateLabelContainer>
+            <BookmarkIcon
+              name={bookmarked ? 'bookmark' : 'bookmark-border'}
+              size="lg"
+              color="gray"
+              onClick={clickBookmark}
+            />
+          </DateBookmarkContainer>
+          { renderEventLink(<VerticalTitle level={2} size="sm">{title}</VerticalTitle>)}
+          <VerticalPlacePrice list={productPropertiesList} />
+        </div>
+        {(organization && organization.logo !== 'unset') && (
+          <TitledAvatar title={organization.name} titleSize={12} avatar={organization.logo} avatarSize="xs" renderAvatarLink={renderOrganizationLink} />
+        )}
+      </VerticalContentContainer>
+    </VerticalCardContainer>
+  );
+
+  const renderHorizontalCard = () => (
+    <HorizontalCardContainer
+      direction={type}
+      hoverToLevel={3}
+      maxWidth={560}
+      {...rest}
+    >
+      {renderEventLink(<HorizontalCover data-test="horizontal-cover" src={cover || defaultCoverUrl} loading="lazy" />) }
+      <HorizontalContentContainer data-test="horizontal-content">
+        <DateBookmarkContainer>
+          <DateLabelContainer>
+            {finished && <EventCardLabel type="finished" />}
+            {!finished && ads && <EventCardLabel type="ads" />}
+            {date && <ShowDate date={date} color="gray" fontSize="12" />}
+            {showDate && (
+              <Text size="12" color="gray" data-test="show-date">{showDate}</Text>
+            )}
+          </DateLabelContainer>
+          <BookmarkIcon
+            name={bookmarked ? 'bookmark' : 'bookmark-border'}
+            size="lg"
+            color="gray"
+            onClick={clickBookmark}
+            data-test={bookmarked ? 'bookmark' : 'bookmark-border'}
+          />
+        </DateBookmarkContainer>
+        { renderEventLink(<HorizontalTitle level={2} size="sm">{title}</HorizontalTitle>) }
+        <HorizontalPlacePrice list={productPropertiesList} isHorizontal />
+      </HorizontalContentContainer>
+    </HorizontalCardContainer>
+  );
+
+  const renderHorizontalMobileCard = () => (
+    <HorizontalCardContainer
+      direction={type}
+      hoverToLevel={3}
+      maxWidth={560}
+      {...rest}
+    >
+      {renderEventLink(<HorizontalMobileCover data-test="horizontal-mobile-cover" src={cover || defaultCoverUrl} loading="lazy" />) }
+      <HorizontalContentContainer data-test="horizontal-content">
+        <DateBookmarkContainer>
+          <DateLabelContainer>
+            {finished && <EventCardLabel type="finished" />}
+            {!finished && ads && <EventCardLabel type="ads" />}
+            {date && <ShowDate date={date} color="gray" fontSize="10" />}
+            {showDate && (
+              <Text size="10" color="gray" data-test="show-date">{showDate}</Text>
+            )}
+          </DateLabelContainer>
+          <BookmarkIcon
+            name={bookmarked ? 'bookmark' : 'bookmark-border'}
+            size="sm"
+            color="gray"
+            onClick={clickBookmark}
+            data-test={bookmarked ? 'bookmark' : 'bookmark-border'}
+          />
+        </DateBookmarkContainer>
+        { renderEventLink(<HorizontalTitle level={4} size="sm">{title}</HorizontalTitle>) }
+        <HorizontalPlacePrice list={productPropertiesList} isHorizontal />
+      </HorizontalContentContainer>
+    </HorizontalCardContainer>
+  );
+
+  const renderCard = () => {
+    switch (type) {
+      case HORIZONTAL_CARD:
+        return renderHorizontalCard();
+      case HORIZONTAL_MOBILE_CARD:
+        return renderHorizontalMobileCard();
+      case VERTICAL_CARD:
+      default:
+        return renderVerticalCard();
+    }
+  };
+
+  return (
+    <>
+      <GlobalStyle />
+      {renderCard()}
+    </>
+  );
+};
+
+EventCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  bookmarked: PropTypes.bool,
+  type: PropTypes.string,
+  price: PropTypes.string.isRequired,
+  place: PropTypes.string.isRequired,
+  date: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  showDate: PropTypes.string,
+  cover: PropTypes.string,
+  ads: PropTypes.bool,
+  finished: PropTypes.bool,
+  organization: oneOfType([
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      logo: PropTypes.string,
+    }),
+    PropTypes.undefined,
+  ]),
+  renderEventLink: PropTypes.func.isRequired,
+  renderOrganizationLink: PropTypes.func,
+  clickBookmark: PropTypes.func.isRequired,
+  partnership: PropTypes.shape({
+    status: PropTypes.string,
+  }),
+  coverImage: PropTypes.node || null,
+};
+
+export default EventCard;

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import EventCard from './index';
+// import '../storybook.css';
+import { VerticalCover } from './index.style';
+
+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) => <a href="/tosomewhere">{element}</a>,
+};
+
+const organizationArgs = {
+  organization: {
+    name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
+    logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
+  },
+  renderOrganizationLink: (element) => <a href="/toorganization">{element}</a>,
+};
+
+export default {
+  title: 'Components/Card/EventCard',
+  component: EventCard,
+  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) => <EventCard {...args} />;
+
+export const HorizontalMobile = Template.bind({});
+HorizontalMobile.args = {
+  ...defaultArgs,
+  type: 'horizontal-mobile',
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  ...defaultArgs,
+  type: 'horizontal',
+};
+
+export const HorizontalWithAds = Template.bind({});
+HorizontalWithAds.args = {
+  ...defaultArgs,
+  type: 'horizontal',
+  ads: true,
+};
+
+export const HorizontalWithFinished = Template.bind({});
+HorizontalWithFinished.args = {
+  ...defaultArgs,
+  type: 'horizontal',
+  finished: true,
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
+};
+
+export const VerticalWithCustomCover = Template.bind({});
+VerticalWithCustomCover.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
+  coverImage: <VerticalCover src="https://static.evand.net/assets/images/defaults/event-cover.jpg" />,
+};
+
+export const VerticalWithFinished = Template.bind({});
+VerticalWithFinished.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  finished: true,
+  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
+};
+
+export const VerticalWithAds = Template.bind({});
+VerticalWithAds.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  ads: true,
+  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
+};
+
+export const VerticalWithPartnership = Template.bind({});
+VerticalWithPartnership.args = {
+  ...defaultArgs,
+  ...organizationArgs,
+  type: 'vertical',
+  title: 'تایتل یک رویداد اینجاست کهن',
+  partnership: {
+    status: 'colleague',
+  },
+  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
+};

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

@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import CardTemplate from '../card-template';
+import { Heading } from '../../typography';
+import ProductProperties from '../../product-properties';
+import Icon from '../../icon';
+import defaultTheme from '../../themes';
+
+/* Common event card styles */
+
+export const Link = styled.a`
+  text-decoration: none;
+`;
+
+export const DateBookmarkContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const DateLabelContainer = styled.div`
+  display: inline-block;
+  & > * {
+    vertical-align:middle;
+  }
+`;
+
+export const BookmarkIcon = styled(Icon)`
+  margin-left: 0;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+/* Vertical event card styles */
+export const VerticalCardContainer = styled(CardTemplate)`
+  background: white;
+  a {
+    text-decoration: none;
+  }
+  @media only screen and (min-width: ${defaultTheme.breakpoints.sm}px) {
+    min-height: 358px;
+  }
+`;
+
+export const VerticalCover = styled.img`
+  width: 100%;
+  min-width: 270px;
+  height: auto;
+  min-height: 150px;
+`;
+
+export const VerticalContentContainer = styled.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;
+`;
+
+export const VerticalTitle = styled(Heading)`
+  margin: 0;
+  overflow: hidden;
+  height: 60px;
+`;
+
+export const VerticalPlacePrice = styled(ProductProperties)`
+  margin: 4px 0;
+`;
+
+/* Horizontal event card styles */
+
+export const HorizontalCardContainer = styled(VerticalCardContainer)`
+  height: 116px;
+`;
+
+export const HorizontalCover = styled.img`
+  width: 206px;
+  min-width: 206px;
+  height: auto;
+`;
+
+export const HorizontalMobileCover = styled.img`
+  width: 146px;
+  min-width: 146px;
+  height: 100%;
+`;
+
+export const HorizontalContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 250px;
+`;
+
+export const HorizontalMobileContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0px;
+`;
+
+export const HorizontalTitle = styled(Heading)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const HorizontalPlacePrice = styled(ProductProperties)``;
+
+export const PartnershipBox = styled.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;
+`;