Skip to content

Commit 7bef8ed

Browse files
aaronxsuaaronxsu
committed
Add Button group component and use on Components page
1 parent 68c8954 commit 7bef8ed

9 files changed

Lines changed: 172 additions & 11 deletions

File tree

‎src/frontend/src/components/CompareFavoritesButton.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {
2+
ButtonGroup,
3+
GroupedButton,
4+
} from "components/base/ButtonGroup/ButtonGroup";
5+
6+
import StarSolidIcon from "assets/icons/star-solid.svg?react";
7+
import ArrowFullRightIcon from "assets/icons/arrow-full-right.svg?react";
8+
9+
interface Props {
10+
size?: "small" | "medium" | "large";
11+
}
12+
const CompareFavoritesButton = ({ size = "medium" }: Props) => {
13+
const iconClassName =
14+
size === "large"
15+
? "h-[17px] w-[17px] fill fill-orange-800"
16+
: "h-[14px] w-[14px] fill fill-orange-800";
17+
return (
18+
<ButtonGroup>
19+
<GroupedButton
20+
aria-label="Add to favorites"
21+
size={size}
22+
leftIcon={<StarSolidIcon className={iconClassName} />}
23+
/>
24+
<GroupedButton
25+
size={size}
26+
label="Compare favorites"
27+
rightIcon={<ArrowFullRightIcon className={iconClassName} />}
28+
/>
29+
</ButtonGroup>
30+
);
31+
};
32+
33+
export default CompareFavoritesButton;

src/frontend/src/components/UserProfileSubheader/UserProfileSubheader.tsx renamed to src/frontend/src/components/UserProfileSubheader.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { Key } from "react-aria-components";
22

3-
import Button from "components/Button/Button";
3+
import Button from "components/base/Button/Button";
44
import {
55
ToggleButton,
66
ToggleButtonGroup,
7-
} from "components/ToggleButton/ToggleButton";
7+
} from "components/base/ToggleButton/ToggleButton";
88

