react-jupiter 5.12.0 → 6.0.0-beta.2

package/src/components/typography/index.js

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

@@ -0,0 +1 @@
+

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

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

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

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

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

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

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

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

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

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