Add padding to product logos (#1791)

Co-authored-by: Dimitri POSTOLOV <[email protected]>

Author: hasparus

.changeset/late-kids-fix.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Add padding to product logos

packages/components/src/components/explore-main-product-cards.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { cn } from '../cn';
-import { PRODUCTS } from '../products';
+import { FOUR_MAIN_PRODUCTS } from '../products';
 import { Heading } from './heading';
 import { ArrowIcon } from './icons';
 import { TextLink } from './text-link';
@@ -28,7 +28,7 @@ export function ExploreMainProductCards({ className, ...rest }: ExploreMainProdu
         </TextLink>
       </div>
       <ul className="-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden">
-        {[PRODUCTS.HIVE, PRODUCTS.HIVE_GATEWAY, PRODUCTS.YOGA, PRODUCTS.MESH].map(product => (
+        {FOUR_MAIN_PRODUCTS.map(product => (
           <MainProductCard key={product.name} as="li" product={product} />
         ))}
       </ul>

packages/components/src/components/tools-and-libraries-cards/index.tsx

@@ -1,5 +1,10 @@
 import { cn } from '../../cn';
-import { ProductInfo, PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '../../products';
+import {
+  FOUR_MAIN_PRODUCTS,
+  ProductInfo,
+  PRODUCTS,
+  SIX_HIGHLIGHTED_PRODUCTS,
+} from '../../products';
 import { CallToAction } from '../call-to-action';
 import { HighlightDecoration } from '../decorations';
 import { Heading } from '../heading';
@@ -28,8 +33,8 @@ export function ToolsAndLibrariesCards({ className }: { className?: string }) {
         Discover the complete ecosystem of tools and libraries
       </Heading>
       <p className="text-green-800">Complete GraphQL Federation Stack</p>
-      <ul className="-mx-12 -my-2 flex grid-cols-2 flex-row gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4">
-        {[PRODUCTS.HIVE, PRODUCTS.HIVE_GATEWAY, PRODUCTS.YOGA, PRODUCTS.MESH].map(product => (
+      <ul className="-mx-12 -my-2 flex grid-cols-2 gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4">
+        {FOUR_MAIN_PRODUCTS.map(product => (
           <MainProductCard key={product.name} as="li" product={product} />
         ))}
       </ul>

packages/components/src/product.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../.storybook/hive-theme-decorator';
+import { PRODUCTS_MENU_LIST } from './products';
+
+export default {
+  title: 'Components/PRODUCTS_MENU_LIST',
+  component: () => null,
+  decorators: [hiveThemeDecorator],
+  parameters: {
+    padding: true,
+  },
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  name: 'PRODUCTS_MENU_LIST',
+  render() {
+    return (
+      <div className="flex flex-col gap-2">
+        {Object.values(PRODUCTS_MENU_LIST).map(product => product.title)}
+      </div>
+    );
+  },
+};

packages/components/src/products.tsx

@@ -222,6 +222,13 @@ export const PRODUCTS: Record<ProductType, ProductInfo> = {
   },
 };
 
+export const FOUR_MAIN_PRODUCTS = [
+  PRODUCTS.HIVE,
+  PRODUCTS.HIVE_GATEWAY,
+  PRODUCTS.YOGA,
+  PRODUCTS.MESH,
+];
+
 export const SIX_HIGHLIGHTED_PRODUCTS = [
   PRODUCTS.CODEGEN,
   PRODUCTS.INSPECTOR,
@@ -234,14 +241,7 @@ export const SIX_HIGHLIGHTED_PRODUCTS = [
 /** List of products displayed in hamburger menu. */
 export const PRODUCTS_MENU_LIST: MenuItem['items'] = Object.fromEntries(
   (
-    [
-      'The GraphQL Stack',
-      PRODUCTS.MESH,
-      PRODUCTS.YOGA,
-      PRODUCTS.CODEGEN,
-      'Libraries',
-      ...SIX_HIGHLIGHTED_PRODUCTS,
-    ] as const
+    ['The GraphQL Stack', ...FOUR_MAIN_PRODUCTS, 'Libraries', ...SIX_HIGHLIGHTED_PRODUCTS] as const
   ).map((item, i) => {
     if (typeof item === 'string') {
       return [
@@ -257,7 +257,7 @@ export const PRODUCTS_MENU_LIST: MenuItem['items'] = Object.fromEntries(
               </style>
               <span className="ml-2 font-medium text-gray-500 dark:text-neutral-400">{item}</span>
             </>
-          ) as any as string,
+          ) as unknown as string,
         },
       ];
     }
@@ -270,12 +270,14 @@ export const PRODUCTS_MENU_LIST: MenuItem['items'] = Object.fromEntries(
         newWindow: true,
         title: (
           <div className="flex items-center gap-2">
-            <Logo
+            <div
               className={cn(
-                'size-4 translate-y-[0.25px]',
-                i > 3 && 'rounded-sm bg-gray-500 text-[8px] text-white dark:bg-white/10',
+                'flex translate-y-[0.25px]',
+                i > 6 && 'rounded-sm bg-gray-500 text-white dark:bg-white/10',
               )}
-            />
+            >
+              <Logo className="size-4 text-[8px]" />
+            </div>
             {item.name}
           </div>
         ),