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

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;

package/typography/paragraph/index.test.js

@@ -0,0 +1,47 @@
+"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({size:a.size},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({size:a.size},a),a.children)))};
+
+
+describe("Paragraph component",()=>{
+it("Should render Paragraph",()=>{const
+a=setupShallow({
+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"
+}),
+b=(0,_test.default)(a,"paragraph");
+expect(b.length).toBe(1)
+}),
+
+it("Should not render Paragraph",()=>{const
+a=setupShallow(),
+b=(0,_test.default)(a,"paragraph");
+expect(b.length).toBe(0)
+}),
+
+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",`${_theme.default.defaultSize}px`),
+expect(a).toHaveStyleRule("line-height",`${_theme.default.defaultSize*_theme.default.lineHeightRatio}px`)
+}),
+
+it("Should render Paragraph with font-size 15",()=>{
+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",
+size:15
+});
+expect(a).toHaveStyleRule("font-size","15px")
+})
+});

package/typography/text/index.js

@@ -0,0 +1,156 @@
+"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)}
+
+
+
+
+
+
+
+
+const renderString=(a)=>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{let{size:d=_theme.default.defaultSize,color:e="default",underline:f=!1,lineThrough:g=!1,strong:h=!1,bold:i=!1,fontWight:j=400,emphasized:k=!1,subScript:l=!1,supScript:m=!1,marked:n=!1,label:o=!1,isDisplayBlock:p=!1,isCutWithEllipsis:q=!1,children:b,...c}=a;
+if(void 0===b)return null;
+
+let r;
+
+
+
+
+
+
+switch(r=h?"strong":k?"emphasized":l?"subScript":m?"supScript":"span",r){
+case"strong":
+return(/*#__PURE__*/
+_react.default.createElement(_index.Strong,_extends({
+size:d,
+color:e,
+underline:f&&!g,
+lineThrough:g&&!f,
+emphasized:k,
+marked:n&&!o,
+isLabel:o&&!n,
+"data-test":"strong"},
+c),
+
+b
+));
+
+case"emphasized":
+return(/*#__PURE__*/
+_react.default.createElement(_index.Emphasized,_extends({
+size:d,
+color:e,
+underline:f&&!g,
+lineThrough:g&&!f,
+bold:i,
+marked:n&&!o,
+isLabel:o&&!n,
+"data-test":"emphasized"},
+c),
+
+b
+));
+
+case"subScript":
+return(/*#__PURE__*/
+_react.default.createElement(_index.SubScript,_extends({color:e,"data-test":"subScript"},c),
+b
+));
+
+case"supScript":
+return(/*#__PURE__*/
+_react.default.createElement(_index.SupScript,_extends({color:e,"data-test":"supScript"},c),
+b
+));
+
+case"span":
+default:
+return(/*#__PURE__*/
+_react.default.createElement(_index.String,_extends({
+spanSize:d,
+spanColor:e,
+underline:f&&!g,
+lineThrough:g&&!f,
+marked:n&&!o,
+isLabel:o&&!n,
+bold:i,
+fontWight:j,
+"data-test":"span",
+isDisplayBlock:p,
+isCutWithEllipsis:q},
+c),
+
+b
+))
+
+}
+};
+
+renderString.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(["red","green","blue","yellow","white","darkBlue","black"]),
+underline:_propTypes.default.bool,
+lineThrough:_propTypes.default.bool,
+strong:_propTypes.default.bool,
+bold:_propTypes.default.bool,
+emphasized:_propTypes.default.bool,
+subScript:_propTypes.default.bool,
+supScript:_propTypes.default.bool,
+marked:_propTypes.default.bool,
+label:_propTypes.default.bool,
+isDisplayBlock:_propTypes.default.bool,
+isCutWithEllipsis:_propTypes.default.bool
+};
+
+const Text=(a)=>/*#__PURE__*/
+_react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
+_react.default.createElement(_globalStyle.default,null),
+renderString(a)
+);
+
+
+Text.prototype={
+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(["red","green","blue","yellow","white","darkBlue"]),
+underline:_propTypes.default.bool,
+lineThrough:_propTypes.default.bool,
+strong:_propTypes.default.bool,
+bold:_propTypes.default.bool,
+emphasized:_propTypes.default.bool,
+subScript:_propTypes.default.bool,
+supScript:_propTypes.default.bool,
+marked:_propTypes.default.bool,
+label:_propTypes.default.bool,
+isDisplayBlock:_propTypes.default.bool,
+isCutWithEllipsis:_propTypes.default.bool
+},
+
+Text.defaultProps=renderString.defaultProps;var _default=exports.default=
+
+Text;

