- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- sentiment_very_dissatisfied
-
+ className="at-axe"
+ />
Being removed
,
@@ -76,10 +74,9 @@ Array [ onClick={[Function]} > - content_copy - + aria-hidden="true" + className="at-clipboard small" + />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
(
-
+
{overviewList[0].routes.slice(1).map(
(card) =>
card.icon && (
@@ -15,27 +18,15 @@ const MenuOverview = () => (
className="cards cards-primary cards-wide"
>
);
diff --git a/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
index 0635cd5aa3..471b7c9900 100644
--- a/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Datepickers/__snapshots__/index.test.js.snap
@@ -103,10 +103,9 @@ Array [
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
-
- {card.icon}
-
+
{card.title}
{card.deprecated && (
Deprecated
)}
-
- arrow_forward
-
+
- )
+ ),
)}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
{
})
.click();
await expect(page.getByRole("link", { name: "Dialog" })).toHaveCount(
- page.viewportSize().width < 991 ? 1 : 2
+ page.viewportSize().width < 991 ? 1 : 2,
);
- await page.getByText("picture_in_pictureDialogarrow_forward").click();
+ await page
+ .getByLabel("components overview")
+ .getByRole("link", { name: "Dialog" })
+ .click();
await expect(page).toHaveTitle(/Dialog/);
await expect(
- page.getByRole("heading", { name: "Dialog", exact: true })
+ page.getByRole("heading", { name: "Dialog", exact: true }),
).toBeVisible();
});
@@ -29,9 +32,9 @@ test("visual regresion accordions", async ({ page, browserName }) => {
await expect(dialogButton).toHaveScreenshot(`${brand}-dialog-button.png`);
await dialogButton.click();
await expect(page.getByRole("dialog").locator("section")).toHaveScreenshot(
- `${brand}-dialog-modal.png`
+ `${brand}-dialog-modal.png`,
);
await expect(page.getByRole("dialog")).toHaveScreenshot(
- `${brand}-dialog-modal-screen.png`
+ `${brand}-dialog-modal-screen.png`,
);
});
diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js
index fd3ac93761..dd635912a2 100644
--- a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js
+++ b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js
@@ -37,7 +37,10 @@ test("Dropdown page exist", async ({ page }) => {
await expect(page.getByRole("link", { name: "Dropdown" })).toHaveCount(
page.viewportSize().width < 991 ? 1 : 2,
);
- await page.getByText("expand_moreDropdownarrow_forward").click();
+ await page
+ .getByLabel("components overview")
+ .getByRole("link", { name: "Dropdown" })
+ .click();
await expect(page).toHaveTitle(/Dropdown/);
await expect(
page.getByRole("heading", { name: "Dropdown", exact: true, level: 1 }),
diff --git a/src/App/ComponentsDocumentation/components/Expandable/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Expandable/__snapshots__/index.test.js.snap
index 5e445a6ca4..36f52fae42 100644
--- a/src/App/ComponentsDocumentation/components/Expandable/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Expandable/__snapshots__/index.test.js.snap
@@ -150,10 +150,9 @@ Array [
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
{
await expect(page.getByRole("link", { name: "Expandable" })).toHaveCount(
page.viewportSize().width < 991 ? 1 : 2,
);
- await page.getByText("expandExpandablearrow_forward").click();
+ await page
+ .getByLabel("components overview")
+ .getByRole("link", { name: "Expandable" })
+ .click();
await expect(page).toHaveTitle(/Expandable/);
await expect(
page.getByRole("heading", { name: "Expandable", exact: true, level: 1 }),
diff --git a/src/App/ComponentsDocumentation/components/Footer/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Footer/__snapshots__/index.test.js.snap
index 3885cb328f..8f04bb91bb 100644
--- a/src/App/ComponentsDocumentation/components/Footer/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Footer/__snapshots__/index.test.js.snap
@@ -55,10 +55,9 @@ exports[`Component: footer renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
{
})
.click();
await expect(page.getByRole("link", { name: "Toast" })).toHaveCount(
- page.viewportSize().width < 991 ? 1 : 2
+ page.viewportSize().width < 991 ? 1 : 2,
);
- await page.getByText("picture_in_pictureToastarrow_forward").click();
+ await page
+ .getByLabel("components overview")
+ .getByRole("link", { name: "Toast" })
+ .click();
await expect(page).toHaveTitle(/Toast/);
await expect(
- page.getByRole("heading", { name: "Toast", exact: true })
+ page.getByRole("heading", { name: "Toast", exact: true }),
).toBeVisible();
});
@@ -53,7 +56,7 @@ test.describe("toast variants are styled and named accordingly", () => {
const toast = page.locator("#overviewToast");
await expect(
- toast.getByText(variant.icon, { exact: true })
+ toast.getByText(variant.icon, { exact: true }),
).toBeVisible();
await expect(toast.getByText(`${variant.linkName} title`)).toBeVisible();
@@ -65,7 +68,7 @@ test.describe("toast variants are styled and named accordingly", () => {
`${brand}-${variant.name}-toast.png`,
{
maxDiffPixelRatio: 0.001,
- }
+ },
);
await page.locator("#toast-close-button").click();
await expect(page.locator("#toast-close-button")).not.toBeVisible();
diff --git a/src/App/ComponentsDocumentation/components/Togglebox/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Togglebox/__snapshots__/index.test.js.snap
index 240b8af6f6..7df8abc92b 100644
--- a/src/App/ComponentsDocumentation/components/Togglebox/__snapshots__/index.test.js.snap
+++ b/src/App/ComponentsDocumentation/components/Togglebox/__snapshots__/index.test.js.snap
@@ -116,10 +116,9 @@ Array [
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap b/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
index d354f6b9b2..51b79a9d73 100644
--- a/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
+++ b/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
@@ -23,10 +23,8 @@ exports[`GetStarted: ForDevelopers Contributing renders 1`] = `
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
or create a feature request here.
@@ -47,10 +45,8 @@ exports[`GetStarted: ForDevelopers Contributing renders 1`] = `
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
, it includes guidelines for how to contribute with new components and develop for the project.
@@ -113,10 +109,9 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- arrow_forward
+
{
})
.click();
await expect(
- page.getByRole("link", { name: "Topbar", exact: true })
+ page.getByRole("link", { name: "Topbar", exact: true }),
).toHaveCount(page.viewportSize().width < 991 ? 1 : 2);
- await page.getByText("call_to_actionTopbararrow_forward").click();
+ await page
+ .getByLabel("components overview")
+ .getByRole("link", { name: "Topbar", exact: true })
+ .click();
await expect(page).toHaveTitle(/Topbar/);
await expect(
- page.getByRole("heading", { name: "Topbar", exact: true, level: 1 })
+ page.getByRole("heading", { name: "Topbar", exact: true, level: 1 }),
).toBeVisible();
});
@@ -58,14 +61,14 @@ test.describe("visual regressions topbar", () => {
test(`general UI closed`, async ({ page }) => {
await expect(
- page.getByRole("heading", { name: "Topbar", exact: true })
+ page.getByRole("heading", { name: "Topbar", exact: true }),
).toBeVisible();
for (const topbarTab of topbarTabs) {
clickDocPreviewTab(page, topbarTab.btnText);
await expect(
- page.locator(".component-preview-content > div")
+ page.locator(".component-preview-content > div"),
).toHaveScreenshot(`${brand}-topbar-${topbarTab.name}-closed.png`);
}
});
@@ -79,9 +82,9 @@ test.describe("visual regressions topbar", () => {
await page.locator("#demo-topbar").getByRole("link").nth(2).hover();
await expect(
- page.locator("#demo-topbar").getByRole("navigation")
+ page.locator("#demo-topbar").getByRole("navigation"),
).toHaveScreenshot(
- `${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`
+ `${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`,
);
}
});
@@ -98,7 +101,7 @@ test.describe("visual regressions topbar", () => {
: page.locator(".component-preview-content > div");
await expect(modalContainer).toHaveScreenshot(
- `${brand}-topbar-${topbarTab.name}-opened.png`
+ `${brand}-topbar-${topbarTab.name}-opened.png`,
);
}
});
@@ -107,7 +110,7 @@ test.describe("visual regressions topbar", () => {
page,
}) => {
for (const topbarTab of topbarTabs.filter(
- (tab) => tab.desktopTopbar && !tab.isLegacy
+ (tab) => tab.desktopTopbar && !tab.isLegacy,
)) {
clickDocPreviewTab(page, topbarTab.btnText);
diff --git a/src/App/GetStarted/get-started/ForDesigners/index.js b/src/App/GetStarted/get-started/ForDesigners/index.js
index c1e6b34c6f..3426e63e95 100644
--- a/src/App/GetStarted/get-started/ForDesigners/index.js
+++ b/src/App/GetStarted/get-started/ForDesigners/index.js
@@ -32,20 +32,16 @@ const NeedToHave = () => (
target="_blank"
rel="noopener noreferrer"
>
-
- launch
-
+
Download the Figma application
-
- launch
-
+
Read more about Figma
@@ -79,13 +75,11 @@ const NeedToKnow = () => (
{brandTitle === "Swedbank Pay" && (
-
- launch
-
+
Read more about the Swedbank Pay Brand (Swedbank Brand Manager){" "}
@@ -123,7 +117,7 @@ const DiscoverMore = () => (
Identity
The philosophy behind our designs
- arrow_forward
+
(
Component
See all available components
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
![]()
{
rel="noopener noreferrer"
className="icon-link mt-4 px-0"
>
-
- open_in_new
-
+
Github - Detailed changelog
diff --git a/src/App/Identity/identity/Accessibility/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Accessibility/__snapshots__/index.test.js.snap
index 3b504e2565..0129a17c1e 100644
--- a/src/App/Identity/identity/Accessibility/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Accessibility/__snapshots__/index.test.js.snap
@@ -32,10 +32,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -50,10 +48,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -71,10 +67,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -89,10 +83,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -107,10 +99,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -128,10 +118,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -146,10 +134,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -164,10 +150,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -182,10 +166,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -400,10 +382,8 @@ exports[`Core: Accessibility WcagStandard renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -418,10 +398,8 @@ exports[`Core: Accessibility WcagStandard renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
diff --git a/src/App/Identity/identity/Accessibility/index.js b/src/App/Identity/identity/Accessibility/index.js
index 17a0476226..c32bd28611 100644
--- a/src/App/Identity/identity/Accessibility/index.js
+++ b/src/App/Identity/identity/Accessibility/index.js
@@ -190,9 +190,10 @@ const WcagStandard = () => (
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
What is WCAG?
@@ -202,9 +203,10 @@ const WcagStandard = () => (
rel="noopener noreferrer"
className="icon-link"
>
-
- open_in_new
-
+
W3C – WCAG 2.1 Recommendations
@@ -269,9 +271,10 @@ const DiveDeeper = () => (
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
Material.io – Understanding Accessibility
(
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
W3C – WCAG 2.1 Recommendations
@@ -295,9 +299,10 @@ const DiveDeeper = () => (
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
{links.text}
))}
@@ -311,9 +316,10 @@ const DiveDeeper = () => (
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
{links.text}
))}
diff --git a/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap
index 5535081aae..ae8ae12c69 100644
--- a/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap
@@ -21,10 +21,8 @@ exports[`Core: Color CommunicationColors renders 1`] = `
>
- check_circle
-
+ className="swepay-icon-check-circle-filled small mr-1"
+ />
Pass (≥ 4.5:1)
@@ -34,10 +32,8 @@ exports[`Core: Color CommunicationColors renders 1`] = `
>
- warning
-
+ className="swepay-icon-warning-triangle-filled small mr-1"
+ />
OK for graphics or large text (≥ 3:1)
@@ -47,10 +43,8 @@ exports[`Core: Color CommunicationColors renders 1`] = `
>
- error
-
+ className="swepay-icon-error-circle-filled small mr-1"
+ />
Fail
diff --git a/src/App/Identity/identity/Color/index.js b/src/App/Identity/identity/Color/index.js
index 8f570308e4..90c5f466cb 100644
--- a/src/App/Identity/identity/Color/index.js
+++ b/src/App/Identity/identity/Color/index.js
@@ -41,21 +41,24 @@ const ColorContrast = () => (
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -93,9 +93,10 @@ const WhatIsDG = () => (
"http://www.figma.com/proto/p1QcsYCJ3T466As9xQQGBM/Design-Guide-Mantra?page-id=11%3A4123&node-id=233%3A4515&viewport=306%2C372%2C0.1&scaling=min-zoom&starting-point-node-id=233%3A4515"
}
>
-
- launch
-
+
View the contribution process prototype
@@ -135,7 +136,10 @@ const WhatIsDG = () => (
{product.name}
- {product.icon}
+
{product.text}
diff --git a/src/App/Home/index.js b/src/App/Home/index.js
index 9543a5b6cd..249ea59dd2 100644
--- a/src/App/Home/index.js
+++ b/src/App/Home/index.js
@@ -65,36 +65,31 @@ const Home = () => {
{route.wideCard ? (
)}
@@ -104,17 +99,13 @@ const Home = () => {
@@ -125,9 +116,7 @@ const Home = () => {
onClick={() => window.scrollTo(0, document.body.scrollHeight)}
>
Click here to see changelog
-
- expand_more
-
+
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/GetStarted/get-started/Introduction/__snapshots__/index.test.js.snap b/src/App/GetStarted/get-started/Introduction/__snapshots__/index.test.js.snap
index e1421a30d5..fd8b31e2ea 100644
--- a/src/App/GetStarted/get-started/Introduction/__snapshots__/index.test.js.snap
+++ b/src/App/GetStarted/get-started/Introduction/__snapshots__/index.test.js.snap
@@ -82,10 +82,8 @@ exports[`GetStarted: Introduction WhatIsDG renders 1`] = `
>
- launch
-
+ className="at-arrow-up-from-square small mr-2 align-self-baseline"
+ />
View the contribution process prototype
diff --git a/src/App/GetStarted/get-started/Introduction/constants.js b/src/App/GetStarted/get-started/Introduction/constants.js
index fd2a7610a0..a6fe5fe462 100644
--- a/src/App/GetStarted/get-started/Introduction/constants.js
+++ b/src/App/GetStarted/get-started/Introduction/constants.js
@@ -1,42 +1,42 @@
export const designGuideUsers = [
{
name: "Checkout",
- icon: "close",
+ icon: "swepay-icon-error-circle-filled",
text: "No, but are following the Design Guide",
},
{
name: "Swedbankpay.se",
- icon: "close",
+ icon: "swepay-icon-error-circle-filled",
text: "No",
},
{
name: "Consumer Portal",
- icon: "check",
+ icon: "swepay-icon-check-circle-filled",
text: "Yes",
},
{
name: "Developer Portal",
- icon: "check",
+ icon: "swepay-icon-check-circle-filled",
text: "Yes",
},
{
name: "Merchant Portal",
- icon: "check",
+ icon: "swepay-icon-check-circle-filled",
text: "Yes",
},
{
name: "Card terminals",
- icon: "close",
+ icon: "swepay-icon-error-circle-filled",
text: "No, but are following the Design Guide",
},
{
name: "Onboarding Portals",
- icon: "check",
+ icon: "swepay-icon-check-circle-filled",
text: "Yes",
},
{
name: "Terminal Management Systems",
- icon: "check",
+ icon: "swepay-icon-check-circle-filled",
text: "Yes",
},
];
diff --git a/src/App/GetStarted/get-started/Introduction/index.js b/src/App/GetStarted/get-started/Introduction/index.js
index 97e777d9b3..b73cbaea7d 100644
--- a/src/App/GetStarted/get-started/Introduction/index.js
+++ b/src/App/GetStarted/get-started/Introduction/index.js
@@ -19,17 +19,17 @@ const GetStarted = () => (
(
rel="noopener noreferrer"
>
our Git Repository
-
- open_in_new
-
+
{" "}
or create a feature request here.
@@ -430,9 +431,10 @@ const Contributing = () => (
rel="noopener noreferrer"
>
Contribution Guide
-
- open_in_new
-
+
, it includes guidelines for how to contribute with new components and
develop for the project.
@@ -465,7 +467,7 @@ const DiscoverMore = () => (
{card.title}
{card.text}
- arrow_forward
+
))}
- code
+
For developers
Learn more about how to setup and use our system.
- arrow_forward
+
- brush
+
For designers
@@ -37,7 +37,7 @@ const GetStarted = () => (
Get ready to use the Design Guide when designing in {brandTitle}.
- arrow_forward
+
- {route.icon.name}
-
+ >
{route.entryCardText}
- arrow_forward
-
+ >
) : (
- {route.icon.name}
-
+ >
{route.title}
{route.entryCardText}
-
- arrow_forward
-
+
-
- edit
-
+
Utilities
Utility cheat sheet
-
- arrow_forward
-
+
-
- check_circle
-
+
Pass (≥ 4.5:1)
-
- warning
-
+
OK for graphics or large text (≥ 3:1)
-
- error
-
+
Fail
diff --git a/src/App/Identity/identity/Copywriting/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Copywriting/__snapshots__/index.test.js.snap
index 2d0c2f041b..380563383a 100644
--- a/src/App/Identity/identity/Copywriting/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Copywriting/__snapshots__/index.test.js.snap
@@ -275,13 +275,9 @@ exports[`Core: Accessibility WcagStandard renders 1`] = `
>
- open_in_new
-
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
+
Swedbank Pay Definitions – Glossary and other resources
@@ -299,13 +295,9 @@ exports[`Core: Accessibility WcagStandard renders 1`] = `
>
- open_in_new
-
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
+
UX writing at Swedbank
@@ -317,13 +309,9 @@ exports[`Core: Accessibility WcagStandard renders 1`] = `
>
- open_in_new
-
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
+
Swedbank Brand Manager – Tonality
diff --git a/src/App/Identity/identity/Copywriting/index.js b/src/App/Identity/identity/Copywriting/index.js
index ec8cffc540..5fa9393637 100644
--- a/src/App/Identity/identity/Copywriting/index.js
+++ b/src/App/Identity/identity/Copywriting/index.js
@@ -268,12 +268,11 @@ const GlossaryLinks = () => (
target="_blank"
className="icon-link"
>
-
- open_in_new
-
-
- Swedbank Pay Definitions – Glossary and other resources
-
+
+ Swedbank Pay Definitions – Glossary and other resources
This set of guidelines leans heavily on material provided by Swedbank’s UX @@ -288,10 +287,11 @@ const GlossaryLinks = () => ( target="_blank" className="icon-link" > - - open_in_new - - UX writing at Swedbank + + UX writing at Swedbank ( target="_blank" className="icon-link" > - - open_in_new - - Swedbank Brand Manager – Tonality + + Swedbank Brand Manager – Tonality
diff --git a/src/App/Identity/identity/Grid/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Grid/__snapshots__/index.test.js.snap index b518248b52..97e59c5b96 100644 --- a/src/App/Identity/identity/Grid/__snapshots__/index.test.js.snap +++ b/src/App/Identity/identity/Grid/__snapshots__/index.test.js.snap @@ -466,10 +466,8 @@ exports[`Core: Grid Intro renders 1`] = ` - open_in_new - + className="at-arrow-up-from-square small align-self-baseline" + /> . If you are curious about how the grid is being used in design, head over to the @@ -486,10 +484,8 @@ exports[`Core: Grid Intro renders 1`] = ` - open_in_new - + className="at-arrow-up-from-square small align-self-baseline" + /> .
@@ -632,10 +628,9 @@ Array [ onClick={[Function]} > - content_copy - + aria-hidden="true" + className="at-clipboard small" + />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
(
className="icon-link m-0"
>
Bootstrap documentation
-
- open_in_new
-
+
. If you are curious about how the grid is being used in design, head over
to the{" "}
@@ -36,9 +37,10 @@ const Intro = () => (
className="icon-link m-0"
>
Grid file in Figma
-
- open_in_new
-
+
.
diff --git a/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
index 4ee34601f8..098c08ddb7 100644
--- a/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
@@ -35,10 +35,8 @@ exports[`Core: Iconography renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
@@ -140,10 +138,9 @@ exports[`Core: Iconography renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -156,13 +152,11 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => {
>
- {route.icon.name}
-
+ >
{route.title}
@@ -196,9 +190,7 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => {
))}
-
- build
-
+
Utilities
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/utils/SelectPanel/index.js b/src/App/utils/SelectPanel/index.js
index aa4ae39a24..911391422d 100644
--- a/src/App/utils/SelectPanel/index.js
+++ b/src/App/utils/SelectPanel/index.js
@@ -42,9 +42,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => {
return (
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -207,7 +207,7 @@ const SearchBox = ({ className, mobile }) => {
K
-
+
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/utils/SearchBox/index.js b/src/App/utils/SearchBox/index.js
index cee14dc468..7bc7f74929 100644
--- a/src/App/utils/SearchBox/index.js
+++ b/src/App/utils/SearchBox/index.js
@@ -172,7 +172,7 @@ const SearchBox = ({ className, mobile }) => {
className="btn btn-icon btn-sm"
type="button"
>
-
+
)}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -63,7 +64,8 @@ exports[`Utilities; SearchBox renders with no props 1`] = `
className="input-group-addon postfix"
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
))}
- )
+ ),
)}
{this.state.activeTab.options.dropdown &&
this.state.activeTab.options.dropdown.map(
@@ -537,7 +530,7 @@ const ComponentPreview = ({
this.setActiveOptions(
dropdown.id,
dropdown.values[e.target.value].value,
- dropdown.values[e.target.value].description
+ dropdown.values[e.target.value].description,
)
}
>
@@ -548,7 +541,7 @@ const ComponentPreview = ({
))}
- )
+ ),
)}
{this.state.activeTab.options.radio &&
this.state.activeTab.options.radio.map((radio, i) => (
@@ -564,7 +557,7 @@ const ComponentPreview = ({
this.setActiveOptions(
radio.id,
radio.values[e.target.value].value,
- radio.values[e.target.value].description
+ radio.values[e.target.value].description,
)
}
>
@@ -610,8 +603,8 @@ const ComponentPreview = ({
...acc,
...currentOption.value,
}),
- {}
- )
+ {},
+ ),
)}
)}
diff --git a/src/App/docutils/StatusBadge/__snapshots__/index.test.js.snap b/src/App/docutils/StatusBadge/__snapshots__/index.test.js.snap
index 7fb6cbcc6b..f1ce5f7c41 100644
--- a/src/App/docutils/StatusBadge/__snapshots__/index.test.js.snap
+++ b/src/App/docutils/StatusBadge/__snapshots__/index.test.js.snap
@@ -8,10 +8,8 @@ exports[`Utilities: StatusBadge renders deprecated status badge when type is 'de
>
- delete_forever
-
+ className="at-trash small mr-2"
+ />
Deprecated
`;
@@ -34,10 +32,8 @@ exports[`Utilities: StatusBadge renders new status badge when type is 'new' 1`]
>
- child_care
-
+ className="at-hand-holding-seedling small mr-2"
+ />
New
`;
@@ -48,10 +44,8 @@ exports[`Utilities: StatusBadge renders remove status badge when type is 'remove
>
- sentiment_very_dissatisfied
-
+ className="at-axe"
+ />
Being removed
`;
@@ -62,10 +56,8 @@ exports[`Utilities: StatusBadge renders updated status badge when type is 'updat
>
- mood
-
+ className="at-click-select small mr-2"
+ />
Newly updated
`;
diff --git a/src/App/docutils/StatusBadge/index.js b/src/App/docutils/StatusBadge/index.js
index 417156e2bf..5f8980e5f0 100644
--- a/src/App/docutils/StatusBadge/index.js
+++ b/src/App/docutils/StatusBadge/index.js
@@ -4,26 +4,16 @@ import PropTypes from "prop-types";
const statusBadgeContent = {
new: {
icon: (
-
- child_care
-
+
),
text: "New",
},
updated: {
- icon: (
-
- mood
-
- ),
+ icon: ,
text: "Newly updated",
},
remove: {
- icon: (
-
- sentiment_very_dissatisfied
-
- ),
+ icon: ,
text: "Being removed",
},
javascript: {
@@ -31,11 +21,7 @@ const statusBadgeContent = {
text: "Uses JavaScript",
},
deprecated: {
- icon: (
-
- delete_forever
-
- ),
+ icon: ,
text: "Deprecated",
},
};
diff --git a/src/App/routes/components.js b/src/App/routes/components.js
index 20ae397927..5123e4016e 100644
--- a/src/App/routes/components.js
+++ b/src/App/routes/components.js
@@ -5,7 +5,7 @@ module.exports = [
{
title: "Components",
icon: {
- name: "category",
+ name: "at-plugin",
},
entryCardText: "Find all currently available components here",
path: "components",
@@ -23,8 +23,7 @@ module.exports = [
path: "accordion",
rootPath: "/components/accordion",
componentPath: "components/Accordion",
- icon: "calendar_view_day",
- outlined: true,
+ icon: "at-move-line-arrows-up-down",
statusBadges: ["javascript"],
},
{
@@ -32,7 +31,7 @@ module.exports = [
path: "action-list",
rootPath: "/components/action-list",
componentPath: "components/ActionList",
- icon: "list",
+ icon: "at-multiple-arrows-up v-flip",
statusBadges: ["javascript", "deprecated"],
deprecated: true,
},
@@ -41,7 +40,7 @@ module.exports = [
path: "alerts",
rootPath: "/components/alerts",
componentPath: "components/Alerts",
- icon: "error_outline",
+ icon: "at-info-circle",
statusBadges: ["javascript"],
},
{
@@ -49,41 +48,36 @@ module.exports = [
path: "badge",
rootPath: "/components/badge",
componentPath: "components/Badge",
- icon: "more",
- outlined: true,
+ icon: "at-star-badge-award",
},
{
title: "Breadcrumb",
path: "breadcrumb",
rootPath: "/components/breadcrumb",
componentPath: "components/Breadcrumb",
- icon: "last_page",
- outlined: true,
+ icon: "at-dots-horizontal",
},
{
title: "Buttons",
path: "buttons",
rootPath: "/components/buttons",
componentPath: "components/Buttons",
- icon: "touch_app",
+ icon: "at-click",
statusBadges: ["updated"],
- outlined: true,
},
{
title: "Cards",
path: "cards",
rootPath: "/components/cards",
componentPath: "components/Card",
- icon: "view_agenda",
- outlined: true,
+ icon: "at-square-mirror",
},
{
title: "Charts",
path: "charts",
rootPath: "/components/charts",
componentPath: "components/Charts",
- icon: "bar_chart",
- outlined: true,
+ icon: "at-pie-chart",
statusBadges: ["javascript", "deprecated"],
deprecated: true,
},
@@ -92,8 +86,7 @@ module.exports = [
path: "checkbox",
rootPath: "/components/checkbox",
componentPath: "components/Checkbox",
- icon: "check_box",
- outlined: true,
+ icon: "at-check-clipboard",
statusBadges: ["updated"],
},
{
@@ -101,8 +94,7 @@ module.exports = [
path: "datepickers",
rootPath: "/components/datepickers",
componentPath: "components/Datepickers",
- icon: "event",
- outlined: true,
+ icon: "at-calendar-date",
statusBadges: ["javascript", "updated"],
},
{
@@ -110,8 +102,7 @@ module.exports = [
path: "dialog",
rootPath: "/components/dialog",
componentPath: "components/Dialog",
- icon: "picture_in_picture",
- outlined: true,
+ icon: "at-message-text",
statusBadges: ["javascript", "updated"],
},
{
@@ -119,8 +110,7 @@ module.exports = [
path: "dropdown",
rootPath: "/components/dropdown",
componentPath: "components/Dropdown",
- icon: "expand_more",
- outlined: true,
+ icon: "at-list-folder",
statusBadges: ["javascript", "updated"],
},
{
@@ -128,7 +118,7 @@ module.exports = [
path: "expandable",
rootPath: "/components/expandable",
componentPath: "components/Expandable",
- icon: "expand",
+ icon: "at-move-line-arrows-up-down",
statusBadges: ["javascript", "updated"],
},
{
@@ -136,7 +126,7 @@ module.exports = [
path: "input-field",
rootPath: "/components/input-field",
componentPath: "components/InputField",
- icon: "text_fields",
+ icon: "at-pencil-edit",
statusBadges: ["javascript", "updated"],
},
{
@@ -144,40 +134,35 @@ module.exports = [
path: "links",
rootPath: "/components/links",
componentPath: "components/Links",
- icon: "link",
- outlined: true,
+ icon: "at-link-chain",
},
{
title: "Lists",
path: "lists",
rootPath: "/components/lists",
componentPath: "components/Lists",
- icon: "sort",
- outlined: true,
+ icon: "at-list",
},
{
title: "Loader",
path: "loader",
rootPath: "/components/loader",
componentPath: "components/Loader",
- icon: "loop",
- outlined: true,
+ icon: "at-arrows-dots-rotate",
},
{
title: "Media Object",
path: "media-object",
rootPath: "/components/media-object",
componentPath: "components/MediaObject",
- icon: "account_circle",
- outlined: true,
+ icon: "at-image",
},
{
title: "Navigation",
path: "nav",
rootPath: "/components/nav",
componentPath: "components/Nav",
- icon: "explore",
- outlined: true,
+ icon: "at-compass-pointers",
statusBadges: ["javascript", "deprecated"],
deprecated: true,
},
@@ -186,8 +171,7 @@ module.exports = [
path: "pagination",
rootPath: "/components/pagination",
componentPath: "components/Pagination",
- icon: "power_input",
- outlined: true,
+ icon: "at-text-direction-left",
statusBadges: ["javascript"],
},
{
@@ -195,22 +179,21 @@ module.exports = [
path: "panel",
rootPath: "/components/panel",
componentPath: "components/Panel",
- icon: "table_rows",
- outlined: true,
+ icon: "at-down-orientation",
},
{
title: "Progress steps",
path: "progress-steps",
rootPath: "/components/progress-steps",
componentPath: "components/ProgressSteps",
- icon: "hdr_strong",
+ icon: "at-circle-arrow-right",
},
{
title: "Radio button",
path: "radio-button",
rootPath: "/components/radio-button",
componentPath: "components/RadioButton",
- icon: "radio_button_checked",
+ icon: "at-check-circle",
statusBadges: ["javascript", "updated"],
},
{
@@ -218,8 +201,7 @@ module.exports = [
path: "rangeslider",
rootPath: "/components/rangeslider",
componentPath: "components/Rangeslider",
- icon: "tune",
- outlined: true,
+ icon: "at-horizontal-sliders-dots",
statusBadges: ["javascript", "updated"],
},
{
@@ -227,8 +209,7 @@ module.exports = [
path: "sheet",
rootPath: "/components/sheet",
componentPath: "components/Sheet",
- icon: "vertical_split",
- outlined: true,
+ icon: "at-toilet-paper",
statusBadges: ["javascript"],
},
{
@@ -236,8 +217,7 @@ module.exports = [
path: "select",
rootPath: "/components/select",
componentPath: "components/Select",
- icon: "arrow_drop_down_circle",
- outlined: true,
+ icon: "at-arrow-down-circle",
statusBadges: ["updated"],
},
{
@@ -245,8 +225,7 @@ module.exports = [
path: "sidebar",
rootPath: "/components/sidebar",
componentPath: "components/Sidebar",
- icon: "view_sidebar",
- outlined: true,
+ icon: "at-layout-vertical",
statusBadges: ["javascript"],
},
{
@@ -254,40 +233,35 @@ module.exports = [
path: "skip-link",
rootPath: "/components/skip-link",
componentPath: "components/SkipLink",
- icon: "skip_next",
- outlined: true,
+ icon: "at-next",
},
{
title: "Slab",
path: "slab",
rootPath: "/components/slab",
componentPath: "components/Slab",
- icon: "crop_landscape",
- outlined: true,
+ icon: "at-comment-blank",
},
{
title: "Status",
path: "status",
rootPath: "/components/status",
componentPath: "components/Status",
- icon: "check_circle",
- outlined: true,
+ icon: "at-triangle-exclamation",
},
{
title: "Tables",
path: "tables",
rootPath: "/components/tables",
componentPath: "components/Tables",
- icon: "view_list",
- outlined: true,
+ icon: "at-tables",
},
{
title: "Tabs",
path: "tabs",
rootPath: "/components/tabs",
componentPath: "components/Tabs",
- icon: "folder",
- outlined: true,
+ icon: "at-folders",
statusBadges: ["javascript"],
},
{
@@ -295,16 +269,14 @@ module.exports = [
path: "tags",
rootPath: "/components/tags",
componentPath: "components/CodeTags",
- icon: "code",
- outlined: true,
+ icon: "at-electricity-square",
},
{
title: "Toast",
path: "toast",
rootPath: "/components/toast",
componentPath: "components/Toast",
- icon: "picture_in_picture",
- outlined: true,
+ icon: "at-info-message",
statusBadges: ["javascript"],
},
{
@@ -312,16 +284,14 @@ module.exports = [
path: "togglebox",
rootPath: "/components/togglebox",
componentPath: "components/Togglebox",
- icon: "toggle_off",
- outlined: true,
+ icon: "at-movement-arrows-left-right",
},
{
title: "Tooltips",
path: "tooltips",
rootPath: "/components/tooltips",
componentPath: "components/Tooltips",
- icon: "filter_frames",
- outlined: true,
+ icon: "at-list-message",
statusBadges: ["javascript"],
},
{
@@ -329,8 +299,7 @@ module.exports = [
path: "topbar",
rootPath: "/components/topbar",
componentPath: "components/Topbar",
- icon: "call_to_action",
- outlined: true,
+ icon: "at-website",
statusBadges: ["javascript", "updated"],
},
{
@@ -338,8 +307,7 @@ module.exports = [
path: "topbar-migrating-to-v2",
rootPath: "/components/TopbarMigratingToV2",
componentPath: "components/TopbarMigratingToV2",
- icon: "call_to_action",
- outlined: true,
+ icon: "at-exclamation-website",
statusBadges: ["javascript", "new"],
},
],
diff --git a/src/App/routes/get-started.js b/src/App/routes/get-started.js
index a8ff38120e..42c66b94fa 100644
--- a/src/App/routes/get-started.js
+++ b/src/App/routes/get-started.js
@@ -2,8 +2,7 @@ module.exports = [
{
title: "Get started",
icon: {
- name: "wb_incandescent",
- rotate: true,
+ name: "at-electric-lightbulb",
},
entryCardText: "Get started by setting up the Design Guide!",
path: "get-started",
diff --git a/src/App/routes/identity.js b/src/App/routes/identity.js
index b94cb5e9c4..8f6e9f0cad 100644
--- a/src/App/routes/identity.js
+++ b/src/App/routes/identity.js
@@ -5,7 +5,7 @@ module.exports = [
{
title: "Identity",
icon: {
- name: "palette",
+ name: "at-color",
},
path: "identity",
entryCardText: "Learn about our fundamental principles",
diff --git a/src/App/routes/patterns.js b/src/App/routes/patterns.js
index 85225f3525..fd3f446b6d 100644
--- a/src/App/routes/patterns.js
+++ b/src/App/routes/patterns.js
@@ -2,7 +2,7 @@ module.exports = [
{
title: "Patterns",
icon: {
- name: "dashboard",
+ name: "at-puzzle",
},
path: "patterns",
entryCardText: "Learn about how to we set up different structures",
@@ -20,8 +20,7 @@ module.exports = [
path: "forms",
rootPath: "/patterns/forms",
componentPath: "content/Forms",
- icon: "format_align_justify",
- outlined: true,
+ icon: "at-newspaper-newsletter",
statusBadges: ["updated"],
},
{
@@ -29,8 +28,7 @@ module.exports = [
path: "login",
rootPath: "/patterns/login",
componentPath: "content/Login",
- icon: "account_circle",
- outlined: true,
+ icon: "at-user-key",
},
],
},
diff --git a/src/App/routes/playbook.js b/src/App/routes/playbook.js
index fcc095336e..7fed943ece 100644
--- a/src/App/routes/playbook.js
+++ b/src/App/routes/playbook.js
@@ -5,7 +5,7 @@ module.exports = [
{
title: "Playbook",
icon: {
- name: "casino",
+ name: "at-chess-piece",
},
path: "playbook",
entryCardText: "Discover our visual language and principles",
diff --git a/src/App/utils/SearchBox/__snapshots__/index.test.js.snap b/src/App/utils/SearchBox/__snapshots__/index.test.js.snap
index 9019b095a0..bfb8186737 100644
--- a/src/App/utils/SearchBox/__snapshots__/index.test.js.snap
+++ b/src/App/utils/SearchBox/__snapshots__/index.test.js.snap
@@ -21,7 +21,8 @@ exports[`Utilities; SearchBox renders with mobile prop 1`] = `
type="button"
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
@@ -2201,10 +2189,9 @@ exports[`Core: Iconography renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/Identity/identity/Imagery/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Imagery/__snapshots__/index.test.js.snap
index f35afa5d36..ff9fe35e4e 100644
--- a/src/App/Identity/identity/Imagery/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Imagery/__snapshots__/index.test.js.snap
@@ -354,10 +354,9 @@ exports[`Core: Imagery renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
(
target="_blank"
rel="noopener noreferrer"
>
-
- open_in_new
-
+
Atlas Icons Overview
@@ -66,9 +67,10 @@ const MaterialIcons = () => (
target="_blank"
rel="noopener noreferrer"
>
-
- open_in_new
-
+
Material Icons Overview
diff --git a/src/App/Identity/identity/Identity/index.js b/src/App/Identity/identity/Identity/index.js
index afa340b85d..b10dcc64ca 100644
--- a/src/App/Identity/identity/Identity/index.js
+++ b/src/App/Identity/identity/Identity/index.js
@@ -35,9 +35,10 @@ const OurBrand = () => (
rel="noopener noreferrer"
className="icon-link"
>
-
- open_in_new
-
+
Swedbank Brand Manager – read more about our brand
@@ -85,7 +86,7 @@ const MenuOverview = () => (
{card.title}
{card.text}
- arrow_forward
+
))}
(
rel="noopener noreferrer"
className="icon-link d-block d-flex"
>
-
- open_in_new
-
+
Visit the Swedbank Pay Image Library
)}
diff --git a/src/App/Identity/identity/Logotype/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Logotype/__snapshots__/index.test.js.snap
index 2333b0f341..45db07ef25 100644
--- a/src/App/Identity/identity/Logotype/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Logotype/__snapshots__/index.test.js.snap
@@ -66,10 +66,8 @@ exports[`Core: Logotype Favicon renders 1`] = `
>
- download
-
+ className="at-download-arrow-down small align-self-baseline"
+ />
@@ -90,10 +88,9 @@ exports[`Core: Logotype Favicon renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -493,7 +486,7 @@ const ComponentPreview = ({
onKeyDown={(e) => this.setOptionsMenuState(e, false)}
onClick={() => this.setState({ optionsOpen: false })}
>
- close
+
{this.state.activeTab.options && (
@@ -514,7 +507,7 @@ const ComponentPreview = ({
input.id,
input.value,
input.description,
- true
+ true,
)
}
>
@@ -523,7 +516,7 @@ const ComponentPreview = ({
- download
-
+ className="at-download-arrow-down small align-self-baseline"
+ />
diff --git a/src/App/Identity/identity/Logotype/index.js b/src/App/Identity/identity/Logotype/index.js
index ce1ae61bc1..b305262dd2 100644
--- a/src/App/Identity/identity/Logotype/index.js
+++ b/src/App/Identity/identity/Logotype/index.js
@@ -220,16 +220,18 @@ const Favicon = () => (
{brand === "payex" ? (
-
- file_download
-
+
Download Favicons
) : (
-
- download
-
+
Download Swedbank Pay favicon assets
)}
@@ -415,9 +417,10 @@ const Overview = () => (
href={`${basename}release/logos/Swedbank_Pay_Logotype.zip`}
className="icon-link mb-4"
>
-
- download
-
+
Download Swedbank Pay logotype assets
diff --git a/src/App/Identity/identity/Spacing/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Spacing/__snapshots__/index.test.js.snap
index e512966814..17d2318557 100644
--- a/src/App/Identity/identity/Spacing/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Spacing/__snapshots__/index.test.js.snap
@@ -1199,10 +1199,8 @@ exports[`Identity: Spacing renders 1`] = `
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
, which provides a brief explanation of the reasons why to use the 8-point spacing system. To dive even deeper into the nitty gritty, please refer to this
@@ -1219,10 +1217,8 @@ exports[`Identity: Spacing renders 1`] = `
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline"
+ />
of the 8-point spacing system.
@@ -1403,10 +1399,8 @@ exports[`Identity: Spacing renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -1421,10 +1415,8 @@ exports[`Identity: Spacing renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -1439,10 +1431,8 @@ exports[`Identity: Spacing renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -1457,10 +1447,8 @@ exports[`Identity: Spacing renders 1`] = `
>
- open_in_new
-
+ className="at-arrow-up-from-square small align-self-baseline mr-2"
+ />
@@ -2098,10 +2086,9 @@ exports[`Identity: Spacing renders 1`] = `
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
{"\n"}
-
- arrow_forward
-
+
{"\n"}
{"\n"}
diff --git a/src/App/docutils/ComponentPreview/__snapshots__/index.test.js.snap b/src/App/docutils/ComponentPreview/__snapshots__/index.test.js.snap
index 187fcb3106..4bd46af115 100644
--- a/src/App/docutils/ComponentPreview/__snapshots__/index.test.js.snap
+++ b/src/App/docutils/ComponentPreview/__snapshots__/index.test.js.snap
@@ -15,10 +15,9 @@ exports[`Utilities: ComponentPreview CodeFigure removes outer tag from markup 1`
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
{"\n"}
-
- arrow_forward
-
+
{"\n"}
{"\n"}
@@ -54,9 +52,7 @@ const Cards = ({ type, titleTxt, imgSrc, icon, text, children, wide }) => (
{children && children}
(
className="icon-link m-0"
>
Introduction article
-
- open_in_new
-
+
, which provides a brief explanation of the reasons why to use the 8-point
spacing system. To dive even deeper into the nitty gritty, please refer to
@@ -52,9 +53,10 @@ const EightPointSystem = () => (
className="icon-link m-0"
>
in-depth explanation
-
- open_in_new
-
+
{" "}
of the 8-point spacing system.
@@ -183,9 +185,10 @@ const DiveDeeper = () => (
rel="noopener noreferrer"
className="icon-link d-flex"
>
-
- open_in_new
-
+
{link.text}
))}
@@ -374,16 +377,16 @@ const Examples = () => (
.mt-0 {
margin-top: 0 !important;
}
-
+
.ml-1 {
margin-left: (@spacer * 0.25) !important;
}
-
+
.px-2 {
padding-left: (@spacer * 0.5) !important;
padding-right: (@spacer * 0.5) !important;
}
-
+
.p-3 {
padding: @spacer !important;
}
diff --git a/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
index ac7560bba7..0e42f9c2e9 100644
--- a/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap
@@ -59,10 +59,9 @@ Array [
onClick={[Function]}
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/components/Cards/__snapshots__/index.test.js.snap b/src/App/components/Cards/__snapshots__/index.test.js.snap
index e2de32aa44..f9c663503b 100644
--- a/src/App/components/Cards/__snapshots__/index.test.js.snap
+++ b/src/App/components/Cards/__snapshots__/index.test.js.snap
@@ -24,10 +24,8 @@ exports[`Component: Cards - renders a child object 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -62,10 +60,8 @@ exports[`Component: Cards - renders a text in card-body 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -102,10 +98,8 @@ exports[`Component: Cards - renders a title 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -134,10 +128,8 @@ Array [
- arrow_forward
-
+ className="at-arrow-right small"
+ />
,
@@ -178,10 +170,8 @@ exports[`Component: Cards - renders an icon when icon is provided 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -216,10 +206,8 @@ exports[`Component: Cards - renders an image 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -251,10 +239,8 @@ exports[`Component: Cards - renders with correct type 1`] = `
- arrow_forward
-
+ className="at-arrow-right small"
+ />
@@ -286,10 +272,8 @@ exports[`Component: Cards - throws an error if type does not match proptypes 1`]
- arrow_forward
-
+ className="at-arrow-right small"
+ />
diff --git a/src/App/components/Cards/index.js b/src/App/components/Cards/index.js
index 3fd546dcc9..6c9d3919c1 100644
--- a/src/App/components/Cards/index.js
+++ b/src/App/components/Cards/index.js
@@ -28,9 +28,7 @@ const Cards = ({ type, titleTxt, imgSrc, icon, text, children, wide }) => (
{children && children}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/Utilities/__snapshots__/index.test.js.snap b/src/App/Utilities/__snapshots__/index.test.js.snap
index befeae0405..b2da4a16c2 100644
--- a/src/App/Utilities/__snapshots__/index.test.js.snap
+++ b/src/App/Utilities/__snapshots__/index.test.js.snap
@@ -21,10 +21,8 @@ exports[`Utilities: index renders 1`] = `
>
- child_care
-
+ className="at-hand-holding-seedling small mr-2"
+ />
New
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- arrow_forward
+
))}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/Patterns/content/Patterns/index.js b/src/App/Patterns/content/Patterns/index.js
index 7ca64fc6e7..e922d8a20c 100644
--- a/src/App/Patterns/content/Patterns/index.js
+++ b/src/App/Patterns/content/Patterns/index.js
@@ -14,20 +14,12 @@ const Overview = () => (
className="cards cards-primary cards-wide"
>
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- arrow_forward
-
+ aria-hidden="true"
+ className="at-arrow-right small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- arrow_forward
-
+ aria-hidden="true"
+ className="at-arrow-right small"
+ />
- account_circle
-
+ className="at-user-key small mr-3"
+ />
@@ -119,10 +114,9 @@ exports[`Patterns renders 1`] = `
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
diff --git a/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap
index 890a27c326..f49ed02181 100644
--- a/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap
+++ b/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap
@@ -83,10 +83,8 @@ exports[`Patterns renders 1`] = `
className="cards-content flex-row align-items-center m-0 "
>
- format_align_justify
-
+ className="at-newspaper-newsletter small mr-3"
+ />
@@ -94,10 +92,9 @@ exports[`Patterns renders 1`] = `
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -167,10 +166,9 @@ exports[`Forms: index renders 1`] = `
onClick={[Function]}
>
- close
-
+ aria-hidden="true"
+ className="at-arrow-left-line"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- download
-
+ className="at-download-arrow-down small align-self-baseline"
+ />
diff --git a/src/App/Identity/identity/Typography/index.js b/src/App/Identity/identity/Typography/index.js
index 8cbf94d999..53134f7263 100644
--- a/src/App/Identity/identity/Typography/index.js
+++ b/src/App/Identity/identity/Typography/index.js
@@ -29,9 +29,10 @@ const Typefaces = () => (
-
- download
-
+
Download all Swedbank Pay typefaces
diff --git a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
index 4d9038004f..1d06d867e9 100644
--- a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
+++ b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
@@ -66,10 +66,9 @@ exports[`Forms: index renders 1`] = `
onClick={[Function]}
>
- menu_open
-
+ aria-hidden="true"
+ className="at-arrow-right-line"
+ />
-
- {card.icon}
-
+
{card.title}
-
- arrow_forward
-
+
- )
+ ),
)}
);
diff --git a/src/App/Playbook/content/Playbook/index.js b/src/App/Playbook/content/Playbook/index.js
index 60c1468651..4b3ca80c6f 100644
--- a/src/App/Playbook/content/Playbook/index.js
+++ b/src/App/Playbook/content/Playbook/index.js
@@ -74,7 +74,7 @@ const Index = () => (
{card.title}
{card.text}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -470,7 +463,7 @@ const ComponentPreview = ({
...acc,
currentOption.description,
],
- []
+ [],
)
.map((currentOptionDescription, i) => (
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
@@ -453,8 +446,8 @@ const ComponentPreview = ({
...acc,
...currentOption.value,
}),
- {}
- )
+ {},
+ ),
)}
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
- content_copy
-
+ aria-hidden="true"
+ className="at-clipboard small"
+ />
);
diff --git a/src/App/docutils/ComponentPreview/index.js b/src/App/docutils/ComponentPreview/index.js
index 64f902680f..e757bf3bae 100644
--- a/src/App/docutils/ComponentPreview/index.js
+++ b/src/App/docutils/ComponentPreview/index.js
@@ -156,7 +156,7 @@ const ComponentPreview = ({
className="tooltip"
onClick={(e) => copyToClipboard(e)}
>
- content_copy
+
setSidebarDisplayed(false)}
>
- close
+
{activeTab.options && (
diff --git a/src/App/docutils/ComponentPreview/components/Topbar.js b/src/App/docutils/ComponentPreview/components/Topbar.js
index eb4b0decd9..a74fcd4ab0 100644
--- a/src/App/docutils/ComponentPreview/components/Topbar.js
+++ b/src/App/docutils/ComponentPreview/components/Topbar.js
@@ -69,7 +69,7 @@ const CloseOptionsButton = ({
aria-label="Open options menu"
onClick={() => setSidebarDisplayed(true)}
>
- menu_open
+
Copy to clipboard
@@ -221,7 +221,7 @@ const ComponentPreview = ({
_resetOptions() {
const showcasePanel = document.getElementById(
- this.props.showCasePanelAdvanced.id
+ this.props.showCasePanelAdvanced.id,
);
const optionsPanel = showcasePanel.querySelector(".options");
@@ -236,28 +236,28 @@ const ComponentPreview = ({
.forEach((radio) => (radio.querySelector("input").checked = false));
const defaultRadios = [...optionsPanel.querySelectorAll(".radio")].filter(
- (radio) => radio.querySelector("input").id.includes("default")
+ (radio) => radio.querySelector("input").id.includes("default"),
);
if (defaultRadios.length > 0) {
const defaultRadiosGroups = defaultRadios.map(
- (radio) => radio.querySelector("input").name
+ (radio) => radio.querySelector("input").name,
);
defaultRadios.map(
- (radio) => (radio.querySelector("input").checked = true)
+ (radio) => (radio.querySelector("input").checked = true),
);
// Reset radio groups that do not have default specified (set to top radio). Needs to be done when one or more radio button is specified as default
[...optionsPanel.querySelectorAll(".radio")]
.filter(
(radio) =>
- !defaultRadiosGroups.includes(radio.querySelector("input").name)
+ !defaultRadiosGroups.includes(radio.querySelector("input").name),
)
.map(
(radio) =>
(radio.querySelector("input").checked =
- radio.querySelector("input").value === "0")
+ radio.querySelector("input").value === "0"),
);
} else {
optionsPanel
@@ -265,7 +265,7 @@ const ComponentPreview = ({
.forEach(
(radio) =>
(radio.querySelector("input").checked =
- radio.querySelector("input").value === "0")
+ radio.querySelector("input").value === "0"),
);
}
}
@@ -316,7 +316,7 @@ const ComponentPreview = ({
this.setState((prevState) => ({
...prevState,
activeOptions: this.state.activeOptions.filter(
- (option) => id !== option.id
+ (option) => id !== option.id,
),
}));
} else {
@@ -387,11 +387,9 @@ const ComponentPreview = ({
onClick={() => this.setExpandedPreview(true)}
>
- open_in_full
-
+ >
) : (
))}
{this.props.showCasePanelAdvanced.elements.map((element, i) => (
@@ -432,7 +425,7 @@ const ComponentPreview = ({
onKeyDown={(e) => this.setOptionsMenuState(e, true)}
onClick={() => this.setState({ optionsOpen: true })}
>
- menu_open
+
-
@@ -141,9 +139,7 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => {
}`}
>