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

package/src/components/themes.js

@@ -1,97 +0,0 @@
-const defaultTheme = {
-  colors: {
-    darkBlue800: '#091E31',
-    darkBlue600: '#132A3E', // default primary color
-    darkBlue400: '#013A5C',
-    darkBlue200: '#3673AA',
-    blue800: '#027EB8',
-    blue600: '#0095DB', // default secondary color
-    blue400: '#99D5F1',
-    blue200: '#E6F4FB',
-    green800: '#21B151',
-    green600: '#42D473', // default green color
-    green400: '#8BEFAC',
-    green200: '#C1FFD5',
-    red800: '#FF2020',
-    red600: '#FF5D5D', // default red color
-    red400: '#FF9C9C',
-    red200: '#FFE8E8',
-    yellow800: '#FFCC00',
-    yellow600: '#FFD324', // default yellow color
-    yellow400: '#FFE372',
-    yellow200: '#FFF4C9',
-    gray800: '#A7A7A7',
-    gray600: '#D2D2D2', // default gray color
-    gray400: '#EBEBEB',
-    gray200: '#F9F9F9',
-    riverBedDark: '#3B4141',
-    riverBed: '#555f61',
-    white: '#FFFFFF',
-    black: '#000000',
-  },
-  sizes: {
-    large: 'lg',
-    medium: 'md',
-    small: 'sm',
-  },
-  borderRadius: {
-    low: 2,
-    high: 5,
-  },
-  border: {
-    lightBlue: '1px solid #E6F4FB',
-  },
-  shadows: {
-    1: {
-      blur: 8,
-      spread: 0,
-      opacity: 0.16,
-    },
-    2: {
-      blur: 12,
-      spread: 0,
-      opacity: 0.20,
-    },
-    3: {
-      blur: 16,
-      spread: 0,
-      opacity: 0.24,
-    },
-    4: {
-      blur: 24,
-      spread: 0,
-      opacity: 0.32,
-    },
-    5: {
-      blur: 32,
-      spread: 0,
-      opacity: 0.48,
-    },
-  },
-  animation: {
-    time: 0.2,
-    method: 'ease-in',
-  },
-  breakpoints: {
-    xl: 1520,
-    lg: 1200,
-    md: 990,
-    sm: 768,
-    xs: 375,
-  },
-  spacing: {
-    0: '0',
-    1: '1px',
-    2: '2px',
-    3: '4px',
-    4: '8px',
-    5: '16px',
-    6: '24px',
-    7: '32px',
-    8: '48px',
-    9: '64px',
-    10: '86px',
-  },
-};
-
-export default defaultTheme;

package/src/components/titled-avatar/index.js

@@ -1,48 +0,0 @@
-// @flow
-
-import React, { type Node } from 'react';
-import GlobalStyle from '../globalStyle';
-import Avatar from '../avatar';
-import {
-  Container, SmallTitle,
-} from './index.style';
-
-type Props = {
-  title: string,
-  avatar: string,
-  renderAvatarLink?: * => Node | boolean,
-  avatarSize?: 'sm' | 'md',
-  titleSize?: 10 | 12,
-};
-
-const TitledAvatar = ({
-  title,
-  avatar,
-  renderAvatarLink = () => false,
-  avatarSize = 'md',
-  titleSize = 12,
-}: Props) => {
-  const renderTitle = () => (
-    <SmallTitle size={titleSize}>{title}</SmallTitle>
-  );
-
-  if (renderAvatarLink) {
-    return renderAvatarLink(
-      <Container data-test="titled-avatar">
-        <GlobalStyle />
-        <Avatar src={avatar} size={avatarSize} sizeMobile={avatarSize} round />
-        {renderTitle()}
-      </Container>,
-    );
-  }
-
-  return (
-    <Container data-test="titled-avatar">
-      <GlobalStyle />
-      <Avatar src={avatar} size={avatarSize} sizeMobile={avatarSize} round />
-      {renderTitle()}
-    </Container>
-  );
-};
-
-export default TitledAvatar;

