refactor: svg usage

- extracts SVG code to individual jsx files - imports those SVG jsx files to use a components - replaces/refactors svg functions to render new svg components
adobe · Sep 27, 2024 · 6d28aa6 · 6d28aa6
1 parent 8fed17b
commit 6d28aa6
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 40 deletions.
diff --git a/.storybook/assets/AdobeSVG.jsx b/.storybook/assets/AdobeSVG.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const AdobeSVG = () => {
+  return (
+    <svg
+      viewBox="0 0 36 36"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="AdobeLogo">
+      <path 
+        fill="rgb(250, 15, 0)"
+        d="M22.175 4H34v28L22.175 4zm-8.336 0H2v28L13.839 4zm4.165 10.317l7.538 17.682h-4.939l-2.258-5.632h-5.517l5.176-12.05z">
+      </path>
+    </svg>
+  )
+};
diff --git a/.storybook/assets/GitHubSVG.jsx b/.storybook/assets/GitHubSVG.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const GitHubSVG = () => {
+  return (
+    <svg
+      focusable="false"
+      aria-hidden="true"
+      aria-label="GitHub"
+      viewBox="0 0 36 36">
+      <path
+        fill="rgb(0, 0, 0)"
+        d="M17.988 2a16.291 16.291 0 0 0-5.147 31.747c.814.149 1.111-.354 1.111-.786 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184a4.32 4.32 0 0 0-1.809-2.383c-1.479-1.01.112-.99.112-.99a3.42 3.42 0 0 1 2.495 1.679 3.468 3.468 0 0 0 4.741 1.353 3.482 3.482 0 0 1 1.034-2.177C11.4 25.078 7.6 23.68 7.6 17.438a6.3 6.3 0 0 1 1.677-4.371 5.863 5.863 0 0 1 .16-4.311s1.368-.438 4.479 1.67a15.451 15.451 0 0 1 8.157 0c3.109-2.108 4.475-1.67 4.475-1.67a5.857 5.857 0 0 1 .162 4.311 6.286 6.286 0 0 1 1.674 4.371c0 6.258-3.808 7.635-7.437 8.038a3.888 3.888 0 0 1 1.106 3.017c0 2.177-.02 3.934-.02 4.468 0 .436.293.943 1.12.784A16.292 16.292 0 0 0 17.988 2z">
+      </path>
+    </svg>
+  )
+};
diff --git a/.storybook/assets/NpmSVG.jsx b/.storybook/assets/NpmSVG.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+export const NpmSVG = () => {
+  return (
+    <svg
+      viewBox="0 0 18 7"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="npm">
+      <path
+        fill="#CB3837"
+        d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z">
+      </path>
+      <polygon
+        fill="#FFFFFF"
+        points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 ">
+      </polygon>
+      <path
+        fill="#FFFFFF"
+        d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z">
+      </path>
+      <polygon
+        fill="#FFFFFF"
+        points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 ">
+      </polygon>
+    </svg>
+  )
+};
diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
@@ -4,6 +4,9 @@ import { styled } from "@storybook/theming";
 import React, { useEffect, useState } from "react";
 import { Code } from "./Typography.jsx";
 import { fetchToken } from "./utilities.js";
+import { AdobeSVG } from "../assets/AdobeSVG.jsx";
+import { GitHubSVG } from "../assets/GitHubSVG.jsx";
+import { NpmSVG } from "../assets/NpmSVG.jsx";
 
 export const DList = styled.dl`
 	display: grid;
@@ -179,61 +182,34 @@ const VersionDetails = ({ tag, data = {}, isDeprecated = false, skipDate = false
 	);
 };
 
-// link icons/svgs for ResourceLinkContent
-const npmSvg = () => {
-	return (
-		<ResourceIconWrapper backgroundColor="rgba(203, 56, 55, 0.1)">
-			<svg viewBox="0 0 18 7" focusable="false" aria-hidden="true" aria-label="npm">
-				<path fill="#CB3837" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z"></path>
-				<polygon fill="#FFFFFF" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 "></polygon>
-				<path fill="#FFFFFF" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z"></path>
-				<polygon fill="#FFFFFF" points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 "></polygon>
-			</svg>
-		</ResourceIconWrapper>
-	)
-};
-
-const githubSvg = () => {
-	return (
-		<ResourceIconWrapper backgroundColor="rgba(0, 0, 0, 0.1)">
-			<svg focusable="false" aria-hidden="true" aria-label="GitHub" viewBox="0 0 36 36">
-				<path fill="rgb(0, 0, 0)" d="M17.988 2a16.291 16.291 0 0 0-5.147 31.747c.814.149 1.111-.354 1.111-.786 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184a4.32 4.32 0 0 0-1.809-2.383c-1.479-1.01.112-.99.112-.99a3.42 3.42 0 0 1 2.495 1.679 3.468 3.468 0 0 0 4.741 1.353 3.482 3.482 0 0 1 1.034-2.177C11.4 25.078 7.6 23.68 7.6 17.438a6.3 6.3 0 0 1 1.677-4.371 5.863 5.863 0 0 1 .16-4.311s1.368-.438 4.479 1.67a15.451 15.451 0 0 1 8.157 0c3.109-2.108 4.475-1.67 4.475-1.67a5.857 5.857 0 0 1 .162 4.311 6.286 6.286 0 0 1 1.674 4.371c0 6.258-3.808 7.635-7.437 8.038a3.888 3.888 0 0 1 1.106 3.017c0 2.177-.02 3.934-.02 4.468 0 .436.293.943 1.12.784A16.292 16.292 0 0 0 17.988 2z"></path>
-			</svg>
-		</ResourceIconWrapper>
-	)
-};
-
-const adobeSvg = () => {
-	return (
-		<ResourceIconWrapper>
-			<svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" aria-label="AdobeLogo">
-				<path fill="rgb(250, 15, 0)" d="M22.175 4H34v28L22.175 4zm-8.336 0H2v28L13.839 4zm4.165 10.317l7.538 17.682h-4.939l-2.258-5.632h-5.517l5.176-12.05z"></path>
-			</svg>
-		</ResourceIconWrapper>
-	)
-};
-
 /**
- * Determines which SVG to use based on the resource link
+ * Determines which logo SVG to use based on the resource link
  */
 const iconSvgs = (linkType) => {
 	let svgAsset;
+	let resourceWrapperProps;
 
 	switch(linkType) {
 		case "package": 
-			svgAsset = npmSvg()
+			svgAsset = <NpmSVG />
+			resourceWrapperProps = "rgba(203, 56, 55, 0.1)";
 			break;
-		case "repository": 
-			svgAsset = githubSvg()
+			case "repository": 
+			svgAsset = <GitHubSVG />
+			resourceWrapperProps = "rgba(0, 0, 0, 0.1)"
 			break;
 		case "guidelines": 
-			svgAsset = adobeSvg()
+			svgAsset = <AdobeSVG />
 			break;
 		default: 
 			break;
 	}
 
-	return svgAsset;
+	return (
+		<ResourceIconWrapper backgroundColor={resourceWrapperProps}>
+			{ svgAsset }
+		</ResourceIconWrapper>
+	)
 };
 
 /**