Use framework logo on console & trust

Signed-off-by: Émile Ré <nemile.re@gmail.com>

packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { Avatar } from "../Avatar/Avatar";
+
+interface FrameworkLogoProps {
+    className?: string;
+    darkLogoURL?: string | null;
+    lightLogoURL?: string | null;
+    name: string;
+}
+
+export function FrameworkLogo(props: FrameworkLogoProps) {
+    const { className, lightLogoURL, darkLogoURL, name } = props;
+
+    return lightLogoURL || darkLogoURL ? (
+        <>
+            {lightLogoURL && (
+                <img
+                    src={lightLogoURL}
+                    className={clsx("size-12 block dark:hidden", className)}
+                    alt={name}
+                />
+            )}
+            {darkLogoURL && (
+                <img
+                    src={darkLogoURL}
+                    className={clsx("size-12 hidden dark:block", className)}
+                    alt={name}
+                />
+            )}
+        </>
+    ) : (
+        <Avatar name={name} size="l" className={clsx("size-12", className)} />
+    );
+}

packages/ui/src/Atoms/Frameworks/CASA.tsx

@@ -1,6 +1,9 @@
-export function CASA() {
+export function CASA(props: { className?: string }) {
+    const { className } = props;
+
     return (
         <svg
+            className={className}
             version="1.1"
             id="Layer_1"
             xmlns="http://www.w3.org/2000/svg"

packages/ui/src/Atoms/Frameworks/HIPAA.tsx

@@ -1,6 +1,9 @@
-export function HIPAA() {
+export function HIPAA(props: { className?: string }) {
+    const { className } = props;
+
     return (
         <svg
+            className={className}
             version="1.1"
             id="Layer_1"
             xmlns="http://www.w3.org/2000/svg"

packages/ui/src/Atoms/Frameworks/ISO27001.tsx

@@ -1,6 +1,9 @@
-export function ISO27001() {
+export function ISO27001(props: { className?: string }) {
+    const { className } = props;
+
     return (
         <svg
+            className={className}
             version="1.1"
             id="Layer_1"
             xmlns="http://www.w3.org/2000/svg"

packages/ui/src/Atoms/Frameworks/SOC2.tsx

@@ -1,6 +1,9 @@
-export function SOC2() {
+export function SOC2(props: { className?: string }) {
+    const { className } = props;
+
     return (
         <svg
+            className={className}
             version="1.1"
             id="Layer_1"
             xmlns="http://www.w3.org/2000/svg"

packages/ui/src/Molecules/Badge/FrameworkLogo.stories.tsx

@@ -1,17 +0,0 @@
-import { FrameworkLogo } from "./FrameworkLogo";
-import type { Meta, StoryObj } from "@storybook/react";
-
-export default {
-    title: "Molecules/Badges/FrameworkLogo",
-    component: FrameworkLogo,
-    argTypes: {},
-} satisfies Meta<typeof FrameworkLogo>;
-
-type Story = StoryObj<typeof FrameworkLogo>;
-
-export const Default: Story = {
-    args: {
-        name: "SOC 2",
-        className: "size-12",
-    },
-};

packages/ui/src/Molecules/Badge/FrameworkLogo.tsx

@@ -1,23 +0,0 @@
-import { availableFrameworks } from "@probo/helpers";
-import { Avatar } from "../../Atoms/Avatar/Avatar.tsx";
-
-const availableLogos = new Map(
-    availableFrameworks.map((framework) => [framework.name, framework.logo]),
-);
-
-export function FrameworkLogo({
-    name,
-    alt,
-    className,
-}: {
-    name: string;
-    alt?: string;
-    className?: string;
-}) {
-    const logo = availableLogos.get(name);
-    return logo ? (
-        <img src={logo} alt={alt} className={className} />
-    ) : (
-        <Avatar name={name} size="l" className={className} />
-    );
-}

packages/ui/src/Molecules/FrameworkSelector/FrameworkSelector.tsx

@@ -1,8 +1,31 @@
 import { Dropdown, DropdownItem } from "../../Atoms/Dropdown/Dropdown";
 import { IconChevronDown, IconPlusLarge } from "../../Atoms/Icons";
 import { Button } from "../../Atoms/Button/Button";
-import { availableFrameworks } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
+import { ISO27001 } from "../../Atoms/Frameworks/ISO27001";
+import { SOC2 } from "../../Atoms/Frameworks/SOC2";
+import { HIPAA } from "../../Atoms/Frameworks/HIPAA";
+
+const availableFrameworks = [
+    {
+        id: "ISO27001-2022",
+        name: "ISO 27001 (2022)",
+        logo: <ISO27001 className="size-8" />,
+        description: "Information security management systems",
+    },
+    {
+        id: "SOC2",
+        name: "SOC 2",
+        logo: <SOC2 className="size-8" />,
+        description: "System and Organization Controls 2",
+    },
+    {
+        id: "HIPAA",
+        name: "HIPAA",
+        logo: <HIPAA className="size-8" />,
+        description: "Health Insurance Portability and Accountability Act",
+    },
+];
 
 type Framework = (typeof availableFrameworks)[number];
 
@@ -58,11 +81,7 @@ function FrameworkItem(props: { framework?: Framework; onClick: () => void }) {
     }
     return (
         <DropdownItem onClick={props.onClick} className="">
-            <img
-                src={props.framework.logo}
-                alt={props.framework.name}
-                className="size-8"
-            />
+            {props.framework.logo}
             <div className="space-y-[2px]">
                 <div className="text-sm font-medium">
                     {props.framework.name}

packages/ui/src/index.ts

@@ -10,6 +10,7 @@ export {
 // Atoms
 export * from "./Atoms/Icons";
 export { Logo } from "./Atoms/Logo/Logo";
+export { FrameworkLogo } from "./Atoms/FrameworkLogo/FrameworkLogo";
 export { SidebarItem } from "./Atoms/Sidebar/SidebarItem";
 export { Button } from "./Atoms/Button/Button";
 export { Card } from "./Atoms/Card/Card";
@@ -77,7 +78,6 @@ export { DocumentClassificationBadge } from "./Molecules/Badge/DocumentClassific
 export { SentitivityOptions } from "./Molecules/Select/SentitivityOptions";
 export { ImpactOptions } from "./Molecules/Select/ImpactOptions";
 export { DurationPicker } from "./Molecules/DurationPicker/DurationPicker";
-export { FrameworkLogo } from "./Molecules/Badge/FrameworkLogo";
 export { EditableCell } from "./Molecules/Table/EditableCell";
 export { TextCell } from "./Molecules/Table/TextCell";
 export {