@rpg-engine/long-bow 0.6.28 → 0.6.29
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/Tutorial/TutorialStepper.d.ts +1 -1
- package/dist/long-bow.cjs.development.js +273 -291
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +273 -291
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Stepper.tsx +1 -1
- package/src/components/Tutorial/TutorialStepper.tsx +56 -47
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import styled, { CSSProperties } from 'styled-components';
|
|
3
|
+
import { uiColors } from '../../constants/uiColors';
|
|
3
4
|
import { Stepper } from '../Stepper';
|
|
4
5
|
import { DynamicText } from '../typography/DynamicText';
|
|
5
6
|
|
|
@@ -16,56 +17,61 @@ export interface ITutorialStepperProps {
|
|
|
16
17
|
imageStyle?: CSSProperties;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
export const TutorialStepper = (
|
|
20
|
-
lessons,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
export const TutorialStepper = React.memo(
|
|
21
|
+
({ lessons, onLessonFinish, imageStyle }: ITutorialStepperProps) => {
|
|
22
|
+
const generateLessons = useMemo(
|
|
23
|
+
() =>
|
|
24
|
+
lessons.map((lesson, index) => ({
|
|
25
|
+
component: (
|
|
26
|
+
<LessonContainer key={index} className="lesson-container">
|
|
27
|
+
<LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
|
|
28
|
+
{lesson.image && (
|
|
29
|
+
<LessonImage className="lesson-image" style={imageStyle}>
|
|
30
|
+
<img
|
|
31
|
+
src={lesson.image}
|
|
32
|
+
alt={lesson.title || 'Tutorial image'}
|
|
33
|
+
loading="lazy"
|
|
34
|
+
/>
|
|
35
|
+
</LessonImage>
|
|
36
|
+
)}
|
|
37
|
+
<LessonFooter className="lesson-footer">
|
|
38
|
+
{lesson.body && (
|
|
39
|
+
<LessonBody className="lesson-body">{lesson.body}</LessonBody>
|
|
40
|
+
)}
|
|
41
|
+
{lesson.text && <DynamicText text={lesson.text} />}
|
|
42
|
+
</LessonFooter>
|
|
43
|
+
</LessonContainer>
|
|
44
|
+
),
|
|
45
|
+
id: index,
|
|
46
|
+
})),
|
|
47
|
+
[lessons, imageStyle]
|
|
48
|
+
);
|
|
45
49
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
};
|
|
50
|
+
return (
|
|
51
|
+
<Container>
|
|
52
|
+
<Stepper
|
|
53
|
+
steps={generateLessons}
|
|
54
|
+
finalCTAButton={{
|
|
55
|
+
label: 'Close',
|
|
56
|
+
onClick: onLessonFinish,
|
|
57
|
+
}}
|
|
58
|
+
useSideArrows
|
|
59
|
+
/>
|
|
60
|
+
</Container>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
);
|
|
61
64
|
|
|
62
65
|
const LessonBody = styled.div``;
|
|
63
66
|
|
|
64
67
|
const Container = styled.div`
|
|
65
|
-
margin:
|
|
66
|
-
|
|
68
|
+
margin: 1rem auto;
|
|
67
69
|
width: 80%;
|
|
68
|
-
|
|
70
|
+
max-width: 600px;
|
|
71
|
+
|
|
72
|
+
@media (max-width: 600px) {
|
|
73
|
+
width: 95%;
|
|
74
|
+
}
|
|
69
75
|
`;
|
|
70
76
|
|
|
71
77
|
const LessonFooter = styled.div`
|
|
@@ -78,7 +84,7 @@ const LessonImage = styled.div`
|
|
|
78
84
|
align-items: center;
|
|
79
85
|
width: 100%;
|
|
80
86
|
height: auto;
|
|
81
|
-
max-width:
|
|
87
|
+
max-width: 500px;
|
|
82
88
|
margin: auto;
|
|
83
89
|
|
|
84
90
|
img {
|
|
@@ -89,6 +95,9 @@ const LessonImage = styled.div`
|
|
|
89
95
|
}
|
|
90
96
|
`;
|
|
91
97
|
|
|
92
|
-
const LessonTitle = styled.h1
|
|
98
|
+
const LessonTitle = styled.h1`
|
|
99
|
+
color: ${uiColors.yellow} !important;
|
|
100
|
+
font-size: 0.8rem !important;
|
|
101
|
+
`;
|
|
93
102
|
|
|
94
103
|
const LessonContainer = styled.div``;
|