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

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

@@ -1,196 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.Uppercase = exports.Underlined = exports.Strikethrough = exports.Small = exports.PreWrap = exports.Nowrap = exports.Large = exports.Italic = exports.Ellipsis = exports.Default = exports.CustomLineHeight = exports.CustomLetterSpacing = exports.CombinedStyles = exports.Colored = exports.Bold = exports.AlignedCenter = void 0;var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
-
-{
-  title: 'Components/Typography/Text',
-  component: _index.default,
-  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) => /*#__PURE__*/_react.default.createElement(_index.default, args);
-
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  children: 'This is default text'
-};
-
-const Small = exports.Small = Template.bind({});
-Small.args = {
-  size: 12,
-  children: 'This is small text'
-};
-
-const Large = exports.Large = Template.bind({});
-Large.args = {
-  size: 24,
-  children: 'This is large text'
-};
-
-const Colored = exports.Colored = Template.bind({});
-Colored.args = {
-  color: '#2196F3',
-  children: 'This text is blue'
-};
-
-const Bold = exports.Bold = Template.bind({});
-Bold.args = {
-  bold: true,
-  children: 'This text is bold'
-};
-
-const Italic = exports.Italic = Template.bind({});
-Italic.args = {
-  italic: true,
-  children: 'This text is italic'
-};
-
-const Underlined = exports.Underlined = Template.bind({});
-Underlined.args = {
-  underline: true,
-  children: 'This text is underlined'
-};
-
-const Strikethrough = exports.Strikethrough = Template.bind({});
-Strikethrough.args = {
-  strikethrough: true,
-  children: 'This text has a strikethrough'
-};
-
-const AlignedCenter = exports.AlignedCenter = Template.bind({});
-AlignedCenter.args = {
-  align: 'center',
-  children: 'This text is centered'
-};
-
-const Uppercase = exports.Uppercase = Template.bind({});
-Uppercase.args = {
-  transform: 'uppercase',
-  children: 'This text is uppercase'
-};
-
-const CustomLineHeight = exports.CustomLineHeight = Template.bind({});
-CustomLineHeight.args = {
-  lineHeight: 1.8,
-  children: 'This text has custom line height'
-};
-
-const CustomLetterSpacing = exports.CustomLetterSpacing = Template.bind({});
-CustomLetterSpacing.args = {
-  letterSpacing: 2,
-  children: 'This text has custom letter spacing'
-};
-
-const Ellipsis = exports.Ellipsis = Template.bind({});
-Ellipsis.args = {
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  style: { width: '150px', border: '1px solid #ccc' },
-  children: 'This text will overflow and show ellipsis'
-};
-
-const Nowrap = exports.Nowrap = Template.bind({});
-Nowrap.args = {
-  whiteSpace: 'nowrap',
-  children: 'This text will not wrap'
-};
-
-const PreWrap = exports.PreWrap = Template.bind({});
-PreWrap.args = {
-  whiteSpace: 'pre-wrap',
-  children: 'This text preserves     white space and wraps'
-};
-
-const CombinedStyles = exports.CombinedStyles = Template.bind({});
-CombinedStyles.args = {
-  size: 18,
-  color: '#FF5722',
-  bold: true,
-  italic: true,
-  align: 'right',
-  children: 'Combined styles example'
-};

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

@@ -1,73 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.SupScript = exports.SubScript = exports.Strong = exports.String = exports.Emphasized = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = require("../../utils/theme");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
-
-const Emphasized = exports.Emphasized = _styledComponents.default.em`
-  font-family: 'IranSharp';
-  font-size: ${(_ref) => {let { size } = _ref;return `${size}px`;}};
-  ${(_ref2) => {let { underline } = _ref2;return underline ? 'text-decoration: underline;' : '';}}
-  ${(_ref3) => {let { lineThrough } = _ref3;return lineThrough ? 'text-decoration: line-through;' : '';}}
-  color: ${(_ref4) => {let { theme, color } = _ref4;return (0, _theme.getColorFromName)(theme, color);}};
-  ${(_ref5) => {let { bold } = _ref5;return bold ? 'font-weight: bold;' : '';}}
-  ${(_ref6) => {let { theme, marked } = _ref6;return marked ? `background-color: ${theme.colors.blue200};` : '';}}
-  ${(_ref7) => {let { theme, isLabel } = _ref7;return isLabel ?
-  `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;` :
-  '';}}
-`;
-
-
-const Strong = exports.Strong = _styledComponents.default.strong`
-  font-family: 'IranSharp';
-  font-size: ${(_ref8) => {let { size } = _ref8;return `${size}px`;}};
-  font-weight: bold;
-  ${(_ref9) => {let { underline } = _ref9;return underline ? 'text-decoration: underline;' : '';}}
-  ${(_ref0) => {let { lineThrough } = _ref0;return lineThrough ? 'text-decoration: line-through;' : '';}}
-  ${(_ref1) => {let { emphasized } = _ref1;return emphasized ? 'font-style: italic;' : '';}}
-  color: ${(_ref10) => {let { theme, color } = _ref10;return (0, _theme.getColorFromName)(theme, color);}};
-  ${(_ref11) => {let { theme, marked } = _ref11;return marked ? `background-color: ${theme.colors.blue200};` : '';}}
-  ${(_ref12) => {let { theme, isLabel } = _ref12;return isLabel ?
-  `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;` :
-  '';}}
-`;
-
-
-const String = exports.String = _styledComponents.default.span`
-  font-family: 'IranSharp';
-  font-size: ${(_ref13) => {let { spanSize } = _ref13;return `${spanSize}px`;}};
-  ${(_ref14) => {let { underline } = _ref14;return underline ? 'text-decoration: underline;' : '';}}
-  ${(_ref15) => {let { lineThrough } = _ref15;return lineThrough ? 'text-decoration: line-through;' : '';}}
-  color: ${(_ref16) => {let { theme, spanColor } = _ref16;return (0, _theme.getColorFromName)(theme, spanColor);}};
-  font-weight: ${(_ref17) => {let { bold, fontWeight } = _ref17;return bold ? 'bold' : fontWeight;}};
-  ${(_ref18) => {let { theme, marked } = _ref18;return marked ? `background-color: ${theme.colors.blue200};` : '';}}
-  ${(_ref19) => {let { theme, isLabel } = _ref19;return isLabel ?
-  `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;` :
-  '';}}
-  ${
-(_ref20) => {let { isDisplayBlock } = _ref20;return isDisplayBlock ? 'display: block;' : '';}}
-  ${(_ref21) => {let { isCutWithEllipsis } = _ref21;
-  if (isCutWithEllipsis) {
-    return `
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: block;
-        `;
-  }
-  return '';
-}}
-  ${(_ref22) => {let { textAlign } = _ref22;return textAlign ?
-  `text-align: ${textAlign}` :
-  '';}}
-`;
-
-
-const SubScript = exports.SubScript = _styledComponents.default.sub`
-  font-family: 'IranSharp';
-  font-size: 8px;
-  color: ${(_ref23) => {let { theme, color } = _ref23;return (0, _theme.getColorFromName)(theme, color);}};
-`;
-
-const SupScript = exports.SupScript = _styledComponents.default.sup`
-  font-family: 'IranSharp';
-  font-size: 8px;
-  color: ${(_ref24) => {let { theme, color } = _ref24;return (0, _theme.getColorFromName)(theme, color);}};
-`;

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

