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

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

@@ -1,196 +0,0 @@
-import React from 'react';
-import Text from './index';
-
-export default {
-  title: 'Components/Typography/Text',
-  component: Text,
-  argTypes: {
-    color: {
-      control: 'color',
-      description: 'Color of the text',
-    },
-    size: {
-      control: 'number',
-      description: 'Size of the text in pixels',
-    },
-    underline: {
-      control: 'boolean',
-      description: 'Whether the text should be underlined',
-    },
-    bold: {
-      control: 'boolean',
-      description: 'Whether the text should be bold',
-    },
-    lineThrough: {
-      control: 'boolean',
-      description: 'Whether the text should have a line through it'
-    },
-    strong: {
-      control: 'boolean',
-      description: 'Whether the text should be strong'
-    },
-    emphasized: {
-      control: 'boolean',
-      description: 'Whether the text should be emphasized'
-    },
-    subScript: {
-      control: 'boolean',
-      description: 'Whether the text should be subscript'
-    },
-    supScript: {
-      control: 'boolean',
-      description: 'Whether the text should be superscript'
-    },
-    label: {
-      control: 'boolean',
-      description: 'Whether the text should be styled as a label'
-    },
-    marked: {
-      control: 'boolean',
-      description: 'Whether the text should be marked'
-    },
-    children: {
-      control: 'text',
-      description: 'Text content',
-    },
-    italic: {
-      control: 'boolean',
-      description: 'Whether the text should be italic',
-    },
-    strikethrough: {
-      control: 'boolean',
-      description: 'Whether the text should have a strikethrough',
-    },
-    align: {
-      control: 'select',
-      options: ['left', 'center', 'right', 'justify'],
-      description: 'Text alignment',
-    },
-    transform: {
-      control: 'select',
-      options: ['none', 'capitalize', 'uppercase', 'lowercase'],
-      description: 'Text transformation',
-    },
-    lineHeight: {
-      control: 'number',
-      description: 'Line height of the text',
-    },
-    letterSpacing: {
-      control: 'number',
-      description: 'Letter spacing of the text',
-    },
-    textOverflow: {
-      control: 'select',
-      options: ['clip', 'ellipsis'],
-      description: 'How to handle overflowing text',
-    },
-    whiteSpace: {
-      control: 'select',
-      options: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'],
-      description: 'How to handle white space',
-    }
-  }
-};
-
-const Template = (args) => <Text {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: 'This is default text',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 12,
-  children: 'This is small text',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 24,
-  children: 'This is large text',
-};
-
-export const Colored = Template.bind({});
-Colored.args = {
-  color: '#2196F3',
-  children: 'This text is blue',
-};
-
-export const Bold = Template.bind({});
-Bold.args = {
-  bold: true,
-  children: 'This text is bold',
-};
-
-export const Italic = Template.bind({});
-Italic.args = {
-  italic: true,
-  children: 'This text is italic',
-};
-
-export const Underlined = Template.bind({});
-Underlined.args = {
-  underline: true,
-  children: 'This text is underlined',
-};
-
-export const Strikethrough = Template.bind({});
-Strikethrough.args = {
-  strikethrough: true,
-  children: 'This text has a strikethrough',
-};
-
-export const AlignedCenter = Template.bind({});
-AlignedCenter.args = {
-  align: 'center',
-  children: 'This text is centered',
-};
-
-export const Uppercase = Template.bind({});
-Uppercase.args = {
-  transform: 'uppercase',
-  children: 'This text is uppercase',
-};
-
-export const CustomLineHeight = Template.bind({});
-CustomLineHeight.args = {
-  lineHeight: 1.8,
-  children: 'This text has custom line height',
-};
-
-export const CustomLetterSpacing = Template.bind({});
-CustomLetterSpacing.args = {
-  letterSpacing: 2,
-  children: 'This text has custom letter spacing',
-};
-
-export const Ellipsis = Template.bind({});
-Ellipsis.args = {
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  style: { width: '150px', border: '1px solid #ccc' },
-  children: 'This text will overflow and show ellipsis',
-};
-
-export const Nowrap = Template.bind({});
-Nowrap.args = {
-  whiteSpace: 'nowrap',
-  children: 'This text will not wrap',
-};
-
-export const PreWrap = Template.bind({});
-PreWrap.args = {
-  whiteSpace: 'pre-wrap',
-  children: 'This text preserves     white space and wraps',
-};
-
-export const CombinedStyles = Template.bind({});
-CombinedStyles.args = {
-  size: 18,
-  color: '#FF5722',
-  bold: true,
-  italic: true,
-  align: 'right',
-  children: 'Combined styles example',
-};

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

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-import { getColorFromName } from '../../utils/theme';
-
-export const Emphasized = styled.em`
-  font-family: 'IranSharp';
-  font-size: ${({ size }) => (`${size}px`)};
-  ${({ underline }) => (underline ? 'text-decoration: underline;' : '')}
-  ${({ lineThrough }) => (lineThrough ? 'text-decoration: line-through;' : '')}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  ${({ bold }) => (bold ? 'font-weight: bold;' : '')}
-  ${({ theme, marked }) => (marked ? `background-color: ${theme.colors.blue200};` : '')}
-  ${({ theme, isLabel }) => (isLabel
-    ? `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;`
-    : ''
-  )}
-`;
-
-export const Strong = styled.strong`
-  font-family: 'IranSharp';
-  font-size: ${({ size }) => (`${size}px`)};
-  font-weight: bold;
-  ${({ underline }) => (underline ? 'text-decoration: underline;' : '')}
-  ${({ lineThrough }) => (lineThrough ? 'text-decoration: line-through;' : '')}
-  ${({ emphasized }) => (emphasized ? 'font-style: italic;' : '')}
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  ${({ theme, marked }) => (marked ? `background-color: ${theme.colors.blue200};` : '')}
-  ${({ theme, isLabel }) => (isLabel
-    ? `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;`
-    : ''
-  )}
-`;
-
-export const String = styled.span`
-  font-family: 'IranSharp';
-  font-size: ${({ spanSize }) => (`${spanSize}px`)};
-  ${({ underline }) => (underline ? 'text-decoration: underline;' : '')}
-  ${({ lineThrough }) => (lineThrough ? 'text-decoration: line-through;' : '')}
-  color: ${({ theme, spanColor }) => getColorFromName(theme, spanColor)};
-  font-weight: ${({ bold, fontWeight }) => (bold ? 'bold' : fontWeight)};
-  ${({ theme, marked }) => (marked ? `background-color: ${theme.colors.blue200};` : '')}
-  ${({ theme, isLabel }) => (isLabel
-    ? `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;`
-    : ''
-  )}
-  ${({ isDisplayBlock }) => (isDisplayBlock ? 'display: block;' : '')}
-  ${({ isCutWithEllipsis }) => {
-    if (isCutWithEllipsis) {
-      return `
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: block;
-        `;
-    }
-    return '';
-  }}
-  ${({ textAlign }) => (textAlign
-    ? `text-align: ${textAlign}`
-    : ''
-  )}
-`;
-
-export const SubScript = styled.sub`
-  font-family: 'IranSharp';
-  font-size: 8px;
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-`;
-
-export const SupScript = styled.sup`
-  font-family: 'IranSharp';
-  font-size: 8px;
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-`;

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

