Skip to content

Commit 1077709

Browse files
samejrsamejr
authored
Side help panel (#1488)
* WIP adding a side help panel to the tasks page * Optionally display the shortcut before the trailing icon in the button * Updated the close icon * WIP adding a new side help panel * WIP adding content to the side help panel * WIP new side help panel content * Removed images as not needed any more * Added content to the side help menu * Help panel open/closed state stored as cookie * Removed the icons from the docs and examples links
1 parent 54017cb commit 1077709

File tree

6 files changed

+746
-186
lines changed

6 files changed

+746
-186
lines changed

‎apps/webapp/app/assets/icons/SideMenuRightClosed.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function SideMenuRightClosedIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
className={className}
5+
width="20"
6+
height="20"
7+
viewBox="0 0 20 20"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<rect x="12" y="4" width="1" height="12" fill="currentColor" />
12+
<rect x="2.5" y="3.5" width="15" height="13" rx="2.5" stroke="currentColor" />
13+
</svg>
14+
);
15+
}

‎apps/webapp/app/components/primitives/AnimatingArrow.tsx

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
2+
import { cn } from "~/utils/cn";
3+
4+
const variants = {
5+
small: {
6+
size: "size-[1rem]",
7+
arrowHeadRight: "group-hover:translate-x-[3px]",
8+
arrowLineRight: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
9+
arrowHeadLeft: "group-hover:translate-x-[3px]",
10+
arrowLineLeft: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
11+
arrowHeadTopRight:
12+
"-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
13+
},
14+
medium: {
15+
size: "size-[1.1rem]",
16+
arrowHeadRight: "group-hover:translate-x-[3px]",
17+
arrowLineRight: "h-[1.5px] w-[9px] translate-x-1 top-[calc(50%-1px)]",
18+
arrowHeadLeft: "group-hover:translate-x-[-3px]",
19+
arrowLineLeft: "h-[1.5px] w-[9px] translate-x-1 top-[calc(50%-1px)]",
20+
arrowHeadTopRight:
21+
"-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
22+
},
23+
large: {
24+
size: "size-6",
25+
arrowHeadRight: "group-hover:translate-x-1",
26+
arrowLineRight: "h-[2.3px] w-[12px] translate-x-[6px] top-[calc(50%-1px)]",
27+
arrowHeadLeft: "group-hover:translate-x-1",
28+
arrowLineLeft: "h-[2.3px] w-[12px] translate-x-[6px] top-[calc(50%-1px)]",
29+
arrowHeadTopRight:
30+
"-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
31+
},
32+
"extra-large": {
33+
size: "size-8",
34+
arrowHeadRight: "group-hover:translate-x-1",
35+
arrowLineRight: "h-[3px] w-[16px] translate-x-[8px] top-[calc(50%-1.5px)]",
36+
arrowHeadLeft: "group-hover:translate-x-1",
37+
arrowLineLeft: "h-[3px] w-[16px] translate-x-[8px] top-[calc(50%-1.5px)]",
38+
arrowHeadTopRight:
39+
"-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
40+
},
41+
};
42+
43+
export const themes = {
44+
dark: {
45+
textStyle: "text-background-bright",
46+
arrowLine: "bg-background-bright",
47+
},
48+
dimmed: {
49+
textStyle: "text-text-dimmed",
50+
arrowLine: "bg-text-dimmed",
51+
},
52+
bright: {
53+
textStyle: "text-text-bright",
54+
arrowLine: "bg-text-bright",
55+
},
56+
primary: {
57+
textStyle: "text-text-dimmed group-hover:text-primary",
58+
arrowLine: "bg-text-dimmed group-hover:bg-primary",
59+
},
60+
blue: {
61+
textStyle: "text-text-dimmed group-hover:text-blue-500",
62+
arrowLine: "bg-text-dimmed group-hover:bg-blue-500",
63+
},
64+
rose: {
65+
textStyle: "text-text-dimmed group-hover:text-rose-500",
66+
arrowLine: "bg-text-dimmed group-hover:bg-rose-500",
67+
},
68+
amber: {
69+
textStyle: "text-text-dimmed group-hover:text-amber-500",
70+
arrowLine: "bg-text-dimmed group-hover:bg-amber-500",
71+
},
72+
apple: {
73+
textStyle: "text-text-dimmed group-hover:text-apple-500",
74+
arrowLine: "bg-text-dimmed group-hover:bg-apple-500",
75+
},
76+
lavender: {
77+
textStyle: "text-text-dimmed group-hover:text-lavender-500",
78+
arrowLine: "bg-text-dimmed group-hover:bg-lavender-500",
79+
},
80+
};
81+
82+
type Variants = keyof typeof variants;
83+
type Theme = keyof typeof themes;
84+
85+
type AnimatingArrowProps = {
86+
className?: string;
87+
variant?: Variants;
88+
theme?: Theme;
89+
direction?: "right" | "left" | "topRight";
90+
};
91+
92+
export function AnimatingArrow({
93+
className,
94+
variant = "medium",
95+
theme = "dimmed",
96+
direction = "right",
97+
}: AnimatingArrowProps) {
98+
const variantStyles = variants[variant];
99+
const themeStyles = themes[theme];
100+
101+
return (
102+
<span className={cn("relative -mr-1 ml-1 flex", variantStyles.size, className)}>
103+
{direction === "topRight" && (
104+
<>
105+
<svg
106+
className={cn(
107+
"absolute top-[5px] transition duration-200 ease-in-out",
108+
themeStyles.textStyle
109+
)}
110+
width="9"
111+
height="8"
112+
viewBox="0 0 9 8"
113+
fill="none"
114+
xmlns="http://www.w3.org/2000/svg"
115+
>
116+
<path d="M1.5 7L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
117+
</svg>
118+
119+
<svg
120+
className={cn(
121+
"absolute top-[5px] transition duration-300 ease-in-out",
122+
themeStyles.textStyle,
123+
variantStyles.arrowHeadTopRight
124+
)}
125+
width="9"
126+
height="8"
127+
viewBox="0 0 9 8"
128+
fill="none"
129+
xmlns="http://www.w3.org/2000/svg"
130+
>
131+
<path d="M1 1H7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
132+
<path d="M7.5 7L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
133+
<path d="M1 7.5L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
134+
</svg>
135+
</>
136+
)}
137+
{direction === "right" && (
138+
<>
139+
<span
140+
className={cn(
141+
"absolute rounded-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100",
142+
variantStyles.arrowLineRight,
143+
themeStyles.arrowLine
144+
)}
145+
/>
146+
<ChevronRightIcon
147+
className={cn(
148+
"absolute -translate-x-0.5 transition duration-300 ease-in-out",
149+
variantStyles.arrowHeadRight,
150+
variantStyles.size,
151+
themeStyles.textStyle
152+
)}
153+
/>
154+
</>
155+
)}
156+
{direction === "left" && (
157+
<>
158+
<span
159+
className={cn(
160+
"absolute rounded-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100",
161+
variantStyles.arrowLineLeft,
162+
themeStyles.arrowLine
163+
)}
164+
/>
165+
<ChevronLeftIcon
166+
className={cn(
167+
"absolute translate-x-0.5 transition duration-300 ease-in-out",
168+
variantStyles.arrowHeadLeft,
169+
variantStyles.size,
170+
themeStyles.textStyle
171+
)}
172+
/>
173+
</>
174+
)}
175+
</span>
176+
);
177+
}

