react-jupiter 6.0.0-beta.2 → 6.0.0-beta.4

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

@@ -1,85 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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;
-`;