venice-ui 1.0.1 → 1.0.3
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/dist/cjs/index.d.ts +4 -3
- package/dist/cjs/index.js +4 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +4 -3
- package/dist/esm/index.js +4 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/.circleci/config.yml +0 -36
- package/.eslintrc.json +0 -24
- package/.prettierignore +0 -10
- package/.prettierrc +0 -5
- package/.storybook/PCTheme.js +0 -10
- package/.storybook/main.js +0 -13
- package/.storybook/manager.js +0 -17
- package/.storybook/preview-head.html +0 -18
- package/.storybook/preview.js +0 -29
- package/.storybook/public/pc_logo.png +0 -0
- package/dist/cjs/components/Aligment/Aligment.stories.d.ts +0 -7
- package/dist/cjs/components/Aligment/Aligment.stories.js +0 -110
- package/dist/cjs/components/Aligment/Aligment.stories.js.map +0 -1
- package/dist/cjs/components/Button/Button.stories.d.ts +0 -7
- package/dist/cjs/components/Button/Button.stories.js +0 -51
- package/dist/cjs/components/Button/Button.stories.js.map +0 -1
- package/dist/cjs/components/Icons/Icon.stories.d.ts +0 -9
- package/dist/cjs/components/Icons/Icon.stories.js +0 -60
- package/dist/cjs/components/Icons/Icon.stories.js.map +0 -1
- package/dist/cjs/components/InputText/InputText.stories.d.ts +0 -5
- package/dist/cjs/components/InputText/InputText.stories.js +0 -18
- package/dist/cjs/components/InputText/InputText.stories.js.map +0 -1
- package/dist/cjs/components/Modal/Modal.stories.d.ts +0 -8
- package/dist/cjs/components/Modal/Modal.stories.js +0 -83
- package/dist/cjs/components/Modal/Modal.stories.js.map +0 -1
- package/dist/esm/components/Aligment/Aligment.stories.d.ts +0 -7
- package/dist/esm/components/Aligment/Aligment.stories.js +0 -104
- package/dist/esm/components/Aligment/Aligment.stories.js.map +0 -1
- package/dist/esm/components/Button/Button.stories.d.ts +0 -7
- package/dist/esm/components/Button/Button.stories.js +0 -45
- package/dist/esm/components/Button/Button.stories.js.map +0 -1
- package/dist/esm/components/Icons/Icon.stories.d.ts +0 -9
- package/dist/esm/components/Icons/Icon.stories.js +0 -54
- package/dist/esm/components/Icons/Icon.stories.js.map +0 -1
- package/dist/esm/components/InputText/InputText.stories.d.ts +0 -5
- package/dist/esm/components/InputText/InputText.stories.js +0 -12
- package/dist/esm/components/InputText/InputText.stories.js.map +0 -1
- package/dist/esm/components/Modal/Modal.stories.d.ts +0 -8
- package/dist/esm/components/Modal/Modal.stories.js +0 -57
- package/dist/esm/components/Modal/Modal.stories.js.map +0 -1
- package/src/Theme/Theme.ts +0 -47
- package/src/components/Aligment/Aligment.stories.tsx +0 -126
- package/src/components/Aligment/Aligment.styles.ts +0 -23
- package/src/components/Aligment/index.ts +0 -1
- package/src/components/Button/Button.stories.tsx +0 -53
- package/src/components/Button/Button.styles.tsx +0 -76
- package/src/components/Button/Button.tsx +0 -31
- package/src/components/Button/index.ts +0 -1
- package/src/components/Icons/Icon.stories.tsx +0 -62
- package/src/components/Icons/Icon.styles.ts +0 -29
- package/src/components/Icons/Icon.tsx +0 -35
- package/src/components/Icons/Icons.stories.mdx +0 -38
- package/src/components/Icons/IconsPath.ts +0 -13
- package/src/components/Icons/index.ts +0 -1
- package/src/components/InputText/InputText.stories.tsx +0 -18
- package/src/components/InputText/InputText.styles.ts +0 -19
- package/src/components/InputText/InputText.tsx +0 -24
- package/src/components/InputText/index.ts +0 -1
- package/src/components/Modal/Modal.stories.tsx +0 -183
- package/src/components/Modal/Modal.styles.ts +0 -38
- package/src/components/Modal/Modal.tsx +0 -63
- package/src/components/Modal/index.ts +0 -1
- package/src/components/Typography/Typography.stories.mdx +0 -35
- package/src/components/Typography/Typography.styles.tsx +0 -31
- package/src/components/Typography/index.ts +0 -1
- package/src/components/common/commonComponents.tsx +0 -13
- package/src/components/common/index.ts +0 -1
- package/src/example/ExampleComponent.tsx +0 -44
- package/src/example/index.ts +0 -1
- package/src/index.ts +0 -5
- package/tsconfig.json +0 -19
|
@@ -1,83 +0,0 @@
|
|
|
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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.LongText = exports.OneAction = exports.Size = exports.Default = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const Typography_1 = require("../Typography");
|
|
29
|
-
const Modal_1 = require("./Modal");
|
|
30
|
-
const Button_1 = require("../Button");
|
|
31
|
-
exports.default = {
|
|
32
|
-
title: 'Elements/Modal',
|
|
33
|
-
component: Modal_1.Modal,
|
|
34
|
-
argTypes: {
|
|
35
|
-
title: { control: 'text' },
|
|
36
|
-
labelClose: { control: 'text' },
|
|
37
|
-
size: {
|
|
38
|
-
options: ['small', 'medium', 'large'],
|
|
39
|
-
control: 'select',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
const Template = (args) => {
|
|
44
|
-
const [modal, toogleModal] = (0, react_1.useState)(false);
|
|
45
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
46
|
-
react_1.default.createElement(Button_1.Button, { text: "Show Modal", onClick: () => toogleModal(true) }),
|
|
47
|
-
modal && (react_1.default.createElement(Modal_1.Modal, Object.assign({}, args, { handleClose: () => toogleModal(false), handleConfirm: () => toogleModal(false) }),
|
|
48
|
-
react_1.default.createElement(Typography_1.Text, null, "One ring to rule them all, one ring to find them")))));
|
|
49
|
-
};
|
|
50
|
-
exports.Default = Template.bind({});
|
|
51
|
-
exports.Default.args = {
|
|
52
|
-
title: 'Modal Title',
|
|
53
|
-
labelClose: 'Cancel',
|
|
54
|
-
labelConfirm: 'Save',
|
|
55
|
-
size: 'small',
|
|
56
|
-
};
|
|
57
|
-
exports.Size = Template.bind({});
|
|
58
|
-
exports.Size.args = {
|
|
59
|
-
title: 'Modal Title',
|
|
60
|
-
labelClose: 'Cancel',
|
|
61
|
-
labelConfirm: 'Save',
|
|
62
|
-
size: 'medium',
|
|
63
|
-
};
|
|
64
|
-
exports.OneAction = Template.bind({});
|
|
65
|
-
exports.OneAction.args = {
|
|
66
|
-
title: 'Modal Title',
|
|
67
|
-
labelClose: 'OK',
|
|
68
|
-
size: 'medium',
|
|
69
|
-
};
|
|
70
|
-
const LongTemplate = (args) => {
|
|
71
|
-
const [modal, toogleModal] = (0, react_1.useState)(false);
|
|
72
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
73
|
-
react_1.default.createElement(Button_1.Button, { text: "Show Modal", onClick: () => toogleModal(true) }),
|
|
74
|
-
modal && (react_1.default.createElement(Modal_1.Modal, Object.assign({}, args, { handleClose: () => toogleModal(false), handleConfirm: () => toogleModal(false) }),
|
|
75
|
-
react_1.default.createElement(Typography_1.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at ultricies nulla. Aliquam suscipit, ante sollicitudin egestas lacinia, odio ex mattis arcu, vitae molestie neque nunc a eros. Morbi dictum nisl placerat quam fermentum mollis. Etiam efficitur, metus nec tincidunt tempus, magna enim interdum lacus, eu lacinia lorem quam eu est. Vestibulum sapien lorem, tempor nec ultricies sit amet, tristique sed tellus. Proin felis dui, porta ut placerat vel, gravida eget ipsum. Etiam neque elit, sodales nec erat pretium, auctor volutpat sem. Aliquam imperdiet venenatis magna. Cras metus ligula, suscipit ac quam sit amet, porttitor feugiat nibh. Aenean eu libero convallis, fermentum eros sit amet, pellentesque ligula. Fusce scelerisque justo sit amet nunc sollicitudin, vel varius odio aliquam. Quisque euismod scelerisque urna at maximus. Aenean elementum venenatis tellus, id posuere arcu pharetra nec. Proin posuere mi id gravida maximus. Cras interdum, risus at tincidunt convallis, felis dolor congue urna, vitae accumsan magna enim ut elit. Ut dapibus enim ipsum, imperdiet ultrices arcu tempor quis. Praesent eget facilisis dolor. Vestibulum ante mi, blandit at sodales a, tristique sed odio. Pellentesque nec rhoncus sapien. Quisque nec malesuada nisl. In facilisis felis ut velit ullamcorper, a posuere odio interdum. Curabitur porttitor nunc nec mauris suscipit, ac semper diam accumsan. Curabitur rhoncus varius dolor id vulputate. Fusce sagittis urna et sapien suscipit porttitor. Maecenas eget facilisis velit. In molestie, ligula nec pellentesque rhoncus, sem libero dictum sem, in luctus massa est eget velit. Ut aliquet velit velit, ut feugiat tellus ultrices vel. Quisque est lacus, egestas feugiat lectus at, dignissim rhoncus nulla. Integer quis orci sagittis erat aliquet porta quis id felis. Cras sapien eros, vestibulum sed dui eu, commodo scelerisque nisi. Sed vel augue arcu. Ut consequat pellentesque neque, consequat vestibulum urna pulvinar sed. Sed pulvinar, metus a porttitor commodo, felis leo dictum ante, in congue elit ante et justo. Nulla rhoncus dui eget facilisis interdum. Nam pretium pellentesque aliquam. In euismod dapibus rhoncus. Quisque purus diam, fringilla ac malesuada at, euismod et dui. Nulla gravida libero molestie lacus feugiat, at laoreet diam auctor. Nullam at sapien molestie, aliquam massa eget, dapibus ipsum. Aliquam erat volutpat. Sed hendrerit convallis fringilla. Mauris feugiat metus in sem vestibulum tempor. Cras vitae faucibus enim, nec blandit ante. Aenean pharetra felis et aliquam sodales. Integer at urna dictum, laoreet diam et, faucibus mi. Phasellus eleifend aliquam dui, ut fermentum mauris. Aenean porta risus vitae odio mollis pretium. Nam consequat lectus id dui consequat ultricies. Pellentesque non diam a sem viverra pulvinar. Ut maximus molestie risus, sed lacinia mauris blandit ultrices. Suspendisse ac nisi ut nibh consequat faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor interdum mollis. Phasellus vitae molestie nibh. Vivamus in dignissim lacus. Vivamus vel dui ac lacus porta sodales. Ut malesuada placerat ex ut pretium. Fusce in volutpat ipsum, sed ornare lacus. In erat arcu, sagittis vitae turpis in, blandit suscipit odio. Cras sed arcu cursus, facilisis orci nec, egestas mauris. Donec ut mollis dolor. Nulla ac laoreet lacus, mattis hendrerit ligula. Sed bibendum elit id nisi luctus, eget volutpat ipsum egestas. Aliquam dignissim, ante non cursus gravida, enim odio euismod ipsum, nec tempus quam nisl vitae justo. Integer fringilla sagittis porttitor. Donec ut vehicula dolor. Etiam nec tellus urna. Aliquam efficitur volutpat tortor eget varius. Maecenas at posuere augue. Nam ac rhoncus ipsum. Donec maximus pharetra elit sit amet auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nisi enim, efficitur id purus at, auctor sollicitudin nisl. Aliquam eu fermentum ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus varius lacinia orci sit amet rutrum. Etiam lacinia justo non ultricies fermentum. Praesent tellus orci, rutrum at iaculis hendrerit, gravida id urna. Ut massa sem, lobortis non massa eu, sodales mattis ante. Proin in quam non purus placerat ornare. Duis iaculis ipsum odio. Nam commodo facilisis massa ut rutrum. Duis porta rhoncus urna sit amet bibendum. Duis ornare dignissim turpis ac suscipit. Vivamus faucibus risus et enim accumsan vehicula. Aenean ut ultrices risus, quis vehicula nibh. Vestibulum accumsan tempor lectus, eu luctus massa volutpat vitae. Pellentesque dictum vulputate augue, id venenatis justo tempus id. Aenean non nibh eu elit sagittis ultrices. Pellentesque nibh nisi, sollicitudin et varius in, aliquam in sem. In ultrices sem odio, et laoreet risus aliquam ut. Donec nec odio egestas, mattis ante eu, dictum sapien. Phasellus sed vulputate mauris. Vestibulum vel imperdiet nisl, ac malesuada sapien. Phasellus urna arcu, fringilla id lectus id, tristique elementum sapien. Nunc pharetra massa vitae placerat convallis. Morbi euismod arcu sem, a euismod est iaculis sed. Ut at ipsum a ipsum aliquam feugiat eleifend sed lacus. Aenean nec tortor ante. Morbi eu ante eget tortor tincidunt efficitur. Vivamus et ultricies enim. Proin a magna eget justo ultrices consectetur vel id est. Proin quis sem quis sapien malesuada finibus. Pellentesque vel ex augue. Sed ullamcorper tellus id nulla viverra, pharetra tincidunt ante tincidunt. Sed sagittis mauris id felis convallis pulvinar. Aliquam erat volutpat. Maecenas rutrum est sed orci egestas, non dictum purus pharetra. Proin non enim dictum, condimentum metus eget, lacinia purus. In a lacus ante. Nam vel auctor libero, et venenatis urna. Nunc euismod, tortor ac vestibulum consequat, diam orci finibus eros, eu lacinia ex enim sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tincidunt id nunc ut facilisis. Phasellus iaculis mauris nisi, ac ullamcorper eros lacinia sit amet. Donec ultricies semper nisi, ut vehicula risus euismod at. Praesent non mauris eros. Nam aliquam tellus eget neque aliquam, sit amet accumsan tellus luctus. Morbi id ultrices nisl. Ut euismod pulvinar augue in posuere. Vivamus in risus iaculis quam hendrerit ornare sit amet eu enim. Ut id leo urna.")))));
|
|
76
|
-
};
|
|
77
|
-
exports.LongText = LongTemplate.bind({});
|
|
78
|
-
exports.LongText.args = {
|
|
79
|
-
title: 'Lorer long text',
|
|
80
|
-
labelClose: 'Go to caffee',
|
|
81
|
-
size: 'small',
|
|
82
|
-
};
|
|
83
|
-
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,8CAAoC;AAEpC,mCAA+B;AAC/B,sCAAkC;AAElC,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,QAAQ;SAClB;KACF;CAC6B,CAAA;AAEhC,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE;IACtD,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,CACL;QACE,8BAAC,eAAM,IAAC,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAI;QAC7D,KAAK,IAAI,CACR,8BAAC,aAAK,oBACA,IAAI,IACR,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;YAEvC,8BAAC,iBAAI,2DAAwD,CACvD,CACT,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,OAAO;CACd,CAAA;AAEY,QAAA,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,YAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,QAAQ;CACf,CAAA;AAEY,QAAA,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,iBAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,MAAM,YAAY,GAAiC,CAAC,IAAI,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,CACL;QACE,8BAAC,eAAM,IAAC,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAI;QAC7D,KAAK,IAAI,CACR,8BAAC,aAAK,oBACA,IAAI,IACR,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;YAEvC,8BAAC,iBAAI,iuMAkGE,CACD,CACT,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAEY,QAAA,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC7C,gBAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE,cAAc;IAC1B,IAAI,EAAE,OAAO;CACd,CAAA"}
|
|
@@ -1,7 +0,0 @@
|
|
|
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>>;
|
|
@@ -1,104 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Aligment.stories.js","sourceRoot":"","sources":["../../../../src/components/Aligment/Aligment.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
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>>;
|
|
@@ -1,45 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<React.FC<import("./Icon").IIconActionProps>>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Default: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
|
|
6
|
-
export declare const Size: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
|
|
7
|
-
export declare const Color: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
|
|
8
|
-
export declare const ActionDefault: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
|
|
9
|
-
export declare const ActionColor: ComponentStory<React.FC<import("./Icon").IIconActionProps>>;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Icon } from './Icon';
|
|
3
|
-
import { Theme } from '../../Theme/Theme';
|
|
4
|
-
import { Aligment } from '../Aligment';
|
|
5
|
-
export default {
|
|
6
|
-
title: 'Elements/Icon',
|
|
7
|
-
component: Icon,
|
|
8
|
-
argTypes: {
|
|
9
|
-
name: {
|
|
10
|
-
options: ['person', 'menu', 'remove', 'add', 'close'],
|
|
11
|
-
control: 'select',
|
|
12
|
-
},
|
|
13
|
-
size: { control: 'number' },
|
|
14
|
-
color: { control: { type: 'color' } },
|
|
15
|
-
bgColor: { control: 'boolean' },
|
|
16
|
-
},
|
|
17
|
-
args: {
|
|
18
|
-
onClick: undefined
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
const Template = (args) => (React.createElement(Icon, Object.assign({}, args)));
|
|
22
|
-
export const Default = Template.bind({});
|
|
23
|
-
Default.args = {
|
|
24
|
-
name: 'person',
|
|
25
|
-
size: 48
|
|
26
|
-
};
|
|
27
|
-
export const Size = Template.bind({});
|
|
28
|
-
Size.args = {
|
|
29
|
-
name: 'person',
|
|
30
|
-
size: 24
|
|
31
|
-
};
|
|
32
|
-
export const Color = Template.bind({});
|
|
33
|
-
Color.args = {
|
|
34
|
-
name: 'person',
|
|
35
|
-
size: 48,
|
|
36
|
-
color: Theme.colors.primary
|
|
37
|
-
};
|
|
38
|
-
export const ActionDefault = Template.bind({});
|
|
39
|
-
ActionDefault.args = {
|
|
40
|
-
name: 'person',
|
|
41
|
-
size: 48,
|
|
42
|
-
onClick: () => console.log('click')
|
|
43
|
-
};
|
|
44
|
-
const DarkTemplate = (args) => (React.createElement(Aligment, { backgroundColor: Theme.colors.black },
|
|
45
|
-
React.createElement(Icon, Object.assign({}, args))));
|
|
46
|
-
export const ActionColor = DarkTemplate.bind({});
|
|
47
|
-
ActionColor.args = {
|
|
48
|
-
name: 'person',
|
|
49
|
-
size: 48,
|
|
50
|
-
bgColor: true,
|
|
51
|
-
color: Theme.colors.white,
|
|
52
|
-
onClick: () => console.log('click')
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=Icon.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,eAAe;IACb,KAAK,EAAE,eAAe;IAEtB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;YACrD,OAAO,EAAE,QAAQ;SAClB;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;QACrC,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;KACnB;CAC4B,CAAA;AAE/B,MAAM,QAAQ,GAAgC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,oBAAK,IAAI,EAAG,CAClB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAE;IACZ,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;CACT,CAAA;AACD,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,IAAI,CAAC,IAAI,GAAE;IACT,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;CACT,CAAA;AACD,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACtC,KAAK,CAAC,IAAI,GAAE;IACV,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;CAC5B,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAE;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,GAAE,EAAE,CAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;CAClC,CAAA;AACD,MAAM,YAAY,GAAgC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1D,oBAAC,QAAQ,IAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;IAAE,oBAAC,IAAI,oBAAK,IAAI,EAAG,CAAW,CAC5E,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,WAAW,CAAC,IAAI,GAAE;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,IAAI;IACb,KAAK,EAAC,KAAK,CAAC,MAAM,CAAC,KAAK;IACxB,OAAO,EAAE,GAAE,EAAE,CAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;CAClC,CAAA"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
|
3
|
-
declare const _default: ComponentMeta<React.FC<import("./InputText").IInputTextProps>>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Primary: ComponentStory<React.FC<import("./InputText").IInputTextProps>>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { InputText } from "./InputText";
|
|
3
|
-
export default {
|
|
4
|
-
title: "Form/InputText",
|
|
5
|
-
component: InputText,
|
|
6
|
-
args: {
|
|
7
|
-
type: "text",
|
|
8
|
-
},
|
|
9
|
-
};
|
|
10
|
-
const Template = (args) => (React.createElement(InputText, Object.assign({}, args)));
|
|
11
|
-
export const Primary = Template.bind({});
|
|
12
|
-
//# sourceMappingURL=InputText.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.stories.js","sourceRoot":"","sources":["../../../../src/components/InputText/InputText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;KACb;CACiC,CAAC;AAErC,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3D,oBAAC,SAAS,oBAAK,IAAI,EAAI,CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<React.FC<import("./Modal").IModalProps>>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Default: ComponentStory<React.FC<import("./Modal").IModalProps>>;
|
|
6
|
-
export declare const Size: ComponentStory<React.FC<import("./Modal").IModalProps>>;
|
|
7
|
-
export declare const OneAction: ComponentStory<React.FC<import("./Modal").IModalProps>>;
|
|
8
|
-
export declare const LongText: ComponentStory<React.FC<import("./Modal").IModalProps>>;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { Text } from '../Typography';
|
|
3
|
-
import { Modal } from './Modal';
|
|
4
|
-
import { Button } from '../Button';
|
|
5
|
-
export default {
|
|
6
|
-
title: 'Elements/Modal',
|
|
7
|
-
component: Modal,
|
|
8
|
-
argTypes: {
|
|
9
|
-
title: { control: 'text' },
|
|
10
|
-
labelClose: { control: 'text' },
|
|
11
|
-
size: {
|
|
12
|
-
options: ['small', 'medium', 'large'],
|
|
13
|
-
control: 'select',
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
const Template = (args) => {
|
|
18
|
-
const [modal, toogleModal] = useState(false);
|
|
19
|
-
return (React.createElement(React.Fragment, null,
|
|
20
|
-
React.createElement(Button, { text: "Show Modal", onClick: () => toogleModal(true) }),
|
|
21
|
-
modal && (React.createElement(Modal, Object.assign({}, args, { handleClose: () => toogleModal(false), handleConfirm: () => toogleModal(false) }),
|
|
22
|
-
React.createElement(Text, null, "One ring to rule them all, one ring to find them")))));
|
|
23
|
-
};
|
|
24
|
-
export const Default = Template.bind({});
|
|
25
|
-
Default.args = {
|
|
26
|
-
title: 'Modal Title',
|
|
27
|
-
labelClose: 'Cancel',
|
|
28
|
-
labelConfirm: 'Save',
|
|
29
|
-
size: 'small',
|
|
30
|
-
};
|
|
31
|
-
export const Size = Template.bind({});
|
|
32
|
-
Size.args = {
|
|
33
|
-
title: 'Modal Title',
|
|
34
|
-
labelClose: 'Cancel',
|
|
35
|
-
labelConfirm: 'Save',
|
|
36
|
-
size: 'medium',
|
|
37
|
-
};
|
|
38
|
-
export const OneAction = Template.bind({});
|
|
39
|
-
OneAction.args = {
|
|
40
|
-
title: 'Modal Title',
|
|
41
|
-
labelClose: 'OK',
|
|
42
|
-
size: 'medium',
|
|
43
|
-
};
|
|
44
|
-
const LongTemplate = (args) => {
|
|
45
|
-
const [modal, toogleModal] = useState(false);
|
|
46
|
-
return (React.createElement(React.Fragment, null,
|
|
47
|
-
React.createElement(Button, { text: "Show Modal", onClick: () => toogleModal(true) }),
|
|
48
|
-
modal && (React.createElement(Modal, Object.assign({}, args, { handleClose: () => toogleModal(false), handleConfirm: () => toogleModal(false) }),
|
|
49
|
-
React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at ultricies nulla. Aliquam suscipit, ante sollicitudin egestas lacinia, odio ex mattis arcu, vitae molestie neque nunc a eros. Morbi dictum nisl placerat quam fermentum mollis. Etiam efficitur, metus nec tincidunt tempus, magna enim interdum lacus, eu lacinia lorem quam eu est. Vestibulum sapien lorem, tempor nec ultricies sit amet, tristique sed tellus. Proin felis dui, porta ut placerat vel, gravida eget ipsum. Etiam neque elit, sodales nec erat pretium, auctor volutpat sem. Aliquam imperdiet venenatis magna. Cras metus ligula, suscipit ac quam sit amet, porttitor feugiat nibh. Aenean eu libero convallis, fermentum eros sit amet, pellentesque ligula. Fusce scelerisque justo sit amet nunc sollicitudin, vel varius odio aliquam. Quisque euismod scelerisque urna at maximus. Aenean elementum venenatis tellus, id posuere arcu pharetra nec. Proin posuere mi id gravida maximus. Cras interdum, risus at tincidunt convallis, felis dolor congue urna, vitae accumsan magna enim ut elit. Ut dapibus enim ipsum, imperdiet ultrices arcu tempor quis. Praesent eget facilisis dolor. Vestibulum ante mi, blandit at sodales a, tristique sed odio. Pellentesque nec rhoncus sapien. Quisque nec malesuada nisl. In facilisis felis ut velit ullamcorper, a posuere odio interdum. Curabitur porttitor nunc nec mauris suscipit, ac semper diam accumsan. Curabitur rhoncus varius dolor id vulputate. Fusce sagittis urna et sapien suscipit porttitor. Maecenas eget facilisis velit. In molestie, ligula nec pellentesque rhoncus, sem libero dictum sem, in luctus massa est eget velit. Ut aliquet velit velit, ut feugiat tellus ultrices vel. Quisque est lacus, egestas feugiat lectus at, dignissim rhoncus nulla. Integer quis orci sagittis erat aliquet porta quis id felis. Cras sapien eros, vestibulum sed dui eu, commodo scelerisque nisi. Sed vel augue arcu. Ut consequat pellentesque neque, consequat vestibulum urna pulvinar sed. Sed pulvinar, metus a porttitor commodo, felis leo dictum ante, in congue elit ante et justo. Nulla rhoncus dui eget facilisis interdum. Nam pretium pellentesque aliquam. In euismod dapibus rhoncus. Quisque purus diam, fringilla ac malesuada at, euismod et dui. Nulla gravida libero molestie lacus feugiat, at laoreet diam auctor. Nullam at sapien molestie, aliquam massa eget, dapibus ipsum. Aliquam erat volutpat. Sed hendrerit convallis fringilla. Mauris feugiat metus in sem vestibulum tempor. Cras vitae faucibus enim, nec blandit ante. Aenean pharetra felis et aliquam sodales. Integer at urna dictum, laoreet diam et, faucibus mi. Phasellus eleifend aliquam dui, ut fermentum mauris. Aenean porta risus vitae odio mollis pretium. Nam consequat lectus id dui consequat ultricies. Pellentesque non diam a sem viverra pulvinar. Ut maximus molestie risus, sed lacinia mauris blandit ultrices. Suspendisse ac nisi ut nibh consequat faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor interdum mollis. Phasellus vitae molestie nibh. Vivamus in dignissim lacus. Vivamus vel dui ac lacus porta sodales. Ut malesuada placerat ex ut pretium. Fusce in volutpat ipsum, sed ornare lacus. In erat arcu, sagittis vitae turpis in, blandit suscipit odio. Cras sed arcu cursus, facilisis orci nec, egestas mauris. Donec ut mollis dolor. Nulla ac laoreet lacus, mattis hendrerit ligula. Sed bibendum elit id nisi luctus, eget volutpat ipsum egestas. Aliquam dignissim, ante non cursus gravida, enim odio euismod ipsum, nec tempus quam nisl vitae justo. Integer fringilla sagittis porttitor. Donec ut vehicula dolor. Etiam nec tellus urna. Aliquam efficitur volutpat tortor eget varius. Maecenas at posuere augue. Nam ac rhoncus ipsum. Donec maximus pharetra elit sit amet auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nisi enim, efficitur id purus at, auctor sollicitudin nisl. Aliquam eu fermentum ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus varius lacinia orci sit amet rutrum. Etiam lacinia justo non ultricies fermentum. Praesent tellus orci, rutrum at iaculis hendrerit, gravida id urna. Ut massa sem, lobortis non massa eu, sodales mattis ante. Proin in quam non purus placerat ornare. Duis iaculis ipsum odio. Nam commodo facilisis massa ut rutrum. Duis porta rhoncus urna sit amet bibendum. Duis ornare dignissim turpis ac suscipit. Vivamus faucibus risus et enim accumsan vehicula. Aenean ut ultrices risus, quis vehicula nibh. Vestibulum accumsan tempor lectus, eu luctus massa volutpat vitae. Pellentesque dictum vulputate augue, id venenatis justo tempus id. Aenean non nibh eu elit sagittis ultrices. Pellentesque nibh nisi, sollicitudin et varius in, aliquam in sem. In ultrices sem odio, et laoreet risus aliquam ut. Donec nec odio egestas, mattis ante eu, dictum sapien. Phasellus sed vulputate mauris. Vestibulum vel imperdiet nisl, ac malesuada sapien. Phasellus urna arcu, fringilla id lectus id, tristique elementum sapien. Nunc pharetra massa vitae placerat convallis. Morbi euismod arcu sem, a euismod est iaculis sed. Ut at ipsum a ipsum aliquam feugiat eleifend sed lacus. Aenean nec tortor ante. Morbi eu ante eget tortor tincidunt efficitur. Vivamus et ultricies enim. Proin a magna eget justo ultrices consectetur vel id est. Proin quis sem quis sapien malesuada finibus. Pellentesque vel ex augue. Sed ullamcorper tellus id nulla viverra, pharetra tincidunt ante tincidunt. Sed sagittis mauris id felis convallis pulvinar. Aliquam erat volutpat. Maecenas rutrum est sed orci egestas, non dictum purus pharetra. Proin non enim dictum, condimentum metus eget, lacinia purus. In a lacus ante. Nam vel auctor libero, et venenatis urna. Nunc euismod, tortor ac vestibulum consequat, diam orci finibus eros, eu lacinia ex enim sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tincidunt id nunc ut facilisis. Phasellus iaculis mauris nisi, ac ullamcorper eros lacinia sit amet. Donec ultricies semper nisi, ut vehicula risus euismod at. Praesent non mauris eros. Nam aliquam tellus eget neque aliquam, sit amet accumsan tellus luctus. Morbi id ultrices nisl. Ut euismod pulvinar augue in posuere. Vivamus in risus iaculis quam hendrerit ornare sit amet eu enim. Ut id leo urna.")))));
|
|
50
|
-
};
|
|
51
|
-
export const LongText = LongTemplate.bind({});
|
|
52
|
-
LongText.args = {
|
|
53
|
-
title: 'Lorer long text',
|
|
54
|
-
labelClose: 'Go to caffee',
|
|
55
|
-
size: 'small',
|
|
56
|
-
};
|
|
57
|
-
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,QAAQ;SAClB;KACF;CAC6B,CAAA;AAEhC,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE;IACtD,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,CACL;QACE,oBAAC,MAAM,IAAC,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAI;QAC7D,KAAK,IAAI,CACR,oBAAC,KAAK,oBACA,IAAI,IACR,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;YAEvC,oBAAC,IAAI,2DAAwD,CACvD,CACT,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrC,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,MAAM,YAAY,GAAiC,CAAC,IAAI,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,CACL;QACE,oBAAC,MAAM,IAAC,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAAI;QAC7D,KAAK,IAAI,CACR,oBAAC,KAAK,oBACA,IAAI,IACR,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;YAEvC,oBAAC,IAAI,iuMAkGE,CACD,CACT,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC7C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE,cAAc;IAC1B,IAAI,EAAE,OAAO;CACd,CAAA"}
|
package/src/Theme/Theme.ts
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
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
|
-
|
|
13
|
-
fontSize: {
|
|
14
|
-
xs: "12px",
|
|
15
|
-
s: "14px",
|
|
16
|
-
m: "16px",
|
|
17
|
-
l: "22px",
|
|
18
|
-
xl: "32px",
|
|
19
|
-
},
|
|
20
|
-
lineHeight: {
|
|
21
|
-
xs: "14px",
|
|
22
|
-
s: "16px",
|
|
23
|
-
m: "18px",
|
|
24
|
-
l: "24px",
|
|
25
|
-
xl: "36px",
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
padding: {
|
|
29
|
-
xs: "2px",
|
|
30
|
-
s: "4px",
|
|
31
|
-
m: "8px",
|
|
32
|
-
l: "16px",
|
|
33
|
-
xl: "32px",
|
|
34
|
-
xxl: '48px',
|
|
35
|
-
},
|
|
36
|
-
zIndex:{
|
|
37
|
-
modalOverlayer: 1000,
|
|
38
|
-
},
|
|
39
|
-
borderRadius: {
|
|
40
|
-
s: '2px',
|
|
41
|
-
m: '4px',
|
|
42
|
-
l: '8px',
|
|
43
|
-
},
|
|
44
|
-
shadow:{
|
|
45
|
-
m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
|
|
46
|
-
}
|
|
47
|
-
};
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react'
|
|
3
|
-
|
|
4
|
-
import { Aligment } from './Aligment.styles'
|
|
5
|
-
import { ExmpleBlock, ExmpleBlockWrapper } from '../../example'
|
|
6
|
-
import { Theme } from '../../Theme/Theme'
|
|
7
|
-
|
|
8
|
-
export default {
|
|
9
|
-
title: 'Layout/Aligment',
|
|
10
|
-
component: Aligment,
|
|
11
|
-
argTypes: {
|
|
12
|
-
width: { control: 'text', defaultValue: '100%', default: '100%' },
|
|
13
|
-
direction: {
|
|
14
|
-
options: ['row', 'row-reverse', 'column', 'column-reverse'],
|
|
15
|
-
control: 'select',
|
|
16
|
-
},
|
|
17
|
-
align: {
|
|
18
|
-
options: [
|
|
19
|
-
'stretch',
|
|
20
|
-
'flex-start',
|
|
21
|
-
'flex-end',
|
|
22
|
-
'center',
|
|
23
|
-
'baseline',
|
|
24
|
-
'first baseline',
|
|
25
|
-
'last baseline',
|
|
26
|
-
'start',
|
|
27
|
-
'end',
|
|
28
|
-
'self-start',
|
|
29
|
-
'self-end',
|
|
30
|
-
],
|
|
31
|
-
control: 'select',
|
|
32
|
-
},
|
|
33
|
-
justify: {
|
|
34
|
-
options: [
|
|
35
|
-
'flex-start',
|
|
36
|
-
'flex-end',
|
|
37
|
-
'center',
|
|
38
|
-
'space-between',
|
|
39
|
-
'space-around',
|
|
40
|
-
'space-evenly',
|
|
41
|
-
'start',
|
|
42
|
-
'end',
|
|
43
|
-
'left',
|
|
44
|
-
],
|
|
45
|
-
control: 'select',
|
|
46
|
-
},
|
|
47
|
-
wrap: {
|
|
48
|
-
options: ['wrap', 'nowrap', 'wrap-reverse'],
|
|
49
|
-
control: 'select',
|
|
50
|
-
},
|
|
51
|
-
backgroundColor: {
|
|
52
|
-
control: { type: 'color' },
|
|
53
|
-
},
|
|
54
|
-
vPadding: { control: 'text' },
|
|
55
|
-
hPadding: { control: 'text' },
|
|
56
|
-
},
|
|
57
|
-
} as ComponentMeta<typeof Aligment>
|
|
58
|
-
|
|
59
|
-
const Template: ComponentStory<typeof Aligment> = (args) => (
|
|
60
|
-
<Aligment {...args}>
|
|
61
|
-
<ExmpleBlockWrapper>
|
|
62
|
-
<ExmpleBlock width="20px" height="40px">
|
|
63
|
-
1
|
|
64
|
-
</ExmpleBlock>
|
|
65
|
-
</ExmpleBlockWrapper>
|
|
66
|
-
<ExmpleBlockWrapper>
|
|
67
|
-
<ExmpleBlock width="60px" height="30px">
|
|
68
|
-
2
|
|
69
|
-
</ExmpleBlock>
|
|
70
|
-
</ExmpleBlockWrapper>
|
|
71
|
-
<ExmpleBlockWrapper>
|
|
72
|
-
<ExmpleBlock width="30px" height="60px">
|
|
73
|
-
3
|
|
74
|
-
</ExmpleBlock>
|
|
75
|
-
</ExmpleBlockWrapper>
|
|
76
|
-
<ExmpleBlockWrapper>
|
|
77
|
-
<ExmpleBlock width="40px" height="40px">
|
|
78
|
-
4
|
|
79
|
-
</ExmpleBlock>
|
|
80
|
-
</ExmpleBlockWrapper>
|
|
81
|
-
</Aligment>
|
|
82
|
-
)
|
|
83
|
-
|
|
84
|
-
export const Default = Template.bind({})
|
|
85
|
-
Default.args = {
|
|
86
|
-
direction: 'row',
|
|
87
|
-
align: 'center',
|
|
88
|
-
justify: 'space-between',
|
|
89
|
-
wrap: 'wrap',
|
|
90
|
-
backgroundColor: 'transparent',
|
|
91
|
-
vPadding: '0px',
|
|
92
|
-
hPadding: '0px',
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
export const Column = Template.bind({})
|
|
96
|
-
Column.args = {
|
|
97
|
-
direction: 'column',
|
|
98
|
-
align: 'center',
|
|
99
|
-
justify: 'space-between',
|
|
100
|
-
wrap: 'wrap',
|
|
101
|
-
backgroundColor: 'transparent',
|
|
102
|
-
vPadding: '0px',
|
|
103
|
-
hPadding: '0px',
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
export const WithColor = Template.bind({})
|
|
107
|
-
WithColor.args = {
|
|
108
|
-
direction: 'row',
|
|
109
|
-
align: 'center',
|
|
110
|
-
justify: 'space-between',
|
|
111
|
-
wrap: 'wrap',
|
|
112
|
-
backgroundColor: Theme.colors.primary,
|
|
113
|
-
vPadding: '0px',
|
|
114
|
-
hPadding: '0px',
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export const WithPadding = Template.bind({})
|
|
118
|
-
WithPadding.args = {
|
|
119
|
-
direction: 'row',
|
|
120
|
-
align: 'center',
|
|
121
|
-
justify: 'space-between',
|
|
122
|
-
wrap: 'wrap',
|
|
123
|
-
backgroundColor: Theme.colors.primary,
|
|
124
|
-
vPadding: Theme.padding.xl,
|
|
125
|
-
hPadding: Theme.padding.xl,
|
|
126
|
-
}
|