react-jupiter 5.12.0 → 6.0.0-beta.10

package/typography/link/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_text=_interopRequireDefault(require("../text")),_index=_interopRequireDefault(require("./index.styles"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_text=_interopRequireDefault(require("../text")),_index=_interopRequireDefault(require("./index.styles"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}
 
 
 
@@ -16,7 +16,7 @@ const generateLink=(a)=>
 
 
 {let{href:e="",target:f="_self",size:g=14,strong:h=!1,emphasized:i=!1,linkContent:b,children:c,...d}=a;return(
-"function"==typeof e?
+"function"==typeof e)?
 e(/*#__PURE__*/
 _react.default.createElement(_text.default,_extends({
 size:g,
@@ -39,7 +39,7 @@ color:"blue"},
 
 c
 )
-))
+)
 
 };
 
@@ -66,12 +66,12 @@ emphasized:_propTypes.default.bool
 
 const Link=(a)=>{
 const{children:b,linkContent:c}=a;return(
-void 0===b&&void 0===c?null:/*#__PURE__*/
+void 0===b&&void 0===c)?null:/*#__PURE__*/
 
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),
 generateLink(a)
-))
+)
 
 };
 

package/typography/link/index.stories.js

@@ -1,12 +1,70 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.WithRenderProps=exports.Small=exports.Simple=exports.Emphasized=exports.Bold=void 0;var _react=_interopRequireDefault(require("react")),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
 
 
+{
+title:"Components/Typography/Link",
+component:_index.default,
+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=(a)=>/*#__PURE__*/_react.default.createElement(_index.default,a),
 
-(0,_react2.storiesOf)("Link",module).
-add("simple link",()=>/*#__PURE__*/_react.default.createElement(_index.default,{href:"http://www.google.com"},"\u0648\u0631\u0648\u062F \u0628\u0647 \u0633\u0627\u06CC\u062A \u06AF\u0648\u06AF\u0644")).
-add("small link",()=>/*#__PURE__*/_react.default.createElement(_index.default,{href:"http://www.google.com",size:12},"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0633\u0627\u06CC\u0632 \u06A9\u0648\u0686\u06A9\u062A\u0631")).
-add("bold link",()=>/*#__PURE__*/_react.default.createElement(_index.default,{href:"http://www.google.com",size:12,strong:!0},"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0645\u062A\u0646 \u0628\u0648\u0644\u062F")).
-add("emphasized link",()=>/*#__PURE__*/_react.default.createElement(_index.default,{href:"http://www.google.com",size:12,emphasized:!0},"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0645\u062A\u0646 \u06A9\u0686")).
-add("link with renderprops",()=>/*#__PURE__*/_react.default.createElement(_index.default,{href:(a)=>/*#__PURE__*/_react.default.createElement("a",{href:"http://yahoo.com"},a),linkContent:"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0631\u0646\u062F\u0631 \u067E\u0631\u0627\u067E\u0633"})).
-addDecorator(_addonInfo.withInfo);
+Simple=exports.Simple=Template.bind({});
+Simple.args={
+href:"http://www.google.com",
+children:"\u0648\u0631\u0648\u062F \u0628\u0647 \u0633\u0627\u06CC\u062A \u06AF\u0648\u06AF\u0644"
+};
+
+const Small=exports.Small=Template.bind({});
+Small.args={
+href:"http://www.google.com",
+size:12,
+children:"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0633\u0627\u06CC\u0632 \u06A9\u0648\u0686\u06A9\u062A\u0631"
+};
+
+const Bold=exports.Bold=Template.bind({});
+Bold.args={
+href:"http://www.google.com",
+size:12,
+strong:!0,
+children:"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0645\u062A\u0646 \u0628\u0648\u0644\u062F"
+};
+
+const Emphasized=exports.Emphasized=Template.bind({});
+Emphasized.args={
+href:"http://www.google.com",
+size:12,
+emphasized:!0,
+children:"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0645\u062A\u0646 \u06A9\u0686"
+};
+
+const WithRenderProps=exports.WithRenderProps=Template.bind({});
+WithRenderProps.args={
+href:(a)=>/*#__PURE__*/_react.default.createElement("a",{href:"http://yahoo.com"},a),
+linkContent:"\u0644\u06CC\u0646\u06A9 \u0628\u0627 \u0631\u0646\u062F\u0631 \u067E\u0631\u0627\u067E\u0633"
+};

package/typography/link/index.styles.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _templateObject,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}
-
-const ExternalLink=_styledComponents.default.a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  text-decoration: none;\n  color: ",";\n"])),
-
-(a)=>{let{theme:b}=a;return b.colors.blue600});var _default=exports.default=
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
 
