@campxdev/react-blueprint 1.0.8 → 1.0.11
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/package.json
CHANGED
|
@@ -104,6 +104,8 @@ export const Tutorial = ({
|
|
|
104
104
|
run={run}
|
|
105
105
|
showSkipButton
|
|
106
106
|
showProgress={showProgress}
|
|
107
|
+
disableCloseOnEsc
|
|
108
|
+
disableOverlayClose
|
|
107
109
|
spotlightPadding={5}
|
|
108
110
|
locale={{
|
|
109
111
|
last: "Got it",
|
|
@@ -113,12 +115,13 @@ export const Tutorial = ({
|
|
|
113
115
|
}}
|
|
114
116
|
styles={{
|
|
115
117
|
buttonNext: {
|
|
116
|
-
backgroundColor:
|
|
117
|
-
color:
|
|
118
|
+
backgroundColor: theme.palette.primary.main,
|
|
119
|
+
color: theme.palette.secondary.light,
|
|
120
|
+
border: "none",
|
|
118
121
|
height: "28px",
|
|
119
122
|
width: "100px",
|
|
120
123
|
padding: "0px",
|
|
121
|
-
fontFamily: "
|
|
124
|
+
fontFamily: "Heebo, sans-serif",
|
|
122
125
|
},
|
|
123
126
|
buttonBack: {
|
|
124
127
|
backgroundColor: "transparent",
|
|
@@ -130,8 +133,16 @@ export const Tutorial = ({
|
|
|
130
133
|
marginLeft: "5px",
|
|
131
134
|
padding: "0px",
|
|
132
135
|
border: "1px solid black",
|
|
133
|
-
fontFamily: "
|
|
136
|
+
fontFamily: "Heebo, sans-serif",
|
|
134
137
|
},
|
|
138
|
+
tooltip: {
|
|
139
|
+
padding: "10px",
|
|
140
|
+
},
|
|
141
|
+
tooltipContainer: {
|
|
142
|
+
display: "flex",
|
|
143
|
+
backgroundColor: theme.palette.surface.paperBackground,
|
|
144
|
+
},
|
|
145
|
+
|
|
135
146
|
options: {},
|
|
136
147
|
}}
|
|
137
148
|
/>
|
|
@@ -51,13 +51,8 @@ export const Sidebar = ({
|
|
|
51
51
|
let resolved = useResolvedPath(path);
|
|
52
52
|
let match = useMatch({ path: resolved.pathname, end: false });
|
|
53
53
|
return (
|
|
54
|
-
<StyledListItem
|
|
55
|
-
|
|
56
|
-
disablePadding
|
|
57
|
-
match={match}
|
|
58
|
-
className="listItem"
|
|
59
|
-
>
|
|
60
|
-
<StyledLinkButton to={path}>
|
|
54
|
+
<StyledListItem key={path} disablePadding className="listItem">
|
|
55
|
+
<StyledLinkButton to={path} match={match}>
|
|
61
56
|
{!collapsed && (
|
|
62
57
|
<StyledListItemButton collapsed={collapsed}>
|
|
63
58
|
<StyledListItemIcon collapsed={collapsed}>
|
|
@@ -44,36 +44,50 @@ export const createSidebarStyles = (collapsed: boolean) => {
|
|
|
44
44
|
backgroundColor: theme.palette.surface.paperBackground,
|
|
45
45
|
height: "60px",
|
|
46
46
|
}));
|
|
47
|
-
|
|
47
|
+
|
|
48
|
+
interface StyledLinkButtonProps {
|
|
48
49
|
match: any;
|
|
49
50
|
}
|
|
50
|
-
|
|
51
|
+
|
|
52
|
+
const StyledListItem = styled(ListItem)(({ theme }) => ({
|
|
53
|
+
// width: collapsed ? "min-content" : "auto",
|
|
54
|
+
// backgroundColor: match ? theme.palette.secondary.main : "none",
|
|
55
|
+
display: "flex",
|
|
56
|
+
justifyContent: "center",
|
|
57
|
+
borderRadius: "4px",
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
const StyledLinkButton = styled(Link)<StyledLinkButtonProps>(
|
|
51
61
|
({ theme, match }) => ({
|
|
62
|
+
width: collapsed ? "auto" : "100%",
|
|
63
|
+
textDecoration: "none",
|
|
64
|
+
display: "flex",
|
|
65
|
+
margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
|
|
66
|
+
|
|
52
67
|
backgroundColor: match ? theme.palette.secondary.main : "none",
|
|
53
|
-
|
|
54
|
-
|
|
68
|
+
justifyContent: "center",
|
|
69
|
+
"&:hover": {
|
|
70
|
+
color: "unset",
|
|
71
|
+
},
|
|
55
72
|
borderRadius: "4px",
|
|
56
73
|
})
|
|
57
74
|
);
|
|
58
75
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"&:hover": {
|
|
63
|
-
color: "unset",
|
|
64
|
-
},
|
|
65
|
-
});
|
|
76
|
+
interface StyledListItemButtonProps {
|
|
77
|
+
collapsed: boolean;
|
|
78
|
+
}
|
|
66
79
|
|
|
67
|
-
const StyledListItemButton = styled(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
const StyledListItemButton = styled(
|
|
81
|
+
ListItemButton
|
|
82
|
+
)<StyledListItemButtonProps>(({ collapsed }) => ({
|
|
83
|
+
display: "flex",
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
justifyContent: collapsed ? "center" : "flex-start",
|
|
86
|
+
paddingBottom: "5px",
|
|
87
|
+
paddingTop: "5px",
|
|
88
|
+
width: "100%",
|
|
89
|
+
borderRadius: "5px",
|
|
90
|
+
}));
|
|
77
91
|
|
|
78
92
|
const StyledListItemIcon = styled(ListItemIcon)(
|
|
79
93
|
({ collapsed }: { collapsed: boolean }) => ({
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
|
|
3
|
+
import { Typography } from "../../components/DataDisplay/Typography/Typography";
|
|
4
|
+
import { useTheme } from "@mui/material";
|
|
3
5
|
|
|
4
6
|
export default {
|
|
5
7
|
title: "Feedback/Tutorial",
|
|
@@ -46,7 +48,18 @@ export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
|
|
|
46
48
|
steps: [
|
|
47
49
|
{
|
|
48
50
|
target: ".tutorial-target",
|
|
49
|
-
content:
|
|
51
|
+
content: (
|
|
52
|
+
<>
|
|
53
|
+
<div>
|
|
54
|
+
<Typography variant="body2">
|
|
55
|
+
Click the button above 👆 to submit your feedback.
|
|
56
|
+
</Typography>
|
|
57
|
+
<Typography variant="caption" color="highlight">
|
|
58
|
+
Check the environment box to ensure detailed reporting.
|
|
59
|
+
</Typography>
|
|
60
|
+
</div>
|
|
61
|
+
</>
|
|
62
|
+
),
|
|
50
63
|
disableBeacon: true,
|
|
51
64
|
},
|
|
52
65
|
// {
|