package/typography/text/index.stories.js

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

package/typography/text/index.styles.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SupScript=exports.SubScript=exports.Strong=exports.String=exports.Emphasized=void 0;var _styledComponents=_interopRequireDefault(require("styled-components")),_theme=require("../../utils/theme");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+
+Emphasized=exports.Emphasized=_styledComponents.default.em`
+  font-family: 'IranSharp';
+  font-size: ${(a)=>{let{size:b}=a;return`${b}px`}};
+  ${(a)=>{let{underline:b}=a;return b?"text-decoration: underline;":""}}
+  ${(a)=>{let{lineThrough:b}=a;return b?"text-decoration: line-through;":""}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  ${(a)=>{let{bold:b}=a;return b?"font-weight: bold;":""}}
+  ${(a)=>{let{theme:b,marked:c}=a;return c?`background-color: ${b.colors.blue200};`:""}}
+  ${(a)=>{let{theme:b,isLabel:c}=a;return c?
+`background-color: ${b.colors.gray400}; padding: 2px 8px; border-radius: 2px;`:
+""}}
+`,
+
+
+Strong=exports.Strong=_styledComponents.default.strong`
+  font-family: 'IranSharp';
+  font-size: ${(a)=>{let{size:b}=a;return`${b}px`}};
+  font-weight: bold;
+  ${(a)=>{let{underline:b}=a;return b?"text-decoration: underline;":""}}
+  ${(a)=>{let{lineThrough:b}=a;return b?"text-decoration: line-through;":""}}
+  ${(a)=>{let{emphasized:b}=a;return b?"font-style: italic;":""}}
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  ${(a)=>{let{theme:b,marked:c}=a;return c?`background-color: ${b.colors.blue200};`:""}}
+  ${(a)=>{let{theme:b,isLabel:c}=a;return c?
+`background-color: ${b.colors.gray400}; padding: 2px 8px; border-radius: 2px;`:
+""}}
+`,
+
+
+String=exports.String=_styledComponents.default.span`
+  font-family: 'IranSharp';
+  font-size: ${(a)=>{let{spanSize:b}=a;return`${b}px`}};
+  ${(a)=>{let{underline:b}=a;return b?"text-decoration: underline;":""}}
+  ${(a)=>{let{lineThrough:b}=a;return b?"text-decoration: line-through;":""}}
+  color: ${(a)=>{let{theme:b,spanColor:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  font-weight: ${(a)=>{let{bold:b,fontWeight:c}=a;return b?"bold":c}};
+  ${(a)=>{let{theme:b,marked:c}=a;return c?`background-color: ${b.colors.blue200};`:""}}
+  ${(a)=>{let{theme:b,isLabel:c}=a;return c?
+`background-color: ${b.colors.gray400}; padding: 2px 8px; border-radius: 2px;`:
+""}}
+  ${
+(a)=>{let{isDisplayBlock:b}=a;return b?"display: block;":""}}
+  ${(a)=>{let{isCutWithEllipsis:b}=a;return(
+b)?
+`
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+        `:
+
+""
+}}
+  ${(a)=>{let{textAlign:b}=a;return b?
+`text-align: ${b}`:
+""}}
+`,
+
+
+SubScript=exports.SubScript=_styledComponents.default.sub`
+  font-family: 'IranSharp';
+  font-size: 8px;
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+`,
+
+SupScript=exports.SupScript=_styledComponents.default.sup`
+  font-family: 'IranSharp';
+  font-size: 8px;
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+`;