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

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import defaultTheme from '../theme';
-import Text from '../text';
-import ExternalLink from './index.styles';
-
-const generateLink = ({
-  href = '',
-  target = '_self',
-  size = 14,
-  strong = false,
-  emphasized = false,
-  linkContent,
-  children,
-  ...rest
-}) => {
-  if (typeof href === 'function') {
-    return href(
-      <Text
-        size={size}
-        strong={strong}
-        emphasized={emphasized}
-        color="blue"
-        {...rest}
-      >
-        {linkContent}
-      </Text>,
-    );
-  }
-  return (
-    <ExternalLink href={href} target={target} data-test="external" {...rest}>
-      <Text
-        size={size}
-        strong={strong}
-        emphasized={emphasized}
-        color="blue"
-      >
-        {children}
-      </Text>
-    </ExternalLink>
-  );
-};
-
-generateLink.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]),
-  href: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-  ]),
-  linkContent: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]),
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  size: PropTypes.number,
-  strong: PropTypes.bool,
-  emphasized: PropTypes.bool,
-};
-
-const Link = (props) => {
-  const { children, linkContent } = props;
-  if (children === undefined && linkContent === undefined) return null;
-  return (
-    <ThemeProvider theme={defaultTheme}>
-      <GlobalStyle />
-      {generateLink(props)}
-    </ThemeProvider>
-  );
-};
-
-Link.propTypes = generateLink.propTypes;
-
-Link.defaultProps = generateLink.defaultProps;
-
-export default Link;

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import Link from './index';
-
-export default {
-  title: 'Components/Typography/Link',
-  component: Link,
-  argTypes: {
-    href: {
-      control: 'text',
-      description: 'The URL or render function for the link',
-    },
-    size: {
-      control: 'number',
-      description: 'The font size of the link',
-    },
-    strong: {
-      control: 'boolean',
-      description: 'Whether the link text should be bold',
-    },
-    emphasized: {
-      control: 'boolean',
-      description: 'Whether the link text should be emphasized',
-    },
-    linkContent: {
-      control: 'text',
-      description: 'The content of the link when using renderProps',
-    },
-    children: {
-      control: 'text',
-      description: 'The content of the link',
-    },
-  },
-};
-
-const Template = (args) => <Link {...args} />;
-
-export const Simple = Template.bind({});
-Simple.args = {
-  href: 'http://www.google.com',
-  children: 'ورود به سایت گوگل',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  href: 'http://www.google.com',
-  size: 12,
-  children: 'لینک با سایز کوچکتر',
-};
-
-export const Bold = Template.bind({});
-Bold.args = {
-  href: 'http://www.google.com',
-  size: 12,
-  strong: true,
-  children: 'لینک با متن بولد',
-};
-
-export const Emphasized = Template.bind({});
-Emphasized.args = {
-  href: 'http://www.google.com',
-  size: 12,
-  emphasized: true,
-  children: 'لینک با متن کچ',
-};
-
-export const WithRenderProps = Template.bind({});
-WithRenderProps.args = {
-  href: (el) => <a href="http://yahoo.com">{el}</a>,
-  linkContent: 'لینک با رندر پراپس',
-};

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

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-const ExternalLink = styled.a`
-  text-decoration: none;
-  color: ${({ theme }) => theme.colors.blue600};
-`;
-
-export default ExternalLink;

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import 'jest-styled-components';
-
-import Link from './index';
-import findByTestAtrr from '../../utils/test';
-
-const setupShallow = (props = {}) => (
-  shallow(
-    <Link
-      external={props.external}
-      target={props.target}
-      size={props.size}
-      strong={props.strong}
-      emphasized={props.emphasized}
-      {...props}
-    >
-      {props.children}
-    </Link>,
-  )
-);
-
-describe('Link component', () => {
-  it('Should not render any thing', () => {
-    const component = setupShallow({
-      children: 'لینک داخلی',
-    });
-    const Link = findByTestAtrr(component, 'internal-link');
-    expect(Link.length).toBe(0);
-  });
-
-  it('Should render an internal Link', () => {
-    const component = setupShallow({
-      children: 'لینک داخلی',
-      to: 'http://google.com',
-    });
-    const Link = findByTestAtrr(component, 'internal-link');
-    expect(Link.length).toBe(1);
-  });
-
-  it('Should render an internal Link when external prop false', () => {
-    const component = setupShallow({
-      children: 'لینک داخلی',
-      to: 'http://google.com',
-      external: false,
-    });
-    const Link = findByTestAtrr(component, 'internal-link');
-    expect(Link.length).toBe(1);
-  });
-
-  it('Should render an internal Link when external prop is true', () => {
-    const component = setupShallow({
-      children: 'لینک خارجی',
-      to: 'http://google.com',
-      external: true,
-    });
-    const Link = findByTestAtrr(component, 'external-link');
-    expect(Link.length).toBe(1);
-  });
-});

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

