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.
- package/.circleci/config.yml +36 -0
- package/.eslintrc.json +24 -0
- package/.prettierignore +10 -0
- package/.prettierrc +5 -0
- package/.storybook/PCTheme.js +10 -0
- package/.storybook/main.js +5 -4
- package/.storybook/manager.js +17 -0
- package/.storybook/preview-head.html +18 -0
- package/.storybook/preview.js +21 -1
- package/.storybook/public/pc_logo.png +0 -0
- package/README.md +2 -2
- package/dist/cjs/Theme/Theme.d.ts +45 -0
- package/dist/cjs/Theme/Theme.js +49 -0
- package/dist/cjs/Theme/Theme.js.map +1 -0
- package/dist/cjs/components/Aligment/Aligment.stories.d.ts +7 -0
- package/dist/cjs/components/Aligment/Aligment.stories.js +110 -0
- package/dist/cjs/components/Aligment/Aligment.stories.js.map +1 -0
- package/dist/cjs/components/Aligment/Aligment.styles.d.ts +11 -0
- package/dist/cjs/components/Aligment/Aligment.styles.js +19 -0
- package/dist/cjs/components/Aligment/Aligment.styles.js.map +1 -0
- package/dist/cjs/components/Aligment/index.d.ts +1 -0
- package/dist/cjs/components/Aligment/index.js +6 -0
- package/dist/cjs/components/Aligment/index.js.map +1 -0
- package/dist/cjs/components/Button/Button.d.ts +10 -0
- package/dist/cjs/components/Button/Button.js +13 -0
- package/dist/cjs/components/Button/Button.js.map +1 -0
- package/dist/cjs/components/Button/Button.stories.d.ts +7 -0
- package/dist/cjs/components/Button/Button.stories.js +51 -0
- package/dist/cjs/components/Button/Button.stories.js.map +1 -0
- package/dist/cjs/components/Button/Button.styles.d.ts +8 -0
- package/dist/cjs/components/Button/Button.styles.js +66 -0
- package/dist/cjs/components/Button/Button.styles.js.map +1 -0
- package/dist/cjs/components/Button/index.d.ts +1 -0
- package/dist/cjs/components/Button/index.js +6 -0
- package/dist/cjs/components/Button/index.js.map +1 -0
- package/dist/cjs/components/Icons/Icon.d.ts +9 -0
- package/dist/cjs/components/Icons/Icon.js +17 -0
- package/dist/cjs/components/Icons/Icon.js.map +1 -0
- package/dist/cjs/components/Icons/Icon.stories.d.ts +9 -0
- package/dist/cjs/components/Icons/Icon.stories.js +60 -0
- package/dist/cjs/components/Icons/Icon.stories.js.map +1 -0
- package/dist/cjs/components/Icons/Icon.styles.d.ts +6 -0
- package/dist/cjs/components/Icons/Icon.styles.js +29 -0
- package/dist/cjs/components/Icons/Icon.styles.js.map +1 -0
- package/dist/cjs/components/Icons/IconsPath.d.ts +11 -0
- package/dist/cjs/components/Icons/IconsPath.js +15 -0
- package/dist/cjs/components/Icons/IconsPath.js.map +1 -0
- package/dist/cjs/components/Icons/index.d.ts +1 -0
- package/dist/cjs/components/Icons/index.js +6 -0
- package/dist/cjs/components/Icons/index.js.map +1 -0
- package/dist/cjs/components/InputText/InputText.d.ts +11 -0
- package/dist/cjs/components/InputText/InputText.js +13 -0
- package/dist/cjs/components/InputText/InputText.js.map +1 -0
- package/dist/cjs/components/InputText/InputText.stories.d.ts +5 -0
- package/dist/cjs/components/InputText/InputText.stories.js +18 -0
- package/dist/cjs/components/InputText/InputText.stories.js.map +1 -0
- package/dist/cjs/components/InputText/InputText.styles.d.ts +1 -0
- package/dist/cjs/components/InputText/InputText.styles.js +25 -0
- package/dist/cjs/components/InputText/InputText.styles.js.map +1 -0
- package/dist/cjs/components/InputText/index.d.ts +1 -0
- package/dist/cjs/components/InputText/index.js +6 -0
- package/dist/cjs/components/InputText/index.js.map +1 -0
- package/dist/cjs/components/Modal/Modal.d.ts +11 -0
- package/dist/cjs/components/Modal/Modal.js +30 -0
- package/dist/cjs/components/Modal/Modal.js.map +1 -0
- package/dist/cjs/components/Modal/Modal.stories.d.ts +8 -0
- package/dist/cjs/components/Modal/Modal.stories.js +83 -0
- package/dist/cjs/components/Modal/Modal.stories.js.map +1 -0
- package/dist/cjs/components/Modal/Modal.styles.d.ts +6 -0
- package/dist/cjs/components/Modal/Modal.styles.js +40 -0
- package/dist/cjs/components/Modal/Modal.styles.js.map +1 -0
- package/dist/cjs/components/Modal/index.d.ts +1 -0
- package/dist/cjs/components/Modal/index.js +6 -0
- package/dist/cjs/components/Modal/index.js.map +1 -0
- package/dist/cjs/components/Typography/Typography.styles.d.ts +5 -0
- package/dist/cjs/components/Typography/Typography.styles.js +34 -0
- package/dist/cjs/components/Typography/Typography.styles.js.map +1 -0
- package/dist/cjs/components/Typography/index.d.ts +1 -0
- package/dist/cjs/components/Typography/index.js +9 -0
- package/dist/cjs/components/Typography/index.js.map +1 -0
- package/dist/cjs/components/common/commonComponents.d.ts +2 -0
- package/dist/cjs/components/common/commonComponents.js +18 -0
- package/dist/cjs/components/common/commonComponents.js.map +1 -0
- package/dist/cjs/components/common/index.d.ts +1 -0
- package/dist/cjs/components/common/index.js +18 -0
- package/dist/cjs/components/common/index.js.map +1 -0
- package/dist/cjs/example/ExampleComponent.d.ts +16 -0
- package/dist/cjs/example/ExampleComponent.js +39 -0
- package/dist/cjs/example/ExampleComponent.js.map +1 -0
- package/dist/cjs/example/index.d.ts +1 -0
- package/dist/cjs/example/index.js +18 -0
- package/dist/cjs/example/index.js.map +1 -0
- package/dist/cjs/index.d.ts +5 -0
- package/dist/cjs/index.js +26 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/esm/Theme/Theme.d.ts +45 -0
- package/dist/esm/Theme/Theme.js +46 -0
- package/dist/esm/Theme/Theme.js.map +1 -0
- package/dist/esm/components/Aligment/Aligment.stories.d.ts +7 -0
- package/dist/esm/components/Aligment/Aligment.stories.js +104 -0
- package/dist/esm/components/Aligment/Aligment.stories.js.map +1 -0
- package/dist/esm/components/Aligment/Aligment.styles.d.ts +11 -0
- package/dist/esm/components/Aligment/Aligment.styles.js +13 -0
- package/dist/esm/components/Aligment/Aligment.styles.js.map +1 -0
- package/dist/esm/components/Aligment/index.d.ts +1 -0
- package/dist/esm/components/Aligment/index.js +2 -0
- package/dist/esm/components/Aligment/index.js.map +1 -0
- package/dist/esm/components/Button/Button.d.ts +10 -0
- package/dist/esm/components/Button/Button.js +6 -0
- package/dist/esm/components/Button/Button.js.map +1 -0
- package/dist/esm/components/Button/Button.stories.d.ts +7 -0
- package/dist/esm/components/Button/Button.stories.js +45 -0
- package/dist/esm/components/Button/Button.stories.js.map +1 -0
- package/dist/esm/components/Button/Button.styles.d.ts +8 -0
- package/dist/esm/components/Button/Button.styles.js +60 -0
- package/dist/esm/components/Button/Button.styles.js.map +1 -0
- package/dist/esm/components/Button/index.d.ts +1 -0
- package/dist/esm/components/Button/index.js +2 -0
- package/dist/esm/components/Button/index.js.map +1 -0
- package/dist/esm/components/Icons/Icon.d.ts +9 -0
- package/dist/esm/components/Icons/Icon.js +10 -0
- package/dist/esm/components/Icons/Icon.js.map +1 -0
- package/dist/esm/components/Icons/Icon.stories.d.ts +9 -0
- package/dist/esm/components/Icons/Icon.stories.js +54 -0
- package/dist/esm/components/Icons/Icon.stories.js.map +1 -0
- package/dist/esm/components/Icons/Icon.styles.d.ts +6 -0
- package/dist/esm/components/Icons/Icon.styles.js +23 -0
- package/dist/esm/components/Icons/Icon.styles.js.map +1 -0
- package/dist/esm/components/Icons/IconsPath.d.ts +11 -0
- package/dist/esm/components/Icons/IconsPath.js +12 -0
- package/dist/esm/components/Icons/IconsPath.js.map +1 -0
- package/dist/esm/components/Icons/index.d.ts +1 -0
- package/dist/esm/components/Icons/index.js +2 -0
- package/dist/esm/components/Icons/index.js.map +1 -0
- package/dist/esm/components/InputText/InputText.d.ts +11 -0
- package/dist/esm/components/InputText/InputText.js +6 -0
- package/dist/esm/components/InputText/InputText.js.map +1 -0
- package/dist/esm/components/InputText/InputText.stories.d.ts +5 -0
- package/dist/esm/components/InputText/InputText.stories.js +12 -0
- package/dist/esm/components/InputText/InputText.stories.js.map +1 -0
- package/dist/esm/components/InputText/InputText.styles.d.ts +1 -0
- package/dist/esm/components/InputText/InputText.styles.js +19 -0
- package/dist/esm/components/InputText/InputText.styles.js.map +1 -0
- package/dist/esm/components/InputText/index.d.ts +1 -0
- package/dist/esm/components/InputText/index.js +2 -0
- package/dist/esm/components/InputText/index.js.map +1 -0
- package/dist/esm/components/Modal/Modal.d.ts +11 -0
- package/dist/esm/components/Modal/Modal.js +23 -0
- package/dist/esm/components/Modal/Modal.js.map +1 -0
- package/dist/esm/components/Modal/Modal.stories.d.ts +8 -0
- package/dist/esm/components/Modal/Modal.stories.js +57 -0
- package/dist/esm/components/Modal/Modal.stories.js.map +1 -0
- package/dist/esm/components/Modal/Modal.styles.d.ts +6 -0
- package/dist/esm/components/Modal/Modal.styles.js +34 -0
- package/dist/esm/components/Modal/Modal.styles.js.map +1 -0
- package/dist/esm/components/Modal/index.d.ts +1 -0
- package/dist/esm/components/Modal/index.js +2 -0
- package/dist/esm/components/Modal/index.js.map +1 -0
- package/dist/esm/components/Typography/Typography.styles.d.ts +5 -0
- package/dist/esm/components/Typography/Typography.styles.js +28 -0
- package/dist/esm/components/Typography/Typography.styles.js.map +1 -0
- package/dist/esm/components/Typography/index.d.ts +1 -0
- package/dist/esm/components/Typography/index.js +2 -0
- package/dist/esm/components/Typography/index.js.map +1 -0
- package/dist/esm/components/common/commonComponents.d.ts +2 -0
- package/dist/esm/components/common/commonComponents.js +12 -0
- package/dist/esm/components/common/commonComponents.js.map +1 -0
- package/dist/esm/components/common/index.d.ts +1 -0
- package/dist/esm/components/common/index.js +2 -0
- package/dist/esm/components/common/index.js.map +1 -0
- package/dist/esm/example/ExampleComponent.d.ts +16 -0
- package/dist/esm/example/ExampleComponent.js +33 -0
- package/dist/esm/example/ExampleComponent.js.map +1 -0
- package/dist/esm/example/index.d.ts +1 -0
- package/dist/esm/example/index.js +2 -0
- package/dist/esm/example/index.js.map +1 -0
- package/dist/esm/index.d.ts +5 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -0
- package/package.json +17 -2
- package/src/Theme/Theme.ts +47 -0
- package/src/components/Aligment/Aligment.stories.tsx +126 -0
- package/src/components/Aligment/Aligment.styles.ts +23 -0
- package/src/components/Aligment/index.ts +1 -0
- package/src/components/Button/Button.stories.tsx +53 -0
- package/src/components/Button/Button.styles.tsx +76 -0
- package/src/components/Button/Button.tsx +31 -0
- package/src/components/Button/index.ts +1 -0
- package/src/components/Icons/Icon.stories.tsx +62 -0
- package/src/components/Icons/Icon.styles.ts +29 -0
- package/src/components/Icons/Icon.tsx +35 -0
- package/src/components/Icons/Icons.stories.mdx +38 -0
- package/src/components/Icons/IconsPath.ts +13 -0
- package/src/components/Icons/index.ts +1 -0
- package/src/components/InputText/InputText.stories.tsx +18 -0
- package/src/components/InputText/InputText.styles.ts +19 -0
- package/src/components/InputText/InputText.tsx +24 -0
- package/src/components/InputText/index.ts +1 -0
- package/src/components/Modal/Modal.stories.tsx +183 -0
- package/src/components/Modal/Modal.styles.ts +38 -0
- package/src/components/Modal/Modal.tsx +63 -0
- package/src/components/Modal/index.ts +1 -0
- package/src/components/Typography/Typography.stories.mdx +35 -0
- package/src/components/Typography/Typography.styles.tsx +31 -0
- package/src/components/Typography/index.ts +1 -0
- package/src/components/common/commonComponents.tsx +13 -0
- package/src/components/common/index.ts +1 -0
- package/src/example/ExampleComponent.tsx +44 -0
- package/src/example/index.ts +1 -0
- package/src/index.ts +5 -0
- package/tsconfig.json +18 -18
- package/stories/Button.stories.tsx +0 -41
- package/stories/Button.tsx +0 -48
- package/stories/Header.stories.tsx +0 -25
- package/stories/Header.tsx +0 -56
- package/stories/Introduction.stories.mdx +0 -211
- package/stories/Page.stories.tsx +0 -26
- package/stories/Page.tsx +0 -73
- package/stories/assets/code-brackets.svg +0 -1
- package/stories/assets/colors.svg +0 -1
- package/stories/assets/comments.svg +0 -1
- package/stories/assets/direction.svg +0 -1
- package/stories/assets/flow.svg +0 -1
- package/stories/assets/plugin.svg +0 -1
- package/stories/assets/repo.svg +0 -1
- package/stories/assets/stackalt.svg +0 -1
- package/stories/button.css +0 -30
- package/stories/header.css +0 -32
- 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,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 @@
|
|
|
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,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,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 @@
|
|
|
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,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"}
|