‎apps/webapp/app/components/primitives/Buttons.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export type ButtonContentPropsType = {
174174
className?: string;
175175
shortcut?: ShortcutDefinition;
176176
variant: keyof typeof variant;
177+
shortcutPosition?: "before-trailing-icon" | "after-trailing-icon";
177178
};
178179

179180
export function ButtonContent(props: ButtonContentPropsType) {
@@ -237,6 +238,14 @@ export function ButtonContent(props: ButtonContentPropsType) {
237238
<>{text}</>
238239
))}
239240

241+
{shortcut && props.shortcutPosition === "before-trailing-icon" && (
242+
<ShortcutKey
243+
className={cn(shortcutClassName)}
244+
shortcut={shortcut}
245+
variant={variation.shortcutVariant ?? "medium"}
246+
/>
247+
)}
248+
240249
{TrailingIcon &&
241250
(typeof TrailingIcon === "string" ? (
242251
<NamedIcon
@@ -258,13 +267,15 @@ export function ButtonContent(props: ButtonContentPropsType) {
258267
)}
259268
/>
260269
))}
261-
{shortcut && (
262-
<ShortcutKey
263-
className={cn(shortcutClassName)}
264-
shortcut={shortcut}
265-
variant={variation.shortcutVariant ?? "medium"}
266-
/>
267-
)}
270+
271+
{shortcut &&
272+
(!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && (
273+
<ShortcutKey
274+
className={cn(shortcutClassName)}
275+
shortcut={shortcut}
276+
variant={variation.shortcutVariant ?? "medium"}
277+
/>
278+
)}
268279
</div>
269280
</div>
270281
);

0 commit comments

Comments
 (0)