package/src/components/titled-avatar/index.stories.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import TitledAvatar from './index';
-
-export default {
-  title: 'Components/TitledAvatar',
-  component: TitledAvatar,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title text to display',
-    },
-    avatar: {
-      control: 'text',
-      description: 'URL of the avatar image',
-    },
-    avatarSize: {
-      control: 'text',
-      description: 'Size of the avatar in pixels',
-    },
-    titleSize: {
-      control: 'number',
-      description: 'Font size of the title in pixels',
-    },
-  },
-};
-
-const Template = (args) => <TitledAvatar {...args} />;
-
-export const Small = Template.bind({});
-Small.args = {
-  title: 'John Doe',
-  avatar: 'https://placehold.co/100',
-  avatarSize: "sm",
-  titleSize: 10,
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-  title: 'Jane Smith',
-  avatar: 'https://placehold.co/100',
-  avatarSize: "md",
-  titleSize: 20,
-};
-
-export const Linked = Template.bind({});
-Linked.args = {
-  title: 'Bob Johnson',
-  avatar: 'https://placehold.co/100',
-  avatarSize: 80,
-  titleSize: 18,
-  renderAvatarLink: <a href="/profile">Profile</a>,
-};

package/src/components/titled-avatar/index.style.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { Heading, Text } from '../typography';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-  }
-`;
-
-export const TitleContainer = styled.div`
-  height: 45px;
-  overflow: hidden;
-`;
-
-export const Title = styled(Heading)`
-  margin: 8px 8px 8px 0;
-  max-height: 45px;
-  overflow: hidden;
-`;
-
-export const SmallTitle = styled(Text)`
-  margin-right: 8px;
-  white-space: break-spaces;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;

package/src/components/titled-avatar/index.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import TitledAvatar from './index';
-import findByTestAtrr from '../utils/test';
-
-const setupShallow = (props = {}) => (
-  shallow(
-    <TitledAvatar
-      title={props.title}
-      avatar={props.avatar}
-      {...props}
-    />,
-  )
-);
-
-describe('TitledAvatar', () => {
-  it('should render correctly', () => {
-    const component = setupShallow({
-      title: 'تیم برگزاری جاده ابریشم',
-      avatar: 'https://static.evand.net/images/organizations/logos/original/246c931fa36fd3ae8d05f59c64cd74d0.jpg',
-    });
-    const TitledAvatar = findByTestAtrr(component, 'titled-avatar');
-    expect(TitledAvatar.length).toBe(1);
-  });
-});

package/src/components/typography/heading/index.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import theme from '../theme';
-import {
-  H1, H2, H3, H4, H5, H6,
-} from './index.styles';
-
-const { sizes } = theme;
-
-const Heading = ({
-  size = sizes.medium,
-  level = 1,
-  color = 'default',
-  children,
-  ...rest
-}) => {
-  const renderLevel = () => {
-    if (children === undefined) {
-      return null;
-    }
-    switch (level) {
-      case 6:
-        return (<H6 size={size} data-test="h6-tag" color={color} {...rest}>{children}</H6>);
-      case 5:
-        return (<H5 size={size} data-test="h5-tag" color={color} {...rest}>{children}</H5>);
-      case 4:
-        return (<H4 size={size} data-test="h4-tag" color={color} {...rest}>{children}</H4>);
-      case 3:
-        return (<H3 size={size} data-test="h3-tag" color={color} {...rest}>{children}</H3>);
-      case 2:
-        return (<H2 size={size} data-test="h2-tag" color={color} {...rest}>{children}</H2>);
-      case 1:
-      default:
-        return (<H1 size={size} data-test="h1-tag" color={color} {...rest}>{children}</H1>);
-    }
-  };
-
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      {renderLevel()}
-    </ThemeProvider>
-  );
-};
-
-Heading.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  size: PropTypes.oneOf([sizes.large, sizes.medium, sizes.small]),
-  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
-  color: PropTypes.oneOf(['red', 'green', 'blue', 'yellow', 'white', 'darkBlue', 'default']),
-};
-
-export default Heading;

