allaw-ui 1.0.150 → 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 +77 -66
- package/dist/components/atoms/selects/SelectableListItem.stories.d.ts +3 -2
- package/dist/components/atoms/selects/SelectableListItem.stories.js +4 -3
- package/dist/components/molecules/stepper/Stepper.css +3 -1
- 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;
|
|
@@ -14,103 +14,80 @@
|
|
|
14
14
|
min-height: 48px;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
padding: 12px 16px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.selectableListItemIcon {
|
|
23
|
-
display: none;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media (max-width: 575px) {
|
|
28
|
-
.selectableListItem {
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
align-items: flex-start;
|
|
31
|
-
padding: 12px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.selectableListItemLabel {
|
|
35
|
-
margin-bottom: 8px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.selectableListItemColumnsWrapper {
|
|
39
|
-
flex-direction: row;
|
|
40
|
-
align-items: center;
|
|
41
|
-
justify-content: space-between;
|
|
42
|
-
width: 100%;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@media (max-width: 413px) {
|
|
47
|
-
.selectableListItemColumnsWrapper {
|
|
48
|
-
flex-direction: column;
|
|
49
|
-
align-items: flex-start;
|
|
50
|
-
}
|
|
17
|
+
.withIcon {
|
|
18
|
+
flex-direction: row !important;
|
|
51
19
|
}
|
|
52
20
|
|
|
53
|
-
.
|
|
21
|
+
.container:hover {
|
|
54
22
|
background-color: #e6edf5;
|
|
55
23
|
}
|
|
56
24
|
|
|
57
|
-
.
|
|
25
|
+
.active {
|
|
58
26
|
background: #e6edf5;
|
|
59
27
|
outline: 1px solid #728ea7;
|
|
60
28
|
}
|
|
61
29
|
|
|
62
|
-
.
|
|
30
|
+
.iconContainer {
|
|
63
31
|
display: flex;
|
|
64
32
|
align-items: center;
|
|
65
33
|
justify-content: center;
|
|
66
34
|
border-radius: 50%;
|
|
67
|
-
background: #
|
|
35
|
+
background: #ffffff;
|
|
68
36
|
width: 24px;
|
|
69
37
|
min-width: 25px;
|
|
70
38
|
height: 24px;
|
|
71
39
|
border: 1px solid #d1dce7;
|
|
72
40
|
}
|
|
73
41
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
42
|
+
.activeIcon {
|
|
43
|
+
color: rgb(37, 190, 235);
|
|
44
|
+
font-size: 22px;
|
|
45
|
+
font-weight: 600;
|
|
46
|
+
width: 40px;
|
|
78
47
|
}
|
|
79
48
|
|
|
80
|
-
.
|
|
81
|
-
|
|
82
|
-
|
|
49
|
+
.iconWrapper {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
83
53
|
}
|
|
84
54
|
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
55
|
+
.icon {
|
|
56
|
+
color: rgb(37, 190, 235);
|
|
57
|
+
font-size: 22px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
width: 40px;
|
|
90
60
|
}
|
|
91
61
|
|
|
92
|
-
.
|
|
62
|
+
.content {
|
|
93
63
|
flex-grow: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.label {
|
|
94
67
|
font-family: "Open Sans", sans-serif;
|
|
95
|
-
|
|
68
|
+
|
|
96
69
|
font-style: normal;
|
|
97
|
-
|
|
70
|
+
font-weight: 600;
|
|
98
71
|
display: -webkit-box;
|
|
99
72
|
-webkit-box-orient: vertical;
|
|
100
73
|
-webkit-line-clamp: 3;
|
|
101
74
|
overflow: hidden;
|
|
102
75
|
text-overflow: ellipsis;
|
|
103
|
-
max-height: calc(16px * 1.
|
|
76
|
+
max-height: calc(16px * 1.3 * 3);
|
|
104
77
|
text-align: left;
|
|
78
|
+
font-size: 16px;
|
|
79
|
+
font-style: normal;
|
|
80
|
+
text-align: start;
|
|
81
|
+
line-height: normal;
|
|
105
82
|
}
|
|
106
83
|
|
|
107
|
-
.
|
|
84
|
+
.columnsWrapper {
|
|
108
85
|
display: flex;
|
|
109
86
|
gap: 12px;
|
|
110
87
|
}
|
|
111
88
|
|
|
112
|
-
.
|
|
113
|
-
.
|
|
89
|
+
.duration,
|
|
90
|
+
.price {
|
|
114
91
|
flex-shrink: 0;
|
|
115
92
|
text-align: right;
|
|
116
93
|
font-family: "Open Sans", sans-serif;
|
|
@@ -122,25 +99,59 @@
|
|
|
122
99
|
text-overflow: ellipsis;
|
|
123
100
|
}
|
|
124
101
|
|
|
125
|
-
.
|
|
102
|
+
.duration {
|
|
126
103
|
color: var(--mid-grey, #728ea7);
|
|
127
104
|
width: 80px;
|
|
128
105
|
}
|
|
129
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
|
+
|
|
130
123
|
@media (max-width: 575px) {
|
|
131
|
-
.
|
|
132
|
-
|
|
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%;
|
|
133
139
|
}
|
|
134
140
|
}
|
|
135
141
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
142
|
+
@media (max-width: 575px) {
|
|
143
|
+
.duration {
|
|
144
|
+
text-align: left;
|
|
145
|
+
}
|
|
140
146
|
}
|
|
141
147
|
|
|
142
148
|
@media (max-width: 413px) {
|
|
143
|
-
.
|
|
149
|
+
.columnsWrapper {
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
align-items: flex-start;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.price {
|
|
144
155
|
text-align: left;
|
|
145
156
|
}
|
|
146
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
|
};
|
|
@@ -97,10 +97,12 @@
|
|
|
97
97
|
|
|
98
98
|
@media (max-width: 800px) {
|
|
99
99
|
.stepper-container {
|
|
100
|
-
height:
|
|
100
|
+
height: 99dvh;
|
|
101
101
|
position: fixed;
|
|
102
102
|
bottom: 0;
|
|
103
103
|
justify-content: start;
|
|
104
104
|
padding: 2rem;
|
|
105
|
+
border-bottom-left-radius: 0;
|
|
106
|
+
border-bottom-right-radius: 0;
|
|
105
107
|
}
|
|
106
108
|
}
|