Skip to content

feat(link): updates styles and design-tokens #7648

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

Draft
nuria1110 wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(link): updates styles and design-tokens #7648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 4 additions & 7 deletions src/components/batch-selection/batch-selection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,14 @@ test("`ButtonMinor` children should be automatically disabled via context", () =
test("`Link` children should be automatically disabled via context", () => {
render(
<BatchSelection selectedCount={0} disabled>
<Link>Link as an anchor</Link>
<Link href="#">Link as an anchor</Link>
</BatchSelection>,
);

const link = screen.getByTestId("link-anchor");
const link = screen.getByRole("link");

expect(link).toHaveStyle("cursor: not-allowed");

link.focus();

expect(link).not.toHaveFocus();
// eslint-disable-next-line jest-dom/prefer-enabled-disabled
expect(link).toHaveAttribute("disabled");
});

test("`Link` children rendered as a button should be automatically disabled via context", () => {
Expand Down
62 changes: 0 additions & 62 deletions src/components/breadcrumbs/breadcrumbs.pw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,6 @@ test.describe("should render Breadcrumbs component", () => {
expect(numberOfCrumbs).toEqual(4);
});

test("should check Breadcrumbs on hover color", async ({ mount, page }) => {
await mount(<Default />);

const crumbElement = crumbAtIndex(page, 1);
await crumbElement.hover();

const link = crumbElement.locator("a");
await expect(link).toHaveCSS("color", "rgb(16, 96, 28)");
});

test("should check Breadcrumbs on focus", async ({ mount, page }) => {
await mount(<Default />);

Expand All @@ -46,40 +36,6 @@ test.describe("should render Breadcrumbs component", () => {
await expect(crumbAtIndex(page, 2).locator("a")).toBeFocused();
});

test("should have correct focus styling when a crumb is focused but not current", async ({
mount,
page,
}) => {
await mount(<FocusedCrumbBecomesCurrent />);

await crumbAtIndex(page, 0).locator("button").focus();
await expect(crumbAtIndex(page, 0).locator("button")).toHaveCSS(
"background-color",
"rgb(255, 210, 126)",
);
await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
"box-shadow",
"rgb(0, 0, 0) 0px 4px 0px 0px",
);
});

test("should have correct focus styling when a crumb with href set is focused but not current", async ({
mount,
page,
}) => {
await mount(<FocusedCrumbBecomesCurrent hasHref />);

await crumbAtIndex(page, 0).locator("a").focus();
await expect(crumbAtIndex(page, 0).locator("a")).toHaveCSS(
"background-color",
"rgb(255, 210, 126)",
);
await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
"box-shadow",
"rgb(0, 0, 0) 0px 4px 0px 0px",
);
});

test("should not have any focus styling when a crumb is clicked and becomes current", async ({
mount,
page,
Expand Down Expand Up @@ -148,24 +104,6 @@ test.describe("should render Breadcrumbs component", () => {
);
});

test("should have focus styling when user presses Space key on focused crumb with href set and it becomes current", async ({
mount,
page,
}) => {
await mount(<FocusedCrumbBecomesCurrent hasHref />);

await crumbAtIndex(page, 0).locator("a").focus();
await crumbAtIndex(page, 0).locator("a").press("Space");
await expect(crumbAtIndex(page, 0).locator("a")).toHaveCSS(
"background-color",
"rgb(255, 210, 126)",
);
await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
"box-shadow",
"rgb(0, 0, 0) 0px 4px 0px 0px",
);
});

test("should have correct color when Crumb is current and isDarkBackground is true", async ({
mount,
page,
Expand Down
48 changes: 0 additions & 48 deletions src/components/carbon-provider/carbon-provider.pw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { test, expect } from "../../../playwright/helpers/base-test";
import { HooksConfig } from "../../../playwright";
import { SageTheme as SageThemeStory, AllThemes } from "./components.test-pw";
import Button from "../../../src/components/button";
import Link from "../../../src/components/link";
import Loader from "../../../src/components/loader";
import LoaderBar from "../../../src/components/loader-bar";
import MultiActionButton from "../../../src/components/multi-action-button";
Expand All @@ -13,7 +12,6 @@ import { Tabs, Tab } from "../tabs";

import { buttonDataComponent } from "../../../playwright/components/button/index";
import {
linkComponent,
loaderBarComponent,
loaderComponent,
} from "../../../playwright/components/themes/index";
Expand All @@ -38,10 +36,6 @@ const commonColors = ["rgb(0, 130, 0)", "rgb(0, 126, 69)"];

const commonColorsOnHover = ["rgb(0, 99, 0)", "rgb(0, 103, 56)"];

const linkCommonColors = ["rgb(8, 113, 30)", "rgb(8, 113, 30)"];

const linkCommonColorsOnHover = ["rgb(16, 96, 28)", "rgb(16, 96, 28)"];

const loaderBarColors = ["rgb(179, 224, 179)", "rgb(179, 217, 200)"];

test.describe("Carbon Provider", () => {
Expand Down Expand Up @@ -142,28 +136,6 @@ test.describe("Carbon Provider", () => {
});
});
});

buildTestArray(linkCommonColors).forEach(([theme, color]) => {
test.describe(`should render components with ${theme} and verify theme color`, () => {
test(`Link component should render with ${theme} theme and verify theme color`, async ({
mount,
page,
}) => {
await mount(
<Link
href="https://carbon.sage.com"
target="_blank"
rel="noreferrer noopener"
>
This is a link
</Link>,
{ hooksConfig: { theme: `${theme}` } },
);

await expect(linkComponent(page)).toHaveCSS("color", color);
});
});
});
});

test.describe("Hover styling", () => {
Expand Down Expand Up @@ -230,26 +202,6 @@ test.describe("Hover styling", () => {
});
});
});

buildTestArray(linkCommonColorsOnHover).forEach(([theme, color]) => {
test.describe(`should render components with ${theme} theme onHover`, () => {
test("Link component and verify theme color", async ({ mount, page }) => {
await mount(
<Link
href="https://carbon.sage.com"
target="_blank"
rel="noreferrer noopener"
>
This is a link
</Link>,
{ hooksConfig: { theme: `${theme}` } },
);

await linkComponent(page).hover();
await expect(linkComponent(page)).toHaveCSS("color", color);
});
});
});
});

buildTestDataWithTwoArrays(loaderBarColors, commonColors).forEach(
Expand Down
Loading
Loading