@@ -1,333 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import 'jest-styled-components';
-
-import Text from './index';
-import findByTestAtrr from '../../utils/test';
-import theme from '../theme';
-
-const setupShallow = (props = {}) => (
-  shallow(
-    <Text
-      size={props.size}
-      color={props.color}
-      underline={props.underline}
-      lineThrough={props.lineThrough}
-      strong={props.strong}
-      emphasized={props.emphasized}
-      subScript={props.subScript}
-      supScript={props.supScript}
-      marked={props.marked}
-      label={props.label}
-      {...props}
-    >
-      {props.children}
-    </Text>,
-  )
-);
-
-const setupMount = (props = {}) => (
-  mount(
-    <Text
-      size={props.size}
-      color={props.color}
-      underline={props.underline}
-      lineThrough={props.lineThrough}
-      strong={props.strong}
-      emphasized={props.emphasized}
-      subScript={props.subScript}
-      supScript={props.supScript}
-      marked={props.marked}
-      label={props.label}
-      {...props}
-    >
-      {props.children}
-    </Text>,
-  )
-);
-
-describe('Text component', () => {
-  it('Should not render anything', () => {
-    const component = setupShallow({});
-    const Text = findByTestAtrr(component, 'span');
-    expect(Text.length).toBe(0);
-  });
-
-  it('Should render simple Text with span tag', () => {
-    const component = setupShallow({
-      children: 'تکست ساده',
-    });
-    const Text = findByTestAtrr(component, 'span');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with strong tag', () => {
-    const component = setupShallow({
-      children: 'تکست استرانگ',
-      strong: true,
-    });
-    const Text = findByTestAtrr(component, 'strong');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with em tag', () => {
-    const component = setupShallow({
-      children: 'تکست کج',
-      emphasized: true,
-    });
-    const Text = findByTestAtrr(component, 'emphasized');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with strong tag', () => {
-    const component = setupShallow({
-      children: 'تکست استرانگ',
-      strong: true,
-      emphasized: true,
-      subScript: true,
-      supScript: true,
-    });
-    const Text = findByTestAtrr(component, 'strong');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with strong tag', () => {
-    const component = setupShallow({
-      children: 'تکست استرانگ',
-      strong: true,
-      emphasized: true,
-      subScript: true,
-      supScript: true,
-    });
-    const Text = findByTestAtrr(component, 'strong');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render subScript text', () => {
-    const component = setupShallow({
-      children: 'تکست پایین‌نویس',
-      subScript: true,
-    });
-    const Text = findByTestAtrr(component, 'subScript');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render supScript text', () => {
-    const component = setupShallow({
-      children: 'تکست بالا‌نویس',
-      supScript: true,
-    });
-    const Text = findByTestAtrr(component, 'supScript');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render subScript text when both subScript and supScript prop is true', () => {
-    const component = setupShallow({
-      children: 'تکست پایین‌نویس',
-      subScript: true,
-      supScript: true,
-    });
-    const TextSub = findByTestAtrr(component, 'subScript');
-    const TextSup = findByTestAtrr(component, 'supScript');
-    expect(TextSub.length).toBe(1);
-    expect(TextSup.length).toBe(0);
-  });
-
-  it('Should render a strong text with default color and lineThrough', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      strong: true,
-      lineThrough: true,
-    });
-    expect(Text).toHaveStyleRule('color', theme.defaultColor);
-    expect(Text).toHaveStyleRule('text-decoration', 'line-through');
-    Text.unmount();
-  });
-
-  it('Should render a strong text with red color and underline', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      strong: true,
-      underline: true,
-    });
-    expect(Text).toHaveStyleRule('text-decoration', 'underline');
-    Text.unmount();
-  });
-
-  it('Should render a strong text as label', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      strong: true,
-      label: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.gray400);
-    expect(Text).toHaveStyleRule('padding', '2px 8px');
-    expect(Text).toHaveStyleRule('border-radius', '2px');
-    Text.unmount();
-  });
-
-  it('Should render a strong text as marked', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      strong: true,
-      marked: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.blue200);
-    Text.unmount();
-  });
-
-  it('Should render a emphasized text with underline', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      emphasized: true,
-      underline: true,
-    });
-    expect(Text).toHaveStyleRule('color', theme.defaultColor);
-    expect(Text).toHaveStyleRule('text-decoration', 'underline');
-    Text.unmount();
-  });
-
-  it('Should render a emphasized text with lineThrough', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      emphasized: true,
-      lineThrough: true,
-    });
-    expect(Text).toHaveStyleRule('color', theme.defaultColor);
-    expect(Text).toHaveStyleRule('text-decoration', 'line-through');
-    Text.unmount();
-  });
-
-  it('Should render a emphasized text with bold weight', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-      emphasized: true,
-      strong: true,
-    });
-    expect(Text).toHaveStyleRule('color', theme.defaultColor);
-    expect(Text).toHaveStyleRule('font-style', 'italic');
-    Text.unmount();
-  });
-
-  it('Should render text with default size and color', () => {
-    const Text = setupMount({
-      children: 'تکست ساده',
-    });
-    expect(Text).toHaveStyleRule('font-size', `${theme.defaultSize}px`);
-    expect(Text).toHaveStyleRule('color', theme.defaultColor);
-    Text.unmount();
-  });
-
-  it('Should render simple Text with underline', () => {
-    const Text = setupMount({
-      children: 'تکست زیر خط دار',
-      underline: true,
-    });
-    expect(Text).toHaveStyleRule('text-decoration', 'underline');
-    Text.unmount();
-  });
-
-  it('Should render simple Text with line-through', () => {
-    const Text = setupMount({
-      children: 'تکست رو خط دار',
-      lineThrough: true,
-    });
-    expect(Text).toHaveStyleRule('text-decoration', 'line-through');
-    Text.unmount();
-  });
-
-  it('Should render simple Text without any text-decoration style', () => {
-    const Text = setupMount({
-      children: 'تکست غیر معقول',
-      lineThrough: true,
-      underline: true,
-    });
-    expect(Text).not.toHaveStyleRule('text-decoration');
-    Text.unmount();
-  });
-
-  it('Should render emphasized Text without any text-decoration style', () => {
-    const Text = setupMount({
-      children: 'تکست غیر معقول',
-      emphasized: true,
-      lineThrough: true,
-      underline: true,
-    });
-    expect(Text).not.toHaveStyleRule('text-decoration');
-    Text.unmount();
-  });
-
-  it('Should render emphasized Text as label', () => {
-    const Text = setupMount({
-      children: 'تکست لیبل کج',
-      emphasized: true,
-      label: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.gray400);
-    expect(Text).toHaveStyleRule('border-radius', '2px');
-    expect(Text).toHaveStyleRule('padding', '2px 8px');
-    Text.unmount();
-  });
-
-  it('Should render emphasized Text as marked', () => {
-    const Text = setupMount({
-      children: 'تکست مارک شده کج',
-      emphasized: true,
-      marked: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.blue200);
-    Text.unmount();
-  });
-
-  it('Should render simple marked text', () => {
-    const Text = setupMount({
-      children: 'مارک',
-      marked: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.blue200);
-    Text.unmount();
-  });
-
-  it('Should render simple label text', () => {
-    const Text = setupMount({
-      children: 'لیبیل',
-      label: true,
-    });
-    expect(Text).toHaveStyleRule('background-color', theme.colors.gray400);
-    expect(Text).toHaveStyleRule('border-radius', '2px');
-    expect(Text).toHaveStyleRule('padding', '2px 8px');
-    Text.unmount();
-  });
-
-  it('Should render simple text when label and marked props are both true', () => {
-    const Text = setupMount({
-      children: 'لیبیل',
-      label: true,
-      marked: true,
-    });
-    expect(Text).not.toHaveStyleRule('background-color');
-    expect(Text).not.toHaveStyleRule('border-radius');
-    expect(Text).not.toHaveStyleRule('padding');
-    Text.unmount();
-  });
-
-  it('Should render blue supScript text', () => {
-    const Text = setupMount({
-      children: 'تکست بالا‌نویس',
-      supScript: true,
-      color: 'blue',
-    });
-    expect(Text).toHaveStyleRule('color', theme.colors.blue600);
-    Text.unmount();
-  });
-
-  it('Should render blue subScript text', () => {
-    const Text = setupMount({
-      children: 'تکست پایین نویس',
-      subScript: true,
-      color: 'blue',
-    });
-    expect(Text).toHaveStyleRule('color', theme.colors.blue600);
-    Text.unmount();
-  });
-});

package/src/components/typography/theme.js

@@ -1,66 +0,0 @@
-import defaultTheme from '../themes';
-
-const typographyTheme = {
-  defaultSize: 13,
-  defaultColor: defaultTheme.colors.riverBedDark,
-  h1SizeLarge: 30,
-  h1SizeLargeMarginTop: 24,
-  h1SizeLargeMarginBottom: 18,
-  h1SizeMedium: 24,
-  h1SizeMediumMarginTop: 18,
-  h1SizeMediumMarginBottom: 12,
-  h1SizeSmall: 18,
-  h1SizeSmallMarginTop: 12,
-  h1SizeSmallMarginBottom: 8,
-  h2SizeLarge: 24,
-  h2SizeLargeMarginTop: 18,
-  h2SizeLargeMarginBottom: 14,
-  h2SizeMedium: 20,
-  h2SizeMediumMarginTop: 14,
-  h2SizeMediumMarginBottom: 10,
-  h2SizeSmall: 16,
-  h2SizeSmallMarginTop: 10,
-  h2SizeSmallMarginBottom: 8,
-  h3SizeLarge: 20,
-  h3SizeLargeMarginTop: 16,
-  h3SizeLargeMarginBottom: 12,
-  h3SizeMedium: 18,
-  h3SizeMediumMarginTop: 14,
-  h3SizeMediumMarginBottom: 10,
-  h3SizeSmall: 14,
-  h3SizeSmallMarginTop: 12,
-  h3SizeSmallMarginBottom: 8,
-  h4SizeLarge: 16,
-  h4SizeLargeMarginTop: 16,
-  h4SizeLargeMarginBottom: 12,
-  h4SizeMedium: 14,
-  h4SizeMediumMarginTop: 14,
-  h4SizeMediumMarginBottom: 10,
-  h4SizeSmall: 12,
-  h4SizeSmallMarginTop: 10,
-  h4SizeSmallMarginBottom: 8,
-  h5SizeLarge: 14,
-  h5SizeLargeMarginTop: 14,
-  h5SizeLargeMarginBottom: 12,
-  h5SizeMedium: 12,
-  h5SizeMediumMarginTop: 12,
-  h5SizeMediumMarginBottom: 10,
-  h5SizeSmall: 10,
-  h5SizeSmallMarginTop: 10,
-  h5SizeSmallMarginBottom: 8,
-  h6SizeLarge: 12,
-  h6SizeLargeMarginTop: 12,
-  h6SizeLargeMarginBottom: 12,
-  h6SizeMedium: 10,
-  h6SizeMediumMarginTop: 10,
-  h6SizeMediumMarginBottom: 10,
-  h6SizeSmall: 10,
-  h6SizeSmallMarginTop: 10,
-  h6SizeSmallMarginBottom: 10,
-  lineHeightRatio: 1.75,
-  headingLineHeightRatio: 1.68,
-  sizes: defaultTheme.sizes,
-  colors: defaultTheme.colors,
-};
-
-export default typographyTheme;