Skip to content

Commit 838b1fd

Browse files
thomaswhyyouthomaswhyyou
authored
chore: guides toolbar v2 design update (#889)
1 parent e49867c commit 838b1fd

13 files changed

Lines changed: 1052 additions & 474 deletions

File tree

‎.changeset/modern-mice-fix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@knocklabs/react": patch
3+
---
4+
5+
[guides] designs update for guide toolbar v2

‎packages/react/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@
8181
"@telegraph/combobox": "^0.2.1",
8282
"@telegraph/icon": "^0.4.0",
8383
"@telegraph/layout": "^0.4.0",
84+
"@telegraph/segmented-control": "^0.2.1",
8485
"@telegraph/select": "^0.0.84",
86+
"@telegraph/tag": "^0.1.3",
8587
"@telegraph/tokens": "^0.1.3",
8688
"@telegraph/tooltip": "0.1.1",
8789
"@telegraph/typography": "^0.2.0",

‎packages/react/src/modules/guide/components/Toolbar/V2/DragHandle.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/react/src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Stack } from "@telegraph/layout";
2+
import { Tooltip } from "@telegraph/tooltip";
3+
4+
export type StatusColor = "blue" | "red" | "yellow" | "gray";
5+
6+
// Directly copied from the design prototype.
7+
const STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {
8+
blue: (
9+
<svg width="8" height="8" viewBox="0 0 8 8" aria-hidden>
10+
<circle cx="4" cy="4" r="4" fill="var(--tgph-blue-9)" />
11+
</svg>
12+
),
13+
yellow: (
14+
<svg width="8" height="8" viewBox="0 0 8 8" aria-hidden>
15+
<polygon points="4,0.5 7.5,7.5 0.5,7.5" fill="var(--tgph-yellow-9)" />
16+
</svg>
17+
),
18+
gray: (
19+
<svg width="8" height="8" viewBox="0 0 8 8" aria-hidden>
20+
<circle
21+
cx="4"
22+
cy="4"
23+
r="2.75"
24+
fill="none"
25+
stroke="var(--tgph-gray-9)"
26+
strokeWidth="2.5"
27+
/>
28+
</svg>
29+
),
30+
red: (
31+
<svg width="8" height="8" viewBox="0 0 8 8" aria-hidden>
32+
<line
33+
x1="1.5"
34+
y1="1.5"
35+
x2="6.5"
36+
y2="6.5"
37+
stroke="var(--tgph-red-9)"
38+
strokeWidth="2"
39+
strokeLinecap="round"
40+
/>
41+
<line
42+
x1="6.5"
43+
y1="1.5"
44+
x2="1.5"
45+
y2="6.5"
46+
stroke="var(--tgph-red-9)"
47+
strokeWidth="2"
48+
strokeLinecap="round"
49+
/>
50+
</svg>
51+
),
52+
};
53+
54+
export const GuideAnnotatedStatusDot = ({
55+
color,
56+
tooltip,
57+
}: {
58+
color: StatusColor;
59+
tooltip: string;
60+
}) => {
61+
return (
62+
<Tooltip label={tooltip}>
63+
<Stack
64+
as="span"
65+
align="center"
66+
justify="center"
67+
display="inline-flex"
68+
p="0_5"
69+
style={{ flexShrink: 0 }}
70+
>
71+
{STATUS_SHAPES[color]}
72+
</Stack>
73+
</Tooltip>
74+
);
75+
};

‎packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx‎

Lines changed: 63 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,74 @@
1-
import { useGuideContext, useStore } from "@knocklabs/react-core";
2-
import { Button } from "@telegraph/button";
3-
import { Icon } from "@telegraph/icon";
1+
import { useGuideContext } from "@knocklabs/react-core";
42
import { Box, Stack } from "@telegraph/layout";
5-
import { Tooltip } from "@telegraph/tooltip";
63
import { Text } from "@telegraph/typography";
7-
import { ChevronDown, ChevronRight, Info } from "lucide-react";
8-
import * as React from "react";
94

