From abf8e5782e822e4ab797564c1d22b82252c5fddd Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Tue, 9 Jan 2024 00:38:41 +0100 Subject: [PATCH 1/5] SWED-2380 migrate icons to atlas and swepay DS website --- .../get-started/ForDesigners/index.js | 20 +++---- .../get-started/ForDevelopers/index.js | 12 ++--- .../get-started/Introduction/constants.js | 16 +++--- .../get-started/Introduction/index.js | 20 ++++--- src/App/Home/index.js | 44 ++++++--------- .../Identity/identity/Accessibility/index.js | 42 ++++++++------- src/App/Identity/identity/Color/index.js | 21 ++++---- .../Identity/identity/Copywriting/index.js | 29 +++++----- src/App/Identity/identity/Grid/index.js | 14 ++--- .../Identity/identity/Iconography/index.js | 14 ++--- src/App/Identity/identity/Identity/index.js | 9 ++-- src/App/Identity/identity/Imagery/index.js | 7 +-- src/App/Identity/identity/Logotype/index.js | 21 ++++---- src/App/Identity/identity/Spacing/index.js | 27 +++++----- src/App/Identity/identity/Typography/index.js | 7 +-- src/App/Patterns/content/Patterns/index.js | 14 ++--- src/App/Playbook/content/Playbook/index.js | 2 +- .../ComponentPreview/components/Sidebar.js | 2 +- .../ComponentPreview/components/Topbar.js | 2 +- src/App/docutils/ComponentPreview/index.js | 53 ++++++++----------- src/App/docutils/StatusBadge/index.js | 22 ++------ src/App/routes/components.js | 2 +- src/App/routes/get-started.js | 3 +- src/App/routes/identity.js | 2 +- src/App/routes/patterns.js | 8 ++- src/App/routes/playbook.js | 2 +- src/App/utils/SelectPanel/index.js | 18 ++----- 27 files changed, 201 insertions(+), 232 deletions(-) diff --git a/src/App/GetStarted/get-started/ForDesigners/index.js b/src/App/GetStarted/get-started/ForDesigners/index.js index d29c684302..82856b6fea 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" > - + Download the Figma application - + Read more about Figma @@ -79,13 +75,11 @@ const NeedToKnow = () => ( {brandTitle === "Swedbank Pay" && ( - + 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 - arrow_forward + diff --git a/src/App/GetStarted/get-started/ForDevelopers/index.js b/src/App/GetStarted/get-started/ForDevelopers/index.js index c3758d42b9..0c3cb77014 100644 --- a/src/App/GetStarted/get-started/ForDevelopers/index.js +++ b/src/App/GetStarted/get-started/ForDevelopers/index.js @@ -415,9 +415,6 @@ const Contributing = () => ( rel="noopener noreferrer" > our Git Repository - {" "} or create a feature request here.

