allaw-ui 1.0.151 → 1.0.152
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/selects/SelectableListItem.d.ts +4 -2
- package/dist/components/atoms/selects/SelectableListItem.js +12 -7
- package/dist/components/atoms/selects/SelectableListItem.module.css +78 -64
- package/dist/components/atoms/selects/SelectableListItem.stories.d.ts +3 -2
- package/dist/components/atoms/selects/SelectableListItem.stories.js +4 -3
- package/dist/stories/Header.stories.d.ts +3 -3
- package/package.json +1 -1
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "../../../styles/global.css";
|
|
3
|
+
import "../../../styles/icons.css";
|
|
3
4
|
export interface SelectableListItemProps {
|
|
4
5
|
label: string;
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
duration?: string;
|
|
7
|
+
price?: string;
|
|
7
8
|
isActive: boolean;
|
|
8
9
|
onClick: () => void;
|
|
10
|
+
icon?: string;
|
|
9
11
|
}
|
|
10
12
|
declare const SelectableListItem: React.FC<SelectableListItemProps>;
|
|
11
13
|
export default SelectableListItem;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styles from "./SelectableListItem.module.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
4
5
|
var SelectableListItem = function (_a) {
|
|
5
|
-
var label = _a.label,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
React.createElement("
|
|
9
|
-
React.createElement("div", { className: styles.
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
var label = _a.label, duration = _a.duration, price = _a.price, isActive = _a.isActive, onClick = _a.onClick, icon = _a.icon;
|
|
7
|
+
var hasIcon = icon && icon.length > 0;
|
|
8
|
+
return (React.createElement("button", { className: "".concat(styles.container, " ").concat(isActive ? styles.active : "", " ").concat(hasIcon ? styles.withIcon : ""), onClick: onClick },
|
|
9
|
+
React.createElement("div", { className: styles.iconContainer }, isActive && React.createElement("span", { className: styles.activeIcon })),
|
|
10
|
+
hasIcon && (React.createElement("div", { className: styles.iconWrapper },
|
|
11
|
+
React.createElement("i", { className: "".concat(icon, " ").concat(styles.icon) }))),
|
|
12
|
+
React.createElement("div", { className: styles.content },
|
|
13
|
+
React.createElement("span", { className: styles.label }, label)),
|
|
14
|
+
React.createElement("div", { className: styles.columnsWrapper },
|
|
15
|
+
duration && React.createElement("span", { className: styles.duration }, duration),
|
|
16
|
+
price && React.createElement("span", { className: styles.price }, price))));
|
|
12
17
|
};
|
|
13
18
|
export default SelectableListItem;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.container {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
align-items: center;
|
|
@@ -11,103 +11,83 @@
|
|
|
11
11
|
border-radius: 16px;
|
|
12
12
|
background: #f4f7fb;
|
|
13
13
|
width: 100%;
|
|
14
|
+
min-height: 48px;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
padding: 12px 16px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.selectableListItemIcon {
|
|
22
|
-
display: none;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@media (max-width: 575px) {
|
|
27
|
-
.selectableListItem {
|
|
28
|
-
flex-direction: column;
|
|
29
|
-
align-items: flex-start;
|
|
30
|
-
padding: 12px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.selectableListItemLabel {
|
|
34
|
-
margin-bottom: 8px;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.selectableListItemColumnsWrapper {
|
|
38
|
-
flex-direction: row;
|
|
39
|
-
align-items: center;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@media (max-width: 413px) {
|
|
44
|
-
.selectableListItemColumnsWrapper {
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
align-items: flex-start;
|
|
47
|
-
}
|
|
17
|
+
.withIcon {
|
|
18
|
+
flex-direction: row !important;
|
|
48
19
|
}
|
|
49
20
|
|
|
50
|
-
.
|
|
21
|
+
.container:hover {
|
|
51
22
|
background-color: #e6edf5;
|
|
52
23
|
}
|
|
53
24
|
|
|
54
|
-
.
|
|
25
|
+
.active {
|
|
55
26
|
background: #e6edf5;
|
|
56
27
|
outline: 1px solid #728ea7;
|
|
57
28
|
}
|
|
58
29
|
|
|
59
|
-
.
|
|
30
|
+
.iconContainer {
|
|
60
31
|
display: flex;
|
|
61
32
|
align-items: center;
|
|
62
33
|
justify-content: center;
|
|
63
34
|
border-radius: 50%;
|
|
64
|
-
background: #
|
|
35
|
+
background: #ffffff;
|
|
65
36
|
width: 24px;
|
|
66
37
|
min-width: 25px;
|
|
67
38
|
height: 24px;
|
|
68
39
|
border: 1px solid #d1dce7;
|
|
69
40
|
}
|
|
70
41
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
42
|
+
.activeIcon {
|
|
43
|
+
color: rgb(37, 190, 235);
|
|
44
|
+
font-size: 22px;
|
|
45
|
+
font-weight: 600;
|
|
46
|
+
width: 40px;
|
|
75
47
|
}
|
|
76
48
|
|
|
77
|
-
.
|
|
78
|
-
|
|
79
|
-
|
|
49
|
+
.iconWrapper {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
80
53
|
}
|
|
81
54
|
|
|
82
|
-
.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
55
|
+
.icon {
|
|
56
|
+
color: rgb(37, 190, 235);
|
|
57
|
+
font-size: 22px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
width: 40px;
|
|
87
60
|
}
|
|
88
61
|
|
|
89
|
-
.
|
|
62
|
+
.content {
|
|
90
63
|
flex-grow: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.label {
|
|
91
67
|
font-family: "Open Sans", sans-serif;
|
|
92
|
-
|
|
68
|
+
|
|
93
69
|
font-style: normal;
|
|
94
|
-
|
|
70
|
+
font-weight: 600;
|
|
95
71
|
display: -webkit-box;
|
|
96
72
|
-webkit-box-orient: vertical;
|
|
97
73
|
-webkit-line-clamp: 3;
|
|
98
74
|
overflow: hidden;
|
|
99
75
|
text-overflow: ellipsis;
|
|
100
|
-
max-height: calc(16px * 1.
|
|
76
|
+
max-height: calc(16px * 1.3 * 3);
|
|
101
77
|
text-align: left;
|
|
78
|
+
font-size: 16px;
|
|
79
|
+
font-style: normal;
|
|
80
|
+
text-align: start;
|
|
81
|
+
line-height: normal;
|
|
102
82
|
}
|
|
103
83
|
|
|
104
|
-
.
|
|
84
|
+
.columnsWrapper {
|
|
105
85
|
display: flex;
|
|
106
86
|
gap: 12px;
|
|
107
87
|
}
|
|
108
88
|
|
|
109
|
-
.
|
|
110
|
-
.
|
|
89
|
+
.duration,
|
|
90
|
+
.price {
|
|
111
91
|
flex-shrink: 0;
|
|
112
92
|
text-align: right;
|
|
113
93
|
font-family: "Open Sans", sans-serif;
|
|
@@ -119,25 +99,59 @@
|
|
|
119
99
|
text-overflow: ellipsis;
|
|
120
100
|
}
|
|
121
101
|
|
|
122
|
-
.
|
|
102
|
+
.duration {
|
|
123
103
|
color: var(--mid-grey, #728ea7);
|
|
124
104
|
width: 80px;
|
|
125
105
|
}
|
|
126
106
|
|
|
107
|
+
.price {
|
|
108
|
+
color: var(--noir, #171e25);
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
width: 80px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (max-width: 767px) {
|
|
114
|
+
.container {
|
|
115
|
+
padding: 12px 16px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.iconContainer {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
127
123
|
@media (max-width: 575px) {
|
|
128
|
-
.
|
|
129
|
-
|
|
124
|
+
.container:not(.withIcon) {
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
align-items: flex-start;
|
|
127
|
+
padding: 12px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.container:not(.withIcon) .label {
|
|
131
|
+
margin-bottom: 8px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.container:not(.withIcon) .columnsWrapper {
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: space-between;
|
|
138
|
+
width: 100%;
|
|
130
139
|
}
|
|
131
140
|
}
|
|
132
141
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
142
|
+
@media (max-width: 575px) {
|
|
143
|
+
.duration {
|
|
144
|
+
text-align: left;
|
|
145
|
+
}
|
|
137
146
|
}
|
|
138
147
|
|
|
139
148
|
@media (max-width: 413px) {
|
|
140
|
-
.
|
|
149
|
+
.columnsWrapper {
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
align-items: flex-start;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.price {
|
|
141
155
|
text-align: left;
|
|
142
156
|
}
|
|
143
157
|
}
|
|
@@ -10,9 +10,10 @@ declare namespace _default {
|
|
|
10
10
|
export let excludeStories: RegExp;
|
|
11
11
|
export namespace args {
|
|
12
12
|
let label: string;
|
|
13
|
-
let
|
|
14
|
-
let
|
|
13
|
+
let duration: string;
|
|
14
|
+
let price: string;
|
|
15
15
|
let isActive: boolean;
|
|
16
|
+
let icon: string;
|
|
16
17
|
}
|
|
17
18
|
export namespace parameters {
|
|
18
19
|
namespace backgrounds {
|
|
@@ -20,7 +20,7 @@ export default {
|
|
|
20
20
|
component: SelectableListItem,
|
|
21
21
|
tags: ["autodocs"],
|
|
22
22
|
excludeStories: /.*Data$/,
|
|
23
|
-
args: __assign(__assign({}, ActionsData), { label: "Consultation juridique personnalisée visant à analyser votre situation et à vous fournir des conseils adaptés à vos besoins. Cette prestation inclut l'étude des documents pertinents, une évaluation des solutions juridiques envisageables, et des recommandations pour défendre efficacement vos intérêts.",
|
|
23
|
+
args: __assign(__assign({}, ActionsData), { label: "Consultation juridique personnalisée visant à analyser votre situation et à vous fournir des conseils adaptés à vos besoins. Cette prestation inclut l'étude des documents pertinents, une évaluation des solutions juridiques envisageables, et des recommandations pour défendre efficacement vos intérêts.", duration: "(35 min)", price: "100 €", isActive: false, icon: "allaw-icon-visio" }),
|
|
24
24
|
parameters: {
|
|
25
25
|
backgrounds: {
|
|
26
26
|
default: "light",
|
|
@@ -46,7 +46,8 @@ export var Default = Template.bind({});
|
|
|
46
46
|
export var Active = Template.bind({});
|
|
47
47
|
Active.args = {
|
|
48
48
|
label: "Adoption",
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
duration: "(35 min)",
|
|
50
|
+
price: "100 €",
|
|
51
51
|
isActive: true,
|
|
52
|
+
icon: "allaw-icon-visio",
|
|
52
53
|
};
|
|
@@ -7,9 +7,9 @@ declare const meta: {
|
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|
|
9
9
|
args: {
|
|
10
|
-
onLogin: import("@vitest/spy").Mock<[]
|
|
11
|
-
onLogout: import("@vitest/spy").Mock<[]
|
|
12
|
-
onCreateAccount: import("@vitest/spy").Mock<[]
|
|
10
|
+
onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
11
|
+
onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
12
|
+
onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
export default meta;
|