diff --git a/.storybook/assets/AdobeSVG.jsx b/.storybook/assets/AdobeSVG.jsx
new file mode 100644
index 0000000000..40a6ff0cf1
--- /dev/null
+++ b/.storybook/assets/AdobeSVG.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const AdobeSVG = () => {
+ return (
+
+ )
+};
diff --git a/.storybook/assets/GitHubSVG.jsx b/.storybook/assets/GitHubSVG.jsx
new file mode 100644
index 0000000000..11a9d09657
--- /dev/null
+++ b/.storybook/assets/GitHubSVG.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const GitHubSVG = () => {
+ return (
+
+ )
+};
diff --git a/.storybook/assets/NpmSVG.jsx b/.storybook/assets/NpmSVG.jsx
new file mode 100644
index 0000000000..7ab77e72b6
--- /dev/null
+++ b/.storybook/assets/NpmSVG.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+export const NpmSVG = () => {
+ return (
+
+ )
+};
diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
index 3b0e412c02..63134f7ef3 100644
--- 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 (
-
-
-
- )
-};
-
-const githubSvg = () => {
- return (
-
-
-
- )
-};
-
-const adobeSvg = () => {
- return (
-
-
-
- )
-};
-
/**
- * 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 =
+ resourceWrapperProps = "rgba(203, 56, 55, 0.1)";
break;
- case "repository":
- svgAsset = githubSvg()
+ case "repository":
+ svgAsset =
+ resourceWrapperProps = "rgba(0, 0, 0, 0.1)"
break;
case "guidelines":
- svgAsset = adobeSvg()
+ svgAsset =
break;
default:
break;
}
- return svgAsset;
+ return (
+
+ { svgAsset }
+
+ )
};
/**