react-jupiter 5.12.0 → 6.0.0-beta.2

package/src/components/tabs/tabs.js

@@ -0,0 +1,71 @@
+import React, { type Node, useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import GlobalStyle from '../globalStyle';
+import { Text } from '../typography';
+import { TabHeader, StyledButton } from './index.style';
+import theme from './theme';
+
+type Props = {
+  children: * => Node,
+  defaultTab?: string,
+  onChange?: () => void,
+};
+
+function Tabs({
+  defaultTab = '',
+  onChange = () => {},
+  children,
+}: Props) {
+  const tabPanels = React.Children.toArray(children);
+  const [activeTabKey, setActiveTabKey] = useState(defaultTab || tabPanels[0].props.tabKey);
+  const selectedTabPanel = tabPanels.find((item) => item.props.tabKey === activeTabKey);
+
+  useEffect(() => {
+    onChange(activeTabKey);
+  }, [activeTabKey, onChange]);
+
+  function handleClick(e) {
+    let selectedTabKey;
+    if (e.target.tagName !== 'BUTTON') {
+      selectedTabKey = e.target.parentElement.attributes['data-access'].value;
+    } else {
+      selectedTabKey = e.target.attributes['data-access'].value;
+    }
+
+    if (selectedTabKey !== activeTabKey) {
+      setActiveTabKey(selectedTabKey);
+    }
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <div data-test="tabs-container">
+        <TabHeader>
+          {tabPanels.map((tabPanelData) => {
+            const { props: { label, tabKey } } = tabPanelData;
+
+            return (
+              <StyledButton
+                data-access={tabKey}
+                className={`${activeTabKey === tabKey ? 'active' : ''}`}
+                key={tabKey}
+                data-test="tab-label"
+                type="button"
+                onClick={handleClick}
+              >
+                <Text isCutWithEllipsis size={12}>
+                  {label || '-'}
+                </Text>
+              </StyledButton>
+            );
+          })}
+        </TabHeader>
+
+        {React.cloneElement(selectedTabPanel)}
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default Tabs;

package/src/components/tabs/theme.js

@@ -0,0 +1,10 @@
+import defaultTheme from '../themes';
+
+const theme = {
+  defaultColor: defaultTheme.colors.blue400,
+  secoundColor: defaultTheme.colors.blue600,
+  borderRadius: defaultTheme.borderRadius.high,
+  transition: `all ${defaultTheme.animation.time}s ${defaultTheme.animation.method}`,
+};
+
+export default theme;

package/src/components/themes.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,122 @@
+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);
+  });
+});