Merge branch 'asyncapi:master' into master

.gitignore

@@ -17,7 +17,7 @@ meetings.json
 cypress/screenshots
 cypress/videos
 /config/finance/json-data/*
-*.mdx
+/pages/**/*.mdx
 *storybook.log
 /storybook-static/
 coverage

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
   stories: [
+    "../components/**/*.mdx",
     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [

components/AuthorAvatars.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Avatar from './Avatar';
+
 interface Author {
   name: string;
   photo: string;
@@ -18,29 +20,14 @@ interface AuthorAvatarsProps {
 export default function AuthorAvatars({ authors = [] }: AuthorAvatarsProps) {
   return (
     <>
-      {authors.map((author, index) => {
-        const avatar = (
-          <img
-            key={index}
-            title={author.name}
-            className={`${index > 0 ? `left- absolute${index * 7} top-0` : `mr- relative${(authors.length - 1) * 7}`} 
-              z-${(authors.length - 1 - index) * 10} size-10 rounded-full border-2 
-              border-white object-cover hover:z-50`}
-            src={author.photo}
-            loading='lazy'
-            data-testid='AuthorAvatars-img'
-            alt={author.name} // Added alt attribute here
-          />
-        );
-
-        return author.link ? (
-          <a href={author.link} key={index} data-testid='AuthorAvatars-link'>
-            {avatar}
-          </a>
-        ) : (
-          <React.Fragment key={index}>{avatar}</React.Fragment>
-        );
-      })}
+      {authors.map((author, index) => (
+        <Avatar
+          key={index}
+          {...author}
+          className={`${index > 0 ? `left- absolute${index * 7} top-0` : `mr- relative${(authors.length - 1) * 7}`}
+        z-${(authors.length - 1 - index) * 10}`}
+        />
+      ))}
     </>
   );
 }

components/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const DefaultAvatar: Story = {
+  args: {
+    name: 'Avatar',
+    link: 'https://www.asyncapi.com/',
+    photo: '/favicon-32x32.png'
+  }
+};

components/Avatar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface AvatarProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The name of the avatar. */
+  name: string;
+
+  /** The photo of the avatar. */
+  photo: string;
+
+  /** The link of the avatar. */
+  link?: string;
+
+  /** The class name to be applied to the avatar. */
+  className: string;
+}
+
+/**
+ * This component renders avatar.
+ */
+export default function Avatar({ name, photo, link, className }: AvatarProps) {
+  const avatar = (
+    <img
+      title={name}
+      className={`size-10 rounded-full border-2 border-white object-cover hover:z-50 ${className}`}
+      src={photo}
+      loading='lazy'
+      data-testid='Avatars-img'
+      alt={name}
+    />
+  );
+
+  return link ? (
+    <a href={link} data-testid='Avatars-link'>
+      {avatar}
+    </a>
+  ) : (
+    <React.Fragment>{avatar}</React.Fragment>
+  );
+}

components/Colors.mdx

@@ -0,0 +1,220 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Design System/Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem
+    title="Primary"
+    subtitle="This is the primary color palette across all products."
+    colors={{
+      50: '#efe6fd',
+      100: '#ceb0fa',
+      200: '#b78af7',
+      300: '#9654f4',
+      400: '#8133f1',
+      500: '#6200ee',
+      600: '#5900d9',
+      700: '#4600a9',
+      800: '#360083',
+      900: '#290064',
+    }}
+  />
+
+{' '}
+
+<ColorItem
+  title="Secondary"
+  subtitle="This is the accent color palette across all products."
+  colors={{
+    50: '#edf8fd',
+    100: '#c6eafa',
+    200: '#aae0f7',
+    300: '#84d1f4',
+    400: '#6cc9f1',
+    500: '#47bbee',
+    600: '#41aad9',
+    700: '#3285a9',
+    800: '#276783',
+    900: '#1e4f64',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Gray (Neutral)"
+  subtitle="This color palette is used for type color, backgrounds, and shading."
+  colors={{
+    50: '#e9eaea',
+    100: '#bbbdbd',
+    200: '#9a9d9d',
+    300: '#6c7070',
+    400: '#505454',
+    500: '#242929',
+    600: '#212525',
+    700: '#1a1d1d',
+    800: '#141717',
+    900: '#0f1111',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Base"
+  subtitle="Black and white are essential in any system."
+  colors={{
+    50: '#ffffff',
+    100: '#ffffff',
+    200: '#ffffff',
+    300: '#ffffff',
+    400: '#ffffff',
+    500: '#ffffff',
+    600: '#e8e8e8',
+    700: '#b5b5b5',
+    800: '#8c8c8c',
+    900: '#6b6b6b',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Parser"
+  subtitle="Parser is a supporting color of the brand to represent the tooling."
+  colors={{
+    50: '#fffbec',
+    100: '#fff1c3',
+    200: '#ffeaa7',
+    300: '#ffe17e',
+    400: '#ffdb65',
+    500: '#ffd23f',
+    600: '#e8bf39',
+    700: '#b5952d',
+    800: '#8c7423',
+    900: '#6b581a',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Studio"
+  subtitle="Studio is a supporting color of the brand to represent the tooling."
+  colors={{
+    50: '#fce7f5',
+    100: '#f7b4df',
+    200: '#f390d0',
+    300: '#ee5ebb',
+    400: '#ea3ead',
+    500: '#e50e99',
+    600: '#d00d8b',
+    700: '#a30a6d',
+    800: '#7e0854',
+    900: '#600640',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Modelina"
+  subtitle="Modelina is a supporting color of the brand to represent the tooling."
+  colors={{
+    50: '#e9fbff',
+    100: '#baf2fe',
+    200: '#99ebfe',
+    300: '#6ae2fe',
+    400: '#4dddfd',
+    500: '#21d4fd',
+    600: '#1ec1e6',
+    700: '#1797b4',
+    800: '#12758b',
+    900: '#0e596a',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Glee"
+  subtitle="Glee is a supporting color of the brand to represent the tooling."
+  colors={{
+    50: '#effcf2',
+    100: '#ccf6d5',
+    200: '#b3f2c1',
+    300: '#90eca5',
+    400: '#7be893',
+    500: '#5ae278',
+    600: '#52ce6d',
+    700: '#40a055',
+    800: '#327c42',
+    900: '#265f32',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Accent-error swatches"
+  subtitle="Error colors signal critical issues and prompt corrective action."
+  colors={{
+    50: '#fceff1',
+    100: '#f6ccd3',
+    200: '#f2b3be',
+    300: '#ec90a0',
+    400: '#e87b8d',
+    500: '#e25a71',
+    600: '#ce5267',
+    700: '#a04050',
+    800: '#7c323e',
+    900: '#5f262f',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Accent-success swatches"
+  subtitle="Success colors indicate positive outcomes or successful actions, giving users visual feedback that their task is complete."
+  colors={{
+    50: '#eaf8ed',
+    100: '#bee9c7',
+    200: '#9fdeac',
+    300: '#73cf86',
+    400: '#58c66f',
+    500: '#2eb84b',
+    600: '#2aa744',
+    700: '#218335',
+    800: '#196529',
+    900: '#134d20',
+  }}
+/>
+
+{' '}
+
+<ColorItem
+  title="Accent-warning swatches"
+  subtitle="Warning colors are used to indicate potential risks users should be aware of."
+  colors={{
+    50: '#fcf7e6',
+    100: '#f6e6b1',
+    200: '#f1d98b',
+    300: '#ebc855',
+    400: '#e7bd35',
+    500: '#e1ad02',
+    600: '#cd9d02',
+    700: '#a07b01',
+    800: '#7c5f01',
+    900: '#5f4901',
+  }}
+/>
+
+  <ColorItem
+    title="Gradient"
+    subtitle="This is the AsyncAPI Gradient color."
+    colors={{ 'AsyncAPI Gradient': 'linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%)'}}
+  />
+</ColorPalette>

components/Testimonial.tsx

@@ -1,4 +1,4 @@
-import Quote from './icons/Quote';
+import IconQuote from './icons/Quote';
 import Paragraph from './typography/Paragraph';
 
 interface TestimonialProps {
@@ -30,7 +30,7 @@ export default function Testimonial({
     <li className={`p-4 sm:px-6 md:flex md:flex-row md:py-4 md:pr-0 ${className}`}>
       <blockquote className='mt-8 md:flex md:grow md:flex-col'>
         <div className='relative text-lg font-medium leading-7 text-gray-600 md:flex-1'>
-          <Quote className='absolute left-0 top-0 size-8 -translate-y-2 text-primary-500' />
+          <IconQuote className='absolute left-0 top-0 size-8 -translate-y-2 text-primary-500' />
           <Paragraph className='relative pl-10 text-left'>{text}</Paragraph>
         </div>
         <footer className='mt-6'>