@@ -430,9 +427,10 @@ const Contributing = () => ( rel="noopener noreferrer" > Contribution Guide - + , it includes guidelines for how to contribute with new components and develop for the project. @@ -465,7 +463,7 @@ const DiscoverMore = () => ( {card.title} {card.text} - arrow_forward + ))} 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 = () => (
- 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 +
@@ -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" } > - + 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..171cc04655 100644 --- a/src/App/Home/index.js +++ b/src/App/Home/index.js @@ -65,36 +65,31 @@ const Home = () => { {route.wideCard ? (
+ > {route.entryCardText} + >
) : (
+ >
{route.title} {route.entryCardText}
- +
)} @@ -104,17 +99,13 @@ const Home = () => {
- +
Utilities Utility cheat sheet
- +
@@ -125,9 +116,7 @@ const Home = () => { onClick={() => window.scrollTo(0, document.body.scrollHeight)} > Click here to see changelog - + { rel="noopener noreferrer" className="icon-link mt-4 px-0" > - + Github - Detailed changelog 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" > - + What is WCAG? @@ -202,9 +203,10 @@ const WcagStandard = () => ( rel="noopener noreferrer" className="icon-link" > - + W3C – WCAG 2.1 Recommendations @@ -269,9 +271,10 @@ const DiveDeeper = () => ( rel="noopener noreferrer" className="icon-link d-flex" > - + Material.io – Understanding Accessibility ( rel="noopener noreferrer" className="icon-link d-flex" > - + W3C – WCAG 2.1 Recommendations @@ -295,9 +299,10 @@ const DiveDeeper = () => ( rel="noopener noreferrer" className="icon-link d-flex" > - + {links.text} ))} @@ -311,9 +316,10 @@ const DiveDeeper = () => ( rel="noopener noreferrer" className="icon-link d-flex" > - + {links.text} ))} 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 = () => (

- + Pass (≥ 4.5:1) - + OK for graphics or large text (≥ 3:1) - + Fail
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" > - - - 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" > - - UX writing at Swedbank + + UX writing at Swedbank ( target="_blank" className="icon-link" > - - Swedbank Brand Manager – Tonality + + Swedbank Brand Manager – Tonality

diff --git a/src/App/Identity/identity/Grid/index.js b/src/App/Identity/identity/Grid/index.js index 4a5a9579b5..5b0b06276a 100644 --- a/src/App/Identity/identity/Grid/index.js +++ b/src/App/Identity/identity/Grid/index.js @@ -23,9 +23,10 @@ const Intro = () => ( className="icon-link m-0" > Bootstrap documentation - + . 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 - + .

diff --git a/src/App/Identity/identity/Iconography/index.js b/src/App/Identity/identity/Iconography/index.js index ab9e55216c..4fc0cd27ff 100644 --- a/src/App/Identity/identity/Iconography/index.js +++ b/src/App/Identity/identity/Iconography/index.js @@ -21,9 +21,10 @@ const AtlasIcons = () => ( target="_blank" rel="noopener noreferrer" > - + Atlas Icons Overview @@ -66,9 +67,10 @@ const MaterialIcons = () => ( target="_blank" rel="noopener noreferrer" > - + 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" > - + Swedbank Brand Manager – read more about our brand @@ -85,7 +86,7 @@ const MenuOverview = () => ( {card.title} {card.text} - arrow_forward + ))} diff --git a/src/App/Identity/identity/Imagery/index.js b/src/App/Identity/identity/Imagery/index.js index 40c9f8cf97..c9143c4e12 100644 --- a/src/App/Identity/identity/Imagery/index.js +++ b/src/App/Identity/identity/Imagery/index.js @@ -25,9 +25,10 @@ const ImageLibrary = () => ( rel="noopener noreferrer" className="icon-link d-block d-flex" > - + Visit the Swedbank Pay Image Library )} 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" ? ( - + Download Favicons ) : ( - + 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 Swedbank Pay logotype assets diff --git a/src/App/Identity/identity/Spacing/index.js b/src/App/Identity/identity/Spacing/index.js index 775792d4ba..9e21ba486e 100644 --- a/src/App/Identity/identity/Spacing/index.js +++ b/src/App/Identity/identity/Spacing/index.js @@ -38,9 +38,10 @@ const EightPointSystem = () => ( className="icon-link m-0" > Introduction article - + , 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 - + {" "} of the 8-point spacing system.

@@ -183,9 +185,10 @@ const DiveDeeper = () => ( rel="noopener noreferrer" className="icon-link d-flex" > - + {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/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 all Swedbank Pay typefaces 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" >
- - {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} - arrow_forward + ))} diff --git a/src/App/docutils/ComponentPreview/components/Sidebar.js b/src/App/docutils/ComponentPreview/components/Sidebar.js index 3876fe8136..202a58d168 100644 --- a/src/App/docutils/ComponentPreview/components/Sidebar.js +++ b/src/App/docutils/ComponentPreview/components/Sidebar.js @@ -20,7 +20,7 @@ export const Sidebar = ({ aria-label="Close options menu" onClick={() => 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 + ); diff --git a/src/App/docutils/ComponentPreview/index.js b/src/App/docutils/ComponentPreview/index.js index 64f902680f..42e64f727a 100644 --- a/src/App/docutils/ComponentPreview/index.js +++ b/src/App/docutils/ComponentPreview/index.js @@ -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)} > + > ) : ( ))} {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 + @@ -453,8 +446,8 @@ const ComponentPreview = ({ ...acc, ...currentOption.value, }), - {} - ) + {}, + ), )} @@ -470,7 +463,7 @@ const ComponentPreview = ({ ...acc, currentOption.description, ], - [] + [], ) .map((currentOptionDescription, i) => ( @@ -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 = ({ ))} - ) + ), )} {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/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: ( - + ), text: "New", }, updated: { - icon: ( - - ), + icon: , text: "Newly updated", }, remove: { - icon: ( - - ), + icon: , text: "Being removed", }, javascript: { @@ -31,11 +21,7 @@ const statusBadgeContent = { text: "Uses JavaScript", }, deprecated: { - icon: ( - - ), + icon: , text: "Deprecated", }, }; diff --git a/src/App/routes/components.js b/src/App/routes/components.js index 20ae397927..f03d9600fc 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-puzzle", }, entryCardText: "Find all currently available components here", path: "components", 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 c35880939c..cf25879036 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..5209a919c7 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-pattern-security", }, 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-account", }, ], }, 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/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 (
    • @@ -141,9 +139,7 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => { }`} > - + Welcome @@ -156,13 +152,11 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => { > + > {route.title} @@ -196,9 +190,7 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => { ))}
    • - + Utilities
      • From d5e3357548a2ec0500e9b160080159b93ec6b1ee Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Tue, 9 Jan 2024 00:41:53 +0100 Subject: [PATCH 2/5] SWED-2380 update jest tests --- .../Card/__snapshots__/index.test.js.snap | 6 +- .../__snapshots__/index.test.js.snap | 12 +--- .../__snapshots__/index.test.js.snap | 6 +- .../__snapshots__/index.test.js.snap | 66 +++++++------------ .../Color/__snapshots__/index.test.js.snap | 18 ++--- .../__snapshots__/index.test.js.snap | 30 +++------ .../Grid/__snapshots__/index.test.js.snap | 12 ++-- .../__snapshots__/index.test.js.snap | 12 ++-- .../Logotype/__snapshots__/index.test.js.snap | 12 ++-- .../Spacing/__snapshots__/index.test.js.snap | 36 ++++------ .../__snapshots__/index.test.js.snap | 6 +- .../Forms/__snapshots__/index.test.js.snap | 14 ++-- .../Patterns/__snapshots__/index.test.js.snap | 26 +++----- .../__snapshots__/index.test.js.snap | 6 +- .../__snapshots__/index.test.js.snap | 24 +++---- 15 files changed, 95 insertions(+), 191 deletions(-) diff --git a/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap index d1a781e0b6..1fb69bb4f2 100644 --- a/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap @@ -12,10 +12,8 @@ Array [ > + className="at-axe" + /> Being removed ,

      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..72f1315084 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 @@ -21,12 +21,6 @@ exports[`GetStarted: ForDevelopers Contributing renders 1`] = ` > our Git Repository - or create a feature request here. @@ -47,10 +41,8 @@ exports[`GetStarted: ForDevelopers Contributing renders 1`] = ` + 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.

      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`] = ` > + className="at-arrow-up-from-square small mr-2 align-self-baseline" + /> View the contribution process prototype 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`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -50,10 +48,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -71,10 +67,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -89,10 +83,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -107,10 +99,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -128,10 +118,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -146,10 +134,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -164,10 +150,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -182,10 +166,8 @@ exports[`Core: Accessibility DiveDeeper renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -400,10 +382,8 @@ exports[`Core: Accessibility WcagStandard renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -418,10 +398,8 @@ exports[`Core: Accessibility WcagStandard renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> 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`] = ` > + className="swepay-icon-check-circle-filled small mr-1" + /> Pass (≥ 4.5:1) @@ -34,10 +32,8 @@ exports[`Core: Color CommunicationColors renders 1`] = ` > + 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`] = ` > + className="swepay-icon-error-circle-filled small mr-1" + /> 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`] = ` > - + 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`] = ` > - + 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`] = ` > - + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> + 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..8b23344df2 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`] = ` + 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`] = ` + className="at-arrow-up-from-square small align-self-baseline" + /> .

      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 32b3183826..b0aca0f4a9 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`] = ` > + className="at-arrow-up-from-square small align-self-baseline" + /> @@ -1995,10 +1993,8 @@ exports[`Core: Iconography renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline" + /> 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..8af5ff0fbf 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`] = ` > + className="at-download-arrow-down small align-self-baseline" + /> @@ -697,10 +695,8 @@ exports[`Core: Logotype Overview renders 1`] = ` > + className="at-download-arrow-down small align-self-baseline" + /> 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..c3fb862fdb 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`] = ` + 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`] = ` + 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`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -1421,10 +1415,8 @@ exports[`Identity: Spacing renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -1439,10 +1431,8 @@ exports[`Identity: Spacing renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> @@ -1457,10 +1447,8 @@ exports[`Identity: Spacing renders 1`] = ` > + className="at-arrow-up-from-square small align-self-baseline mr-2" + /> 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..acdc58e3ff 100644 --- a/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap +++ b/src/App/Identity/identity/Typography/__snapshots__/index.test.js.snap @@ -1305,10 +1305,8 @@ exports[`Core: Typography Typefaces renders 1`] = ` > + className="at-download-arrow-down small align-self-baseline" + /> 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" + /> @@ -167,10 +166,9 @@ exports[`Forms: index renders 1`] = ` onClick={[Function]} > - close - + aria-hidden="true" + className="at-arrow-left-line" + /> 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..f2d4e1dfdf 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`] = ` - arrow_forward - + aria-hidden="true" + className="at-arrow-right small" + /> - account_circle - + className="at-account small mr-3" + /> @@ -119,10 +114,9 @@ exports[`Patterns renders 1`] = ` - arrow_forward - + aria-hidden="true" + className="at-arrow-right small" + /> diff --git a/src/App/Utilities/__snapshots__/index.test.js.snap b/src/App/Utilities/__snapshots__/index.test.js.snap index c1e6a4f47d..a9b256e287 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`] = ` > + className="at-hand-holding-seedling small mr-2" + /> New 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 > + className="at-trash small mr-2" + /> Deprecated `; @@ -34,10 +32,8 @@ exports[`Utilities: StatusBadge renders new status badge when type is 'new' 1`] > + className="at-hand-holding-seedling small mr-2" + /> New `; @@ -48,10 +44,8 @@ exports[`Utilities: StatusBadge renders remove status badge when type is 'remove > + className="at-axe" + /> Being removed `; @@ -62,10 +56,8 @@ exports[`Utilities: StatusBadge renders updated status badge when type is 'updat > + className="at-click-select small mr-2" + /> Newly updated `; From e89e6bb286c824bbc0f4b67c04e0b7fe68657f58 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Wed, 10 Jan 2024 18:18:26 +0100 Subject: [PATCH 3/5] SWED-2380 migrate icons components overview + update E2E tests --- .../Accordion/accordion.e2e.spec.js | 5 +- .../__snapshots__/index.test.js.snap | 35 ++-- .../__snapshots__/index.test.js.snap | 14 +- .../Buttons/__snapshots__/index.test.js.snap | 21 +-- .../Card/__snapshots__/index.test.js.snap | 21 +-- .../__snapshots__/index.test.js.snap | 14 +- .../Charts/__snapshots__/index.test.js.snap | 161 ++++++++---------- .../Checkbox/__snapshots__/index.test.js.snap | 14 +- .../components/Components/index.js | 23 +-- .../__snapshots__/index.test.js.snap | 63 +++---- .../Dialog/__snapshots__/index.test.js.snap | 7 +- .../components/Dialog/dialog.e2e.spec.js | 13 +- .../components/Dropdown/dropdown.e2e.spec.js | 5 +- .../__snapshots__/index.test.js.snap | 7 +- .../Expandable/expandable.e2e.spec.js | 5 +- .../Footer/__snapshots__/index.test.js.snap | 7 +- .../Lists/__snapshots__/index.test.js.snap | 77 ++++----- .../__snapshots__/index.test.js.snap | 28 ++- .../Nav/__snapshots__/index.test.js.snap | 14 +- .../__snapshots__/index.test.js.snap | 7 +- .../Panel/__snapshots__/index.test.js.snap | 21 +-- .../__snapshots__/index.test.js.snap | 21 +-- .../__snapshots__/index.test.js.snap | 14 +- .../Select/__snapshots__/index.test.js.snap | 14 +- .../Slab/__snapshots__/index.test.js.snap | 7 +- .../Status/__snapshots__/index.test.js.snap | 7 +- .../Toast/__snapshots__/index.test.js.snap | 21 +-- .../components/Toast/toast.e2e.spec.js | 13 +- .../__snapshots__/index.test.js.snap | 14 +- .../Topbar/__snapshots__/index.test.js.snap | 21 +-- .../components/Topbar/topbar.e2e.spec.js | 21 ++- .../__snapshots__/index.test.js.snap | 70 ++++---- .../Grid/__snapshots__/index.test.js.snap | 21 +-- .../__snapshots__/index.test.js.snap | 63 +++---- .../Imagery/__snapshots__/index.test.js.snap | 7 +- .../Logotype/__snapshots__/index.test.js.snap | 7 +- .../Spacing/__snapshots__/index.test.js.snap | 14 +- .../__snapshots__/index.test.js.snap | 70 ++++---- .../Patterns/__snapshots__/index.test.js.snap | 2 +- src/App/components/Cards/index.js | 8 +- .../__snapshots__/index.test.js.snap | 42 ++--- src/App/docutils/ComponentPreview/index.js | 2 +- src/App/routes/components.js | 110 +++++------- src/App/routes/patterns.js | 4 +- .../__snapshots__/index.test.js.snap | 6 +- src/App/utils/SearchBox/index.js | 4 +- 46 files changed, 494 insertions(+), 651 deletions(-) diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js index b1e0b1e95d..3a46a0c46f 100644 --- a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js +++ b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js @@ -11,7 +11,10 @@ test("Accordion page exist", async ({ page }) => { await expect(page.getByRole("link", { name: "Accordion" })).toHaveCount( page.viewportSize().width < 991 ? 1 : 2, ); - await page.getByText("calendar_view_dayAccordionarrow_forward").click(); + await page + .getByLabel("components overview") + .getByRole("link", { name: "Accordion" }) + .click(); await expect(page).toHaveTitle(/Accordion/); await expect( page.getByRole("heading", { name: "Accordion", exact: true, level: 1 }), diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap index 8682f5bded..7874655d42 100644 --- a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap @@ -819,10 +819,9 @@ exports[`Components: ActionList renders 1`] = ` onClick={[Function]} > - content_copy - + aria-hidden="true" + className="at-clipboard small" + />