package/src/components/typography/heading/index.stories.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import Heading from './index';
-
-export default {
-  title: 'Components/Typography/Heading',
-  component: Heading,
-  argTypes: {
-    level: {
-      control: 'select',
-      options: [1, 2, 3, 4, 5, 6],
-      description: 'Heading level (h1-h6)',
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Size of the heading',
-    },
-    color: {
-      control: 'color',
-      description: 'Color of the heading text',
-    },
-    children: {
-      control: 'text',
-      description: 'Heading content',
-    },
-  },
-};
-
-const Template = (args) => <Heading {...args} />;
-
-export const H1 = Template.bind({});
-H1.args = {
-  level: 1,
-  size: 'large',
-  color: '#000000',
-  children: 'Heading 1',
-};
-
-export const H2 = Template.bind({});
-H2.args = {
-  level: 2,
-  size: 'medium',
-  color: '#000000',
-  children: 'Heading 2',
-};
-
-export const H3 = Template.bind({});
-H3.args = {
-  level: 3,
-  size: 'medium',
-  color: '#000000',
-  children: 'Heading 3',
-};
-
-export const H4 = Template.bind({});
-H4.args = {
-  level: 4,
-  size: 'small',
-  color: '#000000',
-  children: 'Heading 4',
-};
-
-export const H5 = Template.bind({});
-H5.args = {
-  level: 5,
-  size: 'small',
-  color: '#000000',
-  children: 'Heading 5',
-};
-
-export const H6 = Template.bind({});
-H6.args = {
-  level: 6,
-  size: 'small',
-  color: '#000000',
-  children: 'Heading 6',
-};
-
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  level: 1,
-  size: 'large',
-  color: '#2196F3',
-  children: 'Blue Heading',
-};
-
-export const CustomSize = Template.bind({});
-CustomSize.args = {
-  level: 1,
-  size: 'small',
-  color: '#000000',
-  children: 'Small Heading',
-};

package/src/components/typography/heading/index.styles.js

@@ -1,69 +0,0 @@
-import styled from 'styled-components';
-import { getSizeOfHeading, getMarginOfHeading } from '../utils';
-import { getColorFromName } from '../../utils/theme';
-
-export const H1 = styled.h1`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 1)}
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 1)}px;`}
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 1) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;
-
-export const H2 = styled.h2`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 2)};
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 2)}`}px;
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 2) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;
-
-export const H3 = styled.h3`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 3)}
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 3)}px;`}
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 3) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;
-
-export const H4 = styled.h4`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 4)}
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 4)}px;`}
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 4) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;
-
-export const H5 = styled.h5`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 5)}
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 5)}px;`}
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 5) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;
-
-export const H6 = styled.h6`
-  font-family: 'IranSharp';
-  margin: ${({ theme, size }) => getMarginOfHeading(theme, size, 6)}
-  font-size: ${({ theme, size }) => `${getSizeOfHeading(theme, size, 6)}px;`}
-  line-height: ${({ theme, size }) => `
-    ${getSizeOfHeading(theme, size, 6) * theme.lineHeightRatio}px;
-  `}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  font-weight: bold;
-`;

