react-jupiter 5.12.0 → 6.0.0-beta.10

package/table/tableRow.js

@@ -23,20 +23,20 @@
 
 
 function TableRow(a){let{rowItem:b,columns:c}=a;
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.Tr,{status:b.status||null},
 c.map((a)=>
 "action"===a.dataType?
 b.callToActions&&0<b.callToActions.length?/*#__PURE__*/
 
 _react.default.createElement(_actionCell.default,{
-key:"".concat(b.key,"-").concat(a.key),
+key:`${b.key}-${a.key}`,
 callToActions:b.callToActions}
 ):/*#__PURE__*/
 
 
 
-_react.default.createElement("td",{key:"".concat(b.key,"-").concat(a.key)},/*#__PURE__*/
+_react.default.createElement("td",{key:`${b.key}-${a.key}`},/*#__PURE__*/
 _react.default.createElement(_spacing.Padding,{top:3},/*#__PURE__*/
 _react.default.createElement(_typography.Text,{size:14},"-"
 
@@ -46,7 +46,7 @@ _react.default.createElement(_typography.Text,{size:14},"-"
 
 
 
-_react.default.createElement("td",{key:"".concat(b.key,"-").concat(a.key)},/*#__PURE__*/
+_react.default.createElement("td",{key:`${b.key}-${a.key}`},/*#__PURE__*/
 _react.default.createElement(_typography.Text,{size:14},
 b[a.key]||"-"
 )

package/tabs/index.style.js

@@ -1,32 +1,35 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabHeader=exports.StyledButton=void 0;var _templateObject,_templateObject2,_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
-
-TabHeader=exports.TabHeader=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"]))),
-
-
-
-
-StyledButton=exports.StyledButton=_styledComponents.default.button(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  min-width: 140px;\n  max-width: 210px;\n  height: 35px;\n\n  margin: 4px 0 4px 8px;\n  padding: 0 8px;\n  box-sizing: border-box;\n\n  background: transparent;\n  border: 1px solid ",";\n  border-radius: ","px;\n  cursor: pointer;\n  transition:  ",";\n\n  span {\n    color: ",";\n    transition:  ",";\n  }\n\n  &:hover, &.active {\n    border-color: ",";\n\n    span {\n      color: ",";\n    }\n  }\n"])),
-
-
-
-
-
-
-
-
-
-(a)=>{let{theme:b}=a;return b.defaultColor},
-(a)=>{let{theme:b}=a;return b.borderRadius},
-
-(a)=>{let{theme:b}=a;return b.transition},
-
-
-(a)=>{let{theme:b}=a;return b.defaultColor},
-(a)=>{let{theme:b}=a;return b.transition},
-
-
-
-(a)=>{let{theme:b}=a;return b.secoundColor},
-
-
-(a)=>{let{theme:b}=a;return b.secoundColor});
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.TabHeader=exports.StyledButton=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+TabHeader=exports.TabHeader=_styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+`,
+
+StyledButton=exports.StyledButton=_styledComponents.default.button`
+  min-width: 140px;
+  max-width: 210px;
+  height: 35px;
+
+  margin: 4px 0 4px 8px;
+  padding: 0 8px;
+  box-sizing: border-box;
+
+  background: transparent;
+  border: 1px solid ${(a)=>{let{theme:b}=a;return b.defaultColor}};
+  border-radius: ${(a)=>{let{theme:b}=a;return b.borderRadius}}px;
+  cursor: pointer;
+  transition:  ${(a)=>{let{theme:b}=a;return b.transition}};
+
+  span {
+    color: ${(a)=>{let{theme:b}=a;return b.defaultColor}};
+    transition:  ${(a)=>{let{theme:b}=a;return b.transition}};
+  }
+
+  &:hover, &.active {
+    border-color: ${(a)=>{let{theme:b}=a;return b.secoundColor}};
+
+    span {
+      color: ${(a)=>{let{theme:b}=a;return b.secoundColor}};
+    }
+  }
+`;

package/tabs/tabPanel.js

@@ -7,8 +7,8 @@
 
 
 function TabPanel(a){let{children:b,label:c,tabKey:d}=a;
-return/*#__PURE__*/(
-_react.default.createElement("div",{className:"".concat(c,"-").concat(d),"data-test":"tabs-panel"},
+return(/*#__PURE__*/
+_react.default.createElement("div",{className:`${c}-${d}`,"data-test":"tabs-panel"},
 b
 ))
 

package/tabs/tabs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../globalStyle")),_typography=require("../typography"),_index=require("./index.style"),_theme=_interopRequireDefault(require("./theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(b,c){if(!c&&b&&b.__esModule)return b;if(null===b||"object"!=typeof b&&"function"!=typeof b)return{default:b};var d=_getRequireWildcardCache(c);if(d&&d.has(b))return d.get(b);var e={__proto__:null},f=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in b)if("default"!=a&&Object.prototype.hasOwnProperty.call(b,a)){var g=f?Object.getOwnPropertyDescriptor(b,a):null;g&&(g.get||g.set)?Object.defineProperty(e,a,g):e[a]=b[a]}return e.default=b,d&&d.set(b,e),e}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../globalStyle")),_typography=require("../typography"),_index=require("./index.style"),_theme=_interopRequireDefault(require("./theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(b,c){if(!c&&b&&b.__esModule)return b;if(null===b||"object"!=typeof b&&"function"!=typeof b)return{default:b};var d=_getRequireWildcardCache(c);if(d&&d.has(b))return d.get(b);var e={__proto__:null},f=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in b)if("default"!=a&&{}.hasOwnProperty.call(b,a)){var g=f?Object.getOwnPropertyDescriptor(b,a):null;g&&(g.get||g.set)?Object.defineProperty(e,a,g):e[a]=b[a]}return e.default=b,d&&d.set(b,e),e}
 
 
 
@@ -45,10 +45,10 @@ _react.default.createElement(_index.TabHeader,null,
 f.map((a)=>{
 const{props:{label:c,tabKey:d}}=a;
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.StyledButton,{
 "data-access":d,
-className:"".concat(g===d?"active":""),
+className:`${g===d?"active":""}`,
 key:d,
 "data-test":"tab-label",
 type:"button",

package/tabs/theme.js

@@ -4,7 +4,7 @@ const theme={
 defaultColor:_themes.default.colors.blue400,
 secoundColor:_themes.default.colors.blue600,
 borderRadius:_themes.default.borderRadius.high,
-transition:"all ".concat(_themes.default.animation.time,"s ").concat(_themes.default.animation.method)
+transition:`all ${_themes.default.animation.time}s ${_themes.default.animation.method}`
 };var _default=exports.default=
 
 theme;

package/titled-avatar/index.js

@@ -26,7 +26,7 @@ const g=()=>/*#__PURE__*/
 _react.default.createElement(_index.SmallTitle,{size:f},b);return(
 
 
-d?
+d)?
 d(/*#__PURE__*/
 _react.default.createElement(_index.Container,{"data-test":"titled-avatar"},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
@@ -41,7 +41,7 @@ _react.default.createElement(_index.Container,{"data-test":"titled-avatar"},/*#_
 _react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
 _react.default.createElement(_avatar.default,{src:c,size:e,sizeMobile:e,round:!0}),
 g()
-))
+)
 
 };var _default=exports.default=
 

package/titled-avatar/index.style.js

@@ -1,25 +1,30 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TitleContainer=exports.Title=exports.SmallTitle=exports.Container=void 0;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_styledComponents=_interopRequireDefault(require("styled-components")),_typography=require("../typography");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
-
-
-Container=exports.Container=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n"]))),
-
-
-
-
-
-
-
-
-
-TitleContainer=exports.TitleContainer=_styledComponents.default.div(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  height: 45px;\n  overflow: hidden;\n"]))),
-
-
-
-
-Title=exports.Title=(0,_styledComponents.default)(_typography.Heading)(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  margin: 8px 8px 8px 0;\n  max-height: 45px;\n  overflow: hidden;\n"]))),
-
-
-
-
-
-SmallTitle=exports.SmallTitle=(0,_styledComponents.default)(_typography.Text)(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  margin-right: 8px;\n  white-space: break-spaces;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.TitleContainer=exports.Title=exports.SmallTitle=exports.Container=void 0;var _styledComponents=_interopRequireDefault(require("styled-components")),_typography=require("../typography");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+
+Container=exports.Container=_styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+`,
+
+TitleContainer=exports.TitleContainer=_styledComponents.default.div`
+  height: 45px;
+  overflow: hidden;
+`,
+
+Title=exports.Title=(0,_styledComponents.default)(_typography.Heading)`
+  margin: 8px 8px 8px 0;
+  max-height: 45px;
+  overflow: hidden;
+`,
+
+SmallTitle=exports.SmallTitle=(0,_styledComponents.default)(_typography.Text)`
+  margin-right: 8px;
+  white-space: break-spaces;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/typography/heading/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)}const
+"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
 
 
 
@@ -37,7 +37,7 @@ Heading=(a)=>
 
 
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),
 (()=>{if(b===void 0)return null;switch(e){case 6:return/*#__PURE__*/_react.default.createElement(_index.H6,_extends({size:d,"data-test":"h6-tag",color:f},c),b);case 5:return/*#__PURE__*/_react.default.createElement(_index.H5,_extends({size:d,"data-test":"h5-tag",color:f},c),b);case 4:return/*#__PURE__*/_react.default.createElement(_index.H4,_extends({size:d,"data-test":"h4-tag",color:f},c),b);case 3:return/*#__PURE__*/_react.default.createElement(_index.H3,_extends({size:d,"data-test":"h3-tag",color:f},c),b);case 2:return/*#__PURE__*/_react.default.createElement(_index.H2,_extends({size:d,"data-test":"h2-tag",color:f},c),b);case 1:default:return/*#__PURE__*/_react.default.createElement(_index.H1,_extends({size:d,"data-test":"h1-tag",color:f},c),b)}})()

package/typography/heading/index.stories.js

@@ -1,41 +1,94 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonActions=require("@storybook/addon-actions"),_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.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),
 
-const actions={
-SmallH1:(0,_addonActions.action)("small h1")
+H1=exports.H1=Template.bind({});
+H1.args={
+level:1,
+size:"large",
+color:"#000000",
+children:"Heading 1"
 };
 
-(0,_react2.storiesOf)("Heading",module).
-add("Heading default",()=>/*#__PURE__*/_react.default.createElement(_index.default,null,"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H1 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H1 blue",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1,color:"blue"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H1 red",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1,color:"red"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H1 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H1 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H1 large",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:1,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u06CC\u06A9 \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-add("H2 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:2},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u062F\u0648 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H2 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:2,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u062F\u0648 \u06CC\u06A9 \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H2 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:2,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u062F\u0648 \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H2 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:2,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u062F\u0648 \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-add("H3 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:3},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0633\u0647 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H3 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:3,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0633\u0647 \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H3 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:3,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0633\u0647 \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H3 large",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:3,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0633\u0647 \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-add("H4 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:4},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0686\u0647\u0627\u0631 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H4 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:4,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0686\u0647\u0627\u0631 \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H4 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:4,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0686\u0647\u0627\u0631 \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H4 large",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:4,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0686\u0647\u0627\u0631 \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-add("H5 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:5},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u067E\u0646\u062C \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H5 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:5,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u067E\u0646\u062C \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H5 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:5,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u067E\u0646\u062C \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H5 large",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:5,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u067E\u0646\u062C \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-add("H6 default",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:6},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0634\u0634 \u062F\u06CC\u0641\u0627\u0644\u062A \u0627\u0633\u062A")).
-add("H6 small",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:6,size:"sm"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0634\u0634 \u06A9\u0648\u0686\u06A9 \u0627\u0633\u062A")).
-add("H6 medium",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:6,size:"md"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0634\u0634 \u0645\u062A\u0633\u0648\u0637 \u0627\u0633\u062A")).
-add("H6 large",()=>/*#__PURE__*/_react.default.createElement(_index.default,{level:6,size:"lg"},"\u0627\u06CC\u0646 \u06CC\u06A9 \u0627\u0686 \u0634\u0634 \u0628\u0632\u0631\u06AF \u0627\u0633\u062A")).
-addDecorator(_addonInfo.withInfo);var _default=exports.default=
-
-actions;
+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

@@ -1,67 +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 _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_styledComponents=_interopRequireDefault(require("styled-components")),_utils=require("../utils"),_theme=require("../../utils/theme");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
-
-
-
-H1=exports.H1=_styledComponents.default.h1(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ","\n  font-size: ","\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,1)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,1),"px;")},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,1)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-H2=exports.H2=_styledComponents.default.h2(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ",";\n  font-size: ","px;\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,2)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,2))},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,2)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-H3=exports.H3=_styledComponents.default.h3(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ","\n  font-size: ","\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,3)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,3),"px;")},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,3)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-H4=exports.H4=_styledComponents.default.h4(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ","\n  font-size: ","\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,4)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,4),"px;")},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,4)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-H5=exports.H5=_styledComponents.default.h5(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ","\n  font-size: ","\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,5)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,5),"px;")},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,5)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-H6=exports.H6=_styledComponents.default.h6(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  margin: ","\n  font-size: ","\n  line-height: ","\n  color: ",";\n  font-weight: bold;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return(0,_utils.getMarginOfHeading)(b,c,6)},
-(a)=>{let{theme:b,size:c}=a;return"".concat((0,_utils.getSizeOfHeading)(b,c,6),"px;")},
-(a)=>{let{theme:b,size:c}=a;return"\n    ".concat(
-(0,_utils.getSizeOfHeading)(b,c,6)*b.lineHeightRatio,"px;\n  ")},
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)});
+"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

@@ -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
 
 
 
@@ -24,8 +24,8 @@ 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","".concat(_theme.default.h1SizeMedium,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h1SizeMedium*_theme.default.lineHeightRatio,"px")),
+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()
 }),
@@ -38,8 +38,8 @@ 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","".concat(_theme.default.h2SizeSmall,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h2SizeSmall*_theme.default.lineHeightRatio,"px")),
+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()
 }),
@@ -52,8 +52,8 @@ 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","".concat(_theme.default.h3SizeLarge,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h3SizeLarge*_theme.default.lineHeightRatio,"px")),
+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()
 }),
@@ -66,8 +66,8 @@ 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","".concat(_theme.default.h4SizeSmall,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h4SizeSmall*_theme.default.lineHeightRatio,"px")),
+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()
 }),
@@ -80,8 +80,8 @@ 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","".concat(_theme.default.h5SizeSmall,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h5SizeSmall*_theme.default.lineHeightRatio,"px")),
+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()
 }),
@@ -94,8 +94,8 @@ 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","".concat(_theme.default.h6SizeMedium,"px")),
-expect(a).toHaveStyleRule("line-height","".concat(_theme.default.h6SizeMedium*_theme.default.lineHeightRatio,"px")),
+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()
 }),