allaw-ui 0.0.18 → 0.0.19
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/README.md +29 -0
- package/dist/components/atoms/buttons/ButtonPrimary.css +52 -0
- package/dist/components/atoms/buttons/ButtonPrimary.d.ts +11 -0
- package/dist/components/atoms/buttons/ButtonPrimary.js +11 -0
- package/dist/components/atoms/tags/AppointementStatusTag.css +58 -0
- package/dist/components/atoms/tags/AppointementStatusTag.d.ts +8 -0
- package/dist/components/atoms/tags/AppointementStatusTag.js +41 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,35 @@ npm install
|
|
|
32
32
|
|
|
33
33
|
Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:6006).
|
|
34
34
|
|
|
35
|
+
### Utilisation des Couleurs
|
|
36
|
+
|
|
37
|
+
import "../node_modules/allaw-ui/dist/styles/colors.css";
|
|
38
|
+
|
|
39
|
+
<div className={styles.testCouleur}>
|
|
40
|
+
Test couleur variable --bleu-allaw
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
Fichier page.modules.css :
|
|
44
|
+
.testCouleur {
|
|
45
|
+
color: var(--bleu-allaw);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
### Utilisation des Boutons
|
|
49
|
+
|
|
50
|
+
import { Button } from "allaw-ui";
|
|
51
|
+
|
|
52
|
+
<Button
|
|
53
|
+
label="click me"
|
|
54
|
+
startIcon="allaw-icon-arrow-right"
|
|
55
|
+
endIcon="allaw-icon-arrow-left"
|
|
56
|
+
/>
|
|
57
|
+
|
|
58
|
+
### Utilisation des Tags
|
|
59
|
+
|
|
60
|
+
import { Tag } from "allaw-ui";
|
|
61
|
+
|
|
62
|
+
<Tag status="passed" variant="big" />
|
|
63
|
+
|
|
35
64
|
### Build
|
|
36
65
|
|
|
37
66
|
Pour construire la bibliothèque :
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.button-primary {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
gap: 0.5rem;
|
|
6
|
+
width: auto;
|
|
7
|
+
height: 42px;
|
|
8
|
+
padding: 1rem 1.3rem;
|
|
9
|
+
border-radius: 24px;
|
|
10
|
+
transition:
|
|
11
|
+
background-color 0.2s,
|
|
12
|
+
opacity 0.2s;
|
|
13
|
+
border: 0px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.button-primary-enabled {
|
|
17
|
+
background-color: #171e25;
|
|
18
|
+
color: white;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.button-primary-enabled:hover {
|
|
22
|
+
background-color: #1985e8;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.button-primary-enabled:active {
|
|
26
|
+
background-color: #1985e8;
|
|
27
|
+
opacity: 0.7;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.button-primary-disabled {
|
|
31
|
+
background-color: #b9b9b9;
|
|
32
|
+
opacity: 0.5;
|
|
33
|
+
color: #9b9b9b;
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.button-primary-icon {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
width: 20px;
|
|
42
|
+
height: 20px;
|
|
43
|
+
color: white;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.button-primary-label {
|
|
47
|
+
font-family: "Open Sans", sans-serif;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
line-height: 22px;
|
|
51
|
+
letter-spacing: 0em;
|
|
52
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
import "../../../styles/icons.css";
|
|
4
|
+
interface ButtonPrimaryProps {
|
|
5
|
+
startIcon?: React.ReactNode;
|
|
6
|
+
endIcon?: React.ReactNode;
|
|
7
|
+
label: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const ButtonPrimary: React.FC<ButtonPrimaryProps>;
|
|
11
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./ButtonPrimary.css";
|
|
3
|
+
import "../../../styles/icons.css";
|
|
4
|
+
var ButtonPrimary = function (_a) {
|
|
5
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
6
|
+
return (React.createElement("button", { className: "button-primary ".concat(disabled ? "button-primary-disabled" : "button-primary-enabled"), disabled: disabled },
|
|
7
|
+
startIcon && React.createElement("span", { className: "button-primary-icon ".concat(startIcon) }),
|
|
8
|
+
React.createElement("span", { className: "button-primary-label" }, label),
|
|
9
|
+
endIcon && React.createElement("span", { className: "button-primary-icon ".concat(endIcon) })));
|
|
10
|
+
};
|
|
11
|
+
export default ButtonPrimary;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
.appointement-status-tag {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
border-radius: 8px;
|
|
4
|
+
text-align: center;
|
|
5
|
+
font-family: "Open Sans", sans-serif;
|
|
6
|
+
padding: 4px 8px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.variant-big {
|
|
10
|
+
font-weight: 700;
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
letter-spacing: normal;
|
|
13
|
+
padding: 4px 8px;
|
|
14
|
+
line-height: 19.07px;
|
|
15
|
+
letter-spacing: -0.02em;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.variant-default {
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
font-size: 12px;
|
|
21
|
+
line-height: 16.34px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.status-confirmed {
|
|
25
|
+
background-color: #daf6e9;
|
|
26
|
+
color: #29a36a;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.status-pending {
|
|
30
|
+
background-color: #fdf2f2;
|
|
31
|
+
color: #e15151;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.status-available {
|
|
35
|
+
background-color: #daebfb;
|
|
36
|
+
color: #1985e8;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.status-unavailable,
|
|
40
|
+
.status-cancelled {
|
|
41
|
+
background-color: #f4f7fb;
|
|
42
|
+
color: #728ea7;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.status-passed {
|
|
46
|
+
background-color: #dee8f2;
|
|
47
|
+
color: #728ea7;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.status-refused {
|
|
51
|
+
background-color: #646464;
|
|
52
|
+
color: white;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.status-cancelled-big {
|
|
56
|
+
background-color: #fdf2f2;
|
|
57
|
+
color: #e15151;
|
|
58
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
interface AppointementStatusTagProps {
|
|
4
|
+
status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
|
|
5
|
+
variant?: "default" | "big";
|
|
6
|
+
}
|
|
7
|
+
declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
|
|
8
|
+
export default AppointementStatusTag;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./AppointementStatusTag.css";
|
|
3
|
+
var statusStyles = {
|
|
4
|
+
confirmed: "status-confirmed",
|
|
5
|
+
pending: "status-pending",
|
|
6
|
+
available: "status-available",
|
|
7
|
+
unavailable: "status-unavailable",
|
|
8
|
+
cancelled: "status-cancelled",
|
|
9
|
+
passed: "status-passed",
|
|
10
|
+
refused: "status-refused",
|
|
11
|
+
};
|
|
12
|
+
var statusLabels = {
|
|
13
|
+
confirmed: "CONFIRMÉ",
|
|
14
|
+
pending: "EN ATTENTE",
|
|
15
|
+
available: "DISPONIBLE",
|
|
16
|
+
unavailable: "INDISPONIBLE",
|
|
17
|
+
cancelled: "ANNULÉ",
|
|
18
|
+
passed: "PASSÉ",
|
|
19
|
+
refused: "REFUSÉ",
|
|
20
|
+
};
|
|
21
|
+
var variantLabels = {
|
|
22
|
+
confirmed: "RDV CONFIRMÉ",
|
|
23
|
+
passed: "RDV PASSÉ",
|
|
24
|
+
cancelled: "RDV ANNULÉ",
|
|
25
|
+
};
|
|
26
|
+
var variantStyles = {
|
|
27
|
+
big: "variant-big",
|
|
28
|
+
default: "variant-default",
|
|
29
|
+
};
|
|
30
|
+
var AppointementStatusTag = function (_a) {
|
|
31
|
+
var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
|
|
32
|
+
var label = variant === "big" && variantLabels[status]
|
|
33
|
+
? variantLabels[status]
|
|
34
|
+
: statusLabels[status];
|
|
35
|
+
var variantClass = variantStyles[variant];
|
|
36
|
+
var specificStyles = status === "cancelled" && variant === "big"
|
|
37
|
+
? "status-cancelled-big"
|
|
38
|
+
: statusStyles[status];
|
|
39
|
+
return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
|
|
40
|
+
};
|
|
41
|
+
export default AppointementStatusTag;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as Button } from "./components/buttons/ButtonPrimary";
|
|
2
|
-
export { default as Tag } from "./components/tags/AppointementStatusTag";
|
|
1
|
+
export { default as Button } from "./components/atoms/buttons/ButtonPrimary";
|
|
2
|
+
export { default as Tag } from "./components/atoms/tags/AppointementStatusTag";
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as Button } from "./components/buttons/ButtonPrimary";
|
|
2
|
-
export { default as Tag } from "./components/tags/AppointementStatusTag";
|
|
1
|
+
export { default as Button } from "./components/atoms/buttons/ButtonPrimary";
|
|
2
|
+
export { default as Tag } from "./components/atoms/tags/AppointementStatusTag";
|