venice-ui 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (229) hide show
  1. package/.circleci/config.yml +36 -0
  2. package/.eslintrc.json +24 -0
  3. package/.prettierignore +10 -0
  4. package/.prettierrc +5 -0
  5. package/.storybook/PCTheme.js +10 -0
  6. package/.storybook/main.js +5 -4
  7. package/.storybook/manager.js +17 -0
  8. package/.storybook/preview-head.html +18 -0
  9. package/.storybook/preview.js +21 -1
  10. package/.storybook/public/pc_logo.png +0 -0
  11. package/README.md +2 -2
  12. package/dist/cjs/Theme/Theme.d.ts +45 -0
  13. package/dist/cjs/Theme/Theme.js +49 -0
  14. package/dist/cjs/Theme/Theme.js.map +1 -0
  15. package/dist/cjs/components/Aligment/Aligment.stories.d.ts +7 -0
  16. package/dist/cjs/components/Aligment/Aligment.stories.js +110 -0
  17. package/dist/cjs/components/Aligment/Aligment.stories.js.map +1 -0
  18. package/dist/cjs/components/Aligment/Aligment.styles.d.ts +11 -0
  19. package/dist/cjs/components/Aligment/Aligment.styles.js +19 -0
  20. package/dist/cjs/components/Aligment/Aligment.styles.js.map +1 -0
  21. package/dist/cjs/components/Aligment/index.d.ts +1 -0
  22. package/dist/cjs/components/Aligment/index.js +6 -0
  23. package/dist/cjs/components/Aligment/index.js.map +1 -0
  24. package/dist/cjs/components/Button/Button.d.ts +10 -0
  25. package/dist/cjs/components/Button/Button.js +13 -0
  26. package/dist/cjs/components/Button/Button.js.map +1 -0
  27. package/dist/cjs/components/Button/Button.stories.d.ts +7 -0
  28. package/dist/cjs/components/Button/Button.stories.js +51 -0
  29. package/dist/cjs/components/Button/Button.stories.js.map +1 -0
  30. package/dist/cjs/components/Button/Button.styles.d.ts +8 -0
  31. package/dist/cjs/components/Button/Button.styles.js +66 -0
  32. package/dist/cjs/components/Button/Button.styles.js.map +1 -0
  33. package/dist/cjs/components/Button/index.d.ts +1 -0
  34. package/dist/cjs/components/Button/index.js +6 -0
  35. package/dist/cjs/components/Button/index.js.map +1 -0
  36. package/dist/cjs/components/Icons/Icon.d.ts +9 -0
  37. package/dist/cjs/components/Icons/Icon.js +17 -0
  38. package/dist/cjs/components/Icons/Icon.js.map +1 -0
  39. package/dist/cjs/components/Icons/Icon.stories.d.ts +9 -0
  40. package/dist/cjs/components/Icons/Icon.stories.js +60 -0
  41. package/dist/cjs/components/Icons/Icon.stories.js.map +1 -0
  42. package/dist/cjs/components/Icons/Icon.styles.d.ts +6 -0
  43. package/dist/cjs/components/Icons/Icon.styles.js +29 -0
  44. package/dist/cjs/components/Icons/Icon.styles.js.map +1 -0
  45. package/dist/cjs/components/Icons/IconsPath.d.ts +11 -0
  46. package/dist/cjs/components/Icons/IconsPath.js +15 -0
  47. package/dist/cjs/components/Icons/IconsPath.js.map +1 -0
  48. package/dist/cjs/components/Icons/index.d.ts +1 -0
  49. package/dist/cjs/components/Icons/index.js +6 -0
  50. package/dist/cjs/components/Icons/index.js.map +1 -0
  51. package/dist/cjs/components/InputText/InputText.d.ts +11 -0
  52. package/dist/cjs/components/InputText/InputText.js +13 -0
  53. package/dist/cjs/components/InputText/InputText.js.map +1 -0
  54. package/dist/cjs/components/InputText/InputText.stories.d.ts +5 -0
  55. package/dist/cjs/components/InputText/InputText.stories.js +18 -0
  56. package/dist/cjs/components/InputText/InputText.stories.js.map +1 -0
  57. package/dist/cjs/components/InputText/InputText.styles.d.ts +1 -0
  58. package/dist/cjs/components/InputText/InputText.styles.js +25 -0
  59. package/dist/cjs/components/InputText/InputText.styles.js.map +1 -0
  60. package/dist/cjs/components/InputText/index.d.ts +1 -0
  61. package/dist/cjs/components/InputText/index.js +6 -0
  62. package/dist/cjs/components/InputText/index.js.map +1 -0
  63. package/dist/cjs/components/Modal/Modal.d.ts +11 -0
  64. package/dist/cjs/components/Modal/Modal.js +30 -0
  65. package/dist/cjs/components/Modal/Modal.js.map +1 -0
  66. package/dist/cjs/components/Modal/Modal.stories.d.ts +8 -0
  67. package/dist/cjs/components/Modal/Modal.stories.js +83 -0
  68. package/dist/cjs/components/Modal/Modal.stories.js.map +1 -0
  69. package/dist/cjs/components/Modal/Modal.styles.d.ts +6 -0
  70. package/dist/cjs/components/Modal/Modal.styles.js +40 -0
  71. package/dist/cjs/components/Modal/Modal.styles.js.map +1 -0
  72. package/dist/cjs/components/Modal/index.d.ts +1 -0
  73. package/dist/cjs/components/Modal/index.js +6 -0
  74. package/dist/cjs/components/Modal/index.js.map +1 -0
  75. package/dist/cjs/components/Typography/Typography.styles.d.ts +5 -0
  76. package/dist/cjs/components/Typography/Typography.styles.js +34 -0
  77. package/dist/cjs/components/Typography/Typography.styles.js.map +1 -0
  78. package/dist/cjs/components/Typography/index.d.ts +1 -0
  79. package/dist/cjs/components/Typography/index.js +9 -0
  80. package/dist/cjs/components/Typography/index.js.map +1 -0
  81. package/dist/cjs/components/common/commonComponents.d.ts +2 -0
  82. package/dist/cjs/components/common/commonComponents.js +18 -0
  83. package/dist/cjs/components/common/commonComponents.js.map +1 -0
  84. package/dist/cjs/components/common/index.d.ts +1 -0
  85. package/dist/cjs/components/common/index.js +18 -0
  86. package/dist/cjs/components/common/index.js.map +1 -0
  87. package/dist/cjs/example/ExampleComponent.d.ts +16 -0
  88. package/dist/cjs/example/ExampleComponent.js +39 -0
  89. package/dist/cjs/example/ExampleComponent.js.map +1 -0
  90. package/dist/cjs/example/index.d.ts +1 -0
  91. package/dist/cjs/example/index.js +18 -0
  92. package/dist/cjs/example/index.js.map +1 -0
  93. package/dist/cjs/index.d.ts +5 -0
  94. package/dist/cjs/index.js +26 -0
  95. package/dist/cjs/index.js.map +1 -0
  96. package/dist/esm/Theme/Theme.d.ts +45 -0
  97. package/dist/esm/Theme/Theme.js +46 -0
  98. package/dist/esm/Theme/Theme.js.map +1 -0
  99. package/dist/esm/components/Aligment/Aligment.stories.d.ts +7 -0
  100. package/dist/esm/components/Aligment/Aligment.stories.js +104 -0
  101. package/dist/esm/components/Aligment/Aligment.stories.js.map +1 -0
  102. package/dist/esm/components/Aligment/Aligment.styles.d.ts +11 -0
  103. package/dist/esm/components/Aligment/Aligment.styles.js +13 -0
  104. package/dist/esm/components/Aligment/Aligment.styles.js.map +1 -0
  105. package/dist/esm/components/Aligment/index.d.ts +1 -0
  106. package/dist/esm/components/Aligment/index.js +2 -0
  107. package/dist/esm/components/Aligment/index.js.map +1 -0
  108. package/dist/esm/components/Button/Button.d.ts +10 -0
  109. package/dist/esm/components/Button/Button.js +6 -0
  110. package/dist/esm/components/Button/Button.js.map +1 -0
  111. package/dist/esm/components/Button/Button.stories.d.ts +7 -0
  112. package/dist/esm/components/Button/Button.stories.js +45 -0
  113. package/dist/esm/components/Button/Button.stories.js.map +1 -0
  114. package/dist/esm/components/Button/Button.styles.d.ts +8 -0
  115. package/dist/esm/components/Button/Button.styles.js +60 -0
  116. package/dist/esm/components/Button/Button.styles.js.map +1 -0
  117. package/dist/esm/components/Button/index.d.ts +1 -0
  118. package/dist/esm/components/Button/index.js +2 -0
  119. package/dist/esm/components/Button/index.js.map +1 -0
  120. package/dist/esm/components/Icons/Icon.d.ts +9 -0
  121. package/dist/esm/components/Icons/Icon.js +10 -0
  122. package/dist/esm/components/Icons/Icon.js.map +1 -0
  123. package/dist/esm/components/Icons/Icon.stories.d.ts +9 -0
  124. package/dist/esm/components/Icons/Icon.stories.js +54 -0
  125. package/dist/esm/components/Icons/Icon.stories.js.map +1 -0
  126. package/dist/esm/components/Icons/Icon.styles.d.ts +6 -0
  127. package/dist/esm/components/Icons/Icon.styles.js +23 -0
  128. package/dist/esm/components/Icons/Icon.styles.js.map +1 -0
  129. package/dist/esm/components/Icons/IconsPath.d.ts +11 -0
  130. package/dist/esm/components/Icons/IconsPath.js +12 -0
  131. package/dist/esm/components/Icons/IconsPath.js.map +1 -0
  132. package/dist/esm/components/Icons/index.d.ts +1 -0
  133. package/dist/esm/components/Icons/index.js +2 -0
  134. package/dist/esm/components/Icons/index.js.map +1 -0
  135. package/dist/esm/components/InputText/InputText.d.ts +11 -0
  136. package/dist/esm/components/InputText/InputText.js +6 -0
  137. package/dist/esm/components/InputText/InputText.js.map +1 -0
  138. package/dist/esm/components/InputText/InputText.stories.d.ts +5 -0
  139. package/dist/esm/components/InputText/InputText.stories.js +12 -0
  140. package/dist/esm/components/InputText/InputText.stories.js.map +1 -0
  141. package/dist/esm/components/InputText/InputText.styles.d.ts +1 -0
  142. package/dist/esm/components/InputText/InputText.styles.js +19 -0
  143. package/dist/esm/components/InputText/InputText.styles.js.map +1 -0
  144. package/dist/esm/components/InputText/index.d.ts +1 -0
  145. package/dist/esm/components/InputText/index.js +2 -0
  146. package/dist/esm/components/InputText/index.js.map +1 -0
  147. package/dist/esm/components/Modal/Modal.d.ts +11 -0
  148. package/dist/esm/components/Modal/Modal.js +23 -0
  149. package/dist/esm/components/Modal/Modal.js.map +1 -0
  150. package/dist/esm/components/Modal/Modal.stories.d.ts +8 -0
  151. package/dist/esm/components/Modal/Modal.stories.js +57 -0
  152. package/dist/esm/components/Modal/Modal.stories.js.map +1 -0
  153. package/dist/esm/components/Modal/Modal.styles.d.ts +6 -0
  154. package/dist/esm/components/Modal/Modal.styles.js +34 -0
  155. package/dist/esm/components/Modal/Modal.styles.js.map +1 -0
  156. package/dist/esm/components/Modal/index.d.ts +1 -0
  157. package/dist/esm/components/Modal/index.js +2 -0
  158. package/dist/esm/components/Modal/index.js.map +1 -0
  159. package/dist/esm/components/Typography/Typography.styles.d.ts +5 -0
  160. package/dist/esm/components/Typography/Typography.styles.js +28 -0
  161. package/dist/esm/components/Typography/Typography.styles.js.map +1 -0
  162. package/dist/esm/components/Typography/index.d.ts +1 -0
  163. package/dist/esm/components/Typography/index.js +2 -0
  164. package/dist/esm/components/Typography/index.js.map +1 -0
  165. package/dist/esm/components/common/commonComponents.d.ts +2 -0
  166. package/dist/esm/components/common/commonComponents.js +12 -0
  167. package/dist/esm/components/common/commonComponents.js.map +1 -0
  168. package/dist/esm/components/common/index.d.ts +1 -0
  169. package/dist/esm/components/common/index.js +2 -0
  170. package/dist/esm/components/common/index.js.map +1 -0
  171. package/dist/esm/example/ExampleComponent.d.ts +16 -0
  172. package/dist/esm/example/ExampleComponent.js +33 -0
  173. package/dist/esm/example/ExampleComponent.js.map +1 -0
  174. package/dist/esm/example/index.d.ts +1 -0
  175. package/dist/esm/example/index.js +2 -0
  176. package/dist/esm/example/index.js.map +1 -0
  177. package/dist/esm/index.d.ts +5 -0
  178. package/dist/esm/index.js +6 -0
  179. package/dist/esm/index.js.map +1 -0
  180. package/package.json +17 -2
  181. package/src/Theme/Theme.ts +47 -0
  182. package/src/components/Aligment/Aligment.stories.tsx +126 -0
  183. package/src/components/Aligment/Aligment.styles.ts +23 -0
  184. package/src/components/Aligment/index.ts +1 -0
  185. package/src/components/Button/Button.stories.tsx +53 -0
  186. package/src/components/Button/Button.styles.tsx +76 -0
  187. package/src/components/Button/Button.tsx +31 -0
  188. package/src/components/Button/index.ts +1 -0
  189. package/src/components/Icons/Icon.stories.tsx +62 -0
  190. package/src/components/Icons/Icon.styles.ts +29 -0
  191. package/src/components/Icons/Icon.tsx +35 -0
  192. package/src/components/Icons/Icons.stories.mdx +38 -0
  193. package/src/components/Icons/IconsPath.ts +13 -0
  194. package/src/components/Icons/index.ts +1 -0
  195. package/src/components/InputText/InputText.stories.tsx +18 -0
  196. package/src/components/InputText/InputText.styles.ts +19 -0
  197. package/src/components/InputText/InputText.tsx +24 -0
  198. package/src/components/InputText/index.ts +1 -0
  199. package/src/components/Modal/Modal.stories.tsx +183 -0
  200. package/src/components/Modal/Modal.styles.ts +38 -0
  201. package/src/components/Modal/Modal.tsx +63 -0
  202. package/src/components/Modal/index.ts +1 -0
  203. package/src/components/Typography/Typography.stories.mdx +35 -0
  204. package/src/components/Typography/Typography.styles.tsx +31 -0
  205. package/src/components/Typography/index.ts +1 -0
  206. package/src/components/common/commonComponents.tsx +13 -0
  207. package/src/components/common/index.ts +1 -0
  208. package/src/example/ExampleComponent.tsx +44 -0
  209. package/src/example/index.ts +1 -0
  210. package/src/index.ts +5 -0
  211. package/tsconfig.json +18 -18
  212. package/stories/Button.stories.tsx +0 -41
  213. package/stories/Button.tsx +0 -48
  214. package/stories/Header.stories.tsx +0 -25
  215. package/stories/Header.tsx +0 -56
  216. package/stories/Introduction.stories.mdx +0 -211
  217. package/stories/Page.stories.tsx +0 -26
  218. package/stories/Page.tsx +0 -73
  219. package/stories/assets/code-brackets.svg +0 -1
  220. package/stories/assets/colors.svg +0 -1
  221. package/stories/assets/comments.svg +0 -1
  222. package/stories/assets/direction.svg +0 -1
  223. package/stories/assets/flow.svg +0 -1
  224. package/stories/assets/plugin.svg +0 -1
  225. package/stories/assets/repo.svg +0 -1
  226. package/stories/assets/stackalt.svg +0 -1
  227. package/stories/button.css +0 -30
  228. package/stories/header.css +0 -32
  229. package/stories/page.css +0 -69
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ScrollCotainer = exports.Container = void 0;
7
+ const styled_components_1 = __importDefault(require("styled-components"));
8
+ const Theme_1 = require("../../Theme/Theme");
9
+ exports.Container = styled_components_1.default.div `
10
+ width: 100%;
11
+ `;
12
+ exports.ScrollCotainer = styled_components_1.default.div `
13
+ width: 100%;
14
+ padding: ${Theme_1.Theme.padding.l} ${Theme_1.Theme.padding.m};
15
+ overflow: auto;
16
+ box-sizing: border-box;
17
+ `;
18
+ //# sourceMappingURL=commonComponents.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../../src/components/common/commonComponents.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AACtC,6CAAyC;AAE5B,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAElC,CAAA;AAEY,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;aAE3B,aAAK,CAAC,OAAO,CAAC,CAAC,IAAI,aAAK,CAAC,OAAO,CAAC,CAAC;;;CAG9C,CAAA"}
@@ -0,0 +1 @@
1
+ export * from './commonComponents';
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./commonComponents"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/common/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}
@@ -0,0 +1,16 @@
1
+ export declare const StoryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ interface IExmpleBlock {
3
+ width?: string;
4
+ height?: string;
5
+ color?: string;
6
+ }
7
+ export declare const ExmpleBlock: import("styled-components").StyledComponent<"div", any, IExmpleBlock, never>;
8
+ interface IExmpleBlockWrapper {
9
+ color?: string;
10
+ }
11
+ export declare const ExmpleBlockWrapper: import("styled-components").StyledComponent<"div", any, IExmpleBlockWrapper, never>;
12
+ export declare const ExampleTable: import("styled-components").StyledComponent<"table", any, {}, never>;
13
+ export declare const ExampleTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
14
+ export declare const ExampleTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
15
+ export declare const ExampleTableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
16
+ export {};
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
7
+ const styled_components_1 = __importDefault(require("styled-components"));
8
+ const Theme_1 = require("../Theme/Theme");
9
+ exports.StoryWrapper = styled_components_1.default.div `
10
+ padding: ${Theme_1.Theme.padding.l}
11
+ `;
12
+ exports.ExmpleBlock = styled_components_1.default.div `
13
+ padding: ${(p) => (p.width ? p.width : '10px')} ${(p) => (p.height ? p.height : '10px')};
14
+ text-align: center;
15
+ font-size:${Theme_1.Theme.fontSize.xl}
16
+ `;
17
+ exports.ExmpleBlockWrapper = styled_components_1.default.div `
18
+ background-color: ${(p) => (p.color ? p.color : '#aaaaaa')};
19
+ border-radius: ${Theme_1.Theme.borderRadius.m};
20
+ `;
21
+ exports.ExampleTable = styled_components_1.default.table `
22
+ width: 100%;
23
+ border-collapse: collapse;
24
+ `;
25
+ exports.ExampleTableRow = styled_components_1.default.tr `
26
+ width: 100%;
27
+ border-collapse: collapse;
28
+ `;
29
+ exports.ExampleTableCell = styled_components_1.default.td `
30
+ padding:${Theme_1.Theme.padding.m};
31
+ border-bottom:1px solid #dddddd;
32
+ `;
33
+ exports.ExampleTableHeader = styled_components_1.default.th `
34
+ padding:${Theme_1.Theme.padding.m};
35
+ border-collapse: collapse;
36
+ background-color:#dddddd;
37
+ text-align: left;
38
+ `;
39
+ //# sourceMappingURL=ExampleComponent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExampleComponent.js","sourceRoot":"","sources":["../../../src/example/ExampleComponent.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AACtC,0CAAsC;AAEzB,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;aACzB,aAAK,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAA;AAOY,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,CAAc;aACtC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;cAE5E,aAAK,CAAC,QAAQ,CAAC,EAAE;CAC9B,CAAA;AAKY,QAAA,kBAAkB,GAAG,2BAAM,CAAC,GAAG,CAAqB;sBAC3C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;mBACzC,aAAK,CAAC,YAAY,CAAC,CAAC;CACtC,CAAA;AAEY,QAAA,YAAY,GAAG,2BAAM,CAAC,KAAK,CAAA;;;CAGvC,CAAA;AACY,QAAA,eAAe,GAAG,2BAAM,CAAC,EAAE,CAAA;;;CAGvC,CAAA;AACY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,EAAE,CAAA;YAC7B,aAAK,CAAC,OAAO,CAAC,CAAC;;CAE1B,CAAA;AACY,QAAA,kBAAkB,GAAG,2BAAM,CAAC,EAAE,CAAA;YAC/B,aAAK,CAAC,OAAO,CAAC,CAAC;;;;CAI1B,CAAA"}
@@ -0,0 +1 @@
1
+ export * from './ExampleComponent';
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ExampleComponent"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/example/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}
@@ -0,0 +1,5 @@
1
+ export * from "./components/InputText";
2
+ export { Modal } from './components/Modal';
3
+ export { Aligment } from './components/Aligment';
4
+ export * from './components/Typography';
5
+ export { Button } from './components/Button';
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.Button = exports.Aligment = exports.Modal = void 0;
18
+ __exportStar(require("./components/InputText"), exports);
19
+ var Modal_1 = require("./components/Modal");
20
+ Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
21
+ var Aligment_1 = require("./components/Aligment");
22
+ Object.defineProperty(exports, "Aligment", { enumerable: true, get: function () { return Aligment_1.Aligment; } });
23
+ __exportStar(require("./components/Typography"), exports);
24
+ var Button_1 = require("./components/Button");
25
+ Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
26
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,4CAAwC;AAAhC,8FAAA,KAAK,OAAA;AACb,kDAA8C;AAAtC,oGAAA,QAAQ,OAAA;AAChB,0DAAuC;AACvC,8CAA0C;AAAlC,gGAAA,MAAM,OAAA"}
@@ -0,0 +1,45 @@
1
+ export declare const Theme: {
2
+ colors: {
3
+ primary: string;
4
+ text: string;
5
+ disableText: string;
6
+ disableBackground: string;
7
+ white: string;
8
+ black: string;
9
+ gray_1: string;
10
+ overlayer: string;
11
+ };
12
+ fontSize: {
13
+ xs: string;
14
+ s: string;
15
+ m: string;
16
+ l: string;
17
+ xl: string;
18
+ };
19
+ lineHeight: {
20
+ xs: string;
21
+ s: string;
22
+ m: string;
23
+ l: string;
24
+ xl: string;
25
+ };
26
+ padding: {
27
+ xs: string;
28
+ s: string;
29
+ m: string;
30
+ l: string;
31
+ xl: string;
32
+ xxl: string;
33
+ };
34
+ zIndex: {
35
+ modalOverlayer: number;
36
+ };
37
+ borderRadius: {
38
+ s: string;
39
+ m: string;
40
+ l: string;
41
+ };
42
+ shadow: {
43
+ m: string;
44
+ };
45
+ };
@@ -0,0 +1,46 @@
1
+ export const Theme = {
2
+ colors: {
3
+ primary: "#4c95c5",
4
+ text: '#333333',
5
+ disableText: "#cccccc",
6
+ disableBackground: '#dddddd',
7
+ white: "#ffffff",
8
+ black: "#333333",
9
+ gray_1: "#b7b7b7",
10
+ overlayer: 'rgba(255,255,255,0.2)'
11
+ },
12
+ fontSize: {
13
+ xs: "12px",
14
+ s: "14px",
15
+ m: "16px",
16
+ l: "22px",
17
+ xl: "32px",
18
+ },
19
+ lineHeight: {
20
+ xs: "14px",
21
+ s: "16px",
22
+ m: "18px",
23
+ l: "24px",
24
+ xl: "36px",
25
+ },
26
+ padding: {
27
+ xs: "2px",
28
+ s: "4px",
29
+ m: "8px",
30
+ l: "16px",
31
+ xl: "32px",
32
+ xxl: '48px',
33
+ },
34
+ zIndex: {
35
+ modalOverlayer: 1000,
36
+ },
37
+ borderRadius: {
38
+ s: '2px',
39
+ m: '4px',
40
+ l: '8px',
41
+ },
42
+ shadow: {
43
+ m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
44
+ }
45
+ };
46
+ //# sourceMappingURL=Theme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../../src/Theme/Theme.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,uBAAuB;KACnC;IAED,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;KACX;IACD,UAAU,EAAE;QACV,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;KACX;IAED,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;KACZ;IACD,MAAM,EAAC;QACL,cAAc,EAAE,IAAI;KACrB;IACD,YAAY,EAAE;QACZ,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,KAAK;KACT;IACD,MAAM,EAAC;QACL,CAAC,EAAE,iEAAiE;KACrE;CACF,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
2
+ declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
3
+ export default _default;
4
+ export declare const Default: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
5
+ export declare const Column: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
6
+ export declare const WithColor: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
7
+ export declare const WithPadding: ComponentStory<import("styled-components").StyledComponent<"div", any, import("./Aligment.styles").IAligmentProps, never>>;
@@ -0,0 +1,104 @@
1
+ import React from 'react';
2
+ import { Aligment } from './Aligment.styles';
3
+ import { ExmpleBlock, ExmpleBlockWrapper } from '../../example';
4
+ import { Theme } from '../../Theme/Theme';
5
+ export default {
6
+ title: 'Layout/Aligment',
7
+ component: Aligment,
8
+ argTypes: {
9
+ width: { control: 'text', defaultValue: '100%', default: '100%' },
10
+ direction: {
11
+ options: ['row', 'row-reverse', 'column', 'column-reverse'],
12
+ control: 'select',
13
+ },
14
+ align: {
15
+ options: [
16
+ 'stretch',
17
+ 'flex-start',
18
+ 'flex-end',
19
+ 'center',
20
+ 'baseline',
21
+ 'first baseline',
22
+ 'last baseline',
23
+ 'start',
24
+ 'end',
25
+ 'self-start',
26
+ 'self-end',
27
+ ],
28
+ control: 'select',
29
+ },
30
+ justify: {
31
+ options: [
32
+ 'flex-start',
33
+ 'flex-end',
34
+ 'center',
35
+ 'space-between',
36
+ 'space-around',
37
+ 'space-evenly',
38
+ 'start',
39
+ 'end',
40
+ 'left',
41
+ ],
42
+ control: 'select',
43
+ },
44
+ wrap: {
45
+ options: ['wrap', 'nowrap', 'wrap-reverse'],
46
+ control: 'select',
47
+ },
48
+ backgroundColor: {
49
+ control: { type: 'color' },
50
+ },
51
+ vPadding: { control: 'text' },
52
+ hPadding: { control: 'text' },
53
+ },
54
+ };
55
+ const Template = (args) => (React.createElement(Aligment, Object.assign({}, args),
56
+ React.createElement(ExmpleBlockWrapper, null,
57
+ React.createElement(ExmpleBlock, { width: "20px", height: "40px" }, "1")),
58
+ React.createElement(ExmpleBlockWrapper, null,
59
+ React.createElement(ExmpleBlock, { width: "60px", height: "30px" }, "2")),
60
+ React.createElement(ExmpleBlockWrapper, null,
61
+ React.createElement(ExmpleBlock, { width: "30px", height: "60px" }, "3")),
62
+ React.createElement(ExmpleBlockWrapper, null,
63
+ React.createElement(ExmpleBlock, { width: "40px", height: "40px" }, "4"))));
64
+ export const Default = Template.bind({});
65
+ Default.args = {
66
+ direction: 'row',
67
+ align: 'center',
68
+ justify: 'space-between',
69
+ wrap: 'wrap',
70
+ backgroundColor: 'transparent',
71
+ vPadding: '0px',
72
+ hPadding: '0px',
73
+ };
74
+ export const Column = Template.bind({});
75
+ Column.args = {
76
+ direction: 'column',
77
+ align: 'center',
78
+ justify: 'space-between',
79
+ wrap: 'wrap',
80
+ backgroundColor: 'transparent',
81
+ vPadding: '0px',
82
+ hPadding: '0px',
83
+ };
84
+ export const WithColor = Template.bind({});
85
+ WithColor.args = {
86
+ direction: 'row',
87
+ align: 'center',
88
+ justify: 'space-between',
89
+ wrap: 'wrap',
90
+ backgroundColor: Theme.colors.primary,
91
+ vPadding: '0px',
92
+ hPadding: '0px',
93
+ };
94
+ export const WithPadding = Template.bind({});
95
+ WithPadding.args = {
96
+ direction: 'row',
97
+ align: 'center',
98
+ justify: 'space-between',
99
+ wrap: 'wrap',
100
+ backgroundColor: Theme.colors.primary,
101
+ vPadding: Theme.padding.xl,
102
+ hPadding: Theme.padding.xl,
103
+ };
104
+ //# sourceMappingURL=Aligment.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Aligment.stories.js","sourceRoot":"","sources":["../../../../src/components/Aligment/Aligment.stories.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,11 @@
1
+ export interface IAligmentProps {
2
+ direction?: string;
3
+ justify?: string;
4
+ align?: string;
5
+ width?: string;
6
+ wrap?: string;
7
+ vPadding?: string;
8
+ hPadding?: string;
9
+ backgroundColor?: string;
10
+ }
11
+ export declare const Aligment: import("styled-components").StyledComponent<"div", any, IAligmentProps, never>;
@@ -0,0 +1,13 @@
1
+ import styled from "styled-components";
2
+ export const Aligment = styled.div `
3
+ box-sizing: border-box;
4
+ display: flex;
5
+ width: ${p => p.width ? p.width : '100%'};
6
+ flex-direction: ${p => p.direction ? p.direction : 'row'};
7
+ justify-content: ${p => p.justify ? p.justify : 'space-between'};
8
+ align-items: ${p => p.align ? p.align : 'center'};
9
+ flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
10
+ padding: ${p => p.vPadding ? p.vPadding : '0'} ${p => p.hPadding ? p.hPadding : '0'};
11
+ background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
12
+ `;
13
+ //# sourceMappingURL=Aligment.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Aligment.styles.js","sourceRoot":"","sources":["../../../../src/components/Aligment/Aligment.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAYvC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAgB;;;WAGvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;oBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;qBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;eACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;aAC/B,CAAC,CAAA,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;sBAC7D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa;CAC/E,CAAC"}
@@ -0,0 +1 @@
1
+ export { Aligment } from './Aligment.styles';
@@ -0,0 +1,2 @@
1
+ export { Aligment } from './Aligment.styles';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Aligment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA"}
@@ -0,0 +1,10 @@
1
+ import { FC } from 'react';
2
+ export interface IButtonProps {
3
+ text: string;
4
+ mode?: string;
5
+ size?: string;
6
+ right?: boolean;
7
+ left?: boolean;
8
+ onClick: () => void;
9
+ }
10
+ export declare const Button: FC<IButtonProps>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { ButtonElement } from './Button.styles';
3
+ export const Button = ({ text, mode = 'primary', size = 'regular', right = false, left = false, onClick, }) => {
4
+ return (React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, onClick: onClick }, text));
5
+ };
6
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAU/C,MAAM,CAAC,MAAM,MAAM,GAAqB,CAAC,EACvC,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,KAAK,EACZ,OAAO,GACR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,aAAa,IACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAEf,IAAI,CACS,CACjB,CAAA;AACH,CAAC,CAAA"}
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
3
+ declare const _default: ComponentMeta<React.FC<import("./Button").IButtonProps>>;
4
+ export default _default;
5
+ export declare const Default: ComponentStory<React.FC<import("./Button").IButtonProps>>;
6
+ export declare const Inverse: ComponentStory<React.FC<import("./Button").IButtonProps>>;
7
+ export declare const Ghost: ComponentStory<React.FC<import("./Button").IButtonProps>>;
@@ -0,0 +1,45 @@
1
+ import React from 'react';
2
+ import { Button } from './Button';
3
+ export default {
4
+ title: 'Elements/Button',
5
+ component: Button,
6
+ argTypes: {
7
+ text: { control: 'text' },
8
+ mode: {
9
+ options: ['primary', 'inverse', 'ghost'],
10
+ control: 'select',
11
+ },
12
+ size: {
13
+ options: ['regular', 'small', 'flat'],
14
+ control: 'select',
15
+ },
16
+ right: { control: 'boolean' },
17
+ left: { control: 'boolean' },
18
+ },
19
+ args: {
20
+ text: 'Click me',
21
+ },
22
+ };
23
+ const Template = (args) => React.createElement(Button, Object.assign({}, args));
24
+ export const Default = Template.bind({});
25
+ Default.args = {
26
+ size: 'regular',
27
+ mode: 'primary',
28
+ left: false,
29
+ right: false,
30
+ };
31
+ export const Inverse = Template.bind({});
32
+ Inverse.args = {
33
+ size: 'regular',
34
+ mode: 'inverse',
35
+ left: false,
36
+ right: false,
37
+ };
38
+ export const Ghost = Template.bind({});
39
+ Ghost.args = {
40
+ size: 'regular',
41
+ mode: 'ghost',
42
+ left: false,
43
+ right: false,
44
+ };
45
+ //# sourceMappingURL=Button.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,QAAQ;SAClB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;YACrC,OAAO,EAAE,QAAQ;SAClB;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAG7B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CAC8B,CAAA;AAEjC,MAAM,QAAQ,GAAkC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAG,CAAA;AAE7E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;CACb,CAAA"}
@@ -0,0 +1,8 @@
1
+ interface IButtonElement {
2
+ mode: string;
3
+ size: string;
4
+ right: boolean;
5
+ left: boolean;
6
+ }
7
+ export declare const ButtonElement: import("styled-components").StyledComponent<"button", any, IButtonElement, never>;
8
+ export {};
@@ -0,0 +1,60 @@
1
+ import { lighten } from 'polished';
2
+ import styled from 'styled-components';
3
+ import { Theme } from '../../Theme/Theme';
4
+ export const ButtonElement = styled.button `
5
+ transition: 300ms;
6
+ border-radius: ${Theme.borderRadius.s};
7
+ overflow: hidden;
8
+ cursor: pointer;
9
+ box-sizing: border-box;
10
+ margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
11
+ margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ display: flex;
16
+
17
+ ${(p) => p.mode === 'primary' &&
18
+ `background-color: ${Theme.colors.primary};
19
+ color: ${Theme.colors.white};
20
+ border: 1px solid rgba(0,0,0,0.15);`}
21
+ ${(p) => p.mode === 'inverse' &&
22
+ `background-color: ${Theme.colors.white};
23
+ color: ${Theme.colors.primary};
24
+ border: 1px solid ${Theme.colors.primary};
25
+ `}
26
+ ${(p) => p.mode === 'ghost' &&
27
+ `background-color:transparent;
28
+ color: ${Theme.colors.primary};
29
+ border:none;`}
30
+ ${(p) => p.size === 'regular' &&
31
+ `font-size: ${Theme.fontSize.m};
32
+ line-height: ${Theme.lineHeight.m};
33
+ padding: ${Theme.padding.m} ${Theme.padding.l};`}
34
+ ${(p) => p.size === 'small' &&
35
+ `font-size: ${Theme.fontSize.s};
36
+ line-height: ${Theme.lineHeight.s};
37
+ padding: ${Theme.padding.s} ${Theme.padding.m};`}
38
+ ${(p) => p.size === 'flat' &&
39
+ `font-size: ${Theme.fontSize.m};
40
+ line-height: ${Theme.lineHeight.m};
41
+ padding: ${Theme.padding.s} ${Theme.padding.s};`}
42
+ &:hover {
43
+ transition: 300ms;
44
+ ${(p) => p.mode === 'primary' &&
45
+ `background-color: ${lighten(0.1, Theme.colors.primary)};`}
46
+ ${(p) => p.mode === 'inverse' &&
47
+ `background-color: ${lighten(0.4, Theme.colors.primary)}`};
48
+ ${(p) => p.mode === 'ghost' && `color: ${lighten(0.2, Theme.colors.primary)};`}
49
+ }
50
+
51
+ &.disable,
52
+ button[disabled] {
53
+ color: ${Theme.colors.disableText};
54
+ cursor: default;
55
+ &:hover {
56
+ color: ${Theme.colors.disableBackground};
57
+ }
58
+ }
59
+ `;
60
+ //# sourceMappingURL=Button.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.styles.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AASzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAgB;;mBAEvC,KAAK,CAAC,YAAY,CAAC,CAAC;;;;iBAItB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;kBACvC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;;;;;;IAMrD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,KAAK,CAAC,MAAM,CAAC,OAAO;aAChC,KAAK,CAAC,MAAM,CAAC,KAAK;wCACS;IACpC,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,KAAK,CAAC,MAAM,CAAC,KAAK;aAC9B,KAAK,CAAC,MAAM,CAAC,OAAO;wBACT,KAAK,CAAC,MAAM,CAAC,OAAO;KACvC;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO;IAClB;aACS,KAAK,CAAC,MAAM,CAAC,OAAO;iBAChB;IACb,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,cAAc,KAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,KAAK,CAAC,UAAU,CAAC,CAAC;eACtB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG;IAChD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO;IAClB,cAAc,KAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,KAAK,CAAC,UAAU,CAAC,CAAC;eACtB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG;IAChD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,MAAM;IACjB,cAAc,KAAK,CAAC,QAAQ,CAAC,CAAC;mBACf,KAAK,CAAC,UAAU,CAAC,CAAC;eACtB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG;;;MAG9C,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;MAC1D,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,SAAS;IACpB,qBAAqB,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;MACzD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,UAAU,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;aAK9D,KAAK,CAAC,MAAM,CAAC,WAAW;;;eAGtB,KAAK,CAAC,MAAM,CAAC,iBAAiB;;;CAG5C,CAAA"}
@@ -0,0 +1 @@
1
+ export { Button } from './Button';
@@ -0,0 +1,2 @@
1
+ export { Button } from './Button';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA"}
@@ -0,0 +1,9 @@
1
+ import { FC } from 'react';
2
+ export interface IIconActionProps {
3
+ name: string;
4
+ size?: number;
5
+ color?: string;
6
+ bgColor?: boolean;
7
+ onClick?: () => void;
8
+ }
9
+ export declare const Icon: FC<IIconActionProps>;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { Theme } from '../../Theme/Theme';
3
+ import { IconElement } from './Icon.styles';
4
+ import { iconsPath } from './IconsPath';
5
+ export const Icon = ({ size = 24, name, color = Theme.colors.text, bgColor, onClick, }) => {
6
+ return (React.createElement(IconElement, { onClick: onClick, bgColor: bgColor },
7
+ React.createElement("svg", { width: size, height: size, viewBox: '0 0 48 48', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
8
+ React.createElement("path", { d: iconsPath[name], fill: color }))));
9
+ };
10
+ //# sourceMappingURL=Icon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AASvC,MAAM,CAAC,MAAM,IAAI,GAAyB,CAAC,EACzC,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,EACzB,OAAO,EACP,OAAO,GACR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO;QAC7C,6BACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,WAAW,EACpB,mBAAmB,EAAC,eAAe,EACnC,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,IAAI,EAAE,IAAI;YAEV,8BAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,GAAI,CACrC,CACM,CACf,CAAA;AACH,CAAC,CAAA"}