99
import FamilyIcon from "assets/icons/family.svg?react";
1010
import TransitIcon from "assets/icons/transit.svg?react";
@@ -61,6 +61,7 @@ export const UserProfileSubheaderMobile = ({
6161
}
6262
setDisplayOption(keys);
6363
};
64+
6465
return (
6566
<div className="flex flex-column items-center gap-3">
6667
<Button
@@ -76,7 +77,7 @@ export const UserProfileSubheaderMobile = ({
7677
leftIcon={
7778
<div className="flex items-center gap-4">
7879
{getModeIcon(mode)}
79-
<ArrowFullRightIcon className="font-normal text-gray-500" />
80+
<ArrowFullRightIcon className="font-normal fill-gray-500 w-[14px]" />
8081
</div>
8182
}
8283
/>

src/frontend/src/components/Button/Button.styles.ts renamed to src/frontend/src/components/base/Button/Button.styles.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { tv } from "tailwind-variants";
22

3+
export const buttonSizes = {
4+
small: "h-[34px] px-4 py-2 text-sm gap-2",
5+
medium: "h-8 px-4 py-2 text-sm",
6+
large: "h-9 px-5 py-2 text-[17px]", // this should be text-rg, but somehow the text color will be all black
7+
};
8+
39
const buttonStyles = tv({
410
base: [
511
// Base styles
@@ -20,9 +26,7 @@ const buttonStyles = tv({
2026
orange: "bg-orange-200 text-orange-800 hover:bg-orange-300",
2127
},
2228
size: {
23-
small: "h-[34px] px-4 py-2 text-sm gap-2",
24-
medium: "h-8 px-4 py-2 text-sm",
25-
large: "h-9 px-5 py-2 text-[17px]", // this should be text-rg, but somehow the text color will be all black
29+
...buttonSizes,
2630
icon: "h-[30px] w-[30px] text-[15px]",
2731
},
2832
},

src/frontend/src/components/Button/Button.tsx renamed to src/frontend/src/components/base/Button/Button.tsx

File renamed without changes.

‎src/frontend/src/components/base/ButtonGroup/ButtonGroup.styles.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { tv } from "tailwind-variants";
2+
import { buttonSizes } from "components/base/Button/Button.styles";
3+
4+
export const buttonGroupStyles = tv({
5+
base: "inline-flex items-center overflow-hidden rounded-[var(--spacing-4)]",
6+
});
7+
8+
export const groupedButtonStyles = tv({
9+
base: [
10+
"flex h-full items-center gap-4 px-4 py-2 transition-colors",
11+
"font-bold text-button leading-normal capitalize",
12+
"cursor-pointer",
13+
"focus-visible:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-orange-400 focus-visible:ring-offset-1",
14+
"pressed:scale-[0.98]",
15+
// Add a vertical separator
16+
"not-first:border-l",
17+
],
18+
variants: {
19+
variant: {
20+
orange: "bg-orange-200 text-orange-800 hover:bg-orange-300 not-first:border-orange-800/25",
21+
},
22+
size: {
23+
...buttonSizes,
24+
},
25+
},
26+
defaultVariants: {
27+
variant: "orange",
28+
size: "medium",
29+
},
30+
});

‎src/frontend/src/components/base/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {
2+
Group as AriaGroup,
3+
Button as AriaButton,
4+
type GroupProps as AriaGroupProps,
5+
type ButtonProps as AriaButtonProps,
6+
composeRenderProps as composeButtonGroupRenderProps,
7+
} from "react-aria-components";
8+
import { type VariantProps } from "tailwind-variants";
9+
10+
import { buttonGroupStyles, groupedButtonStyles } from "./ButtonGroup.styles";
11+
12+
export interface GroupedButtonProps
13+
extends AriaButtonProps,
14+
VariantProps<typeof groupedButtonStyles> {
15+
label?: string;
16+
leftIcon?: React.ReactNode;
17+
rightIcon?: React.ReactNode;
18+
}
19+
20+
const ButtonGroup = (props: AriaGroupProps) => (
21+
<AriaGroup
22+
{...props}
23+
className={composeButtonGroupRenderProps(
24+
props.className,
25+
(className, renderProps) =>
26+
buttonGroupStyles({ ...renderProps, className })
27+
)}
28+
/>
29+
);
30+
31+
const GroupedButton = ({
32+
className,
33+
variant,
34+
size,
35+
label,
36+
leftIcon,
37+
rightIcon,
38+
...props
39+
}: GroupedButtonProps) => (
40+
<AriaButton
41+
{...props}
42+
className={composeButtonGroupRenderProps(
43+
className,
44+
(className, renderProps) =>
45+
groupedButtonStyles({
46+
...renderProps,
47+
variant,
48+
size,
49+
className,
50+
})
51+
)}
52+
>
53+
{leftIcon}
54+
{label && <span>{label}</span>}
55+
{rightIcon}
56+
</AriaButton>
57+
);
58+
59+
export { ButtonGroup, GroupedButton };

src/frontend/src/components/ToggleButton/ToggleButton.styles.ts renamed to src/frontend/src/components/base/ToggleButton/ToggleButton.styles.ts

File renamed without changes.

src/frontend/src/components/ToggleButton/ToggleButton.tsx renamed to src/frontend/src/components/base/ToggleButton/ToggleButton.tsx

File renamed without changes.

‎src/frontend/src/pages/Components.tsx‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import Button from "components/Button/Button";
1+
import Button from "components/base/Button/Button";
22
import {
33
Places,
44
UserProfileSubheader,
55
UserProfileSubheaderMobile,
6-
} from "components/UserProfileSubheader/UserProfileSubheader";
6+
} from "components/UserProfileSubheader";
7+
import CompareFavoritesButton from "components/CompareFavoritesButton";
78

89
import ArrowLeftIcon from "assets/icons/arrow-left.svg?react";
910
import ArrowRightIcon from "assets/icons/arrow-right.svg?react";
@@ -75,7 +76,7 @@ const Components = () => {
7576
size="small"
7677
label="Add to favorites"
7778
leftIcon={
78-
<StarIcon className="font-normal h-[14px] w-[14px]" />
79+
<StarIcon className="font-normal h-[14px] w-[14px] fill fill-orange-800" />
7980
}
8081
/>
8182
</div>
@@ -106,7 +107,7 @@ const Components = () => {
106107
variant="orange"
107108
label="Add to favorites"
108109
leftIcon={
109-
<StarIcon className="font-normal h-[14px] w-[14px]" />
110+
<StarIcon className="font-normal h-[14px] w-[14px] fill fill-orange-800" />
110111
}
111112
/>
112113
</div>
@@ -156,14 +157,47 @@ const Components = () => {
156157
size="large"
157158
label="Add to favorites"
158159
leftIcon={
159-
<StarIcon className="font-normal h-[14px] w-[14px]" />
160+
<StarIcon className="font-normal h-[17px] w-[17px] fill fill-orange-800" />
160161
}
161162
/>
162163
</div>
163164
</div>
164165
</div>
165166
</section>
166167

168+
{/* Section for Button Group */}
169+
<section className="p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
170+
<h2 className="text-3xl font-medium text-gray-800 mb-8 pb-4 border-b">
171+
Button group
172+
</h2>
173+
<div className="space-y-8">
174+
<div className="flex flex-col gap-4">
175+
<h3 className="text-xl text-gray-800 mb-2">
176+
Small
177+
</h3>
178+
<div>
179+
<CompareFavoritesButton size="small" />
180+
</div>
181+
</div>
182+
<div className="flex flex-col gap-4">
183+
<h3 className="text-xl text-gray-800 mb-2">
184+
Medium
185+
</h3>
186+
<div>
187+
<CompareFavoritesButton />
188+
</div>
189+
</div>
190+
<div className="flex flex-col gap-4">
191+
<h3 className="text-xl text-gray-800 mb-2">
192+
Large
193+
</h3>
194+
<div>
195+
<CompareFavoritesButton size="large" />
196+
</div>
197+
</div>
198+
</div>
199+
</section>
200+
167201
{/* Section for User profile sub header */}
168202
<section className="p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
169203
<h2 className="text-3xl font-medium text-gray-800 mb-8 pb-4 border-b">

0 commit comments

Comments
 (0)