#3 fixed typos

builder-group · Sep 6, 2024 · 91cd85a · 91cd85a
1 parent 018d1ce
commit 91cd85a
Show file tree

Hide file tree

Showing 39 changed files with 290 additions and 280 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+*.local
diff --git a/apps/api-core-node/dev-proxy.js b/apps/api-core-node/dev-proxy.js
@@ -10,7 +10,7 @@ const filesToUpdate = [
 	),
 	path.join(
 		__dirname,
-		'../sfy-eu-blocks-app/checkout-ui-extension/src/CheckoutCartLineItem/environment/config/core-api.config.ts'
+		'../sfy-eu-blocks-app/checkout-ui-extension/src/environment/config/core-api.config.ts'
 	)
 ];
 

diff --git a/apps/sfy-eu-blocks-app/admin-block-extension/src/components/EnergyLabelPreview.tsx b/apps/sfy-eu-blocks-app/admin-block-extension/src/components/EnergyLabelPreview.tsx
@@ -25,7 +25,7 @@ export const EnergyLabelPreview: React.FC<TProps> = (props) => {
 				<Pressable href={energyLabel.label.urlMap.PDF} target="_blank">
 					<Image
 						alt={`Energy Label Efficiency Class ${energyLabel.energyClass}`}
-						source={`${coreApiConfig.baseUrl}/v1/energy-label/efficiency-class/arrow.svg?efficiencyClass=${energyLabel.energyClass}&size=26`}
+						source={`${coreApiConfig.baseUrl}/v1/energy-label/energy-class/arrow.svg?energyClass=${energyLabel.energyClass}&size=26`}
 					/>
 				</Pressable>
 				<Link href={sheetUrl} target="_blank">

diff --git a/apps/sfy-eu-blocks-app/admin-block-extension/src/environment/config/core-api.config.ts b/apps/sfy-eu-blocks-app/admin-block-extension/src/environment/config/core-api.config.ts
@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://handheld-beijing-percentage-automotive.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://dear-jay-favorites-scenario.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };
diff --git a/apps/sfy-eu-blocks-app/app/shopify.app.toml b/apps/sfy-eu-blocks-app/app/shopify.app.toml
@@ -8,7 +8,7 @@ extension_directories = [
 ]
 name = "eu-blocks"
 handle = "eu-blocks"
-application_url = "https://cfr-mx-jd-mpg.trycloudflare.com"
+application_url = "https://cg-rings-editions-learning.trycloudflare.com"
 embedded = true
 
 [build]
@@ -22,9 +22,9 @@ scopes = "read_files,read_locales,read_products,write_files,write_products"
 
 [auth]
 redirect_urls = [
-  "https://cfr-mx-jd-mpg.trycloudflare.com/auth/callback",
-  "https://cfr-mx-jd-mpg.trycloudflare.com/auth/shopify/callback",
-  "https://cfr-mx-jd-mpg.trycloudflare.com/api/auth/callback"
+  "https://cg-rings-editions-learning.trycloudflare.com/auth/callback",
+  "https://cg-rings-editions-learning.trycloudflare.com/auth/shopify/callback",
+  "https://cg-rings-editions-learning.trycloudflare.com/api/auth/callback"
 ]
 
 [webhooks]

diff --git a/apps/sfy-eu-blocks-app/checkout-ui-extension/src/environment/config/core-api.config.ts b/apps/sfy-eu-blocks-app/checkout-ui-extension/src/environment/config/core-api.config.ts
@@ -1,3 +1,3 @@
 export const coreApiConfig = {
-	baseUrl: 'https://handheld-beijing-percentage-automotive.trycloudflare.com' // TODO: Find way to sync url from api-core-node
+	baseUrl: 'https://dear-jay-favorites-scenario.trycloudflare.com' // TODO: Find way to sync url from api-core-node
 };
diff --git a/apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/CheckoutCartLineItem/index.tsx b/apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/CheckoutCartLineItem/index.tsx
@@ -44,7 +44,7 @@ const Extension: React.FC<TProps> = (props) => {
 				<Pressable to={labelUrl}>
 					<Image
 						accessibilityDescription={`Energy Label Efficiency Class ${energyClass}`}
-						source={`${coreApiConfig.baseUrl}/v1/energy-label/efficiency-class/arrow.svg?efficiencyClass=${energyClass}&size=20`}
+						source={`${coreApiConfig.baseUrl}/v1/energy-label/energy-class/arrow.svg?energyClass=${energyClass}&size=20`}
 					/>
 				</Pressable>
 				{sheetUrl != null && <Link to={sheetUrl}>Product Datasheet</Link>}

diff --git a/...sfy-eu-blocks-app/checkout-ui-extension/src/extensions/OrderSummaryCartLineItem/index.tsx b/...sfy-eu-blocks-app/checkout-ui-extension/src/extensions/OrderSummaryCartLineItem/index.tsx
@@ -44,7 +44,7 @@ const Extension: React.FC<TProps> = (props) => {
 				<Pressable to={labelUrl}>
 					<Image
 						accessibilityDescription={`Energy Label Efficiency Class ${energyClass}`}
-						source={`${coreApiConfig.baseUrl}/v1/energy-label/efficiency-class/arrow.svg?efficiencyClass=${energyClass}&size=20`}
+						source={`${coreApiConfig.baseUrl}/v1/energy-label/energy-class/arrow.svg?energyClass=${energyClass}&size=20`}
 					/>
 				</Pressable>
 				{sheetUrl != null && <Link to={sheetUrl}>Product Datasheet</Link>}

diff --git a/apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/ThankYouCartLineItem/index.tsx b/apps/sfy-eu-blocks-app/checkout-ui-extension/src/extensions/ThankYouCartLineItem/index.tsx
@@ -44,7 +44,7 @@ const Extension: React.FC<TProps> = (props) => {
 				<Pressable to={labelUrl}>
 					<Image
 						accessibilityDescription={`Energy Label Efficiency Class ${energyClass}`}
-						source={`${coreApiConfig.baseUrl}/v1/energy-label/efficiency-class/arrow.svg?efficiencyClass=${energyClass}&size=20`}
+						source={`${coreApiConfig.baseUrl}/v1/energy-label/energy-class/arrow.svg?energyClass=${energyClass}&size=20`}
 					/>
 				</Pressable>
 				{sheetUrl != null && <Link to={sheetUrl}>Product Datasheet</Link>}

diff --git a/apps/sfy-eu-blocks-app/theme-extension-elements/package.json b/apps/sfy-eu-blocks-app/theme-extension-elements/package.json
@@ -29,6 +29,7 @@
 		"@storybook/web-components-vite": "^8.2.9",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",
+		"eprel-client": "^0.0.16",
 		"postcss": "^8.4.41",
 		"storybook": "^8.2.9",
 		"tailwindcss": "^3.4.10",

diff --git a/apps/sfy-eu-blocks-app/theme-extension-elements/src/components/EfficiencyArrowLg.tsx b/apps/sfy-eu-blocks-app/theme-extension-elements/src/components/EfficiencyArrowLg.tsx
@@ -0,0 +1,91 @@
+import { type TEnergyClass } from 'eprel-client';
+import { Component } from 'solid-js';
+
+const energyClassVariants = {
+	A: {
+		color: '#009640',
+		letterPath:
+			'M46.051 43h-7.909L50.193 8.09h9.512L71.739 43h-7.91l-8.744-26.932h-.273L46.053 43zm-.494-13.722h18.682v5.762H45.557v-5.762zM0 0h22.43v56H0z'
+	},
+	B: {
+		color: '#52AE32',
+		letterPath:
+			'M40.034 43V8.09h13.977c2.569 0 4.71.382 6.426 1.143 1.716.761 3.006 1.818 3.87 3.17.864 1.341 1.295 2.887 1.295 4.637 0 1.363-.273 2.562-.818 3.596a7.063 7.063 0 01-2.25 2.523c-.943.648-2.023 1.108-3.239 1.38v.342a7.818 7.818 0 013.733 1.125c1.17.693 2.12 1.665 2.847 2.915.727 1.238 1.09 2.715 1.09 4.431 0 1.853-.46 3.506-1.38 4.96-.909 1.444-2.255 2.586-4.04 3.427-1.784.84-3.983 1.261-6.596 1.261H40.034zm7.38-6.034h6.018c2.057 0 3.557-.392 4.5-1.176.943-.796 1.415-1.852 1.415-3.17 0-.967-.233-1.819-.7-2.557-.465-.74-1.13-1.319-1.994-1.74-.852-.42-1.869-.63-3.05-.63h-6.188v9.273zm0-14.267h5.472c1.012 0 1.91-.176 2.694-.529.795-.363 1.42-.875 1.875-1.534.465-.659.698-1.448.698-2.369 0-1.261-.448-2.278-1.346-3.051-.887-.773-2.148-1.16-3.784-1.16h-5.608V22.7zM0 0h22.43v56H0z'
+	},
+	C: {
+		color: '#C8D400',
+		letterPath:
+			'M70.835 20.313H63.37c-.136-.966-.414-1.824-.835-2.574a6.547 6.547 0 00-1.62-1.944 7.127 7.127 0 00-2.283-1.227 8.736 8.736 0 00-2.779-.426c-1.806 0-3.38.449-4.721 1.347-1.341.886-2.381 2.181-3.12 3.886-.738 1.693-1.108 3.75-1.108 6.17 0 2.49.37 4.58 1.108 6.273.75 1.693 1.796 2.972 3.137 3.835 1.34.864 2.892 1.296 4.653 1.296.989 0 1.904-.13 2.744-.392a7.212 7.212 0 002.267-1.142 6.583 6.583 0 001.637-1.858c.443-.727.75-1.557.92-2.489l7.466.034a13.507 13.507 0 01-1.449 4.637c-.761 1.477-1.79 2.8-3.085 3.971-1.284 1.16-2.818 2.08-4.602 2.762-1.773.67-3.779 1.005-6.017 1.005-3.114 0-5.898-.704-8.352-2.113-2.444-1.41-4.375-3.45-5.796-6.12-1.409-2.67-2.114-5.903-2.114-9.698 0-3.807.716-7.046 2.148-9.716 1.432-2.67 3.375-4.705 5.83-6.103 2.454-1.409 5.216-2.113 8.284-2.113 2.023 0 3.898.284 5.625.852 1.738.568 3.278 1.398 4.62 2.489a12.804 12.804 0 013.272 3.971c.852 1.568 1.398 3.364 1.636 5.386zM0 0h22.43v56H0z'
+	},
+	D: {
+		color: '#FFED00',
+		letterPath:
+			'M52.41 43H40.033V8.09h12.477c3.512 0 6.534.7 9.069 2.098 2.534 1.386 4.483 3.38 5.846 5.982 1.375 2.603 2.063 5.716 2.063 9.341 0 3.637-.688 6.762-2.063 9.375-1.364 2.614-3.324 4.62-5.88 6.017C59 42.301 55.954 43 52.408 43zm-4.995-6.324h4.687c2.182 0 4.017-.386 5.506-1.159 1.5-.784 2.625-1.994 3.375-3.63.761-1.648 1.142-3.773 1.142-6.376 0-2.58-.38-4.687-1.142-6.323-.75-1.637-1.87-2.841-3.358-3.614-1.489-.773-3.324-1.16-5.506-1.16h-4.704v22.262zM0 0h22.43v56H0z'
+	},
+	E: {
+		color: '#FBBA00',
+		letterPath:
+			'M40.034 43V8.09h23.523v6.086H47.415v8.318h14.932v6.085H47.415v8.336h16.21V43h-23.59zm12.375 58H40.034V66.09h12.477c3.512 0 6.534.7 9.069 2.097 2.534 1.387 4.483 3.381 5.846 5.984 1.375 2.602 2.063 5.715 2.063 9.34 0 3.637-.688 6.762-2.063 9.375-1.364 2.614-3.324 4.62-5.88 6.017C59 100.301 55.954 101 52.408 101zm-4.994-6.324h4.687c2.182 0 4.017-.386 5.506-1.159 1.5-.784 2.625-1.994 3.375-3.63.761-1.648 1.142-3.773 1.142-6.376 0-2.58-.38-4.687-1.142-6.323-.75-1.637-1.87-2.841-3.358-3.614-1.489-.773-3.324-1.16-5.506-1.16h-4.704v22.262zM0 0h22.43v56H0z'
+	},
+	F: {
+		color: '#EC6608',
+		letterPath:
+			'M40.034 43V8.09h23.114v6.086H47.415v8.318h14.199v6.085h-14.2V43h-7.38zM0 0h22.43v56H0z'
+	},
+	G: {
+		color: '#E30613',
+		letterPath:
+			'M63.182 19.375a7.651 7.651 0 00-1.006-2.199 6.208 6.208 0 00-1.585-1.636 6.797 6.797 0 00-2.114-1.04c-.784-.239-1.653-.358-2.608-.358-1.784 0-3.352.443-4.704 1.33-1.341.886-2.387 2.176-3.137 3.869-.75 1.682-1.125 3.738-1.125 6.17s.37 4.5 1.108 6.205c.739 1.704 1.784 3.006 3.137 3.903 1.352.887 2.949 1.33 4.79 1.33 1.67 0 3.096-.296 4.278-.886 1.193-.603 2.102-1.45 2.727-2.54.637-1.091.955-2.381.955-3.87l1.5.222h-9v-5.557h14.608v4.398c0 3.068-.648 5.704-1.944 7.909-1.295 2.193-3.079 3.886-5.352 5.08-2.273 1.181-4.875 1.772-7.807 1.772-3.272 0-6.147-.721-8.625-2.164-2.477-1.455-4.409-3.518-5.795-6.188-1.375-2.682-2.063-5.864-2.063-9.546 0-2.829.41-5.352 1.228-7.568.83-2.227 1.988-4.113 3.477-5.659a15.025 15.025 0 015.199-3.528c1.977-.807 4.12-1.21 6.426-1.21 1.977 0 3.818.29 5.523.869 1.704.568 3.216 1.375 4.534 2.42a13.105 13.105 0 013.255 3.733c.841 1.432 1.381 3.012 1.62 4.739h-7.5zM0 0h22.43v56H0z'
+	}
+} as const;
+
+export const EfficiencyArrowLg: Component<TProps> = (props) => {
+	const { size = 56, energyClass } = props;
+	const { color, letterPath } = energyClassVariants[energyClass];
+	const width = size * (100 / 56);
+	const height = size;
+
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 100 56"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<mask
+				id="prefix__a"
+				style="mask-type:alpha"
+				maskUnits="userSpaceOnUse"
+				x="0"
+				y="0"
+				width="99"
+				height="56"
+			>
+				<path
+					d="M73.431 0H3a3 3 0 00-3 3v50a3 3 0 003 3h70.431a3 3 0 002.229-.992l22.53-25a3 3 0 000-4.016l-22.53-25A3 3 0 0073.432 0z"
+					fill="#D9D9D9"
+				/>
+			</mask>
+			<g mask="url(#prefix__a)">
+				<path fill={color} d="M24 0h75v56H24z" />
+				<path d={letterPath} fill="#fff" />
+				<path
+					d="M8.771 19H5.476l5.021-14.545h3.963L19.474 19H16.18L12.536 7.778h-.114L8.772 19zm-.206-5.717h7.784v2.4H8.565v-2.4zM15.91 41.156c-.1-.345-.24-.65-.42-.916-.18-.27-.4-.497-.66-.682a2.83 2.83 0 00-.881-.433c-.327-.1-.69-.15-1.087-.15-.743 0-1.397.185-1.96.555-.559.37-.994.907-1.307 1.612-.312.7-.469 1.558-.469 2.571 0 1.013.154 1.875.462 2.585.308.71.743 1.253 1.307 1.627.563.369 1.229.554 1.996.554.696 0 1.29-.123 1.782-.37a2.648 2.648 0 001.137-1.058c.265-.454.397-.992.397-1.612l.625.092h-3.75v-2.315h6.087v1.832c0 1.279-.27 2.377-.81 3.296a5.518 5.518 0 01-2.23 2.116c-.947.493-2.031.739-3.253.739-1.363 0-2.561-.3-3.593-.902-1.033-.606-1.837-1.466-2.415-2.578-.573-1.118-.86-2.443-.86-3.977 0-1.18.171-2.23.512-3.154.346-.928.828-1.714 1.449-2.358a6.262 6.262 0 012.166-1.47 7.02 7.02 0 012.678-.504c.823 0 1.59.12 2.3.362.71.237 1.34.573 1.89 1.008a5.461 5.461 0 011.356 1.556c.35.596.576 1.255.675 1.974H15.91zM17.5 26.98L12.756 22 8 26.994l1.31 1.375 2.52-2.645V33h1.852v-7.276l2.508 2.632 1.31-1.375z"
+					fill="#000"
+				/>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M73.431 1H3a2 2 0 00-2 2v50a2 2 0 002 2h70.431a2 2 0 001.486-.661l22.53-25a2 2 0 000-2.678l-22.53-25A2 2 0 0073.431 1zM3 0h70.431a3 3 0 012.229.992l22.53 25a3 3 0 010 4.016l-22.53 25a3 3 0 01-2.228.992H3a3 3 0 01-3-3V3a3 3 0 013-3z"
+					fill="#000"
+				/>
+			</g>
+		</svg>
+	);
+};
+
+interface TProps {
+	size: number;
+	energyClass: TEnergyClass;
+}
diff --git a/apps/sfy-eu-blocks-app/theme-extension-elements/src/components/EfficiencyArrowSm.tsx b/apps/sfy-eu-blocks-app/theme-extension-elements/src/components/EfficiencyArrowSm.tsx
@@ -0,0 +1,90 @@
+import { type TEnergyClass } from 'eprel-client';
+import { Component } from 'solid-js';
+
+const energyClassVariants = {
+	A: {
+		color: '#009640',
+		letterPath:
+			'M23.714 23h-4.12l6.277-18.182h4.954L37.093 23h-4.12L28.42 8.973h-.142L23.714 23zm-.257-7.147h9.73v3.001h-9.73v-3zM1 0h12v28H1z'
+	},
+	B: {
+		color: '#52AE32',
+		letterPath:
+			'M20.58 23V4.818h7.28c1.338 0 2.453.198 3.347.595.894.397 1.566.947 2.015 1.651.45.699.675 1.504.675 2.415 0 .71-.142 1.335-.426 1.873-.284.533-.675.97-1.172 1.314a4.802 4.802 0 01-1.687.72v.177c.693.03 1.34.225 1.945.586a4.15 4.15 0 011.482 1.518c.379.645.568 1.414.568 2.308 0 .965-.24 1.826-.719 2.584-.473.751-1.175 1.346-2.104 1.784-.93.438-2.074.657-3.436.657H20.58zm3.844-3.143h3.134c1.072 0 1.853-.204 2.344-.612.491-.415.737-.965.737-1.652 0-.503-.122-.947-.364-1.331a2.473 2.473 0 00-1.039-.906c-.444-.219-.974-.328-1.589-.328h-3.223v4.83zm0-7.43h2.85c.527 0 .994-.092 1.403-.276.414-.19.74-.456.976-.799.243-.343.364-.754.364-1.234 0-.657-.233-1.186-.7-1.589-.463-.402-1.12-.604-1.972-.604h-2.92v4.502zM1 0h12v28H1z'
+	},
+	C: {
+		color: '#C8D400',
+		letterPath:
+			'M36.623 11.184h-3.889a3.802 3.802 0 00-.435-1.341 3.41 3.41 0 00-.843-1.012 3.711 3.711 0 00-1.19-.64 4.55 4.55 0 00-1.447-.221c-.941 0-1.76.234-2.46.701-.698.462-1.24 1.137-1.624 2.024-.385.882-.577 1.953-.577 3.214 0 1.296.192 2.385.577 3.267.39.882.935 1.548 1.634 1.998.698.45 1.506.674 2.423.674.515 0 .992-.068 1.43-.204a3.757 3.757 0 001.18-.595c.344-.266.628-.588.853-.967.23-.38.39-.811.479-1.297l3.889.018a7.255 7.255 0 01-2.361 4.483c-.67.604-1.469 1.084-2.398 1.439-.923.349-1.968.524-3.134.524-1.622 0-3.072-.367-4.35-1.101-1.272-.734-2.279-1.797-3.018-3.187-.734-1.391-1.101-3.075-1.101-5.052 0-1.983.373-3.67 1.118-5.06.746-1.391 1.758-2.45 3.037-3.179 1.278-.733 2.716-1.1 4.314-1.1 1.054 0 2.03.148 2.93.443a7.43 7.43 0 012.406 1.297 6.667 6.667 0 011.704 2.068c.444.817.728 1.752.852 2.806zM1 0h12v28H1z'
+	},
+	D: {
+		color: '#FFED00',
+		letterPath:
+			'M27.026 23H20.58V4.818h6.499c1.829 0 3.403.364 4.723 1.092 1.32.722 2.335 1.76 3.045 3.116.716 1.356 1.074 2.977 1.074 4.865 0 1.894-.358 3.522-1.074 4.883a7.381 7.381 0 01-3.063 3.134C30.458 22.636 28.872 23 27.026 23zm-2.602-3.294h2.442c1.136 0 2.092-.2 2.867-.603.782-.409 1.367-1.04 1.758-1.891.397-.858.595-1.965.595-3.32 0-1.344-.198-2.442-.595-3.294-.39-.853-.974-1.48-1.749-1.882-.775-.403-1.731-.604-2.867-.604h-2.45v11.594zM1 0h12v28H1z'
+	},
+	E: {
+		color: '#FBBA00',
+		letterPath:
+			'M20.58 23V4.818h12.252v3.17h-8.408v4.332h7.777v3.17h-7.777v4.34h8.443V23H20.58zM1 0h12v28H1z'
+	},
+	F: {
+		color: '#EC6608',
+		letterPath: 'M20.58 23V4.818H32.62v3.17h-8.195v4.332h7.396v3.17h-7.396V23H20.58zM1 0h12v28H1z'
+	},
+	G: {
+		color: '#E30613',
+		letterPath:
+			'M32.636 10.695a3.987 3.987 0 00-.523-1.145 3.232 3.232 0 00-.826-.852 3.54 3.54 0 00-1.1-.542 4.653 4.653 0 00-1.36-.186c-.928 0-1.745.23-2.45.692-.698.462-1.242 1.134-1.633 2.016-.39.875-.586 1.947-.586 3.213 0 1.267.192 2.344.577 3.232.385.888.93 1.565 1.634 2.033.704.462 1.535.692 2.494.692.87 0 1.613-.153 2.229-.461a3.309 3.309 0 001.42-1.323c.331-.568.497-1.24.497-2.015l.782.115h-4.688V13.27h7.608v2.29c0 1.598-.337 2.972-1.012 4.12a6.898 6.898 0 01-2.787 2.645c-1.184.616-2.54.924-4.066.924-1.705 0-3.202-.376-4.493-1.128-1.29-.758-2.296-1.832-3.018-3.223-.716-1.396-1.074-3.053-1.074-4.971 0-1.474.213-2.788.639-3.942.432-1.16 1.036-2.142 1.81-2.947A7.826 7.826 0 0125.42 5.2c1.03-.42 2.145-.63 3.347-.63 1.03 0 1.988.15 2.876.452a7.663 7.663 0 012.362 1.261 6.827 6.827 0 011.695 1.944c.438.746.72 1.569.844 2.468h-3.907zM1 0h12v28H1z'
+	}
+} as const;
+
+export const EfficiencyArrowSm: Component<TProps> = (props) => {
+	const { size = 56, energyClass } = props;
+	const { color, letterPath } = energyClassVariants[energyClass];
+	const width = size * (53 / 28);
+	const height = size;
+
+	return (
+		<svg
+			viewBox="0 0 53 28"
+			width={width}
+			height={height}
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<mask
+				id="prefix__a"
+				style="mask-type:alpha"
+				maskUnits="userSpaceOnUse"
+				x="0"
+				y="0"
+				width="53"
+				height="28"
+			>
+				<path
+					d="M38.725 0H3a3 3 0 00-3 3v22a3 3 0 003 3h35.725a3 3 0 002.16-.918l10.607-11a3 3 0 000-4.164l-10.607-11A3 3 0 0038.725 0z"
+					fill="#D9D9D9"
+				/>
+			</mask>
+			<g mask="url(#prefix__a)">
+				<path fill={color} d="M13 0h39v28H13z" />
+				<path d={letterPath} fill="#fff" />
+				<path
+					d="M5.509 9H4.19L6.2 3.182h1.585L9.79 9H8.472L7.014 4.511H6.97L5.509 9zm-.083-2.287H8.54v.96H5.426v-.96zM8.364 20.063a1.276 1.276 0 00-.168-.367 1.133 1.133 0 00-.616-.446c-.131-.04-.276-.06-.435-.06-.297 0-.559.074-.784.222a1.454 1.454 0 00-.523.645c-.125.28-.187.623-.187 1.028s.061.75.184 1.034c.123.284.298.501.523.65.225.149.491.223.798.223.279 0 .516-.05.713-.148.2-.1.35-.242.455-.424.106-.181.159-.396.159-.644l.25.037h-1.5v-.927h2.435v.733c0 .512-.108.951-.324 1.319a2.208 2.208 0 01-.892.846 2.779 2.779 0 01-1.301.296c-.546 0-1.025-.12-1.438-.361a2.504 2.504 0 01-.966-1.032c-.229-.447-.344-.977-.344-1.59 0-.472.069-.893.205-1.262.138-.371.331-.685.58-.943.248-.258.536-.454.866-.588.33-.134.687-.202 1.071-.202.33 0 .636.049.92.145.285.095.536.23.756.404.222.174.403.381.543.622.14.238.23.502.27.79h-1.25zM9.5 13.49L7.003 11 4.5 13.497l.69.688 1.326-1.323V16.5h.975v-3.638l1.32 1.316.689-.688z"
+					fill="#000"
+				/>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M38.725 1H3a2 2 0 00-2 2v22a2 2 0 002 2h35.725a2 2 0 001.44-.612l10.607-11a2 2 0 000-2.776l-10.607-11A2 2 0 0038.725 1zM3 0h35.725a3 3 0 012.16.918l10.607 11a3 3 0 010 4.164l-10.607 11a3 3 0 01-2.16.918H3a3 3 0 01-3-3V3a3 3 0 013-3z"
+					fill="#000"
+				/>
+			</g>
+		</svg>
+	);
+};
+
+interface TProps {
+	size: number;
+	energyClass: TEnergyClass;
+}
diff --git a/...s/v1.efficiency-class/components/index.ts → ...xtension-elements/src/components/index.ts b/...s/v1.efficiency-class/components/index.ts → ...xtension-elements/src/components/index.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,3 +36,4 @@ yarn-error.log* @@
     # Misc
     .DS_Store
     *.pem
+    *.local