Road icon

1import { createIcon } from "@behivetech/icons.base";
2
3/** The road icon: a stroke glyph on a 24 by 24 grid that inherits the text colour. */
4export const RoadIcon = /*#__PURE__*/ createIcon(
5  "RoadIcon",
6  <>
7    <path d="M4 19l4-14" />
8    <path d="M16 5l4 14" />
9    <path d="M12 8v-2" />
10    <path d="M12 13v-2" />
11    <path d="M12 18v-2" />
12  </>,
13);
14
15export default RoadIcon;

1export { RoadIcon, default } from "./road.js";

1import { RoadIcon } from "./road.js";
2
3/** The icon at each size; it takes its colour from the surrounding text. */
4export const RoadIconSizes = () => (
5  <>
6    <RoadIcon size="sm" />
7    <RoadIcon />
8    <RoadIcon size="lg" />
9    <RoadIcon size="xl" />
10  </>
11);
12
13/** Named with `titleAccess`, so assistive technology announces it. */
14export const NamedRoadIcon = () => <RoadIcon titleAccess="Road" />;

1import { render } from "@testing-library/react";
2import RoadIconDefault, { RoadIcon } from "./road.js";
3
4describe("RoadIcon", () => {
5  it("exports the same component by name and by default", () => {
6    expect(RoadIconDefault).toBe(RoadIcon);
7    expect(RoadIcon.displayName).toBe("RoadIcon");
8  });
9
10  it("draws its glyph and hides from assistive technology", () => {
11    const { container } = render(<RoadIcon />);
12    const svg = container.querySelector("svg");
13
14    expect(
15      svg?.querySelector(
16        "path, circle, rect, ellipse, line, polyline, polygon",
17      ),
18    ).not.toBeNull();
19    expect(svg?.getAttribute("aria-hidden")).toBe("true");
20  });
21
22  it("is an image named by titleAccess", () => {
23    const { container } = render(<RoadIcon titleAccess="Road" />);
24    const svg = container.querySelector("svg");
25
26    expect(svg?.getAttribute("role")).toBe("img");
27    expect(svg?.querySelector("title")?.textContent).toBe("Road");
28  });
29});