react-jupiter 6.0.0-beta.1 → 6.0.0-beta.10

package/typography/heading/index.stories.js

@@ -0,0 +1,94 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.H6=exports.H5=exports.H4=exports.H3=exports.H2=exports.H1=exports.CustomSize=exports.CustomColor=void 0;var _react=_interopRequireDefault(require("react")),_addonActions=require("@storybook/addon-actions"),_index=_interopRequireDefault(require("./index"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
+
+
+
+{
+title:"Components/Typography/Heading",
+component:_index.default,
+argTypes:{
+level:{
+control:"select",
+options:[1,2,3,4,5,6],
+description:"Heading level (h1-h6)"
+},
+size:{
+control:"select",
+options:["small","medium","large"],
+description:"Size of the heading"
+},
+color:{
+control:"color",
+description:"Color of the heading text"
+},
+children:{
+control:"text",
+description:"Heading content"
+}
+}
+};const
+
+Template=(a)=>/*#__PURE__*/_react.default.createElement(_index.default,a),
+
+H1=exports.H1=Template.bind({});
+H1.args={
+level:1,
+size:"large",
+color:"#000000",
+children:"Heading 1"
+};
+
+const H2=exports.H2=Template.bind({});
+H2.args={
+level:2,
+size:"medium",
+color:"#000000",
+children:"Heading 2"
+};
+
+const H3=exports.H3=Template.bind({});
+H3.args={
+level:3,
+size:"medium",
+color:"#000000",
+children:"Heading 3"
+};
+
+const H4=exports.H4=Template.bind({});
+H4.args={
+level:4,
+size:"small",
+color:"#000000",
+children:"Heading 4"
+};
+
+const H5=exports.H5=Template.bind({});
+H5.args={
+level:5,
+size:"small",
+color:"#000000",
+children:"Heading 5"
+};
+
+const H6=exports.H6=Template.bind({});
+H6.args={
+level:6,
+size:"small",
+color:"#000000",
+children:"Heading 6"
+};
+
+const CustomColor=exports.CustomColor=Template.bind({});
+CustomColor.args={
+level:1,
+size:"large",
+color:"#2196F3",
+children:"Blue Heading"
+};
+
+const CustomSize=exports.CustomSize=Template.bind({});
+CustomSize.args={
+level:1,
+size:"small",
+color:"#000000",
+children:"Small Heading"
+};

package/typography/heading/index.styles.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.H6=exports.H5=exports.H4=exports.H3=exports.H2=exports.H1=void 0;var _styledComponents=_interopRequireDefault(require("styled-components")),_utils=require("../utils"),_theme=require("../../utils/theme");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+
+
+H1=exports.H1=_styledComponents.default.h1`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,1)}}
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,1)}px;`}}
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,1)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`,
+
+H2=exports.H2=_styledComponents.default.h2`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,2)}};
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,2)}`}}px;
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,2)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`,
+
+H3=exports.H3=_styledComponents.default.h3`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,3)}}
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,3)}px;`}}
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,3)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`,
+
+H4=exports.H4=_styledComponents.default.h4`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,4)}}
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,4)}px;`}}
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,4)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`,
+
+H5=exports.H5=_styledComponents.default.h5`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,5)}}
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,5)}px;`}}
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,5)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`,
+
+H6=exports.H6=_styledComponents.default.h6`
+  font-family: 'IranSharp';
+  margin: ${(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,6)}}
+  font-size: ${(a)=>{let{theme:b,size:c}=a;return`${(0,_utils.getSizeOfHeading)(b,c,6)}px;`}}
+  line-height: ${(a)=>{let{theme:b,size:c}=a;return`
+    ${(0,_utils.getSizeOfHeading)(b,c,6)*b.lineHeightRatio}px;
+  `}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: bold;
+`;

package/typography/heading/index.test.js

@@ -0,0 +1,122 @@
+"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
+
+
+
+
+
+
+
+
+setupShallow=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return(
+(0,_enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default,_extends({level:a.level},a),a.children)))},
+
+
+setupMount=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return(
+(0,_enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default,_extends({level:a.level},a),a.children)))};
+
+
+describe("Heading component",()=>{
+it("Should render large H1 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:1}),
+b=(0,_test.default)(a,"h1-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render large H1 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:1});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h1SizeMedium}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h1SizeMedium*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+it("Should render H2 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:2}),
+b=(0,_test.default)(a,"h2-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render small H2 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:2,size:"sm"});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h2SizeSmall}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h2SizeSmall*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+it("Should render H3 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:3}),
+b=(0,_test.default)(a,"h3-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render large H3 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:3,size:"lg"});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h3SizeLarge}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h3SizeLarge*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+it("Should render H4 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:4}),
+b=(0,_test.default)(a,"h4-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render small H4 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:4,size:"sm"});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h4SizeSmall}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h4SizeSmall*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+it("Should render H5 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:5}),
+b=(0,_test.default)(a,"h5-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render small H5 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:5,size:"sm"});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h5SizeSmall}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h5SizeSmall*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+it("Should render H6 component without error",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A",level:6}),
+b=(0,_test.default)(a,"h6-tag");
+expect(b.length).toBe(1)
+}),
+
+it("Should render medium H6 component without error",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:6,size:"md"});
+expect(a).toHaveStyleRule("font-size",`${_theme.default.h6SizeMedium}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.h6SizeMedium*_theme.default.lineHeightRatio}px`),
+expect(a).toHaveStyleRule("color",_theme.default.defaultColor),
+a.unmount()
+}),
+
+
+it("Should not render H1 when children prop is undefined",()=>{const
+a=setupShallow({level:1}),
+b=(0,_test.default)(a,"h1-tag");
+expect(b.length).toBe(0)
+}),
+
+it("Level prop should be between 1 and 5",()=>{
+const a=setupMount({children:"\u062A\u0633\u062A",level:1});
+expect(a.prop("level")).toBeGreaterThanOrEqual(1),
+expect(a.prop("level")).toBeLessThanOrEqual(5),
+a.unmount()
+}),
+
+it("Should render H1 when level prop is undefined",()=>{const
+a=setupShallow({children:"\u062A\u0633\u062A"}),
+b=(0,_test.default)(a,"h1-tag");
+expect(b.length).toBe(1)
+})
+});

package/typography/index.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Heading",{enumerable:!0,get:function(){return _heading.default}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return _link.default}}),Object.defineProperty(exports,"Paragraph",{enumerable:!0,get:function(){return _paragraph.default}}),Object.defineProperty(exports,"Text",{enumerable:!0,get:function(){return _text.default}}),exports.default=void 0;var _heading=_interopRequireDefault(require("./heading")),_text=_interopRequireDefault(require("./text")),_paragraph=_interopRequireDefault(require("./paragraph")),_link=_interopRequireDefault(require("./link"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
+
+
+
+
+
+
+
+
+
+{
+Heading:_heading.default,
+Text:_text.default,
+Paragraph:_paragraph.default,
+Link:_link.default
+};

package/typography/link/index.js

@@ -0,0 +1,82 @@
+"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)}
+
+
+
+
+
+
+
+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)?
+e(/*#__PURE__*/
+_react.default.createElement(_text.default,_extends({
+size:g,
+strong:h,
+emphasized:i,
+color:"blue"},
+d),
+
+b
+)
+):/*#__PURE__*/
+
+
+_react.default.createElement(_index.default,_extends({href:e,target:f,"data-test":"external"},d),/*#__PURE__*/
+_react.default.createElement(_text.default,{
+size:g,
+strong:h,
+emphasized:i,
+color:"blue"},
+
+c
+)
+)
+
+};
+
+generateLink.propTypes={
+children:_propTypes.default.oneOfType([
+_propTypes.default.arrayOf(_propTypes.default.node),
+_propTypes.default.node,
+_propTypes.default.string]
+),
+href:_propTypes.default.oneOfType([
+_propTypes.default.func,
+_propTypes.default.string]
+),
+linkContent:_propTypes.default.oneOfType([
+_propTypes.default.arrayOf(_propTypes.default.node),
+_propTypes.default.node,
+_propTypes.default.string]
+),
+target:_propTypes.default.oneOf(["_self","_blank","_parent","_top"]),
+size:_propTypes.default.number,
+strong:_propTypes.default.bool,
+emphasized:_propTypes.default.bool
+};
+
+const Link=(a)=>{
+const{children:b,linkContent:c}=a;return(
+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)
+)
+
+};
+
+Link.propTypes=generateLink.propTypes,
+
+Link.defaultProps=generateLink.defaultProps;var _default=exports.default=
+
+Link;

package/typography/link/index.stories.js

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

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

@@ -0,0 +1,60 @@
+"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)}
+
+
+
+
+
+
+const setupShallow=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return(
+(0,_enzyme.shallow)(/*#__PURE__*/
+_react.default.createElement(_index.default,_extends({
+external:a.external,
+target:a.target,
+size:a.size,
+strong:a.strong,
+emphasized:a.emphasized},
+a),
+
+a.children
+)
+))};
+
+
+describe("Link component",()=>{
+it("Should not render any thing",()=>{const
+a=setupShallow({
+children:"\u0644\u06CC\u0646\u06A9 \u062F\u0627\u062E\u0644\u06CC"
+}),
+b=(0,_test.default)(a,"internal-link");
+expect(b.length).toBe(0)
+}),
+
+it("Should render an internal Link",()=>{const
+a=setupShallow({
+children:"\u0644\u06CC\u0646\u06A9 \u062F\u0627\u062E\u0644\u06CC",
+to:"http://google.com"
+}),
+b=(0,_test.default)(a,"internal-link");
+expect(b.length).toBe(1)
+}),
+
+it("Should render an internal Link when external prop false",()=>{const
+a=setupShallow({
+children:"\u0644\u06CC\u0646\u06A9 \u062F\u0627\u062E\u0644\u06CC",
+to:"http://google.com",
+external:!1
+}),
+b=(0,_test.default)(a,"internal-link");
+expect(b.length).toBe(1)
+}),
+
+it("Should render an internal Link when external prop is true",()=>{const
+a=setupShallow({
+children:"\u0644\u06CC\u0646\u06A9 \u062E\u0627\u0631\u062C\u06CC",
+to:"http://google.com",
+external:!0
+}),
+b=(0,_test.default)(a,"external-link");
+expect(b.length).toBe(1)
+})
+});

package/typography/paragraph/index.js

@@ -0,0 +1,37 @@
+"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)}
+
+
+
+
+
+
+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__*/
+
+_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
+)
+)
+
+};
+
+Paragraph.propTypes={
+children:_propTypes.default.oneOfType([
+_propTypes.default.arrayOf(_propTypes.default.node),
+_propTypes.default.node,
+_propTypes.default.string]
+).isRequired,
+size:_propTypes.default.number,
+color:_propTypes.default.oneOf(["riverBedDark","riverBed"]),
+bold:_propTypes.default.bool
+};var _default=exports.default=
+
+Paragraph;

package/typography/paragraph/index.stories.js

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

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