@fixefy/fixefy-ui-components 0.0.4 → 0.0.5
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/ActionsTray/actions_tray.jsx +145 -0
- package/dist-cjs/ActionsTray/styles/actionsTray.styles.jsx +54 -0
- package/dist-cjs/index.js +3 -1
- package/dist-es/ActionsTray/actions_tray.jsx +141 -1
- package/dist-es/ActionsTray/styles/actionsTray.styles.jsx +76 -1
- package/dist-es/index.js +2 -1
- package/dist-types/ActionsTray/actions_tray.d.ts +3 -0
- package/dist-types/ActionsTray/styles/actionsTray.styles.d.ts +8 -0
- package/dist-types/index.d.ts +4 -2
- package/package.json +2 -2
|
@@ -1 +1,146 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ActionsTray = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
const image_1 = tslib_1.__importDefault(require("next/image"));
|
|
7
|
+
const material_1 = require("@mui/material");
|
|
8
|
+
const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
|
|
9
|
+
const actionsTray_styles_1 = require("./styles/actionsTray.styles");
|
|
10
|
+
function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
|
|
11
|
+
const renderActions = () => {
|
|
12
|
+
switch (type) {
|
|
13
|
+
case 'approved':
|
|
14
|
+
return <ApprovedActions onChallenge={onChallenge}/>;
|
|
15
|
+
case 'challenge':
|
|
16
|
+
return <ChallengeActions onChallenge={onChallenge} onApprove={onApprove}/>;
|
|
17
|
+
case 'pending':
|
|
18
|
+
return <PendingActions onApprove={onApprove} onChallenge={onChallenge}/>;
|
|
19
|
+
case 'no_pricing':
|
|
20
|
+
return <NoPricingActions onApprove={onApprove} onChallenge={onChallenge}/>;
|
|
21
|
+
default:
|
|
22
|
+
return <ApprovedActions onChallenge={onChallenge}/>;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
return (<div>
|
|
26
|
+
<material_1.Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
|
|
27
|
+
<actionsTray_styles_1.Container>
|
|
28
|
+
<actionsTray_styles_1.TitleWrapper>
|
|
29
|
+
<actionsTray_styles_1.ChargesCount>{chargesCount}</actionsTray_styles_1.ChargesCount>
|
|
30
|
+
<actionsTray_styles_1.ChargesTitle>charges selected</actionsTray_styles_1.ChargesTitle>
|
|
31
|
+
</actionsTray_styles_1.TitleWrapper>
|
|
32
|
+
<actionsTray_styles_1.Divider />
|
|
33
|
+
<div>
|
|
34
|
+
{renderActions()}
|
|
35
|
+
|
|
36
|
+
</div>
|
|
37
|
+
<actionsTray_styles_1.Divider />
|
|
38
|
+
<div onClick={onClose}>
|
|
39
|
+
<actionsTray_styles_1.Close>close</actionsTray_styles_1.Close>
|
|
40
|
+
</div>
|
|
41
|
+
</actionsTray_styles_1.Container>
|
|
42
|
+
</material_1.Slide>
|
|
43
|
+
</div>);
|
|
44
|
+
}
|
|
45
|
+
exports.ActionsTray = ActionsTray;
|
|
46
|
+
const ChallengeActions = ({ onChallenge, onApprove }) => {
|
|
47
|
+
return (<>
|
|
48
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge} type="low">
|
|
49
|
+
<image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
50
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
51
|
+
src: 'actions/challenge.svg',
|
|
52
|
+
})} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
53
|
+
<actionsTray_styles_1.ActionTitle>challenge</actionsTray_styles_1.ActionTitle>
|
|
54
|
+
</actionsTray_styles_1.ActionBtn>
|
|
55
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove}>
|
|
56
|
+
<image_1.default alt="approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
57
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
58
|
+
src: 'actions/approve.svg',
|
|
59
|
+
})} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
60
|
+
<actionsTray_styles_1.ActionTitle>approve</actionsTray_styles_1.ActionTitle>
|
|
61
|
+
</actionsTray_styles_1.ActionBtn>
|
|
62
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove}>
|
|
63
|
+
<image_1.default alt="ignore and approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
64
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
65
|
+
src: 'actions/ignore_and_approve.svg',
|
|
66
|
+
})} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
67
|
+
<actionsTray_styles_1.ActionTitle>ignore & approve</actionsTray_styles_1.ActionTitle>
|
|
68
|
+
</actionsTray_styles_1.ActionBtn>
|
|
69
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove}>
|
|
70
|
+
<image_1.default alt="change exception" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
71
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
72
|
+
src: 'actions/change_exception.svg',
|
|
73
|
+
})} src={'actions/change_exception.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
74
|
+
<actionsTray_styles_1.ActionTitle>Change exeption</actionsTray_styles_1.ActionTitle>
|
|
75
|
+
</actionsTray_styles_1.ActionBtn>
|
|
76
|
+
</>);
|
|
77
|
+
};
|
|
78
|
+
const PendingActions = ({ onApprove, onChallenge }) => {
|
|
79
|
+
return (<>
|
|
80
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove} type="excellent">
|
|
81
|
+
<image_1.default alt="approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
82
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
83
|
+
src: 'actions/approve.svg',
|
|
84
|
+
})} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
85
|
+
<actionsTray_styles_1.ActionTitle>approve</actionsTray_styles_1.ActionTitle>
|
|
86
|
+
</actionsTray_styles_1.ActionBtn>
|
|
87
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge}>
|
|
88
|
+
<image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
89
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
90
|
+
src: 'actions/challenge.svg',
|
|
91
|
+
})} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
92
|
+
<actionsTray_styles_1.ActionTitle>challenge</actionsTray_styles_1.ActionTitle>
|
|
93
|
+
</actionsTray_styles_1.ActionBtn>
|
|
94
|
+
|
|
95
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge}>
|
|
96
|
+
<image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
97
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
98
|
+
src: 'actions/dive_in.svg',
|
|
99
|
+
})} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
100
|
+
<actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
|
|
101
|
+
</actionsTray_styles_1.ActionBtn>
|
|
102
|
+
</>);
|
|
103
|
+
};
|
|
104
|
+
const NoPricingActions = ({ onApprove, onChallenge }) => {
|
|
105
|
+
return (<>
|
|
106
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge}>
|
|
107
|
+
<image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
108
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
109
|
+
src: 'actions/dive_in.svg',
|
|
110
|
+
})} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
111
|
+
<actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
|
|
112
|
+
</actionsTray_styles_1.ActionBtn>
|
|
113
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove}>
|
|
114
|
+
<image_1.default alt="solve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
115
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
116
|
+
src: 'actions/solve.svg',
|
|
117
|
+
})} src={'actions/solve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
118
|
+
<actionsTray_styles_1.ActionTitle>solve</actionsTray_styles_1.ActionTitle>
|
|
119
|
+
</actionsTray_styles_1.ActionBtn>
|
|
120
|
+
<actionsTray_styles_1.ActionBtn onClick={onApprove}>
|
|
121
|
+
<image_1.default alt="ignore and approve" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
122
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
123
|
+
src: 'actions/ignore_and_approve.svg',
|
|
124
|
+
})} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
125
|
+
<actionsTray_styles_1.ActionTitle>ignore & approve</actionsTray_styles_1.ActionTitle>
|
|
126
|
+
</actionsTray_styles_1.ActionBtn>
|
|
127
|
+
</>);
|
|
128
|
+
};
|
|
129
|
+
const ApprovedActions = ({ onChallenge }) => {
|
|
130
|
+
return (<>
|
|
131
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge}>
|
|
132
|
+
<image_1.default alt="dive in" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
133
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
134
|
+
src: 'actionsCards/check_exceptions.svg',
|
|
135
|
+
})} src={'actionsCards/check_exceptions.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
136
|
+
<actionsTray_styles_1.ActionTitle>dive in</actionsTray_styles_1.ActionTitle>
|
|
137
|
+
</actionsTray_styles_1.ActionBtn>
|
|
138
|
+
<actionsTray_styles_1.ActionBtn onClick={onChallenge}>
|
|
139
|
+
<image_1.default alt="challenge" loader={() => (0, fixefy_ui_utils_1.imageLoader)({
|
|
140
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
141
|
+
src: 'actions/undo.svg',
|
|
142
|
+
})} src={'actions/undo.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
143
|
+
<actionsTray_styles_1.ActionTitle>undo</actionsTray_styles_1.ActionTitle>
|
|
144
|
+
</actionsTray_styles_1.ActionBtn>
|
|
145
|
+
</>);
|
|
146
|
+
};
|
|
@@ -1 +1,55 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ActionTitle = exports.ActionBtn = exports.Divider = exports.TitleWrapper = exports.Close = exports.ChargesTitle = exports.ChargesCount = exports.Container = void 0;
|
|
4
|
+
const FxButton_1 = require("../../FxButton");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const styles_1 = require("@mui/material/styles");
|
|
7
|
+
const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)';
|
|
8
|
+
const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)';
|
|
9
|
+
exports.Container = (0, styles_1.styled)('div')(({ theme }) => ({
|
|
10
|
+
display: 'flex',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
justifyContent: 'space-between',
|
|
13
|
+
background: theme.palette.common.white,
|
|
14
|
+
border: '1px solid #C6DDE2',
|
|
15
|
+
boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
|
|
16
|
+
borderRadius: 8,
|
|
17
|
+
padding: '16px 24px',
|
|
18
|
+
height: 38,
|
|
19
|
+
width: 'fit-content',
|
|
20
|
+
margin: 4,
|
|
21
|
+
}));
|
|
22
|
+
exports.ChargesCount = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.table), { color: theme.palette.typography.title, fontWeight: 700, marginRight: 4 })));
|
|
23
|
+
exports.ChargesTitle = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.table), { color: theme.palette.typography.title })));
|
|
24
|
+
exports.Close = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.primary['500'], textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.5px', cursor: 'pointer' })));
|
|
25
|
+
exports.TitleWrapper = (0, styles_1.styled)('div')(({ theme }) => ({
|
|
26
|
+
display: 'flex',
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
}));
|
|
30
|
+
exports.Divider = (0, styles_1.styled)('div')(({ theme }) => ({
|
|
31
|
+
width: 1,
|
|
32
|
+
height: '100%',
|
|
33
|
+
background: theme.palette.greyscale.contrastText,
|
|
34
|
+
marginRight: 24,
|
|
35
|
+
marginLeft: 24,
|
|
36
|
+
}));
|
|
37
|
+
exports.ActionBtn = (0, styles_1.styled)(FxButton_1.Button)(({ theme, type }) => ({
|
|
38
|
+
height: 40,
|
|
39
|
+
maxHeight: 40,
|
|
40
|
+
borderRadius: 100,
|
|
41
|
+
padding: '8px 16px',
|
|
42
|
+
color: type ? theme.palette.common.white : theme.palette.primary['500'],
|
|
43
|
+
borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
|
|
44
|
+
background: type ? theme.palette.score[type] : theme.palette.common.white,
|
|
45
|
+
marginRight: 8,
|
|
46
|
+
['& img']: {
|
|
47
|
+
filter: type ? 'none' : filterPrimary,
|
|
48
|
+
},
|
|
49
|
+
['&:hover']: {
|
|
50
|
+
background: type ? theme.palette.score[type] : theme.palette.common.white,
|
|
51
|
+
color: type ? theme.palette.common.white : theme.palette.primary['500'],
|
|
52
|
+
borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
|
|
53
|
+
},
|
|
54
|
+
}));
|
|
55
|
+
exports.ActionTitle = (0, styles_1.styled)('span')(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: 'inherit', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.5px', cursor: 'pointer', marginLeft: 4, marginTop: 2 })));
|
package/dist-cjs/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Tag = void 0;
|
|
3
|
+
exports.Tag = exports.Button = void 0;
|
|
4
|
+
var FxButton_1 = require("./FxButton/");
|
|
5
|
+
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return FxButton_1.Button; } });
|
|
4
6
|
var Tag_1 = require("./Tag/");
|
|
5
7
|
Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
|
|
@@ -1 +1,141 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Image from 'next/image';
|
|
3
|
+
import { Slide } from '@mui/material';
|
|
4
|
+
import { imageLoader } from '@fixefy/fixefy-ui-utils';
|
|
5
|
+
import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actionsTray.styles';
|
|
6
|
+
export function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
|
|
7
|
+
const renderActions = () => {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case 'approved':
|
|
10
|
+
return <ApprovedActions onChallenge={onChallenge}/>;
|
|
11
|
+
case 'challenge':
|
|
12
|
+
return <ChallengeActions onChallenge={onChallenge} onApprove={onApprove}/>;
|
|
13
|
+
case 'pending':
|
|
14
|
+
return <PendingActions onApprove={onApprove} onChallenge={onChallenge}/>;
|
|
15
|
+
case 'no_pricing':
|
|
16
|
+
return <NoPricingActions onApprove={onApprove} onChallenge={onChallenge}/>;
|
|
17
|
+
default:
|
|
18
|
+
return <ApprovedActions onChallenge={onChallenge}/>;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return (<div>
|
|
22
|
+
<Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
|
|
23
|
+
<Container>
|
|
24
|
+
<TitleWrapper>
|
|
25
|
+
<ChargesCount>{chargesCount}</ChargesCount>
|
|
26
|
+
<ChargesTitle>charges selected</ChargesTitle>
|
|
27
|
+
</TitleWrapper>
|
|
28
|
+
<Divider />
|
|
29
|
+
<div>
|
|
30
|
+
{renderActions()}
|
|
31
|
+
|
|
32
|
+
</div>
|
|
33
|
+
<Divider />
|
|
34
|
+
<div onClick={onClose}>
|
|
35
|
+
<Close>close</Close>
|
|
36
|
+
</div>
|
|
37
|
+
</Container>
|
|
38
|
+
</Slide>
|
|
39
|
+
</div>);
|
|
40
|
+
}
|
|
41
|
+
const ChallengeActions = ({ onChallenge, onApprove }) => {
|
|
42
|
+
return (<>
|
|
43
|
+
<ActionBtn onClick={onChallenge} type="low">
|
|
44
|
+
<Image alt="challenge" loader={() => imageLoader({
|
|
45
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
46
|
+
src: 'actions/challenge.svg',
|
|
47
|
+
})} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
48
|
+
<ActionTitle>challenge</ActionTitle>
|
|
49
|
+
</ActionBtn>
|
|
50
|
+
<ActionBtn onClick={onApprove}>
|
|
51
|
+
<Image alt="approve" loader={() => imageLoader({
|
|
52
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
53
|
+
src: 'actions/approve.svg',
|
|
54
|
+
})} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
55
|
+
<ActionTitle>approve</ActionTitle>
|
|
56
|
+
</ActionBtn>
|
|
57
|
+
<ActionBtn onClick={onApprove}>
|
|
58
|
+
<Image alt="ignore and approve" loader={() => imageLoader({
|
|
59
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
60
|
+
src: 'actions/ignore_and_approve.svg',
|
|
61
|
+
})} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
62
|
+
<ActionTitle>ignore & approve</ActionTitle>
|
|
63
|
+
</ActionBtn>
|
|
64
|
+
<ActionBtn onClick={onApprove}>
|
|
65
|
+
<Image alt="change exception" loader={() => imageLoader({
|
|
66
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
67
|
+
src: 'actions/change_exception.svg',
|
|
68
|
+
})} src={'actions/change_exception.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
69
|
+
<ActionTitle>Change exeption</ActionTitle>
|
|
70
|
+
</ActionBtn>
|
|
71
|
+
</>);
|
|
72
|
+
};
|
|
73
|
+
const PendingActions = ({ onApprove, onChallenge }) => {
|
|
74
|
+
return (<>
|
|
75
|
+
<ActionBtn onClick={onApprove} type="excellent">
|
|
76
|
+
<Image alt="approve" loader={() => imageLoader({
|
|
77
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
78
|
+
src: 'actions/approve.svg',
|
|
79
|
+
})} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
80
|
+
<ActionTitle>approve</ActionTitle>
|
|
81
|
+
</ActionBtn>
|
|
82
|
+
<ActionBtn onClick={onChallenge}>
|
|
83
|
+
<Image alt="challenge" loader={() => imageLoader({
|
|
84
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
85
|
+
src: 'actions/challenge.svg',
|
|
86
|
+
})} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
87
|
+
<ActionTitle>challenge</ActionTitle>
|
|
88
|
+
</ActionBtn>
|
|
89
|
+
|
|
90
|
+
<ActionBtn onClick={onChallenge}>
|
|
91
|
+
<Image alt="dive in" loader={() => imageLoader({
|
|
92
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
93
|
+
src: 'actions/dive_in.svg',
|
|
94
|
+
})} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
95
|
+
<ActionTitle>dive in</ActionTitle>
|
|
96
|
+
</ActionBtn>
|
|
97
|
+
</>);
|
|
98
|
+
};
|
|
99
|
+
const NoPricingActions = ({ onApprove, onChallenge }) => {
|
|
100
|
+
return (<>
|
|
101
|
+
<ActionBtn onClick={onChallenge}>
|
|
102
|
+
<Image alt="dive in" loader={() => imageLoader({
|
|
103
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
104
|
+
src: 'actions/dive_in.svg',
|
|
105
|
+
})} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
106
|
+
<ActionTitle>dive in</ActionTitle>
|
|
107
|
+
</ActionBtn>
|
|
108
|
+
<ActionBtn onClick={onApprove}>
|
|
109
|
+
<Image alt="solve" loader={() => imageLoader({
|
|
110
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
111
|
+
src: 'actions/solve.svg',
|
|
112
|
+
})} src={'actions/solve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
113
|
+
<ActionTitle>solve</ActionTitle>
|
|
114
|
+
</ActionBtn>
|
|
115
|
+
<ActionBtn onClick={onApprove}>
|
|
116
|
+
<Image alt="ignore and approve" loader={() => imageLoader({
|
|
117
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
118
|
+
src: 'actions/ignore_and_approve.svg',
|
|
119
|
+
})} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
120
|
+
<ActionTitle>ignore & approve</ActionTitle>
|
|
121
|
+
</ActionBtn>
|
|
122
|
+
</>);
|
|
123
|
+
};
|
|
124
|
+
const ApprovedActions = ({ onChallenge }) => {
|
|
125
|
+
return (<>
|
|
126
|
+
<ActionBtn onClick={onChallenge}>
|
|
127
|
+
<Image alt="dive in" loader={() => imageLoader({
|
|
128
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
129
|
+
src: 'actionsCards/check_exceptions.svg',
|
|
130
|
+
})} src={'actionsCards/check_exceptions.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
131
|
+
<ActionTitle>dive in</ActionTitle>
|
|
132
|
+
</ActionBtn>
|
|
133
|
+
<ActionBtn onClick={onChallenge}>
|
|
134
|
+
<Image alt="challenge" loader={() => imageLoader({
|
|
135
|
+
root: 'https://cdn-dev.fixefy.me/',
|
|
136
|
+
src: 'actions/undo.svg',
|
|
137
|
+
})} src={'actions/undo.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
|
|
138
|
+
<ActionTitle>undo</ActionTitle>
|
|
139
|
+
</ActionBtn>
|
|
140
|
+
</>);
|
|
141
|
+
};
|
|
@@ -1 +1,76 @@
|
|
|
1
|
-
|
|
1
|
+
import { Button } from '../../FxButton';
|
|
2
|
+
import { Typography } from '@mui/material';
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)';
|
|
5
|
+
const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)';
|
|
6
|
+
export const Container = styled('div')(({ theme }) => ({
|
|
7
|
+
display: 'flex',
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
justifyContent: 'space-between',
|
|
10
|
+
background: theme.palette.common.white,
|
|
11
|
+
border: '1px solid #C6DDE2',
|
|
12
|
+
boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
|
|
13
|
+
borderRadius: 8,
|
|
14
|
+
padding: '16px 24px',
|
|
15
|
+
height: 38,
|
|
16
|
+
width: 'fit-content',
|
|
17
|
+
margin: 4,
|
|
18
|
+
}));
|
|
19
|
+
export const ChargesCount = styled(Typography)(({ theme }) => ({
|
|
20
|
+
...theme.typography.table,
|
|
21
|
+
color: theme.palette.typography.title,
|
|
22
|
+
fontWeight: 700,
|
|
23
|
+
marginRight: 4,
|
|
24
|
+
}));
|
|
25
|
+
export const ChargesTitle = styled(Typography)(({ theme }) => ({
|
|
26
|
+
...theme.typography.table,
|
|
27
|
+
color: theme.palette.typography.title,
|
|
28
|
+
}));
|
|
29
|
+
export const Close = styled(Typography)(({ theme }) => ({
|
|
30
|
+
...theme.typography.body1,
|
|
31
|
+
color: theme.palette.primary['500'],
|
|
32
|
+
textTransform: 'uppercase',
|
|
33
|
+
fontWeight: 600,
|
|
34
|
+
letterSpacing: '0.5px',
|
|
35
|
+
cursor: 'pointer',
|
|
36
|
+
}));
|
|
37
|
+
export const TitleWrapper = styled('div')(({ theme }) => ({
|
|
38
|
+
display: 'flex',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
}));
|
|
42
|
+
export const Divider = styled('div')(({ theme }) => ({
|
|
43
|
+
width: 1,
|
|
44
|
+
height: '100%',
|
|
45
|
+
background: theme.palette.greyscale.contrastText,
|
|
46
|
+
marginRight: 24,
|
|
47
|
+
marginLeft: 24,
|
|
48
|
+
}));
|
|
49
|
+
export const ActionBtn = styled(Button)(({ theme, type }) => ({
|
|
50
|
+
height: 40,
|
|
51
|
+
maxHeight: 40,
|
|
52
|
+
borderRadius: 100,
|
|
53
|
+
padding: '8px 16px',
|
|
54
|
+
color: type ? theme.palette.common.white : theme.palette.primary['500'],
|
|
55
|
+
borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
|
|
56
|
+
background: type ? theme.palette.score[type] : theme.palette.common.white,
|
|
57
|
+
marginRight: 8,
|
|
58
|
+
['& img']: {
|
|
59
|
+
filter: type ? 'none' : filterPrimary,
|
|
60
|
+
},
|
|
61
|
+
['&:hover']: {
|
|
62
|
+
background: type ? theme.palette.score[type] : theme.palette.common.white,
|
|
63
|
+
color: type ? theme.palette.common.white : theme.palette.primary['500'],
|
|
64
|
+
borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
|
|
65
|
+
},
|
|
66
|
+
}));
|
|
67
|
+
export const ActionTitle = styled('span')(({ theme }) => ({
|
|
68
|
+
...theme.typography.body1,
|
|
69
|
+
color: 'inherit',
|
|
70
|
+
textTransform: 'uppercase',
|
|
71
|
+
fontWeight: 600,
|
|
72
|
+
letterSpacing: '0.5px',
|
|
73
|
+
cursor: 'pointer',
|
|
74
|
+
marginLeft: 4,
|
|
75
|
+
marginTop: 2,
|
|
76
|
+
}));
|
package/dist-es/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Button } from './FxButton/';
|
|
2
|
+
export { Tag } from './Tag/';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const Container: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
2
|
+
export declare const ChargesCount: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
3
|
+
export declare const ChargesTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
4
|
+
export declare const Close: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
5
|
+
export declare const TitleWrapper: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
6
|
+
export declare const Divider: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
|
7
|
+
export declare const ActionBtn: StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
|
|
8
|
+
export declare const ActionTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export
|
|
1
|
+
export type { ActionsTrayProps, ActionButton } from './ActionsTray/actions_tray_types';
|
|
2
|
+
export { Button } from './FxButton/';
|
|
3
|
+
export { Tag } from './Tag/';
|
|
4
|
+
export type { TagProps } from './Tag/tag_types';
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"fs": false
|
|
5
5
|
},
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@fixefy/fixefy-ui-utils": "^0.0.
|
|
7
|
+
"@fixefy/fixefy-ui-utils": "^0.0.3",
|
|
8
8
|
"@mui/material": "^5.14.11",
|
|
9
9
|
"@mui/styled-engine": "^5.14.11",
|
|
10
10
|
"@mui/styles": "^5.14.11",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
"types": "./dist-types/index.d.ts",
|
|
61
|
-
"version": "0.0.
|
|
61
|
+
"version": "0.0.5"
|
|
62
62
|
}
|