@@ -1,37 +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 Content from './index.styles';
-
-const Paragraph = ({
-  size = theme.defaultSize,
-  color = 'riverBedDark',
-  bold = false,
-  children,
-  ...rest
-}) => {
-  if (children === undefined) return null;
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <Content size={size} color={color} bold={bold} data-test="paragraph" {...rest}>
-        {children}
-      </Content>
-    </ThemeProvider>
-  );
-};
-
-Paragraph.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  size: PropTypes.number,
-  color: PropTypes.oneOf(['riverBedDark', 'riverBed']),
-  bold: PropTypes.bool,
-};
-
-export default Paragraph;

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

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import Paragraph from './index';
-
-export default {
-  title: 'Paragraph',
-  component: Paragraph,
-  
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['riverBedDark', 'riverBed'],
-      defaultValue: 'riverBedDark',
-    },
-    bold: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    size: {
-      control: 'text',
-      defaultValue: '13',
-    },
-    children: {
-      control: 'text',
-      defaultValue: 'طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی',
-    },
-  },
-};
-
-const Template = (args) => <Paragraph {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  color: 'riverBedDark',
-  bold: false,
-  size: '13',
-  children: 'طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی',
-};
-
-export const Bold = Template.bind({});
-Bold.args = {
-  ...Default.args,
-  bold: true,
-};
-
-export const CustomSize = Template.bind({});
-CustomSize.args = {
-  ...Default.args,
-  size: '16',
-};
-
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  ...Default.args,
-  color: 'riverBed',
-};

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const Content = styled.p`
-  margin: 8px 0;
-  font-family: 'IranSharp';
-  font-size: ${({ size }) => `${size}px`};
-  line-height: ${({ theme, size }) => `${size * theme.lineHeightRatio}px`};
-  color: ${({ theme, color }) => theme.colors[color]};
-  font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
-`;
-
-export default Content;

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import 'jest-styled-components';
-
-import Paragraph from './index';
-import findByTestAtrr from '../../utils/test';
-import theme from '../theme';
-
-const setupShallow = (props = {}) => (
-  shallow(<Paragraph size={props.size} {...props}>{props.children}</Paragraph>)
-);
-
-const setupMount = (props = {}) => (
-  mount(<Paragraph size={props.size} {...props}>{props.children}</Paragraph>)
-);
-
-describe('Paragraph component', () => {
-  it('Should render Paragraph', () => {
-    const component = setupShallow({
-      children: 'این یک متن بلند برای پاراگراف است',
-    });
-    const Paragraph = findByTestAtrr(component, 'paragraph');
-    expect(Paragraph.length).toBe(1);
-  });
-
-  it('Should not render Paragraph', () => {
-    const component = setupShallow();
-    const Paragraph = findByTestAtrr(component, 'paragraph');
-    expect(Paragraph.length).toBe(0);
-  });
-
-  it('Should render Paragraph with font-size 14 and proper line-height', () => {
-    const Paragraph = setupMount({
-      children: 'این یک متن بلند برای پاراگراف است',
-    });
-    expect(Paragraph).toHaveStyleRule('font-size', `${theme.defaultSize}px`);
-    expect(Paragraph).toHaveStyleRule('line-height', `${theme.defaultSize * theme.lineHeightRatio}px`);
-  });
-
-  it('Should render Paragraph with font-size 15', () => {
-    const Paragraph = setupMount({
-      children: 'این یک متن بلند برای پاراگراف است',
-      size: 15,
-    });
-    expect(Paragraph).toHaveStyleRule('font-size', '15px');
-  });
-});

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

