trepur_components 0.2.0 → 0.2.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/components/Atoms/AlertBar/AlertBar.stories.js +64 -79
- package/dist/components/Atoms/Breadcrumbs/Breadcrumbs.stories.js +37 -45
- package/dist/components/Atoms/BreadcrumbsItem/BreadcrumbsItem.stories.js +81 -98
- package/dist/components/Atoms/Button/button.stories.js +56 -74
- package/dist/components/Atoms/Collapsible/Collapsible.stories.js +141 -154
- package/dist/components/Atoms/Column/Column.stories.js +24 -42
- package/dist/components/Atoms/Icon/Icon.stories.js +20 -38
- package/dist/components/Atoms/Image/Image.stories.js +21 -40
- package/dist/components/Atoms/InformationIcon/InformationIcon.stories.js +90 -103
- package/dist/components/Atoms/Input/Input.stories.js +42 -55
- package/dist/components/Atoms/NavItem/NavItem.stories.js +93 -108
- package/dist/components/Atoms/Row/Row.stories.js +18 -33
- package/dist/components/Atoms/StarRating/StarRating.stories.js +22 -41
- package/dist/components/Atoms/TextAndTitle/TextAndTitle.stories.js +49 -62
- package/dist/components/Atoms/Tubestops/Tubestops.stories.js +43 -51
- package/dist/components/Atoms/Video/Video.stories.js +29 -50
- package/dist/components/Organisms/Accordion/Accordion.stories.js +93 -97
- package/dist/components/Organisms/BreadcrumbsBordered/BreadcrumbsBordered.stories.js +92 -95
- package/dist/components/Organisms/Card/Card.stories.js +128 -135
- package/dist/components/Organisms/CardWithTopImage/CardWithTopImage.stories.js +48 -57
- package/dist/components/Organisms/Carousel/Carousel.stories.js +104 -123
- package/dist/components/Organisms/Chevron Card/ChevronCard.stories.js +17 -27
- package/dist/components/Organisms/Form/Form.stories.js +112 -118
- package/dist/components/Organisms/FyreCard/FyreCard.stories.js +106 -115
- package/dist/components/Organisms/ImageLink/ImageLink.stories.js +49 -72
- package/dist/components/Organisms/ImageLinkList/ImageLinkList.stories.js +30 -43
- package/dist/components/Organisms/Jumbotron/Jumbotron.stories.js +37 -50
- package/dist/components/Organisms/Nav/Nav.stories.js +97 -107
- package/dist/components/Organisms/NewsCard/NewsCard.stories.js +52 -65
- package/dist/components/Organisms/Profile/Profile.stories.js +77 -86
- package/dist/components/Organisms/Search/Search.stories.js +41 -54
- package/dist/components/Organisms/Testimonial/Testimonial.stories.js +98 -111
- package/dist/components/Organisms/Timeline/Timeline.stories.js +66 -70
- package/dist/components/Organisms/UserIcon/UserIcon.stories.js +37 -51
- package/dist/index.css +4 -0
- package/package.json +6 -2
- package/dist/components/Atoms/Button/button.stories.mdx +0 -72
|
@@ -1,50 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
components: _index.default,
|
|
31
|
-
parameters: {},
|
|
32
|
-
argTypes: _objectSpread({}, _controls.videoOptions),
|
|
33
|
-
args: {
|
|
34
|
-
mp4File: _example.default,
|
|
35
|
-
ogvFile: _example2.default,
|
|
36
|
-
poster: _logoBlue.default,
|
|
37
|
-
withControls: true,
|
|
38
|
-
withPoster: false,
|
|
39
|
-
autoPlay: true,
|
|
40
|
-
muted: true
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
exports.default = _default;
|
|
44
|
-
|
|
45
|
-
const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
|
|
46
|
-
|
|
47
|
-
const _Video = Template.bind({});
|
|
48
|
-
|
|
49
|
-
exports._Video = _Video;
|
|
50
|
-
_Video.args = {};
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Video from './index'
|
|
3
|
+
import mp4 from '../../../Assets/Videos/example.mp4'
|
|
4
|
+
import ogv from '../../../Assets/Videos/example.ogv'
|
|
5
|
+
import logo from '../../../Assets/Images/logoBlue.png'
|
|
6
|
+
import { videoOptions } from '../../../utils/controls'
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title: 'Trepur Components/Atoms/Video',
|
|
10
|
+
components: Video,
|
|
11
|
+
parameters: {},
|
|
12
|
+
argTypes: {
|
|
13
|
+
...videoOptions
|
|
14
|
+
},
|
|
15
|
+
args: {
|
|
16
|
+
mp4File: mp4,
|
|
17
|
+
ogvFile: ogv,
|
|
18
|
+
poster: logo,
|
|
19
|
+
withControls: true,
|
|
20
|
+
withPoster: false,
|
|
21
|
+
autoPlay: true,
|
|
22
|
+
muted: true
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const Template = (args) => <Video {...args} />;
|
|
27
|
+
|
|
28
|
+
export const _Video = Template.bind({});
|
|
29
|
+
_Video.args = {};
|
|
@@ -1,103 +1,99 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Accordion from './index'
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
const items = [
|
|
5
|
+
{
|
|
6
|
+
title: 'This is title 1',
|
|
7
|
+
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.',
|
|
8
|
+
icon: 'calendar',
|
|
9
|
+
showTopBorder: true,
|
|
10
|
+
showBottomBorder: true,
|
|
11
|
+
bgColor: '#31A3DD',
|
|
12
|
+
hoverBgColor: 'blue',
|
|
13
|
+
textColor: 'white',
|
|
14
|
+
hoverTextColor: 'white',
|
|
15
|
+
borderTop: true,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
title: 'This is title 2',
|
|
19
|
+
subtitle: 'This is subtitle 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
|
+
bgColor: 'white',
|
|
23
|
+
textColor: 'black',
|
|
24
|
+
hoverBgColor: 'grey',
|
|
25
|
+
hoverTextColor: 'white',
|
|
26
|
+
borderTop: true,
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: 'This is title 3',
|
|
30
|
+
subtitle: 'This is subtitle 3',
|
|
31
|
+
icon: 'star',
|
|
32
|
+
iconSize: 2,
|
|
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
|
+
bgColor: 'white',
|
|
35
|
+
textColor: 'black',
|
|
36
|
+
hoverBgColor: 'grey',
|
|
37
|
+
hoverTextColor: 'white',
|
|
38
|
+
borderTop: true,
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
title: 'This is title 4',
|
|
42
|
+
subtitle: 'This is subtitle 4',
|
|
43
|
+
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.',
|
|
44
|
+
bgColor: 'white',
|
|
45
|
+
textColor: 'black',
|
|
46
|
+
hoverBgColor: 'grey',
|
|
47
|
+
hoverTextColor: 'white',
|
|
48
|
+
borderTop: true,
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
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.',
|
|
52
|
+
icon: 'th',
|
|
53
|
+
bgColor: 'white',
|
|
54
|
+
textColor: 'black',
|
|
55
|
+
hoverBgColor: 'grey',
|
|
56
|
+
hoverTextColor: 'white',
|
|
57
|
+
borderTop: true,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
title: 'This is title 6',
|
|
61
|
+
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.',
|
|
62
|
+
bgColor: 'white',
|
|
63
|
+
textColor: 'black',
|
|
64
|
+
hoverBgColor: 'grey',
|
|
65
|
+
hoverTextColor: 'white',
|
|
66
|
+
borderTop: true,
|
|
67
|
+
borderBottom: true
|
|
68
|
+
}
|
|
69
|
+
]
|
|
11
70
|
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
71
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, {
|
|
36
|
-
title: 'This is title 3',
|
|
37
|
-
subtitle: 'This is subtitle 3',
|
|
38
|
-
icon: 'star',
|
|
39
|
-
iconSize: 2,
|
|
40
|
-
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.',
|
|
41
|
-
bgColor: 'white',
|
|
42
|
-
textColor: 'black',
|
|
43
|
-
hoverBgColor: 'grey',
|
|
44
|
-
hoverTextColor: 'white',
|
|
45
|
-
borderTop: true
|
|
46
|
-
}, {
|
|
47
|
-
title: 'This is title 4',
|
|
48
|
-
subtitle: 'This is subtitle 4',
|
|
49
|
-
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.',
|
|
50
|
-
bgColor: 'white',
|
|
51
|
-
textColor: 'black',
|
|
52
|
-
hoverBgColor: 'grey',
|
|
53
|
-
hoverTextColor: 'white',
|
|
54
|
-
borderTop: true
|
|
55
|
-
}, {
|
|
56
|
-
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.',
|
|
57
|
-
icon: 'th',
|
|
58
|
-
bgColor: 'white',
|
|
59
|
-
textColor: 'black',
|
|
60
|
-
hoverBgColor: 'grey',
|
|
61
|
-
hoverTextColor: 'white',
|
|
62
|
-
borderTop: true
|
|
63
|
-
}, {
|
|
64
|
-
title: 'This is title 6',
|
|
65
|
-
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.',
|
|
66
|
-
bgColor: 'white',
|
|
67
|
-
textColor: 'black',
|
|
68
|
-
hoverBgColor: 'grey',
|
|
69
|
-
hoverTextColor: 'white',
|
|
70
|
-
borderTop: true,
|
|
71
|
-
borderBottom: true
|
|
72
|
-
}];
|
|
73
|
-
var _default = {
|
|
74
|
-
title: 'Trepur Components/Organisms/Accordion',
|
|
75
|
-
component: _index.default,
|
|
76
|
-
parameters: {
|
|
77
|
-
docs: {
|
|
78
|
-
description: {
|
|
79
|
-
component: ''
|
|
80
|
-
}
|
|
72
|
+
export default {
|
|
73
|
+
title: 'Trepur Components/Organisms/Accordion',
|
|
74
|
+
component: Accordion,
|
|
75
|
+
parameters: {
|
|
76
|
+
docs: {
|
|
77
|
+
description: {
|
|
78
|
+
component: '',
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
argTypes: {
|
|
83
|
+
items: {
|
|
84
|
+
description: '',
|
|
85
|
+
control: 'array',
|
|
86
|
+
table: {
|
|
87
|
+
category: ''
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
args: {
|
|
92
|
+
items: items
|
|
81
93
|
}
|
|
82
|
-
|
|
83
|
-
argTypes: {
|
|
84
|
-
items: {
|
|
85
|
-
description: '',
|
|
86
|
-
control: 'array',
|
|
87
|
-
table: {
|
|
88
|
-
category: ''
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
args: {
|
|
93
|
-
items: items
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
exports.default = _default;
|
|
97
|
-
|
|
98
|
-
const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
|
|
94
|
+
}
|
|
99
95
|
|
|
100
|
-
const
|
|
96
|
+
const Template = (args) => <Accordion {...args} />;
|
|
101
97
|
|
|
102
|
-
|
|
103
|
-
_Accordion.args = {};
|
|
98
|
+
export const _Accordion = Template.bind({});
|
|
99
|
+
_Accordion.args = {};
|
|
@@ -1,103 +1,98 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Breadcrumbs from './index'
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Trepur Components/Organisms/Breadcrumbs',
|
|
6
|
+
components: Breadcrumbs,
|
|
7
|
+
parameters: {},
|
|
8
|
+
argTypes: {
|
|
9
|
+
links: {
|
|
10
|
+
description: '',
|
|
11
|
+
control: 'array',
|
|
12
|
+
table: {
|
|
13
|
+
category: '',
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
bgColor: {
|
|
17
|
+
description: '',
|
|
18
|
+
control: 'color',
|
|
19
|
+
table: {
|
|
20
|
+
category: 'Colors',
|
|
21
|
+
subcategory: 'Hover'
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
hoverBgColor: {
|
|
25
|
+
description: '',
|
|
26
|
+
control: 'color',
|
|
27
|
+
table: {
|
|
28
|
+
category: 'Colors',
|
|
29
|
+
subcategory: 'Hover'
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
borderColor: {
|
|
33
|
+
description: '',
|
|
34
|
+
control: 'color',
|
|
35
|
+
table: {
|
|
36
|
+
category: 'Colors',
|
|
37
|
+
subcategory: 'Hover'
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
hoverBorderColor: {
|
|
41
|
+
description: '',
|
|
42
|
+
control: 'color',
|
|
43
|
+
table: {
|
|
44
|
+
category: 'Colors',
|
|
45
|
+
subcategory: 'Hover'
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
textColor: {
|
|
49
|
+
description: '',
|
|
50
|
+
control: 'color',
|
|
51
|
+
table: {
|
|
52
|
+
category: 'Colors',
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
hoverTextColor: {
|
|
56
|
+
description: '',
|
|
57
|
+
control: 'color',
|
|
58
|
+
table: {
|
|
59
|
+
category: 'Colors',
|
|
60
|
+
subcategory: 'Hover'
|
|
61
|
+
}
|
|
62
|
+
},
|
|
41
63
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
hoverTextColor: {
|
|
66
|
-
description: '',
|
|
67
|
-
control: 'color',
|
|
68
|
-
table: {
|
|
69
|
-
category: 'Colors',
|
|
70
|
-
subcategory: 'Hover'
|
|
71
|
-
}
|
|
64
|
+
args: {
|
|
65
|
+
links: [
|
|
66
|
+
{
|
|
67
|
+
link: '/',
|
|
68
|
+
name: 'link 1'
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
link: '/',
|
|
72
|
+
name: 'link 2'
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
link: '/',
|
|
76
|
+
name: 'link 3'
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
link: '/',
|
|
80
|
+
name: 'link 4'
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
link: '/',
|
|
84
|
+
name: 'link 5'
|
|
85
|
+
}
|
|
86
|
+
]
|
|
72
87
|
}
|
|
73
|
-
|
|
74
|
-
args: {
|
|
75
|
-
links: [{
|
|
76
|
-
link: '/',
|
|
77
|
-
name: 'link 1'
|
|
78
|
-
}, {
|
|
79
|
-
link: '/',
|
|
80
|
-
name: 'link 2'
|
|
81
|
-
}, {
|
|
82
|
-
link: '/',
|
|
83
|
-
name: 'link 3'
|
|
84
|
-
}, {
|
|
85
|
-
link: '/',
|
|
86
|
-
name: 'link 4'
|
|
87
|
-
}, {
|
|
88
|
-
link: '/',
|
|
89
|
-
name: 'link 5'
|
|
90
|
-
}]
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
exports.default = _default;
|
|
88
|
+
}
|
|
94
89
|
|
|
95
|
-
const Template = args =>
|
|
90
|
+
const Template = (args) => <Breadcrumbs {...args} />;
|
|
96
91
|
|
|
97
|
-
const _BreadcrumbsBordered = Template.bind({});
|
|
92
|
+
export const _BreadcrumbsBordered = Template.bind({});
|
|
93
|
+
_BreadcrumbsBordered.args = {};
|
|
98
94
|
|
|
99
|
-
|
|
100
|
-
_BreadcrumbsBordered.args = {}; // export const _BreadcrumbsBordered = (args) => {
|
|
95
|
+
// export const _BreadcrumbsBordered = (args) => {
|
|
101
96
|
// return (
|
|
102
97
|
// <Breadcrumbs
|
|
103
98
|
// links={links}
|
|
@@ -105,6 +100,7 @@ _BreadcrumbsBordered.args = {}; // export const _BreadcrumbsBordered = (args) =>
|
|
|
105
100
|
// />
|
|
106
101
|
// )
|
|
107
102
|
// }
|
|
103
|
+
|
|
108
104
|
// export const WithColors = (args) => {
|
|
109
105
|
// return (
|
|
110
106
|
// <Breadcrumbs
|
|
@@ -118,8 +114,9 @@ _BreadcrumbsBordered.args = {}; // export const _BreadcrumbsBordered = (args) =>
|
|
|
118
114
|
// />
|
|
119
115
|
// )
|
|
120
116
|
// }
|
|
117
|
+
|
|
121
118
|
// export const WithOnlyOneLink = (args) => {
|
|
122
119
|
// return (
|
|
123
120
|
// <Breadcrumbs links={link}/>
|
|
124
121
|
// )
|
|
125
|
-
// }
|
|
122
|
+
// }
|