@@ -1,333 +0,0 @@
-"use strict";var _react = _interopRequireDefault(require("react"));
-var _enzyme = require("enzyme");
-require("jest-styled-components");
-
-var _index = _interopRequireDefault(require("./index"));
-var _test = _interopRequireDefault(require("../../utils/test"));
-var _theme = _interopRequireDefault(require("../theme"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
-
-const setupShallow = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
-    (0, _enzyme.shallow)(/*#__PURE__*/
-      _react.default.createElement(_index.default, _extends({
-        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
-      )
-    ));};
-
-
-const setupMount = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
-    (0, _enzyme.mount)(/*#__PURE__*/
-      _react.default.createElement(_index.default, _extends({
-        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
-      )
-    ));};
-
-
-describe('Text component', () => {
-  it('Should not render anything', () => {
-    const component = setupShallow({});
-    const Text = (0, _test.default)(component, 'span');
-    expect(Text.length).toBe(0);
-  });
-
-  it('Should render simple Text with span tag', () => {
-    const component = setupShallow({
-      children: 'تکست ساده'
-    });
-    const Text = (0, _test.default)(component, 'span');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with strong tag', () => {
-    const component = setupShallow({
-      children: 'تکست استرانگ',
-      strong: true
-    });
-    const Text = (0, _test.default)(component, 'strong');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render simple Text with em tag', () => {
-    const component = setupShallow({
-      children: 'تکست کج',
-      emphasized: true
-    });
-    const Text = (0, _test.default)(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 = (0, _test.default)(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 = (0, _test.default)(component, 'strong');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render subScript text', () => {
-    const component = setupShallow({
-      children: 'تکست پایین‌نویس',
-      subScript: true
-    });
-    const Text = (0, _test.default)(component, 'subScript');
-    expect(Text.length).toBe(1);
-  });
-
-  it('Should render supScript text', () => {
-    const component = setupShallow({
-      children: 'تکست بالا‌نویس',
-      supScript: true
-    });
-    const Text = (0, _test.default)(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 = (0, _test.default)(component, 'subScript');
-    const TextSup = (0, _test.default)(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.default.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.default.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.default.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.default.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.default.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.default.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.default.defaultSize}px`);
-    expect(Text).toHaveStyleRule('color', _theme.default.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.default.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.default.colors.blue200);
-    Text.unmount();
-  });
-
-  it('Should render simple marked text', () => {
-    const Text = setupMount({
-      children: 'مارک',
-      marked: true
-    });
-    expect(Text).toHaveStyleRule('background-color', _theme.default.colors.blue200);
-    Text.unmount();
-  });
-
-  it('Should render simple label text', () => {
-    const Text = setupMount({
-      children: 'لیبیل',
-      label: true
-    });
-    expect(Text).toHaveStyleRule('background-color', _theme.default.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.default.colors.blue600);
-    Text.unmount();
-  });
-
-  it('Should render blue subScript text', () => {
-    const Text = setupMount({
-      children: 'تکست پایین نویس',
-      subScript: true,
-      color: 'blue'
-    });
-    expect(Text).toHaveStyleRule('color', _theme.default.colors.blue600);
-    Text.unmount();
-  });
-});

package/dist/components/typography/theme.js

@@ -1,66 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
-
-const typographyTheme = {
-  defaultSize: 13,
-  defaultColor: _themes.default.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: _themes.default.sizes,
-  colors: _themes.default.colors
-};var _default = exports.default =
-
-typographyTheme;