SRM-2513 update logo & documentation

RELEASE_NOTES.md

@@ -2,15 +2,20 @@
 
 ## \[10.12.2\] - 14.08.2024
 
-## Component changes
+## Identity
 
-- Typography
+- Colors
 
-  - change font family of "title 6"/h6 from Arial to the brand's headline font (e.g. "SwedbankPay Headline Bold" or "Futura PT W08 Demi" depending on brand)
+  - updated primary color from current value `#FDC129` to actual Brand guideline's `#FDC92A`
 
-- Progress-steps
+- Logotypes
+  - updated logotype to the new fixed version
+  - update Documentation
 
-  - fix UI of the horizontal yellow line when the 1st and last steps are in state “ongoing selected”
+## Component changes
 
-- Dropdown
-  - fix script for initating for a specific `id` (`init(id)`)
+- Expandable PayEx (contribution from Simon Wahlstrom 💫)
+  - font family change for PayEx expandables
+- Button PayEx (contribution from Johanna Prinz 💫)
+  - font family change
+  - colors updated

package.json

@@ -59,7 +59,7 @@
 		"@babel/eslint-parser": "^7.24.1",
 		"@babel/preset-env": "^7.24.4",
 		"@babel/preset-react": "^7.24.1",
-		"@playwright/test": "^1.45.3",
+		"@playwright/test": "^1.48.1",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.2.2",
 		"@testing-library/user-event": "^14.5.2",

src/App/Identity/identity/Logotype/index.js

@@ -1,6 +1,10 @@
 import React from "react";
 
-import { ComponentPreview, DocContainer } from "@docutils";
+import {
+	ComponentPreview,
+	DocContainer,
+	EditableComponentPreview,
+} from "@docutils";
 import CodeTags from "@components/CodeTags";
 import LogotypeComponent from "@components/Logotype";
 import { logoBlack, logoWhite, logoPayex, logotypeMisuses } from "./constants";
@@ -435,6 +439,51 @@ const Overview = () => (
 	</section>
 );
 
+const ImgSrcExamples = ({ isNPM }) => {
+	let imgSrc;
+
+	if (isNPM) {
+		imgSrc = `@swedbankpay/design-guide/src/img/${brand}/logo/${brand}-logo-h.svg`;
+	} else {
+		imgSrc = `https://design.${brand}.com/v/10.12.2/img/logo/${brand}-logo-h.svg`;
+	}
+
+	return (
+		<img
+			src={imgSrc}
+			alt={`${brand} horizontal logo`}
+			className="logotype-horizontal logotype-lg"
+		/>
+	);
+};
+
+const LogoSrc = () => (
+	<section>
+		<h2 id="logotype-pathname">Logo src pathname</h2>
+		<h3>Recommended way - load from the NPM package</h3>
+		<p>
+			Use the logo assets shipped with the npm package. This way it always stay
+			current and can be used at built time.
+		</p>
+		<EditableComponentPreview language="html" codeFigure={true}>
+			<ImgSrcExamples isNPM={true} />
+		</EditableComponentPreview>
+		<h3>Option #2 - Use the image from the website (the CDNish way)</h3>
+		<p>
+			Honestly, it's not recommended. For 2 reasons: it's slow (unless used at
+			build time in a SSG way, but most of the time it will be implemented in a
+			way that it gets called on client side) and on top of that it will become
+			potentially obsolete the second you wrote it since the image src path
+			leads to a hardcoded version of the design-guide. Therefore, if (when) we
+			will we change the logo in the future in the design system your version
+			will not get updated automatically.
+		</p>
+		<EditableComponentPreview language="html" codeFigure={true}>
+			<ImgSrcExamples isNPM={false} />
+		</EditableComponentPreview>
+	</section>
+);
+
 const Logotype = () => (
 	<>
 		{brand === "swedbankpay" && (
@@ -450,6 +499,7 @@ const Logotype = () => (
 					<Overview />
 					<LogoBlack />
 					<LogoWhite />
+					<LogoSrc />
 					<SpacingZone />
 					<MisuseLogo />
 					<LogotypeBackgrounds />
@@ -460,6 +510,7 @@ const Logotype = () => (
 		{brand === "payex" && (
 			<DocContainer>
 				<LogoPayex />
+				<LogoSrc />
 				<Favicon />
 			</DocContainer>
 		)}