Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tweak: Move alert icon to route pill #2828

Merged
merged 7 commits into from
Oct 3, 2024
Merged

tweak: Move alert icon to route pill #2828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cf5ab2c
tweak: Move alert icon to route pill
hannahpurcell Sep 27, 2024
c7bd5ac
fix: format
hannahpurcell Sep 27, 2024
c1cd9bd
fix: test
hannahpurcell Sep 27, 2024
8f3cfab
fix: typo!
hannahpurcell Sep 27, 2024
e725c07
tweak: move alert icon back to routeLadder, pass to RoutePill as child
hannahpurcell Oct 1, 2024
7088904
tweak: reduce diff, format
hannahpurcell Oct 1, 2024
9031c7a
tweak: ah! hasAlert doesn't need to be passed now
hannahpurcell Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions assets/css/_route_ladder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,22 +65,16 @@
.c-route-ladder__alert-icon {
display: flex;
align-items: center;
width: 1.6rem;

cursor: pointer;

svg {
height: 1.6rem;
width: 1.6rem;
height: 1rem;
width: 1.125rem;
}
}

.c-route-ladder__route-pill {
grid-column: 2/3;
}

.c-route-ladder__close-button-container {
grid-column: 3/4;
firestack marked this conversation as resolved.
Show resolved Hide resolved
margin: 2px 0 2px auto;
}
}
Expand Down
11 changes: 9 additions & 2 deletions assets/css/_route_pill.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,23 @@
font-family: $font-family-route-pill;

display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: center;

&--large-format {
width: 4.5rem;
min-width: 4.5rem;
height: 2.25rem;
border-radius: 1.875rem;
font-size: $h3-font-size;
font-weight: 600;
}

&--dynamic-size {
min-width: unset;
padding: 0 1.5rem;
margin: 0 0.5rem;
}
}

