react-jupiter 5.12.0 → 6.0.0-beta.2

package/src/components/cover/index.style.js

@@ -0,0 +1,48 @@
+import styled, { keyframes } from 'styled-components';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+const defaultImageUrl = 'https://static.evand.net/assets/images/defaults/event-cover.jpg';
+
+export const Container = styled.div`
+  min-height: ${(props) => props.minHeight}px;
+  & > a {
+    display: block;
+  }
+  
+  & > span {
+    display: block;
+    width: 100%;
+    min-height: inherit;
+  }
+`;
+
+const lazyLoadingAnimation = keyframes`
+  100% {
+    opacity: 1;
+    filter: none;
+  }
+  0% {
+    opacity: 0;
+    filter: blur(20px);
+  }
+`;
+
+export const StyledLazyImage = styled(LazyLoadImage)`
+  margin-bottom: -5px;
+  min-height: inherit;
+  width: 100%;
+  font-family: 'IranSharp';
+  display: block;
+  background-image: url(${defaultImageUrl});
+  background-size: cover;
+  animation: ${lazyLoadingAnimation} 2s 1;
+`;
+
+export const StyledImage = styled.img`
+  min-height: inherit;
+  width: 100%;
+  font-family: 'IranSharp';
+  display: block;
+  background-image: url(${defaultImageUrl});
+  background-size: cover;
+`;

package/src/components/cover/index.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
+import findByTestAtrr from '../utils/test';
+import Cover from './index';
+
+describe('Cover', () => {
+  it('should render correctly(simple-cover)', () => {
+    const component = shallow(<Cover />);
+    const cover = findByTestAtrr(component, 'cover');
+    expect(cover.length).toBe(1);
+  });
+
+  it('should render correctly(external link-cover)', () => {
+    const component = shallow(<Cover linkTo="http://yahoo.com" />);
+    const cover = findByTestAtrr(component, 'cover');
+    expect(cover.length).toBe(1);
+  });
+
+  it('should render correctly(internal link-cover)', () => {
+    const component = shallow(<Cover renderLink={(element) => <Link to="/components/card">{element}</Link>} />);
+    const cover = findByTestAtrr(component, 'cover');
+    expect(cover.length).toBe(1);
+  });
+});

package/src/components/display/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DisplayStyle } from './index.style';
+
+const Display = (props) => {
+  const renderDisplay = () => {
+    const { children } = props;
+    if (children === undefined) {
+      return null;
+    }
+
+    return <DisplayStyle {...props}>{children}</DisplayStyle>;
+  };
+
+  return (
+    <>
+      {renderDisplay()}
+    </>
+  );
+};
+
+Display.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  display: PropTypes.string,
+  width: PropTypes.string,
+  widthMobile: PropTypes.string,
+  justifyContent: PropTypes.string,
+  justifyContentMobile: PropTypes.string,
+  alignItems: PropTypes.string,
+  flexDirection: PropTypes.string,
+  flexDirectionMobile: PropTypes.string,
+  wrap: PropTypes.string,
+  className: PropTypes.string,
+  flex: PropTypes.string,
+  alignSelf: PropTypes.string,
+};
+
+export default Display;

package/src/components/display/index.style.js

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+import defaultTheme from '../themes';
+
+export const Flex = styled.div`
+  display: flex;
+  ${({ justifyContent }) => (justifyContent
+    ? `justify-content: ${justifyContent}`
+    : ''
+  )}
+  ${({ alignItems }) => (alignItems
+    ? `align-items: ${alignItems}`
+    : ''
+  )}
+`;
+
+export const Block = styled.div`
+  display: block;
+`;
+
+export const DisplayStyle = styled.div`
+  ${({ display }) => (display
+    ? `display: ${display};`
+    : ''
+  )}
+  ${({ width }) => (width
+    ? `width: ${width};`
+    : ''
+  )}
+  ${({ widthMobile }) => (widthMobile
+    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
+        width: ${widthMobile};
+      }`
+    : ''
+  )}
+  ${({ justifyContent }) => (justifyContent
+    ? `justify-content: ${justifyContent};`
+    : ''
+  )}
+
+  ${({ justifyContentMobile }) => (justifyContentMobile
+    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
+        justify-content: ${justifyContentMobile};
+      }`
+    : ''
+  )}
+
+  ${({ alignItems }) => (alignItems
+    ? `align-items: ${alignItems};`
+    : ''
+  )}
+  ${({ alignItemsMobile }) => (alignItemsMobile
+    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
+        align-items: ${alignItemsMobile};
+      }`
+    : ''
+  )}
+  ${({ flexDirection }) => (flexDirection
+    ? `flex-direction: ${flexDirection};`
+    : ''
+  )}
+
+  ${({ flexDirectionMobile }) => (flexDirectionMobile
+    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
+        flex-direction: ${flexDirectionMobile};
+      }`
+    : ''
+  )}
+  ${({ wrap }) => (wrap
+    ? 'flex-wrap: wrap;'
+    : ''
+  )}
+  ${({ flex }) => (flex
+    ? `flex: ${flex};`
+    : ''
+  )}
+  ${({ alignSelf }) => (alignSelf
+    ? `align-self: ${alignSelf};`
+    : ''
+  )}
+`;

package/src/components/file-item/fileImgIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyledImgIcon } from './index.style';
+import FontStyle from './fileImgsFont';
+
+type Props = {
+  iconFileName: string,
+}
+
+const FileImgIcon = (props: Props) => {
+  const { iconFileName } = props;
+
+  return (
+    <>
+      <FontStyle />
+      <StyledImgIcon
+        className={`jupiter-file-font ${iconFileName}`}
+        data-test="file-image"
+      >
+        <span className="path1" />
+        <span className="path2" />
+        <span className="path3" />
+        <span className="path4" />
+        <span className="path5" />
+        <span className="path6" />
+        <span className="path7" />
+        <span className="path8" />
+        <span className="path9" />
+        <span className="path10" />
+        <span className="path11" />
+        <span className="path12" />
+        <span className="path13" />
+      </StyledImgIcon>
+    </>
+  );
+};
+
+export default FileImgIcon;