react-jupiter 5.11.34 → 6.0.0-beta.1

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

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

@@ -0,0 +1,73 @@
+"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;' : '';}}
+  ${(_ref10) => {let { lineThrough } = _ref10;return lineThrough ? 'text-decoration: line-through;' : '';}}
+  ${(_ref11) => {let { emphasized } = _ref11;return emphasized ? 'font-style: italic;' : '';}}
+  color: ${(_ref12) => {let { theme, color } = _ref12;return (0, _theme.getColorFromName)(theme, color);}};
+  ${(_ref13) => {let { theme, marked } = _ref13;return marked ? `background-color: ${theme.colors.blue200};` : '';}}
+  ${(_ref14) => {let { theme, isLabel } = _ref14;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: ${(_ref15) => {let { spanSize } = _ref15;return `${spanSize}px`;}};
+  ${(_ref16) => {let { underline } = _ref16;return underline ? 'text-decoration: underline;' : '';}}
+  ${(_ref17) => {let { lineThrough } = _ref17;return lineThrough ? 'text-decoration: line-through;' : '';}}
+  color: ${(_ref18) => {let { theme, spanColor } = _ref18;return (0, _theme.getColorFromName)(theme, spanColor);}};
+  font-weight: ${(_ref19) => {let { bold, fontWeight } = _ref19;return bold ? 'bold' : fontWeight;}};
+  ${(_ref20) => {let { theme, marked } = _ref20;return marked ? `background-color: ${theme.colors.blue200};` : '';}}
+  ${(_ref21) => {let { theme, isLabel } = _ref21;return isLabel ?
+  `background-color: ${theme.colors.gray400}; padding: 2px 8px; border-radius: 2px;` :
+  '';}}
+  ${
+(_ref22) => {let { isDisplayBlock } = _ref22;return isDisplayBlock ? 'display: block;' : '';}}
+  ${(_ref23) => {let { isCutWithEllipsis } = _ref23;
+  if (isCutWithEllipsis) {
+    return `
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+        `;
+  }
+  return '';
+}}
+  ${(_ref24) => {let { textAlign } = _ref24;return textAlign ?
+  `text-align: ${textAlign}` :
+  '';}}
+`;
+
+
+const SubScript = exports.SubScript = _styledComponents.default.sub`
+  font-family: 'IranSharp';
+  font-size: 8px;
+  color: ${(_ref25) => {let { theme, color } = _ref25;return (0, _theme.getColorFromName)(theme, color);}};
+`;
+
+const SupScript = exports.SupScript = _styledComponents.default.sup`
+  font-family: 'IranSharp';
+  font-size: 8px;
+  color: ${(_ref26) => {let { theme, color } = _ref26;return (0, _theme.getColorFromName)(theme, color);}};
+`;

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

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

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