Add SOC-2 badge (#2065)

Author: hasparus

.changeset/late-buckets-cover.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add SOC-2 badge to HiveFooter

.storybook/main.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
-import { Configuration } from 'webpack';
-import { StorybookConfig } from '@storybook/nextjs';
+import type { Configuration } from 'webpack';
+import type { StorybookConfig } from '@storybook/nextjs';
 
 export default {
   stories: ['../packages/*/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],

packages/components/src/components/hive-footer/index.stories.tsx

@@ -14,12 +14,17 @@ export default {
         description: "Use this to add current site's links to the footer.",
       },
     },
+    showSecurityBadges: {
+      name: 'Show Security Badges',
+      description: 'Show the security badges in the footer.',
+    },
   },
 } satisfies Meta<HiveFooterProps>;
 
 export const Default: StoryObj<HiveFooterProps> = {
   name: 'HiveFooter',
   args: {
+    showSecurityBadges: true,
     items: {
       ...HiveFooter.DEFAULT_ITEMS,
       resources: [
@@ -48,3 +53,10 @@ export const CodegenFooter: StoryObj<HiveFooterProps> = {
     description: 'End-to-end type safety',
   },
 };
+
+export const WithoutSecurityBadges: StoryObj<HiveFooterProps> = {
+  ...Default,
+  args: {
+    showSecurityBadges: false,
+  },
+};

packages/components/src/components/hive-footer/index.tsx

@@ -7,14 +7,8 @@ import { ILink } from '../../types/components';
 import { Anchor } from '../anchor';
 import { ContactTextLink } from '../contact-us';
 import { __LANDING_WIDTHS_ID } from '../hive-layout-config';
-import {
-  CSAStarLevelOneIcon,
-  DiscordIcon,
-  GitHubIcon,
-  LinkedInIcon,
-  TwitterIcon,
-  YouTubeIcon,
-} from '../icons/index';
+import { DiscordIcon, GitHubIcon, LinkedInIcon, TwitterIcon, YouTubeIcon } from '../icons/index';
+import { SecurityBadges } from './security-badges';
 
 const INNER_BOX_WIDTH_STYLE =
   'max-w-[90rem] [body:has(#hive-l-widths)_&]:max-w-[75rem] [body:has(#hive-l-widths)_&]:mx-4';
@@ -33,6 +27,10 @@ export type HiveFooterProps = {
   href?: string;
   description?: string;
   items?: HiveFooterItems;
+  /**
+   * In case this component is used outside of Hive Platform in a design-consistent but less related context,
+   */
+  showSecurityBadges?: boolean;
 };
 
 export function HiveFooter({
@@ -41,6 +39,7 @@ export function HiveFooter({
   href = `${siteOrigin}/`,
   description = 'Open-source GraphQL management platform',
   items,
+  showSecurityBadges,
 }: HiveFooterProps) {
   items = { ...HiveFooter.DEFAULT_ITEMS, ...items };
 
@@ -82,7 +81,9 @@ export function HiveFooter({
             ))}
             <ContactTextLink />
           </div>
-          <CSAStarLink className="sm:col-start-[-1] lg:col-start-[-2]" />
+          <div className="sm:col-start-[-1] lg:col-start-[-2]">
+            {showSecurityBadges && <SecurityBadges />}
+          </div>
         </div>
 
         <div className="col-span-full flex flex-wrap justify-between gap-x-[inherit] gap-y-8 lg:w-full lg:pb-2 lg:pt-8">
@@ -266,19 +267,3 @@ function DecorationArch(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
-
-function CSAStarLink({ className }: { className?: string }) {
-  return (
-    <a
-      href="https://cloudsecurityalliance.org/star/registry/software-products-guild-ltd-the-guild/services/graphql-hive"
-      target="_blank"
-      rel="noreferrer noopener"
-      className={cn(
-        'hive-focus w-fit rounded-full focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-[rgb(var(--nextra-bg))]',
-        className,
-      )}
-    >
-      <CSAStarLevelOneIcon className="size-20 lg:size-[120px] dark:opacity-95" />
-    </a>
-  );
-}

packages/components/src/components/hive-footer/security-badges.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { cn } from '../../cn';
+import { ReactComponent as CSAStarLevelOneIcon } from '../icons/csa-star-level-one.svg';
+
+function SecurityBadge({
+  href,
+  children,
+  className,
+}: {
+  href: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={cn(
+        'hive-focus size-fit rounded-full p-1 hover:bg-blue-200 focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-[rgb(var(--nextra-bg))] dark:hover:bg-white/20 dark:hover:*:opacity-100',
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+}
+
+export function SecurityBadges() {
+  return (
+    <div className="flex flex-wrap gap-4 max-lg:flex-col">
+      <SecurityBadge href="https://cloudsecurityalliance.org/star/registry/software-products-guild-ltd-the-guild/services/graphql-hive">
+        <CSAStarLevelOneIcon className="size-[88px] dark:opacity-95" />
+      </SecurityBadge>
+      <SecurityBadge href="https://security.graphql-hive.com/">
+        <img
+          src="https://static.vanta.com/static/soc2_badge.ac7ad1ad.webp"
+          alt="AICPA SOC 2"
+          className="size-[88px] dark:opacity-95"
+        />
+      </SecurityBadge>
+    </div>
+  );
+}