105
export const GuideContextDetails = () => {
116
const { client } = useGuideContext();
12-
const [isExpanded, setIsExpanded] = React.useState(false);
13-
14-
const { defaultGroup, debugSettings } = useStore(client.store, (state) => {
15-
return {
16-
defaultGroup: state.guideGroups[0],
17-
debugSettings: state.debug || {},
18-
};
19-
});
20-
const displayInterval = defaultGroup?.display_interval ?? null;
217

228
return (
23-
<Stack direction="column" borderTop="px">
24-
<Stack
25-
h="5"
26-
px="2"
27-
bg="gray-3"
28-
align="center"
29-
gap="1"
30-
style={{ cursor: "pointer" }}
31-
onClick={() => setIsExpanded((prev) => !prev)}
32-
>
33-
<Text as="span" size="0" weight="medium">
34-
More
35-
</Text>
36-
{isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
37-
</Stack>
38-
39-
{isExpanded && (
40-
<Stack direction="column">
41-
<Stack
42-
align="center"
43-
justify="space-between"
44-
py="1"
45-
px="2"
46-
borderTop="px"
9+
<Box py="3" px="3">
10+
<Text as="span" size="1" weight="medium">
11+
Target params
12+
</Text>
13+
<Stack direction="column" gap="2" mt="2">
14+
<Stack direction="row" gap="2" align="center">
15+
<Text
16+
as="span"
17+
size="1"
18+
weight="medium"
19+
color="gray"
20+
width="36"
21+
mt="1"
4722
>
48-
<Stack align="center" gap="1">
49-
<Text as="span" size="0" weight="medium">
50-
Client-only engagement
51-
</Text>
52-
<Tooltip label="Contain engagement actions to the client side only while in preview without sending engagement events to the API">
53-
<Icon icon={Info} size="0" color="gray" aria-hidden />
54-
</Tooltip>
55-
</Stack>
56-
<Button
57-
size="0"
58-
variant="soft"
59-
color={debugSettings.skipEngagementTracking ? "green" : "gray"}
60-
onClick={() =>
61-
client.setDebug({
62-
...debugSettings,
63-
skipEngagementTracking: !debugSettings.skipEngagementTracking,
64-
})
65-
}
66-
>
67-
{debugSettings.skipEngagementTracking ? "On" : "Off"}
68-
</Button>
69-
</Stack>
70-
71-
<Stack direction="column" py="1" px="2">
72-
<Stack align="center" justify="space-between">
73-
<Stack align="center" gap="1">
74-
<Text as="span" size="0" weight="medium">
75-
Suspend throttling
76-
</Text>
77-
<Tooltip label="Suspend throttling during preview, and show next guide immediately">
78-
<Icon icon={Info} size="0" color="gray" aria-hidden />
79-
</Tooltip>
80-
</Stack>
81-
<Button
82-
size="0"
83-
variant="soft"
84-
color={debugSettings.ignoreDisplayInterval ? "green" : "gray"}
85-
onClick={() =>
86-
client.setDebug({
87-
...debugSettings,
88-
ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,
89-
})
90-
}
91-
>
92-
{debugSettings.ignoreDisplayInterval ? "On" : "Off"}
93-
</Button>
94-
</Stack>
95-
<Stack direction="row" gap="0_5" py="1">
96-
<Text as="span" size="0" color="gray">
97-
Throttle:{" "}
98-
{debugSettings.ignoreDisplayInterval
99-
? "(ignored)"
100-
: displayInterval === null
101-
? "(none)"
102-
: `Every ${displayInterval}s`}
103-
</Text>
104-
</Stack>
105-
</Stack>
106-
107-
<Stack direction="column" py="1" px="2" borderTop="px">
108-
<Text as="span" size="0" weight="medium">
109-
Target params
110-
</Text>
111-
<Stack direction="column" gap="0_5" mt="1">
112-
<Text as="span" size="0" color="gray">
113-
Tenant
114-
</Text>
115-
<Text as="code" size="0">
116-
{client.targetParams.tenant ? (
117-
<Box
118-
rounded="2"
119-
overflow="auto"
120-
backgroundColor="gray-2"
121-
border="px"
122-
style={{ maxHeight: "200px" }}
123-
>
124-
<pre style={{ fontSize: "11px", margin: 0 }}>
125-
<code>{client.targetParams.tenant}</code>
126-
</pre>
127-
</Box>
128-
) : (
129-
<Text as="code" size="0">
130-
-
131-
</Text>
132-
)}
133-
</Text>
134-
</Stack>
135-
136-
<Stack direction="column" gap="0_5">
137-
<Text as="span" size="0" color="gray">
138-
Data
139-
</Text>
140-
{client.targetParams.data ? (
141-
<Box
142-
rounded="2"
143-
overflow="auto"
144-
backgroundColor="gray-2"
145-
border="px"
146-
style={{ maxHeight: "200px" }}
147-
>
148-
<pre style={{ fontSize: "11px", margin: 0 }}>
149-
<code>
150-
{JSON.stringify(client.targetParams.data, null, 2)}
151-
</code>
152-
</pre>
153-
</Box>
154-
) : (
155-
<Text as="code" size="0">
156-
-
157-
</Text>
158-
)}
159-
</Stack>
160-
</Stack>
23+
Tenant
24+
</Text>
25+
<Box
26+
rounded="2"
27+
overflow="auto"
28+
backgroundColor="surface-2"
29+
border="px"
30+
p="1"
31+
style={{ flex: 1, minWidth: 0 }}
32+
>
33+
<pre style={{ fontSize: "11px", margin: 0 }}>
34+
<code>{client.targetParams.tenant || "-"}</code>
35+
</pre>
36+
</Box>
16137
</Stack>
162-
)}
163-
</Stack>
38+
<Stack direction="row" gap="2" align="flex-start">
39+
<Text
40+
as="span"
41+
size="1"
42+
weight="medium"
43+
color="gray"
44+
width="36"
45+
mt="1"
46+
>
47+
Data
48+
</Text>
49+
<Box
50+
rounded="2"
51+
overflow="auto"
52+
backgroundColor="surface-2"
53+
border="px"
54+
p="1"
55+
style={{
56+
flex: 1,
57+
minWidth: 0,
58+
minHeight: "50px",
59+
maxHeight: "200px",
60+
}}
61+
>
62+
<pre style={{ fontSize: "11px", margin: 0 }}>
63+
<code>
64+
{client.targetParams.data
65+
? JSON.stringify(client.targetParams.data, null, 2)
66+
: "-"}
67+
</code>
68+
</pre>
69+
</Box>
70+
</Stack>
71+
</Stack>
72+
</Box>
16473
);
16574
};

0 commit comments

Comments
 (0)