Skip to content

Commit

Permalink
extract tooltip wrapper component, add tooltips
Browse files Browse the repository at this point in the history 
adds parking and accessible tooltips, adds testing of stop feature tooltip texts
  • Loading branch information
@thecristen
thecristen committed Dec 20, 2019
1 parent e38a776 commit 95846cf
Show file tree
Hide file tree
Showing 6 changed files with 418 additions and 151 deletions.
41 changes: 41 additions & 0 deletions apps/site/assets/ts/helpers/icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,44 @@ export const caret = (
/>
);
};

/*
A minimal component that gives its child component
a basic tooltip containing the specified text. Has no
visual appearance itself.
Note: data-selector="true" and data-original-title are
specified here in order to preserve `title` text post-trigger
*/
export const TooltipWrapper: React.FC<{
children: JSX.Element;
tooltipText: string;
tooltipOptions?: object; // corresponds to Bootstrap tooltip options
href?: string;
}> = ({ children, tooltipText, tooltipOptions, href }): JSX.Element => {
const { trigger, placement, animation } = Object.assign(
{
trigger: "hover focus",
placement: "top",
animation: "true"
},
tooltipOptions
);

const Tag = href ? "a" : "span";

return (
<Tag
href={href}
data-toggle="tooltip"
data-trigger={trigger}
data-placement={placement}
data-animation={animation}
data-selector="true"
data-original-title={tooltipText}
title={tooltipText}
>
{children}
</Tag>
);
};
23 changes: 16 additions & 7 deletions apps/site/assets/ts/schedule/__tests__/LineDiagramTest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const lineDiagram = [
id: "741",
description: "rapid_transit",
"custom_route?": false
},
}
],
closed_stop_info: null,
branch: null
Expand Down Expand Up @@ -556,21 +556,30 @@ describe("LineDiagram", () => {
});

it.each`
index | expectedNames
${0} | ${["Route 110"]}
${1} | ${["Silver Line SL1"]}
${2} | ${["Orange Line", "Green Line C", "Green Line E", "Commuter Rail"]}
${3} | ${["Route 62", "Route 67", "Route 76", "Route 79", "Route 84", "Route 350", "Route 351"]}
index | expectedNames | expectedFeatures
${0} | ${["Route 110"]} | ${[]}
${1} | ${["Silver Line SL1"]} | ${[]}
${2} | ${["Orange Line", "Green Line C", "Green Line E", "Commuter Rail"]} | ${["Parking", "Accessible"]}
${3} | ${["Route 62", "Route 67", "Route 76", "Route 79", "Route 84", "Route 350", "Route 351"]} | ${["Parking", "Accessible"]}
`(
"has appropriate tooltip content for stop $index",
({ index, expectedNames }) => {
({ index, expectedNames, expectedFeatures }) => {
const wrapper = mount(<LineDiagram lineDiagram={lineDiagram} />);
const connections = wrapper
.find(".m-schedule-line-diagram__connections")
.at(index);

const names = connections.find("a").map(c => c.props().title);
expect(names).toEqual(expectedNames);

const features = wrapper
.find(".m-schedule-line-diagram__features")
.at(index);

const featureNames = features
.find("span[data-toggle='tooltip']")
.map(c => c.props().title);
expect(featureNames).toEqual(expectedFeatures);
}
);
});
122 changes: 81 additions & 41 deletions apps/site/assets/ts/schedule/__tests__/__snapshots__/LineDiagramTest.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/110/line"
title="Route 110"
>
Expand Down Expand Up @@ -75,7 +75,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/741/line"
title="Silver Line SL1"
>
Expand Down Expand Up @@ -119,7 +119,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/Orange/line"
title="Orange Line"
>
Expand All @@ -143,7 +143,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/Green-C/line"
title="Green Line C"
>
Expand All @@ -167,7 +167,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/Green-E/line"
title="Green Line E"
>
Expand All @@ -191,7 +191,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/CR-Fitchburg/line"
title="Commuter Rail"
>
Expand All @@ -216,23 +216,43 @@ Array [
className="m-schedule-line-diagram__features"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-parking-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
data-animation="true"
data-original-title="Parking"
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="hover focus"
title="Parking"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-parking-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
}
}
}
/>
/>
</span>
<span
aria-hidden="false"
className="notranslate c-svg__icon-acessible-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
data-animation="true"
data-original-title="Accessible"
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="hover focus"
title="Accessible"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-acessible-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
}
}
}
/>
/>
</span>
<span
className="c-icon__cr-zone m-schedule-line-diagram__feature-icon"
>
Expand Down Expand Up @@ -282,7 +302,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/62/line"
title="Route 62"
>
Expand All @@ -298,7 +318,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/67/line"
title="Route 67"
>
Expand All @@ -314,7 +334,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/76/line"
title="Route 76"
>
Expand All @@ -330,7 +350,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/79/line"
title="Route 79"
>
Expand All @@ -346,7 +366,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/84/line"
title="Route 84"
>
Expand All @@ -362,7 +382,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/350/line"
title="Route 350"
>
Expand All @@ -378,7 +398,7 @@ Array [
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="focus"
data-trigger="hover focus"
href="/schedules/351/line"
title="Route 351"
>
Expand All @@ -395,23 +415,43 @@ Array [
className="m-schedule-line-diagram__features"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-parking-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
data-animation="true"
data-original-title="Parking"
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="hover focus"
title="Parking"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-parking-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
}
}
}
/>
/>
</span>
<span
aria-hidden="false"
className="notranslate c-svg__icon-acessible-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
data-animation="true"
data-original-title="Accessible"
data-placement="bottom"
data-selector="true"
data-toggle="tooltip"
data-trigger="hover focus"
title="Accessible"
>
<span
aria-hidden="false"
className="notranslate c-svg__icon-acessible-default m-schedule-line-diagram__feature-icon"
dangerouslySetInnerHTML={
Object {
"__html": "SVG",
}
}
}
/>
/>
</span>
</div>
</div>
</div>,
Expand Down
Loading

0 comments on commit 95846cf

Please sign in to comment.