@@ -1,156 +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 {
-  String, Strong, Emphasized, SubScript, SupScript,
-} from './index.styles';
-
-const renderString = ({
-  size = theme.defaultSize,
-  color = 'default',
-  underline = false,
-  lineThrough = false,
-  strong = false,
-  bold = false,
-  fontWight = 400,
-  emphasized = false,
-  subScript = false,
-  supScript = false,
-  marked = false,
-  label = false,
-  isDisplayBlock = false,
-  isCutWithEllipsis = false,
-  children,
-  ...rest
-}) => {
-  if (children === undefined) return null;
-
-  let typeOfText;
-  if (strong) typeOfText = 'strong';
-  else if (emphasized) typeOfText = 'emphasized';
-  else if (subScript) typeOfText = 'subScript';
-  else if (supScript) typeOfText = 'supScript';
-  else typeOfText = 'span';
-
-  switch (typeOfText) {
-    case 'strong':
-      return (
-        <Strong
-          size={size}
-          color={color}
-          underline={underline && !lineThrough}
-          lineThrough={lineThrough && !underline}
-          emphasized={emphasized}
-          marked={marked && !label}
-          isLabel={label && !marked}
-          data-test="strong"
-          {...rest}
-        >
-          {children}
-        </Strong>
-      );
-    case 'emphasized':
-      return (
-        <Emphasized
-          size={size}
-          color={color}
-          underline={underline && !lineThrough}
-          lineThrough={lineThrough && !underline}
-          bold={bold}
-          marked={marked && !label}
-          isLabel={label && !marked}
-          data-test="emphasized"
-          {...rest}
-        >
-          {children}
-        </Emphasized>
-      );
-    case 'subScript':
-      return (
-        <SubScript color={color} data-test="subScript" {...rest}>
-          {children}
-        </SubScript>
-      );
-    case 'supScript':
-      return (
-        <SupScript color={color} data-test="supScript" {...rest}>
-          {children}
-        </SupScript>
-      );
-    case 'span':
-    default:
-      return (
-        <String
-          spanSize={size}
-          spanColor={color}
-          underline={underline && !lineThrough}
-          lineThrough={lineThrough && !underline}
-          marked={marked && !label}
-          isLabel={label && !marked}
-          bold={bold}
-          fontWight={fontWight}
-          data-test="span"
-          isDisplayBlock={isDisplayBlock}
-          isCutWithEllipsis={isCutWithEllipsis}
-          {...rest}
-        >
-          {children}
-        </String>
-      );
-  }
-};
-
-renderString.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  size: PropTypes.number,
-  color: PropTypes.oneOf(['red', 'green', 'blue', 'yellow', 'white', 'darkBlue', 'black']),
-  underline: PropTypes.bool,
-  lineThrough: PropTypes.bool,
-  strong: PropTypes.bool,
-  bold: PropTypes.bool,
-  emphasized: PropTypes.bool,
-  subScript: PropTypes.bool,
-  supScript: PropTypes.bool,
-  marked: PropTypes.bool,
-  label: PropTypes.bool,
-  isDisplayBlock: PropTypes.bool,
-  isCutWithEllipsis: PropTypes.bool,
-};
-
-const Text = (props) => (
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    {renderString(props)}
-  </ThemeProvider>
-);
-
-Text.prototype = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  size: PropTypes.number,
-  color: PropTypes.oneOf(['red', 'green', 'blue', 'yellow', 'white', 'darkBlue']),
-  underline: PropTypes.bool,
-  lineThrough: PropTypes.bool,
-  strong: PropTypes.bool,
-  bold: PropTypes.bool,
-  emphasized: PropTypes.bool,
-  subScript: PropTypes.bool,
-  supScript: PropTypes.bool,
-  marked: PropTypes.bool,
-  label: PropTypes.bool,
-  isDisplayBlock: PropTypes.bool,
-  isCutWithEllipsis: PropTypes.bool,
-};
-
-Text.defaultProps = renderString.defaultProps;
-
-export default Text;