[WEB-3979] Encapsulated icons

src/core/Icon.tsx

@@ -4,7 +4,7 @@ import { IconName } from "./Icon/types";
 import { ColorClass } from "./styles/colors/types";
 import { convertTailwindClassToVar } from "./styles/colors/utils";
 
-type IconProps = {
+export type IconProps = {
   name: IconName;
   size?: string;
   color?: ColorClass;

src/core/Icon/EncapsulatedIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Icon, { IconProps } from "../Icon";
+import { determineThemeColor } from "../styles/colors/utils";
+import { ColorClass, Theme } from "../styles/colors/types";
+
+type EncapsulatedIconProps = {
+  theme?: Theme;
+  className?: string;
+} & IconProps;
+
+const EncapsulatedIcon = ({
+  theme = "dark",
+  size = "40px",
+  className,
+  ...iconProps
+}: EncapsulatedIconProps) => {
+  const t = (color: ColorClass) => determineThemeColor("dark", theme, color);
+  const numericalSize = parseInt(size, 10);
+
+  return (
+    <div
+      className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} ${t("from-neutral-900")} ${className ?? ""}`}
+      style={{ width: numericalSize, height: numericalSize }}
+    >
+      <div
+        className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")}`}
+        style={{ height: numericalSize - 2 }}
+      >
+        <Icon size={`${numericalSize - 12}`} {...iconProps} />
+      </div>
+    </div>
+  );
+};
+
+export default EncapsulatedIcon;

src/core/Icon/Icon.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import Icon from "../Icon";
+import EncapsulatedIcon from "./EncapsulatedIcon";
 import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
+import { Theme } from "../styles/colors/types";
 
 export default {
   title: "JS Components/Icon",
@@ -12,7 +14,11 @@ export default {
   tags: ["autodocs"],
 };
 
-const renderIcons = (iconSet: IconName[]) => {
+const renderIcons = (
+  iconSet: IconName[],
+  encapsulated?: boolean,
+  theme?: Theme,
+) => {
   loadIcons();
 
   return (
@@ -25,12 +31,16 @@ const renderIcons = (iconSet: IconName[]) => {
           <code className="ui-text-code mb-8 block">{icon}</code>
           <div className="border inline-flex flex-0">
             <div className="flex pi-checkered-bg">
-              <Icon
-                name={icon}
-                additionalCSS="hover:text-active-orange"
-                color="text-cool-black"
-                size="1.5rem"
-              />
+              {encapsulated ? (
+                <EncapsulatedIcon name={icon} theme={theme ?? "dark"} />
+              ) : (
+                <Icon
+                  name={icon}
+                  additionalCSS="hover:text-active-orange"
+                  color="text-cool-black"
+                  size="1.5rem"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -88,3 +98,11 @@ export const IconWithSecondaryColor = {
     },
   },
 };
+
+export const DarkEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true),
+};
+
+export const LightEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true, "light"),
+};