Skip to content

Commit 43ba2f4

Browse files
nuria1110nuria1110
committed
chore: address comments
1 parent 0013a70 commit 43ba2f4

File tree

4 files changed

+17
-132
lines changed

4 files changed

+17
-132
lines changed

‎src/components/breadcrumbs/breadcrumbs.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
2525
{ children, isDarkBackground = false, inverse, ...rest }: BreadcrumbsProps,
2626
ref,
2727
) => {
28-
const l = useLocale();
28+
const locale = useLocale();
2929

3030
if (isDarkBackground && !deprecatedIsDarkBackgroundWarn) {
3131
Logger.deprecate(
@@ -39,7 +39,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
3939
<StyledBreadcrumbs
4040
ref={ref}
4141
role="navigation"
42-
aria-label={l.breadcrumbs.ariaLabel()}
42+
aria-label={locale.breadcrumbs.ariaLabel()}
4343
{...rest}
4444
{...tagComponent("breadcrumbs", rest)}
4545
>

‎src/components/breadcrumbs/crumb/crumb.component.tsx‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@ import tagComponent, {
55
} from "../../../__internal__/utils/helpers/tags";
66
import { StyledCrumb, Divider } from "./crumb.style";
77
import { useBreadcrumbsContext } from "../__internal__/breadcrumbs.context";
8-
import Logger from "../../../__internal__/utils/logger";
9-
10-
let deprecatedHasFocusWarn = false;
11-
let deprecatedUnderlineWarn = false;
12-
let deprecatedLinkSizeWarn = false;
13-
let deprecatedBoldWarn = false;
148

159
export interface CrumbProps
1610
extends Pick<
@@ -43,39 +37,11 @@ export const Crumb = React.forwardRef<HTMLAnchorElement, CrumbProps>(
4337
({ href, isCurrent, children, onClick, ...rest }: CrumbProps, ref) => {
4438
const { inverse } = useBreadcrumbsContext();
4539

46-
if (rest.hasFocus && !deprecatedHasFocusWarn) {
47-
Logger.deprecate(
48-
"The 'hasFocus' prop in Crumb is deprecated and will soon be removed.",
49-
);
50-
deprecatedHasFocusWarn = true;
51-
}
52-
53-
if (rest.underline && !deprecatedUnderlineWarn) {
54-
Logger.deprecate(
55-
"The 'underline' prop in Crumb is deprecated and will soon be removed.",
56-
);
57-
deprecatedUnderlineWarn = true;
58-
}
59-
60-
if (rest.linkSize && !deprecatedLinkSizeWarn) {
61-
Logger.deprecate(
62-
"The 'linkSize' prop in Crumb is deprecated and will soon be removed.",
63-
);
64-
deprecatedLinkSizeWarn = true;
65-
}
66-
67-
if (rest.bold && !deprecatedBoldWarn) {
68-
Logger.deprecate(
69-
"The 'bold' prop in Crumb is deprecated and will soon be removed.",
70-
);
71-
deprecatedBoldWarn = true;
72-
}
73-
7440
return (
7541
<li>
7642
<StyledCrumb
7743
ref={ref}
78-
isCurrent={isCurrent}
44+
$isCurrent={isCurrent}
7945
aria-current={isCurrent ? "page" : undefined}
8046
inverse={inverse}
8147
{...rest}
@@ -91,7 +57,7 @@ export const Crumb = React.forwardRef<HTMLAnchorElement, CrumbProps>(
9157
<Divider
9258
data-role="crumb-divider"
9359
aria-hidden="true"
94-
inverse={inverse}
60+
$inverse={inverse}
9561
/>
9662
)}
9763
</li>

‎src/components/breadcrumbs/crumb/crumb.style.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import styled, { css } from "styled-components";
22
import Link, { LinkProps } from "../../link";
33

4-
interface StyleCrumbProps extends LinkProps {
5-
isCurrent?: boolean;
6-
inverse?: boolean;
4+
interface StyledCrumbProps extends LinkProps {
5+
$isCurrent?: boolean;
76
}
87

98
const getTextColor = (inverse?: boolean) => {
@@ -12,9 +11,9 @@ const getTextColor = (inverse?: boolean) => {
1211
: "var(--container-standard-txt-alt)";
1312
};
1413

15-
export const StyledCrumb = styled(Link)<StyleCrumbProps>`
16-
${({ isCurrent, inverse }) =>
17-
isCurrent &&
14+
export const StyledCrumb = styled(Link)<StyledCrumbProps>`
15+
${({ $isCurrent, inverse }) =>
16+
$isCurrent &&
1817
css`
1918
a {
2019
color: ${getTextColor(inverse)};
@@ -29,7 +28,7 @@ export const StyledCrumb = styled(Link)<StyleCrumbProps>`
2928
`;
3029

3130
interface DividerProps {
32-
inverse?: boolean;
31+
$inverse?: boolean;
3332
}
3433

3534
export const Divider = styled.span<DividerProps>`
@@ -38,8 +37,8 @@ export const Divider = styled.span<DividerProps>`
3837
margin-left: var(--global-space-comp-s);
3938
font: var(--global-font-static-comp-regular-m);
4039
41-
${({ inverse }) => css`
42-
color: ${getTextColor(inverse)};
40+
${({ $inverse }) => css`
41+
color: ${getTextColor($inverse)};
4342
`}
4443
}
4544
`;

‎src/components/breadcrumbs/crumb/crumb.test.tsx‎

Lines changed: 5 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,6 @@ import Crumb from "./crumb.component";
55
import Logger from "../../../__internal__/utils/logger";
66
import Breadcrumbs from "../breadcrumbs.component";
77

8-
test("logs deprecation warning when using hasFocus prop", () => {
9-
const loggerSpy = jest
10-
.spyOn(Logger, "deprecate")
11-
.mockImplementation(() => {});
12-
13-
render(
14-
<Breadcrumbs>
15-
<Crumb href="#" hasFocus>
16-
Link text
17-
</Crumb>
18-
</Breadcrumbs>,
19-
);
20-
21-
expect(loggerSpy).toHaveBeenCalledWith(
22-
"The 'hasFocus' prop in Crumb is deprecated and will soon be removed.",
23-
);
24-
25-
loggerSpy.mockRestore();
26-
});
27-
28-
test("logs deprecation warning when using underline prop", () => {
29-
const loggerSpy = jest
30-
.spyOn(Logger, "deprecate")
31-
.mockImplementation(() => {});
32-
33-
render(
34-
<Breadcrumbs>
35-
<Crumb href="#" underline="always">
36-
Link text
37-
</Crumb>
38-
</Breadcrumbs>,
39-
);
40-
41-
expect(loggerSpy).toHaveBeenCalledWith(
42-
"The 'underline' prop in Crumb is deprecated and will soon be removed.",
43-
);
44-
45-
loggerSpy.mockRestore();
46-
});
47-
48-
test("logs deprecation warning when using linkSize prop", () => {
49-
const loggerSpy = jest
50-
.spyOn(Logger, "deprecate")
51-
.mockImplementation(() => {});
52-
53-
render(
54-
<Breadcrumbs>
55-
<Crumb href="#" linkSize="large">
56-
Link text
57-
</Crumb>
58-
</Breadcrumbs>,
59-
);
60-
61-
expect(loggerSpy).toHaveBeenCalledWith(
62-
"The 'linkSize' prop in Crumb is deprecated and will soon be removed.",
63-
);
64-
65-
loggerSpy.mockRestore();
66-
});
67-
68-
test("logs deprecation warning when using bold prop", () => {
69-
const loggerSpy = jest
70-
.spyOn(Logger, "deprecate")
71-
.mockImplementation(() => {});
72-
73-
render(
74-
<Breadcrumbs>
75-
<Crumb href="#" bold>
76-
Link text
77-
</Crumb>
78-
</Breadcrumbs>,
79-
);
80-
81-
expect(loggerSpy).toHaveBeenCalledWith(
82-
"The 'bold' prop in Crumb is deprecated and will soon be removed.",
83-
);
84-
85-
loggerSpy.mockRestore();
86-
});
87-
888
test("logs warning when not used within Breadcrumbs", () => {
899
const loggerSpy = jest.spyOn(Logger, "error").mockImplementation(() => {});
9010

@@ -99,7 +19,7 @@ test("logs warning when not used within Breadcrumbs", () => {
9919
loggerSpy.mockRestore();
10020
});
10121

102-
test("passes href to the anchor element when isCurrent is false", () => {
22+
test("passes `href` to the anchor element when `isCurrent` is false", () => {
10323
render(
10424
<Breadcrumbs>
10525
<Crumb href="foo">Link text</Crumb>
@@ -111,7 +31,7 @@ test("passes href to the anchor element when isCurrent is false", () => {
11131
expect(link).toHaveAttribute("href", "foo");
11232
});
11333

114-
test("does not pass href to the anchor element when isCurrent is true", () => {
34+
test("does not pass `href` to the anchor element when `isCurrent` is true", () => {
11535
render(
11636
<Breadcrumbs>
11737
<Crumb href="foo" data-role="crumb" isCurrent>
@@ -125,7 +45,7 @@ test("does not pass href to the anchor element when isCurrent is true", () => {
12545
expect(anchor).not.toHaveAttribute("href", "foo");
12646
});
12747

128-
test("calls onClick callback when the crumb link is clicked", async () => {
48+
test("calls `onClick` callback when the crumb link is clicked", async () => {
12949
const onClick = jest.fn();
13050
const user = userEvent.setup();
13151
render(
@@ -142,7 +62,7 @@ test("calls onClick callback when the crumb link is clicked", async () => {
14262
expect(onClick).toHaveBeenCalledTimes(1);
14363
});
14464

145-
test("does not call onClick callback when isCurrent is true", async () => {
65+
test("does not call `onClick` callback when `isCurrent` is true", async () => {
14666
const onClick = jest.fn();
14767
const user = userEvent.setup();
14868
render(
@@ -159,7 +79,7 @@ test("does not call onClick callback when isCurrent is true", async () => {
15979
expect(onClick).toHaveBeenCalledTimes(0);
16080
});
16181

162-
test("applies aria-current attribute when isCurrent is true", () => {
82+
test("applies `aria-current` attribute when `isCurrent` is true", () => {
16383
render(
16484
<Breadcrumbs>
16585
<Crumb href="#" isCurrent>

0 commit comments

Comments
 (0)