trepur_components 0.1.42 → 0.2.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/dist/Accordion/index.js +46 -0
- package/dist/AlertBar/index.js +66 -0
- package/dist/{components/Breadcrumbs → Breadcrumbs}/index.js +2 -0
- package/dist/{components/BreadcrumbsBordered → BreadcrumbsBordered}/index.js +4 -2
- package/dist/BreadcrumbsItem/index.css +42 -0
- package/dist/{components/BreadcrumbsBorderedItem → BreadcrumbsItem}/index.js +2 -0
- package/dist/{components/Button → Button}/Styles.css +0 -0
- package/dist/{components/Button → Button}/index.js +28 -24
- package/dist/{components/Card → Card}/index.js +38 -2
- package/dist/CardWithTopImage/index.js +59 -0
- package/dist/CardWithTopImage/styles.css +3 -0
- package/dist/Carousel/index.css +7 -0
- package/dist/{components/Carousel → Carousel}/index.js +5 -2
- package/dist/Chevron Card/index.js +60 -0
- package/dist/Chevron Card/styles.css +0 -0
- package/dist/Collapsible/index.js +111 -0
- package/dist/{components/Column → Column}/index.js +22 -4
- package/dist/{components/Form → Form}/index.js +6 -4
- package/dist/{components/Input → FyreCard}/index.js +34 -30
- package/dist/{components/Icon → Icon}/index.js +2 -0
- package/dist/Image/index.js +66 -0
- package/dist/ImageLink/index.js +45 -0
- package/dist/ImageLinkList/index.js +33 -0
- package/dist/{components/InformationIcon → InformationIcon}/index.js +3 -2
- package/dist/Input/index.js +40 -0
- package/dist/{components/Jumbotron → Jumbotron}/index.js +8 -6
- package/dist/{components/Nav → Nav}/index.js +77 -42
- package/dist/{components/NavItem → NavItem}/index.js +7 -6
- package/dist/NewsCard/index.js +73 -0
- package/dist/{components/Profile → Profile}/index.js +10 -7
- package/dist/Row/index.js +35 -0
- package/dist/{components/Search → Search}/index.js +22 -13
- package/dist/StarRating/index.css +8 -0
- package/dist/{components/StarRating → StarRating}/index.js +2 -2
- package/dist/{components/Testimonial → Testimonial}/index.js +2 -0
- package/dist/{components/TextAndTitle → TextAndTitle}/index.js +10 -2
- package/dist/Timeline/index.js +127 -0
- package/dist/Timeline/styles.css +89 -0
- package/dist/Tubestops/index.js +59 -0
- package/dist/Tubestops/styles.css +92 -0
- package/dist/{components/UserIcon → UserIcon}/index.js +2 -0
- package/dist/Video/index.js +57 -0
- package/package.json +27 -24
- package/dist/Assets/Images/logoBlue.png +0 -0
- package/dist/Assets/Images/logoBlueBorder.png +0 -0
- package/dist/Assets/Images/logoWhite.png +0 -0
- package/dist/Assets/Images/logoWhiteBorder.png +0 -0
- package/dist/Assets/Images/user.jpeg +0 -0
- package/dist/components/Accordion/Accordion.stories.js +0 -64
- package/dist/components/Accordion/README.md +0 -29
- package/dist/components/Accordion/index.js +0 -40
- package/dist/components/AlertBar/AlertBar.stories.js +0 -128
- package/dist/components/AlertBar/README.md +0 -19
- package/dist/components/AlertBar/index.js +0 -43
- package/dist/components/Breadcrumbs/Breadcrumbs.stories.js +0 -60
- package/dist/components/Breadcrumbs/README.md +0 -28
- package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js +0 -73
- package/dist/components/BreadcrumbsBordered/README.md +0 -28
- package/dist/components/BreadcrumbsBorderedItem/BreadcrumbsBorderedItem.stories.js +0 -57
- package/dist/components/BreadcrumbsBorderedItem/README.md +0 -28
- package/dist/components/BreadcrumbsBorderedItem/index.css +0 -57
- package/dist/components/Button/Button.stories.js +0 -389
- package/dist/components/Button/README.md +0 -36
- package/dist/components/Card/Card.stories.js +0 -353
- package/dist/components/Card/README.md +0 -44
- package/dist/components/CardImageLink/CardImageLink.stories.js +0 -115
- package/dist/components/CardImageLink/README.md +0 -1
- package/dist/components/CardImageLink/index.js +0 -49
- package/dist/components/CardImageLinkList/CardImageLinkList.stories.js +0 -63
- package/dist/components/CardImageLinkList/README.md +0 -1
- package/dist/components/CardImageLinkList/index.js +0 -48
- package/dist/components/Carousel/Carousel.stories.js +0 -124
- package/dist/components/Carousel/README.md +0 -22
- package/dist/components/Carousel/index.css +0 -7
- package/dist/components/Collapsible/Collapsible.stories.js +0 -101
- package/dist/components/Collapsible/README.md +0 -19
- package/dist/components/Collapsible/index.js +0 -58
- package/dist/components/Column/Column.stories.js +0 -168
- package/dist/components/Column/README.md +0 -23
- package/dist/components/Form/Form.stories.js +0 -59
- package/dist/components/Form/README.md +0 -16
- package/dist/components/Icon/Icon.stories.js +0 -68
- package/dist/components/Icon/README.md +0 -12
- package/dist/components/Image/Image.stories.js +0 -62
- package/dist/components/Image/README.md +0 -12
- package/dist/components/Image/index.js +0 -31
- package/dist/components/InformationIcon/InformationIcon.stories.js +0 -122
- package/dist/components/InformationIcon/README.md +0 -23
- package/dist/components/Input/Input.stories.js +0 -58
- package/dist/components/Input/README.md +0 -23
- package/dist/components/Jumbotron/Jumbotron.stories.js +0 -118
- package/dist/components/Jumbotron/README.md +0 -24
- package/dist/components/ListItem/ListItem.stories.js +0 -50
- package/dist/components/ListItem/README.md +0 -17
- package/dist/components/ListItem/index.js +0 -25
- package/dist/components/ListItemDropdown/ListItemDropdown.stories.js +0 -50
- package/dist/components/ListItemDropdown/README.md +0 -16
- package/dist/components/ListItemDropdown/index.js +0 -56
- package/dist/components/Nav/Nav.stories.js +0 -320
- package/dist/components/Nav/README.md +0 -45
- package/dist/components/NavItem/NavItem.stories.js +0 -150
- package/dist/components/NavItem/README.md +0 -36
- package/dist/components/Profile/Profile.stories.js +0 -86
- package/dist/components/Profile/README.md +0 -17
- package/dist/components/Profile/user.jpeg +0 -0
- package/dist/components/Search/README.md +0 -21
- package/dist/components/Search/Search.stories.js +0 -122
- package/dist/components/StarRating/README.md +0 -12
- package/dist/components/StarRating/StarRating.stories.js +0 -79
- package/dist/components/StarRating/index.css +0 -8
- package/dist/components/Testimonial/README.md +0 -22
- package/dist/components/Testimonial/Testimonial.stories.js +0 -125
- package/dist/components/TextAndTitle/README.md +0 -14
- package/dist/components/TextAndTitle/TextAndTitle.stories.js +0 -66
- package/dist/components/UserIcon/README.md +0 -18
- package/dist/components/UserIcon/UserIcon.stories.js +0 -38
- package/dist/index.js +0 -223
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* Vertical */
|
|
2
|
+
.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
|
|
3
|
+
@apply absolute;
|
|
4
|
+
@apply block;
|
|
5
|
+
@apply bg-brand-border;
|
|
6
|
+
content: "";
|
|
7
|
+
width: 1px;
|
|
8
|
+
height: 100%;
|
|
9
|
+
left: 7px;
|
|
10
|
+
top: -100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
|
|
14
|
+
@apply absolute;
|
|
15
|
+
@apply block;
|
|
16
|
+
@apply bg-brand-border;
|
|
17
|
+
content: "";
|
|
18
|
+
width: 1px;
|
|
19
|
+
height: 100%;
|
|
20
|
+
left: 7px;
|
|
21
|
+
top: 40%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* reverse */
|
|
25
|
+
.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
|
|
26
|
+
@apply absolute;
|
|
27
|
+
@apply block;
|
|
28
|
+
@apply bg-brand-border;
|
|
29
|
+
content: "";
|
|
30
|
+
width: 1px;
|
|
31
|
+
height: 100%;
|
|
32
|
+
right: 7px;
|
|
33
|
+
top: -100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
|
|
37
|
+
@apply absolute;
|
|
38
|
+
@apply block;
|
|
39
|
+
@apply bg-brand-border;
|
|
40
|
+
content: "";
|
|
41
|
+
width: 1px;
|
|
42
|
+
height: 100%;
|
|
43
|
+
right: 7px;
|
|
44
|
+
top: 40%;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Horizontal */
|
|
48
|
+
.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
|
|
49
|
+
@apply absolute;
|
|
50
|
+
@apply block;
|
|
51
|
+
@apply bg-brand-border;
|
|
52
|
+
content: "";
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 1px;
|
|
55
|
+
left: -50%;
|
|
56
|
+
bottom: 7px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.tubestop.flex-row-reverse.none-reverse
|
|
60
|
+
.status-flow-item:not(:first-child):after {
|
|
61
|
+
@apply absolute;
|
|
62
|
+
@apply block;
|
|
63
|
+
@apply bg-brand-border;
|
|
64
|
+
content: "";
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: 1px;
|
|
67
|
+
right: -50%;
|
|
68
|
+
top: 7px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/*reverse*/
|
|
72
|
+
.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
|
|
73
|
+
@apply absolute;
|
|
74
|
+
@apply block;
|
|
75
|
+
@apply bg-brand-border;
|
|
76
|
+
content: "";
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 1px;
|
|
79
|
+
left: -50%;
|
|
80
|
+
bottom: 7px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
|
|
84
|
+
@apply absolute;
|
|
85
|
+
@apply block;
|
|
86
|
+
@apply bg-brand-border;
|
|
87
|
+
content: "";
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 1px;
|
|
90
|
+
right: -50%;
|
|
91
|
+
top: 7px;
|
|
92
|
+
}
|
|
@@ -9,6 +9,8 @@ require("core-js/modules/es.symbol.description.js");
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
+
require("../../../../index.css");
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
const UserIcon = _ref => {
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
require("core-js/modules/es.object.assign.js");
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
require("../../../../index.css");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
|
|
18
|
+
const Video = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
id,
|
|
21
|
+
classes,
|
|
22
|
+
autoPlay,
|
|
23
|
+
muted,
|
|
24
|
+
poster,
|
|
25
|
+
mp4File,
|
|
26
|
+
webmFile,
|
|
27
|
+
ogvFile,
|
|
28
|
+
height,
|
|
29
|
+
width,
|
|
30
|
+
withControls,
|
|
31
|
+
withPoster
|
|
32
|
+
} = _ref;
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement("video", _extends({
|
|
34
|
+
id: id,
|
|
35
|
+
className: classes
|
|
36
|
+
}, withPoster && {
|
|
37
|
+
poster: poster
|
|
38
|
+
}, {
|
|
39
|
+
width: width,
|
|
40
|
+
height: height,
|
|
41
|
+
controls: withControls,
|
|
42
|
+
autoPlay: autoPlay,
|
|
43
|
+
muted: muted
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement("source", {
|
|
45
|
+
src: mp4File,
|
|
46
|
+
type: "video/mp4"
|
|
47
|
+
}), webmFile && /*#__PURE__*/_react.default.createElement("source", {
|
|
48
|
+
src: webmFile,
|
|
49
|
+
type: "video/webm"
|
|
50
|
+
}), ogvFile && /*#__PURE__*/_react.default.createElement("source", {
|
|
51
|
+
src: ogvFile,
|
|
52
|
+
type: "video/ogg"
|
|
53
|
+
}));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
var _default = Video;
|
|
57
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "trepur_components",
|
|
3
3
|
"description": "component lib",
|
|
4
4
|
"author": "trepur_ttenneb",
|
|
5
|
-
"version": "0.1
|
|
5
|
+
"version": "0.2.1",
|
|
6
6
|
"private": false,
|
|
7
7
|
"keywords": [
|
|
8
8
|
"react",
|
|
@@ -17,21 +17,20 @@
|
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/polyfill": "^7.12.1",
|
|
20
|
-
"@
|
|
21
|
-
"@
|
|
22
|
-
"@testing-library/
|
|
23
|
-
"@testing-library/react": "^11.2.7",
|
|
24
|
-
"@testing-library/user-event": "^12.8.3",
|
|
20
|
+
"@testing-library/jest-dom": "^5.16.2",
|
|
21
|
+
"@testing-library/react": "^12.1.3",
|
|
22
|
+
"@testing-library/user-event": "^13.5.0",
|
|
25
23
|
"react": "^17.0.2",
|
|
26
24
|
"react-dom": "^17.0.2",
|
|
27
|
-
"react-scripts": "
|
|
25
|
+
"react-scripts": "5.0.0",
|
|
28
26
|
"react-slick": "^0.28.1",
|
|
29
27
|
"slick-carousel": "^1.8.1",
|
|
30
|
-
"
|
|
31
|
-
"web-vitals": "^1.1.2"
|
|
28
|
+
"web-vitals": "^2.1.4"
|
|
32
29
|
},
|
|
33
30
|
"scripts": {
|
|
34
|
-
"build": "rm -rf dist &&
|
|
31
|
+
"build": "rm -rf dist && npm run build-atoms && npm run build-organisms",
|
|
32
|
+
"build-atoms": "NODE_ENV=production babel src/lib/components/Atoms/ --out-dir dist --ignore src/**/*.stories.js --copy-files --no-copy-ignored",
|
|
33
|
+
"build-organisms": "NODE_ENV=production babel src/lib/components/Organisms --out-dir dist --ignore src/**/*.stories.js --copy-files --no-copy-ignored",
|
|
35
34
|
"eject": "react-scripts eject",
|
|
36
35
|
"storybook": "start-storybook -p 6006",
|
|
37
36
|
"build-storybook": "build-storybook -s public"
|
|
@@ -65,19 +64,23 @@
|
|
|
65
64
|
]
|
|
66
65
|
},
|
|
67
66
|
"devDependencies": {
|
|
68
|
-
"@babel/cli": "^7.
|
|
69
|
-
"@babel/core": "^7.
|
|
70
|
-
"@babel/preset-env": "^7.16.
|
|
71
|
-
"@
|
|
72
|
-
"@
|
|
73
|
-
"@storybook/addon-
|
|
74
|
-
"@storybook/addon-links": "^6.
|
|
75
|
-
"@storybook/
|
|
76
|
-
"@storybook/
|
|
77
|
-
"@storybook/
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"storybook-
|
|
81
|
-
"
|
|
67
|
+
"@babel/cli": "^7.17.6",
|
|
68
|
+
"@babel/core": "^7.17.5",
|
|
69
|
+
"@babel/preset-env": "^7.16.11",
|
|
70
|
+
"@storybook/addon-actions": "^6.4.19",
|
|
71
|
+
"@storybook/addon-essentials": "^6.4.19",
|
|
72
|
+
"@storybook/addon-interactions": "^6.4.19",
|
|
73
|
+
"@storybook/addon-links": "^6.4.19",
|
|
74
|
+
"@storybook/builder-webpack5": "^6.4.19",
|
|
75
|
+
"@storybook/manager-webpack5": "^6.4.19",
|
|
76
|
+
"@storybook/node-logger": "^6.4.19",
|
|
77
|
+
"@storybook/preset-create-react-app": "^4.0.1",
|
|
78
|
+
"@storybook/react": "^6.4.19",
|
|
79
|
+
"@storybook/testing-library": "0.0.9",
|
|
80
|
+
"autoprefixer": "^10.4.2",
|
|
81
|
+
"babel-cli": "^6.26.0",
|
|
82
|
+
"postcss": "^8.4.6",
|
|
83
|
+
"tailwindcss": "^3.0.23",
|
|
84
|
+
"webpack": "^5.69.1"
|
|
82
85
|
}
|
|
83
86
|
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports._Accordion = exports.AccordionWithoutBorders = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _index = _interopRequireDefault(require("./index"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
const items = [{
|
|
15
|
-
title: 'This is title 1',
|
|
16
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
|
|
17
|
-
icon: 'calendar'
|
|
18
|
-
}, {
|
|
19
|
-
title: 'This is title 2',
|
|
20
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
|
|
21
|
-
icon: 'star'
|
|
22
|
-
}, {
|
|
23
|
-
title: 'This is title 3',
|
|
24
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.'
|
|
25
|
-
}, {
|
|
26
|
-
title: 'This is title 4',
|
|
27
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.'
|
|
28
|
-
}, {
|
|
29
|
-
title: 'This is title 5',
|
|
30
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.'
|
|
31
|
-
}, {
|
|
32
|
-
title: 'This is title 6',
|
|
33
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.'
|
|
34
|
-
}];
|
|
35
|
-
var _default = {
|
|
36
|
-
title: 'Components/Accordion',
|
|
37
|
-
argTypes: {},
|
|
38
|
-
decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className: "p-4"
|
|
40
|
-
}, story())],
|
|
41
|
-
addParameters: {
|
|
42
|
-
oprions: {
|
|
43
|
-
showNav: false
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
exports.default = _default;
|
|
48
|
-
|
|
49
|
-
const _Accordion = args => {
|
|
50
|
-
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
51
|
-
items: items,
|
|
52
|
-
showBorders: true
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
exports._Accordion = _Accordion;
|
|
57
|
-
|
|
58
|
-
const AccordionWithoutBorders = args => {
|
|
59
|
-
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
60
|
-
items: items
|
|
61
|
-
});
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
exports.AccordionWithoutBorders = AccordionWithoutBorders;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# Accordion
|
|
2
|
-
|
|
3
|
-
An accordion built from many collapsible elements
|
|
4
|
-
|
|
5
|
-
## Example
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
const items = [
|
|
9
|
-
{
|
|
10
|
-
title: 'This is title 1',
|
|
11
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
|
|
12
|
-
icon: 'calendar'
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
title: 'This is title 2',
|
|
16
|
-
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
|
|
17
|
-
icon: 'calendar'
|
|
18
|
-
},
|
|
19
|
-
]
|
|
20
|
-
|
|
21
|
-
<Accordion
|
|
22
|
-
items={items}
|
|
23
|
-
/>
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Parameters
|
|
28
|
-
`items={array} (default=null)`
|
|
29
|
-
`showBorders={boolean} (default=null)`
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _Collapsible = _interopRequireDefault(require("../Collapsible"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
const Accordion = _ref => {
|
|
15
|
-
let {
|
|
16
|
-
items,
|
|
17
|
-
showBorders
|
|
18
|
-
} = _ref;
|
|
19
|
-
return /*#__PURE__*/_react.default.createElement("div", null, items && items.map((item, i) => {
|
|
20
|
-
if (i + 1 === items.length) {
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
|
|
22
|
-
title: item.title,
|
|
23
|
-
content: item.content,
|
|
24
|
-
icon: item.icon,
|
|
25
|
-
borderTop: showBorders,
|
|
26
|
-
borderBottom: showBorders
|
|
27
|
-
});
|
|
28
|
-
} else {
|
|
29
|
-
return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
|
|
30
|
-
title: item.title,
|
|
31
|
-
content: item.content,
|
|
32
|
-
icon: item.icon,
|
|
33
|
-
borderTop: showBorders
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
}));
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
var _default = Accordion;
|
|
40
|
-
exports.default = _default;
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports._AlertBarWithRightIcon = exports._AlertBar = exports.AlertBarWithLeftIcon = exports.AlertBarWithBothIcons = exports.AlertBarWarning = exports.AlertBarSuccess = exports.AlertBarError = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
require("../../../index.css");
|
|
11
|
-
|
|
12
|
-
var _index2 = _interopRequireDefault(require("./index"));
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
title: 'Components/AlertBar',
|
|
18
|
-
argTypes: {
|
|
19
|
-
text: {
|
|
20
|
-
name: 'Text',
|
|
21
|
-
description: 'The text the appears as an overlay on the Jumbotron',
|
|
22
|
-
control: {
|
|
23
|
-
type: 'text'
|
|
24
|
-
},
|
|
25
|
-
defaultValue: 'This is some text to display as an alert message'
|
|
26
|
-
},
|
|
27
|
-
type: {
|
|
28
|
-
name: 'Warning Type',
|
|
29
|
-
defaultValue: 'success',
|
|
30
|
-
control: {
|
|
31
|
-
type: 'select'
|
|
32
|
-
},
|
|
33
|
-
options: ['success', 'warning', 'error']
|
|
34
|
-
},
|
|
35
|
-
leftIcon: {
|
|
36
|
-
name: 'Left Icon',
|
|
37
|
-
control: {
|
|
38
|
-
type: 'text'
|
|
39
|
-
},
|
|
40
|
-
defaultValue: 'star'
|
|
41
|
-
},
|
|
42
|
-
rightIcon: {
|
|
43
|
-
name: 'Right Icon',
|
|
44
|
-
control: {
|
|
45
|
-
type: 'text'
|
|
46
|
-
},
|
|
47
|
-
defaultValue: 'star'
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: "p-4"
|
|
52
|
-
}, story())],
|
|
53
|
-
addParameters: {
|
|
54
|
-
oprions: {
|
|
55
|
-
showNav: false
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
exports.default = _default;
|
|
60
|
-
|
|
61
|
-
const _AlertBar = args => {
|
|
62
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
63
|
-
text: args.text,
|
|
64
|
-
type: args.type,
|
|
65
|
-
leftIcon: args.leftIcon,
|
|
66
|
-
rightIcon: args.rightIcon
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
exports._AlertBar = _AlertBar;
|
|
71
|
-
|
|
72
|
-
const AlertBarSuccess = args => {
|
|
73
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
74
|
-
text: "This is some text to display as an alert message",
|
|
75
|
-
type: "success"
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
exports.AlertBarSuccess = AlertBarSuccess;
|
|
80
|
-
|
|
81
|
-
const AlertBarWarning = args => {
|
|
82
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
83
|
-
text: "This is some text to display as an alert message",
|
|
84
|
-
type: "warning"
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
exports.AlertBarWarning = AlertBarWarning;
|
|
89
|
-
|
|
90
|
-
const AlertBarError = args => {
|
|
91
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
92
|
-
text: "This is some text to display as an alert message",
|
|
93
|
-
type: "error"
|
|
94
|
-
});
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
exports.AlertBarError = AlertBarError;
|
|
98
|
-
|
|
99
|
-
const AlertBarWithLeftIcon = args => {
|
|
100
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
101
|
-
text: args.text,
|
|
102
|
-
type: args.type,
|
|
103
|
-
leftIcon: args.leftIcon
|
|
104
|
-
});
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
exports.AlertBarWithLeftIcon = AlertBarWithLeftIcon;
|
|
108
|
-
|
|
109
|
-
const _AlertBarWithRightIcon = args => {
|
|
110
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
111
|
-
text: args.text,
|
|
112
|
-
type: args.type,
|
|
113
|
-
rightIcon: args.rightIcon
|
|
114
|
-
});
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
exports._AlertBarWithRightIcon = _AlertBarWithRightIcon;
|
|
118
|
-
|
|
119
|
-
const AlertBarWithBothIcons = args => {
|
|
120
|
-
return /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
121
|
-
text: args.text,
|
|
122
|
-
type: args.type,
|
|
123
|
-
leftIcon: args.leftIcon,
|
|
124
|
-
rightIcon: args.rightIcon
|
|
125
|
-
});
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
exports.AlertBarWithBothIcons = AlertBarWithBothIcons;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
# Alert Bar
|
|
2
|
-
|
|
3
|
-
An alert bar to display messages in different colors
|
|
4
|
-
|
|
5
|
-
## Example
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
<AlertBar
|
|
9
|
-
text='This is some text to display as an alert message'
|
|
10
|
-
type='success'
|
|
11
|
-
/>
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Parameters
|
|
16
|
-
`type={string} (default=null)`
|
|
17
|
-
`text={string} (default=null)`
|
|
18
|
-
`leftIcon={string} (default=null)`
|
|
19
|
-
`rightIcon={string} (default=null)`
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _index = _interopRequireDefault(require("../Icon/index"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
const AlertBar = _ref => {
|
|
15
|
-
let {
|
|
16
|
-
type,
|
|
17
|
-
text,
|
|
18
|
-
leftIcon,
|
|
19
|
-
rightIcon
|
|
20
|
-
} = _ref;
|
|
21
|
-
let bgColor;
|
|
22
|
-
if (type === 'success') bgColor = 'bg-brand-success';
|
|
23
|
-
if (type === 'warning') bgColor = 'bg-brand-warning';
|
|
24
|
-
if (type === 'error') bgColor = 'bg-brand-error';
|
|
25
|
-
let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
26
|
-
type: leftIcon
|
|
27
|
-
}) : null;
|
|
28
|
-
let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
29
|
-
type: rightIcon
|
|
30
|
-
}) : null;
|
|
31
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: 'w-parent flex text-center h-8 ' + bgColor
|
|
33
|
-
}, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
|
|
34
|
-
className: "pt-1 left-5 pl-8"
|
|
35
|
-
}, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
|
|
36
|
-
className: "text-white w-full text-center pt-1 pl-8"
|
|
37
|
-
}, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
|
|
38
|
-
className: "px-8 pt-1 float-right"
|
|
39
|
-
}, iconRight));
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var _default = AlertBar;
|
|
43
|
-
exports.default = _default;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports._Breadcrumbs = exports.BreadcrumbsWithOnlyOneLink = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _README = _interopRequireDefault(require("./README.md"));
|
|
11
|
-
|
|
12
|
-
var _index = _interopRequireDefault(require("./index"));
|
|
13
|
-
|
|
14
|
-
require("../../../index.css");
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
|
-
const links = [{
|
|
19
|
-
link: '/',
|
|
20
|
-
name: 'link 1'
|
|
21
|
-
}, {
|
|
22
|
-
link: '/',
|
|
23
|
-
name: 'link 2'
|
|
24
|
-
}, {
|
|
25
|
-
link: '/',
|
|
26
|
-
name: 'Link 3'
|
|
27
|
-
}];
|
|
28
|
-
const link = [{
|
|
29
|
-
link: '/',
|
|
30
|
-
name: 'link 1'
|
|
31
|
-
}];
|
|
32
|
-
var _default = {
|
|
33
|
-
title: 'Components/Breadcrumbs',
|
|
34
|
-
argTypes: {},
|
|
35
|
-
decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
-
className: "p-4"
|
|
37
|
-
}, story())],
|
|
38
|
-
parameters: {
|
|
39
|
-
readme: {
|
|
40
|
-
sidebar: _README.default
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
exports.default = _default;
|
|
45
|
-
|
|
46
|
-
const _Breadcrumbs = () => {
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
48
|
-
links: links
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
exports._Breadcrumbs = _Breadcrumbs;
|
|
53
|
-
|
|
54
|
-
const BreadcrumbsWithOnlyOneLink = () => {
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
56
|
-
links: link
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
exports.BreadcrumbsWithOnlyOneLink = BreadcrumbsWithOnlyOneLink;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
# Breadcrumbs
|
|
2
|
-
|
|
3
|
-
Basic breadcrumbs
|
|
4
|
-
|
|
5
|
-
## Example
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
const links = [
|
|
9
|
-
{
|
|
10
|
-
link: '/',
|
|
11
|
-
name: 'link 1'
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
link: '/',
|
|
15
|
-
name: 'link 2'
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
link: '/',
|
|
19
|
-
name: 'Link 3'
|
|
20
|
-
},
|
|
21
|
-
]
|
|
22
|
-
|
|
23
|
-
<BreadCrumbs links={links} />
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Parameters
|
|
27
|
-
`links={array} (default=null)`
|
|
28
|
-
`classNames={string} (default=null)`
|