@yourdash/uikit 1.0.10 → 1.0.12
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/components/buttonWithIcon/buttonWithIcon.module.scss +1 -1
- package/components/buttonWithIcon/buttonWithIcon.tsx +2 -2
- package/components/icon/icon.tsx +16 -4
- package/components/icon/iconDictionary.ts +285 -566
- package/components/iconButton/iconButton.tsx +1 -1
- package/components/image/image.tsx +83 -83
- package/components/textInput/textInput.tsx +2 -2
- package/components/toast/toastAction.ts +12 -12
- package/package.json +1 -1
- package/views/dialog/dialog.tsx +23 -23
- package/views/onBoarding/onBoarding.tsx +143 -138
- package/views/onBoarding/onBoarding.tsx~ +0 -138
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import Card from "../../components/card/card.tsx";
|
|
3
|
-
import { UKIcon } from "../../components/icon/iconDictionary.ts";
|
|
4
|
-
import IconButton from "../../components/iconButton/iconButton.tsx";
|
|
5
|
-
import Image from "../../components/image/image.tsx";
|
|
6
|
-
import Heading from "../../components/heading/heading.tsx";
|
|
7
|
-
import Text from "../../components/text/text.tsx";
|
|
8
|
-
import ButtonWithIcon from "../../components/buttonWithIcon/buttonWithIcon.tsx";
|
|
9
|
-
import Button from "../../components/button/button.tsx";
|
|
10
|
-
import { Outlet } from "react-router";
|
|
11
|
-
import styles from "./onBoarding.module.scss";
|
|
12
|
-
import Flex from "../../components/flex/flex.tsx";
|
|
13
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
14
|
-
|
|
15
|
-
const OnBoarding: React.FC<{
|
|
16
|
-
meta: { id: string };
|
|
17
|
-
pages: {
|
|
18
|
-
headerImage: string;
|
|
19
|
-
header: string;
|
|
20
|
-
body: string;
|
|
21
|
-
actions: { label: string; icon?: UKIcon; onClick: () => void; changeTo?: "next" | "previous" | "remain" | "completed" }[];
|
|
22
|
-
allowGoBack?: boolean;
|
|
23
|
-
}[];
|
|
24
|
-
}> = ({ pages, meta }) => {
|
|
25
|
-
const [currentPage, setCurrentPage] = React.useState<number>(0);
|
|
26
|
-
const page = pages[currentPage];
|
|
27
|
-
|
|
28
|
-
if (localStorage.getItem(`yourdash-application-visited-${meta.id}`) || currentPage > pages.length - 1) {
|
|
29
|
-
localStorage.setItem(`yourdash-application-visited-${meta.id}`, "true");
|
|
30
|
-
|
|
31
|
-
return <Outlet />;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<div className={styles.page}>
|
|
36
|
-
<Card
|
|
37
|
-
className={styles.card}
|
|
38
|
-
containerClassName={styles.cardContainer}
|
|
39
|
-
>
|
|
40
|
-
{page.allowGoBack && (
|
|
41
|
-
<IconButton
|
|
42
|
-
className={clippy(styles.goBackButton, "animate__animated animate__fadeInDown")}
|
|
43
|
-
accessibleLabel="Go back to the last page"
|
|
44
|
-
icon={UKIcon.ChevronLeft}
|
|
45
|
-
onClick={() => {
|
|
46
|
-
setCurrentPage(currentPage - 1);
|
|
47
|
-
}}
|
|
48
|
-
/>
|
|
49
|
-
)}
|
|
50
|
-
<Image
|
|
51
|
-
className={styles.headerImage}
|
|
52
|
-
src={page.headerImage}
|
|
53
|
-
accessibleLabel=""
|
|
54
|
-
/>
|
|
55
|
-
<Heading
|
|
56
|
-
className={styles.header}
|
|
57
|
-
text={page.header}
|
|
58
|
-
/>
|
|
59
|
-
<Text
|
|
60
|
-
className={styles.body}
|
|
61
|
-
text={page.body}
|
|
62
|
-
/>
|
|
63
|
-
<Flex
|
|
64
|
-
className={styles.actions}
|
|
65
|
-
direction="row"
|
|
66
|
-
>
|
|
67
|
-
{page.actions.map((action) => {
|
|
68
|
-
if (action.icon) {
|
|
69
|
-
return (
|
|
70
|
-
<>
|
|
71
|
-
<ButtonWithIcon
|
|
72
|
-
key={action.label}
|
|
73
|
-
className={clippy(styles.action, styles.actionWithIcon)}
|
|
74
|
-
text={action.label}
|
|
75
|
-
icon={action.icon}
|
|
76
|
-
onClick={() => {
|
|
77
|
-
action.onClick();
|
|
78
|
-
if (action.changeTo) {
|
|
79
|
-
switch (action.changeTo) {
|
|
80
|
-
case "next":
|
|
81
|
-
setCurrentPage(currentPage + 1);
|
|
82
|
-
break;
|
|
83
|
-
case "previous":
|
|
84
|
-
if (currentPage > 0) setCurrentPage(currentPage - 1);
|
|
85
|
-
break;
|
|
86
|
-
case "remain":
|
|
87
|
-
break;
|
|
88
|
-
case "completed":
|
|
89
|
-
setCurrentPage(pages.length + 1);
|
|
90
|
-
break;
|
|
91
|
-
default:
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}}
|
|
96
|
-
/>
|
|
97
|
-
</>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return (
|
|
102
|
-
<>
|
|
103
|
-
<Button
|
|
104
|
-
key={action.icon}
|
|
105
|
-
className={clippy(styles.action, styles.actionWithoutIcon, "animate__animated animate__fadeInUp")}
|
|
106
|
-
text={action.label}
|
|
107
|
-
onClick={() => {
|
|
108
|
-
action.onClick();
|
|
109
|
-
|
|
110
|
-
if (action.changeTo) {
|
|
111
|
-
switch (action.changeTo) {
|
|
112
|
-
case "next":
|
|
113
|
-
setCurrentPage(currentPage + 1);
|
|
114
|
-
break;
|
|
115
|
-
case "previous":
|
|
116
|
-
if (currentPage > 0) setCurrentPage(currentPage - 1);
|
|
117
|
-
break;
|
|
118
|
-
case "remain":
|
|
119
|
-
break;
|
|
120
|
-
case "completed":
|
|
121
|
-
setCurrentPage(pages.length + 1);
|
|
122
|
-
break;
|
|
123
|
-
default:
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}}
|
|
128
|
-
/>
|
|
129
|
-
</>
|
|
130
|
-
);
|
|
131
|
-
})}
|
|
132
|
-
</Flex>
|
|
133
|
-
</Card>
|
|
134
|
-
</div>
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export default OnBoarding;
|