+const ExternalLink=_styledComponents.default.a`
+  text-decoration: none;
+  color: ${(a)=>{let{theme:b}=a;return b.colors.blue600}};
+`;var _default=exports.default=
 
 ExternalLink;

package/typography/link/index.test.js

@@ -1,4 +1,4 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_enzyme=require("enzyme");require("jest-styled-components");var _index=_interopRequireDefault(require("./index")),_test=_interopRequireDefault(require("../../utils/test"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}
+"use strict";var _react=_interopRequireDefault(require("react")),_enzyme=require("enzyme");require("jest-styled-components");var _index=_interopRequireDefault(require("./index")),_test=_interopRequireDefault(require("../../utils/test"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}
 
 
 

package/typography/paragraph/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_index=_interopRequireDefault(require("./index.styles"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_index=_interopRequireDefault(require("./index.styles"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}
 
 
 
@@ -12,14 +12,14 @@ const Paragraph=(a)=>
 
 
 {let{size:d=_theme.default.defaultSize,color:e="riverBedDark",bold:f=!1,children:b,...c}=a;return(
-void 0===b?null:/*#__PURE__*/
+void 0===b)?null:/*#__PURE__*/
 
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
 _react.default.createElement(_index.default,_extends({size:d,color:e,bold:f,"data-test":"paragraph"},c),
 b
 )
-))
+)
 
 };
 

package/typography/paragraph/index.stories.js

@@ -1,27 +1,56 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonKnobs=require("@storybook/addon-knobs"),_addonInfo=require("@storybook/addon-info"),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
-
-
-
-
-
-
-
-
-
-
-
-(0,_react2.storiesOf)("Paragraph",module).
-add("default paragraph",()=>/*#__PURE__*/
-_react.default.createElement(_index.default,{
-color:(0,_addonKnobs.select)("color (default: riverBedDark)",["riverBedDark","riverBed"]),
-bold:(0,_addonKnobs.boolean)("bold(optional - default: false)",!1),
-size:(0,_addonKnobs.text)("size (default: 13)","13")},
-
-
-(0,_addonKnobs.text)("the paragraph (as children)",
-"\u0637\u0631\u0627\u062D \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0627\u0632 \u0627\u06CC\u0646 \u0645\u062A\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0646\u0635\u0631\u06CC \u0627\u0632 \u062A\u0631\u06A9\u06CC\u0628 \u0628\u0646\u062F\u06CC \u0628\u0631\u0627\u06CC \u067E\u0631 \u06A9\u0631\u062F\u0646 \u0635\u0641\u062D\u0647 \u0648 \u0627\u0631\u0627\u06CC\u0647 \u0627\u0648\u0644\u06CC\u0647 \u0634\u06A9\u0644 \u0638\u0627\u0647\u0631\u06CC \u0648 \u06A9\u0644\u06CC \u0637\u0631\u062D \u0633\u0641\u0627\u0631\u0634 \u06AF\u0631\u0641\u062A\u0647 \u0634\u062F\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC \u0646\u0645\u0627\u06CC\u062F\u060C \u062A\u0627 \u0627\u0632 \u0646\u0638\u0631 \u06AF\u0631\u0627\u0641\u06CC\u06A9\u06CC \u0646\u0634\u0627\u0646\u06AF\u0631 \u0686\u06AF\u0648\u0646\u06AF\u06CC \u0646\u0648\u0639 \u0648 \u0627\u0646\u062F\u0627\u0632\u0647 \u0641\u0648\u0646\u062A \u0648 \u0638\u0627\u0647\u0631 \u0645\u062A\u0646 \u0628\u0627\u0634\u062F. \u0645\u0639\u0645\u0648\u0644\u0627 \u0637\u0631\u0627\u062D\u0627\u0646 \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0628\u0631\u0627\u06CC \u0635\u0641\u062D\u0647\u200C\u0622\u0631\u0627\u06CC\u06CC")
-
-)
-).
-addDecorator(_addonKnobs.withKnobs).
-addDecorator(_addonInfo.withInfo);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Default=exports.CustomSize=exports.CustomColor=exports.Bold=void 0;var _react=_interopRequireDefault(require("react")),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
+
+
+
+{
+title:"Paragraph",
+component:_index.default,
+
+argTypes:{
+color:{
+control:"select",
+options:["riverBedDark","riverBed"],
+defaultValue:"riverBedDark"
+},
+bold:{
+control:"boolean",
+defaultValue:!1
+},
+size:{
+control:"text",
+defaultValue:"13"
+},
+children:{
+control:"text",
+defaultValue:"\u0637\u0631\u0627\u062D \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0627\u0632 \u0627\u06CC\u0646 \u0645\u062A\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0646\u0635\u0631\u06CC \u0627\u0632 \u062A\u0631\u06A9\u06CC\u0628 \u0628\u0646\u062F\u06CC \u0628\u0631\u0627\u06CC \u067E\u0631 \u06A9\u0631\u062F\u0646 \u0635\u0641\u062D\u0647 \u0648 \u0627\u0631\u0627\u06CC\u0647 \u0627\u0648\u0644\u06CC\u0647 \u0634\u06A9\u0644 \u0638\u0627\u0647\u0631\u06CC \u0648 \u06A9\u0644\u06CC \u0637\u0631\u062D \u0633\u0641\u0627\u0631\u0634 \u06AF\u0631\u0641\u062A\u0647 \u0634\u062F\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC \u0646\u0645\u0627\u06CC\u062F\u060C \u062A\u0627 \u0627\u0632 \u0646\u0638\u0631 \u06AF\u0631\u0627\u0641\u06CC\u06A9\u06CC \u0646\u0634\u0627\u0646\u06AF\u0631 \u0686\u06AF\u0648\u0646\u06AF\u06CC \u0646\u0648\u0639 \u0648 \u0627\u0646\u062F\u0627\u0632\u0647 \u0641\u0648\u0646\u062A \u0648 \u0638\u0627\u0647\u0631 \u0645\u062A\u0646 \u0628\u0627\u0634\u062F. \u0645\u0639\u0645\u0648\u0644\u0627 \u0637\u0631\u0627\u062D\u0627\u0646 \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0628\u0631\u0627\u06CC \u0635\u0641\u062D\u0647\u200C\u0622\u0631\u0627\u06CC\u06CC"
+}
+}
+};const
+
+Template=(a)=>/*#__PURE__*/_react.default.createElement(_index.default,a),
+
+Default=exports.Default=Template.bind({});
+Default.args={
+color:"riverBedDark",
+bold:!1,
+size:"13",
+children:"\u0637\u0631\u0627\u062D \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0627\u0632 \u0627\u06CC\u0646 \u0645\u062A\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0646\u0635\u0631\u06CC \u0627\u0632 \u062A\u0631\u06A9\u06CC\u0628 \u0628\u0646\u062F\u06CC \u0628\u0631\u0627\u06CC \u067E\u0631 \u06A9\u0631\u062F\u0646 \u0635\u0641\u062D\u0647 \u0648 \u0627\u0631\u0627\u06CC\u0647 \u0627\u0648\u0644\u06CC\u0647 \u0634\u06A9\u0644 \u0638\u0627\u0647\u0631\u06CC \u0648 \u06A9\u0644\u06CC \u0637\u0631\u062D \u0633\u0641\u0627\u0631\u0634 \u06AF\u0631\u0641\u062A\u0647 \u0634\u062F\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC \u0646\u0645\u0627\u06CC\u062F\u060C \u062A\u0627 \u0627\u0632 \u0646\u0638\u0631 \u06AF\u0631\u0627\u0641\u06CC\u06A9\u06CC \u0646\u0634\u0627\u0646\u06AF\u0631 \u0686\u06AF\u0648\u0646\u06AF\u06CC \u0646\u0648\u0639 \u0648 \u0627\u0646\u062F\u0627\u0632\u0647 \u0641\u0648\u0646\u062A \u0648 \u0638\u0627\u0647\u0631 \u0645\u062A\u0646 \u0628\u0627\u0634\u062F. \u0645\u0639\u0645\u0648\u0644\u0627 \u0637\u0631\u0627\u062D\u0627\u0646 \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0628\u0631\u0627\u06CC \u0635\u0641\u062D\u0647\u200C\u0622\u0631\u0627\u06CC\u06CC"
+};
+
+const Bold=exports.Bold=Template.bind({});
+Bold.args={
+...Default.args,
+bold:!0
+};
+
+const CustomSize=exports.CustomSize=Template.bind({});
+CustomSize.args={
+...Default.args,
+size:"16"
+};
+
+const CustomColor=exports.CustomColor=Template.bind({});
+CustomColor.args={
+...Default.args,
+color:"riverBed"
+};

package/typography/paragraph/index.styles.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _templateObject,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}
-
-const Content=_styledComponents.default.p(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  margin: 8px 0;\n  font-family: 'IranSharp';\n  font-size: ",";\n  line-height: ",";\n  color: ",";\n  font-weight: ",";\n"])),
-
-
-(a)=>{let{size:b}=a;return"".concat(b,"px")},
-(a)=>{let{theme:b,size:c}=a;return"".concat(c*b.lineHeightRatio,"px")},
-(a)=>{let{theme:b,color:c}=a;return b.colors[c]},
-(a)=>{let{bold:b}=a;return b?"bold":"normal"});var _default=exports.default=
-
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+
+const Content=_styledComponents.default.p`
+  margin: 8px 0;
+  font-family: 'IranSharp';
+  font-size: ${(a)=>{let{size:b}=a;return`${b}px`}};
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`${c*b.lineHeightRatio}px`}};
+  color: ${(a)=>{let{theme:b,color:c}=a;return b.colors[c]}};
+  font-weight: ${(a)=>{let{bold:b}=a;return b?"bold":"normal"}};
+`;var _default=exports.default=
 
 Content;

package/typography/paragraph/index.test.js

@@ -1,4 +1,4 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_enzyme=require("enzyme");require("jest-styled-components");var _index=_interopRequireDefault(require("./index")),_test=_interopRequireDefault(require("../../utils/test")),_theme=_interopRequireDefault(require("../theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}const
+"use strict";var _react=_interopRequireDefault(require("react")),_enzyme=require("enzyme");require("jest-styled-components");var _index=_interopRequireDefault(require("./index")),_test=_interopRequireDefault(require("../../utils/test")),_theme=_interopRequireDefault(require("../theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}const
 
 
 
@@ -33,8 +33,8 @@ it("Should render Paragraph with font-size 14 and proper line-height",()=>{
 const a=setupMount({
 children:"\u0627\u06CC\u0646 \u06CC\u06A9 \u0645\u062A\u0646 \u0628\u0644\u0646\u062F \u0628\u0631\u0627\u06CC \u067E\u0627\u0631\u0627\u06AF\u0631\u0627\u0641 \u0627\u0633\u062A"
 });
-expect(a).toHaveStyleRule("font-size","".concat(_theme.default.defaultSize,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.defaultSize*_theme.default.lineHeightRatio,"px"))
+expect(a).toHaveStyleRule("font-size",`${_theme.default.defaultSize}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.defaultSize*_theme.default.lineHeightRatio}px`)
 }),
 
 it("Should render Paragraph with font-size 15",()=>{

package/typography/text/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_index=require("./index.styles");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_theme=_interopRequireDefault(require("../theme")),_index=require("./index.styles");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}
 
 
 
@@ -36,7 +36,7 @@ let r;
 
 switch(r=h?"strong":k?"emphasized":l?"subScript":m?"supScript":"span",r){
 case"strong":
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.Strong,_extends({
 size:d,
 color:e,
@@ -52,7 +52,7 @@ b
 ));
 
 case"emphasized":
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.Emphasized,_extends({
 size:d,
 color:e,
@@ -68,20 +68,20 @@ b
 ));
 
 case"subScript":
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.SubScript,_extends({color:e,"data-test":"subScript"},c),
 b
 ));
 
 case"supScript":
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.SupScript,_extends({color:e,"data-test":"supScript"},c),
 b
 ));
 
 case"span":
 default:
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.String,_extends({
 spanSize:d,
 spanColor:e,

package/typography/text/index.stories.js

@@ -1,26 +1,196 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
-
-
-
-
-(0,_react2.storiesOf)("Text",module).
-add("simple text",()=>/*#__PURE__*/_react.default.createElement(_index.default,null,"\u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0633\u0627\u062F\u0647 \u0627\u0632 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062A\u06A9\u0633\u062A")).
-add("light text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"light"},"\u0645\u062A\u0646 \u0631\u0646\u06AF \u0644\u0627\u06CC\u062A")).
-add("dark blue text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"darkBlue"},"\u0645\u062A\u0646 \u0622\u0628\u06CC \u067E\u0631 \u0631\u0646\u06AF")).
-add("blue text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"blue"},"\u0645\u062A\u0646 \u0622\u0628\u06CC")).
-add("red text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"red"},"\u0645\u062A\u0646 \u0642\u0631\u0645\u0632 \u0631\u0646\u06AF")).
-add("green text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"green"},"\u0645\u062A\u0646 \u0633\u0628\u0632 \u0631\u0646\u06AF")).
-add("yellow text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"yellow"},"\u0645\u062A\u0646 \u0632\u0631\u062F \u0631\u0646\u06AF")).
-add("gray text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"gray"},"\u0645\u062A\u0646 \u062E\u0627\u06A9\u0633\u062A\u0631\u06CC \u0631\u0646\u06AF")).
-add("black text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{color:"black"},"\u0645\u062A\u0646 \u0645\u0634\u06A9\u06CC \u0631\u0646\u06AF")).
-add("text with custom size",()=>/*#__PURE__*/_react.default.createElement(_index.default,{size:18},"\u0645\u062A\u0646 \u0628\u0627 \u0633\u0627\u06CC\u0632 \u06A9\u0627\u0633\u062A\u0648\u0645")).
-add("text with underline",()=>/*#__PURE__*/_react.default.createElement(_index.default,{underline:!0},"\u0645\u062A\u0646 \u0632\u06CC\u0631\u062E\u0637 \u062F\u0627\u0631")).
-add("bold text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{bold:!0},"\u0645\u062A\u0646 \u0628\u0648\u0644\u062F")).
-add("line throw text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{lineThrough:!0},"\u0645\u062A\u0646 \u0631\u0648\u06CC \u062E\u0637\u062F\u0627\u0631")).
-add("strong text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{strong:!0},"\u0645\u062A\u0646 \u0627\u0633\u062A\u0631\u0627\u0646\u06AF")).
-add("emphasized text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{emphasized:!0},"\u0645\u062A\u0646 \u06A9\u062C")).
-add("subScript text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{subScript:!0},"\u0645\u062A\u0646 \u067E\u0627\u06CC\u06CC\u0646 \u062E\u0637")).
-add("supScript text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{supScript:!0},"\u0645\u062A\u0646 \u0628\u0627\u0644\u0627 \u062E\u0637")).
-add("label text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{label:!0},"\u0645\u062A\u0646 \u0628\u0647 \u0635\u0648\u0631\u062A \u0644\u06CC\u0628\u0644")).
-add("marked text",()=>/*#__PURE__*/_react.default.createElement(_index.default,{marked:!0},"\u0645\u062A\u0646 \u0628\u0647 \u0635\u0648\u0631\u062A \u0645\u0627\u0631\u06A9 \u0634\u062F\u0647")).
-addDecorator(_addonInfo.withInfo);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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")),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}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=(a)=>/*#__PURE__*/_react.default.createElement(_index.default,a),
+
+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:!0,
+children:"This text is bold"
+};
+
+const Italic=exports.Italic=Template.bind({});
+Italic.args={
+italic:!0,
+children:"This text is italic"
+};
+
+const Underlined=exports.Underlined=Template.bind({});
+Underlined.args={
+underline:!0,
+children:"This text is underlined"
+};
+
+const Strikethrough=exports.Strikethrough=Template.bind({});
+Strikethrough.args={
+strikethrough:!0,
+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:!0,
+italic:!0,
+align:"right",
+children:"Combined styles example"
+};