.c-route-pill--bus {
Expand Down
15 changes: 8 additions & 7 deletions assets/src/components/routeLadder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,13 @@ export const Header = ({
</Dropdown.Menu>
</Dropdown>
)}
</div>
<RoutePill
id={routePillId}
routeName={routeName}
largeFormat
className="c-route-pill--dynamic-size"
>
{hasAlert && (
<Tippy
content="Active detour"
Expand All @@ -127,13 +134,7 @@ export const Header = ({
</div>
</Tippy>
)}
</div>
<RoutePill
id={routePillId}
routeName={routeName}
largeFormat
className="c-route-ladder__route-pill c-route-pill"
/>
</RoutePill>
<div className="c-route-ladder__close-button-container">
<CloseButton className="p-2" onClick={onClose} />
</div>
Expand Down
3 changes: 3 additions & 0 deletions assets/src/components/routePill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import React, { ComponentPropsWithoutRef } from "react"
import { joinClasses } from "../helpers/dom"

export const RoutePill = ({
children,
routeName,
largeFormat,
className,
...props
}: {
children?: React.ReactNode
routeName: string
largeFormat?: boolean
className?: string
Expand All @@ -20,6 +22,7 @@ export const RoutePill = ({

return (
<div {...props} className={classes}>
{children}
{routeNameTransform(routeName)}
</div>
)
Expand Down
21 changes: 10 additions & 11 deletions assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ exports[`LadderPage renders with alerts 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rq:"
>
28
Expand Down Expand Up @@ -338,6 +338,10 @@ exports[`LadderPage renders with alerts 1`] = `
>
<div
class="c-route-ladder__dropdown c-route-ladder__dropdown--non-skate-alert"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rs:"
>
<div
class="mock-tippy"
Expand Down Expand Up @@ -366,11 +370,6 @@ exports[`LadderPage renders with alerts 1`] = `
</svg>
</div>
</div>
</div>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
id="route-pill:rs:"
>
1
</div>
<div
Expand Down Expand Up @@ -609,7 +608,7 @@ exports[`LadderPage renders with route tabs 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r0:"
>
1
Expand Down Expand Up @@ -829,7 +828,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:ri:"
>
28
Expand Down Expand Up @@ -870,7 +869,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rk:"
>
1
Expand Down Expand Up @@ -1090,7 +1089,7 @@ exports[`LadderPage renders with timepoints 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rm:"
>
28
Expand Down Expand Up @@ -1249,7 +1248,7 @@ exports[`LadderPage renders with timepoints 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:ro:"
>
1
Expand Down
4 changes: 2 additions & 2 deletions assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r0:"
>
1
Expand Down Expand Up @@ -178,7 +178,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r2:"
>
28
Expand Down
22 changes: 11 additions & 11 deletions assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`routeLadder displays loading if we are fetching the timepoints 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rr:"
>
28
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`routeLadder displays no crowding data for a bus coming off a route with
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rn:"
>
28
Expand Down Expand Up @@ -327,7 +327,7 @@ exports[`routeLadder doesn't display crowding data for a vehicle coming off a ro
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rp:"
>
28
Expand Down Expand Up @@ -539,7 +539,7 @@ exports[`routeLadder doesn't render a bus that's off-course but nonrevenue 1`] =
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rl:"
>
28
Expand Down Expand Up @@ -718,7 +718,7 @@ exports[`routeLadder renders a route ladder 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r0:"
>
28
Expand Down Expand Up @@ -855,7 +855,7 @@ exports[`routeLadder renders a route ladder with crowding instead of vehicles 1`
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rj:"
>
28
Expand Down Expand Up @@ -1128,7 +1128,7 @@ exports[`routeLadder renders a route ladder with laying over vehicles 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rh:"
>
28
Expand Down Expand Up @@ -1372,7 +1372,7 @@ exports[`routeLadder renders a route ladder with the new header and detour dropd
</div>
</div>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r4:"
>
28
Expand Down Expand Up @@ -1509,7 +1509,7 @@ exports[`routeLadder renders a route ladder with the new header format 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r2:"
>
28
Expand Down Expand Up @@ -1646,7 +1646,7 @@ exports[`routeLadder renders a route ladder with vehicles 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rd:"
>
28
Expand Down Expand Up @@ -1950,7 +1950,7 @@ exports[`routeLadder renders a route ladder with vehicles in the incoming box 1`
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:rf:"
>
28
Expand Down
4 changes: 2 additions & 2 deletions assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r0:"
>
1
Expand Down Expand Up @@ -175,7 +175,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
class="c-route-ladder__dropdown"
/>
<div
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
id="route-pill:r2:"
>
28
Expand Down
2 changes: 1 addition & 1 deletion assets/tests/components/ladderPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ describe("LadderPage", () => {
expect(container.querySelector(".c-route-ladder__header")).toBeVisible()

await userEvent.click(
screen.getByRole("button", { name: "1 Route Options" })
screen.getByRole("button", { name: /1 Route Options/ })
)

await userEvent.click(screen.getByRole("button", { name: "Add detour" }))
Expand Down
6 changes: 3 additions & 3 deletions assets/tests/components/routeLadder.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ describe("routeLadder", () => {
)

expect(
screen.getByRole("button", { name: "28 Route Options" })
screen.getByRole("button", { name: /28 Route Options/ })
).toBeVisible()

expect(tree).toMatchSnapshot()
Expand Down Expand Up @@ -288,7 +288,7 @@ describe("routeLadder", () => {
)

await userEvent.click(
screen.getByRole("button", { name: "28 Route Options" })
screen.getByRole("button", { name: /28 Route Options/ })
)

expect(screen.getByText(/This route has an active detour./)).toBeVisible()
Expand Down Expand Up @@ -323,7 +323,7 @@ describe("routeLadder", () => {
)

await userEvent.click(
screen.getByRole("button", { name: "28 Route Options" })
screen.getByRole("button", { name: /28 Route Options/ })
)

expect(
Expand Down
Loading