package/src/components/typography/heading/index.test.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import 'jest-styled-components';
-
-
-import Heading from './index';
-import findByTestAtrr from '../../utils/test';
-import theme from '../theme';
-
-const setupShallow = (props = {}) => (
-  shallow(<Heading level={props.level} {...props}>{props.children}</Heading>)
-);
-
-const setupMount = (props = {}) => (
-  mount(<Heading level={props.level} {...props}>{props.children}</Heading>)
-);
-
-describe('Heading component', () => {
-  it('Should render large H1 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 1 });
-    const H1 = findByTestAtrr(component, 'h1-tag');
-    expect(H1.length).toBe(1);
-  });
-
-  it('Should render large H1 component without error', () => {
-    const H1 = setupMount({ children: 'تست', level: 1 });
-    expect(H1).toHaveStyleRule('font-size', `${theme.h1SizeMedium}px`);
-    expect(H1).toHaveStyleRule('line-height', `${theme.h1SizeMedium * theme.lineHeightRatio}px`);
-    expect(H1).toHaveStyleRule('color', theme.defaultColor);
-    H1.unmount();
-  });
-
-  it('Should render H2 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 2 });
-    const H2 = findByTestAtrr(component, 'h2-tag');
-    expect(H2.length).toBe(1);
-  });
-
-  it('Should render small H2 component without error', () => {
-    const H2 = setupMount({ children: 'تست', level: 2, size: 'sm' });
-    expect(H2).toHaveStyleRule('font-size', `${theme.h2SizeSmall}px`);
-    expect(H2).toHaveStyleRule('line-height', `${theme.h2SizeSmall * theme.lineHeightRatio}px`);
-    expect(H2).toHaveStyleRule('color', theme.defaultColor);
-    H2.unmount();
-  });
-
-  it('Should render H3 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 3 });
-    const H3 = findByTestAtrr(component, 'h3-tag');
-    expect(H3.length).toBe(1);
-  });
-
-  it('Should render large H3 component without error', () => {
-    const H3 = setupMount({ children: 'تست', level: 3, size: 'lg' });
-    expect(H3).toHaveStyleRule('font-size', `${theme.h3SizeLarge}px`);
-    expect(H3).toHaveStyleRule('line-height', `${theme.h3SizeLarge * theme.lineHeightRatio}px`);
-    expect(H3).toHaveStyleRule('color', theme.defaultColor);
-    H3.unmount();
-  });
-
-  it('Should render H4 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 4 });
-    const H4 = findByTestAtrr(component, 'h4-tag');
-    expect(H4.length).toBe(1);
-  });
-
-  it('Should render small H4 component without error', () => {
-    const H4 = setupMount({ children: 'تست', level: 4, size: 'sm' });
-    expect(H4).toHaveStyleRule('font-size', `${theme.h4SizeSmall}px`);
-    expect(H4).toHaveStyleRule('line-height', `${theme.h4SizeSmall * theme.lineHeightRatio}px`);
-    expect(H4).toHaveStyleRule('color', theme.defaultColor);
-    H4.unmount();
-  });
-
-  it('Should render H5 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 5 });
-    const H5 = findByTestAtrr(component, 'h5-tag');
-    expect(H5.length).toBe(1);
-  });
-
-  it('Should render small H5 component without error', () => {
-    const H5 = setupMount({ children: 'تست', level: 5, size: 'sm' });
-    expect(H5).toHaveStyleRule('font-size', `${theme.h5SizeSmall}px`);
-    expect(H5).toHaveStyleRule('line-height', `${theme.h5SizeSmall * theme.lineHeightRatio}px`);
-    expect(H5).toHaveStyleRule('color', theme.defaultColor);
-    H5.unmount();
-  });
-
-  it('Should render H6 component without error', () => {
-    const component = setupShallow({ children: 'تست', level: 6 });
-    const H6 = findByTestAtrr(component, 'h6-tag');
-    expect(H6.length).toBe(1);
-  });
-
-  it('Should render medium H6 component without error', () => {
-    const H6 = setupMount({ children: 'تست', level: 6, size: 'md' });
-    expect(H6).toHaveStyleRule('font-size', `${theme.h6SizeMedium}px`);
-    expect(H6).toHaveStyleRule('line-height', `${theme.h6SizeMedium * theme.lineHeightRatio}px`);
-    expect(H6).toHaveStyleRule('color', theme.defaultColor);
-    H6.unmount();
-  });
-
-
-  it('Should not render H1 when children prop is undefined', () => {
-    const component = setupShallow({ level: 1 });
-    const H1 = findByTestAtrr(component, 'h1-tag');
-    expect(H1.length).toBe(0);
-  });
-
-  it('Level prop should be between 1 and 5', () => {
-    const H1 = setupMount({ children: 'تست', level: 1 });
-    expect(H1.prop('level')).toBeGreaterThanOrEqual(1);
-    expect(H1.prop('level')).toBeLessThanOrEqual(5);
-    H1.unmount();
-  });
-
-  it('Should render H1 when level prop is undefined', () => {
-    const component = setupShallow({ children: 'تست' });
-    const H1 = findByTestAtrr(component, 'h1-tag');
-    expect(H1.length).toBe(1);
-  });
-});

package/src/components/typography/index.js

@@ -1,16 +0,0 @@
-import Heading from './heading';
-import Text from './text';
-import Paragraph from './paragraph';
-import Link from './link';
-
-export { default as Heading } from './heading';
-export { default as Text } from './text';
-export { default as Paragraph } from './paragraph';
-export { default as Link } from './link';
-
-export default {
-  Heading,
-  Text,
-  Paragraph,
-  Link,
-};

package/src/components/typography/index.styles.js

@@ -1 +0,0 @@
-