diff --git a/.gitignore b/.gitignore index a2dfc1c4b40..210beb93f6a 100644 --- a/.gitignore +++ b/.gitignore @@ -17,7 +17,7 @@ meetings.json cypress/screenshots cypress/videos /config/finance/json-data/* -*.mdx +/pages/**/*.mdx *storybook.log /storybook-static/ coverage diff --git a/.storybook/main.ts b/.storybook/main.ts index fda31b53579..2580c94306b 100644 --- a/.storybook/main.ts +++ b/.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: [ diff --git a/components/AuthorAvatars.tsx b/components/AuthorAvatars.tsx index 03bf39dcb44..39928ba2a53 100644 --- a/components/AuthorAvatars.tsx +++ b/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 = ( - 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 ? ( - - {avatar} - - ) : ( - {avatar} - ); - })} + {authors.map((author, index) => ( + 0 ? `left- absolute${index * 7} top-0` : `mr- relative${(authors.length - 1) * 7}`} + z-${(authors.length - 1 - index) * 10}`} + /> + ))} ); } diff --git a/components/Avatar.stories.tsx b/components/Avatar.stories.tsx new file mode 100644 index 00000000000..71af6ee2d21 --- /dev/null +++ b/components/Avatar.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Avatar from './Avatar'; + +const meta: Meta = { + title: 'Components/Avatar', + component: Avatar +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultAvatar: Story = { + args: { + name: 'Avatar', + link: 'https://www.asyncapi.com/', + photo: '/favicon-32x32.png' + } +}; diff --git a/components/Avatar.tsx b/components/Avatar.tsx new file mode 100644 index 00000000000..b8bb1e55715 --- /dev/null +++ b/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 = ( + {name} + ); + + return link ? ( + + {avatar} + + ) : ( + {avatar} + ); +} diff --git a/components/Colors.mdx b/components/Colors.mdx new file mode 100644 index 00000000000..3fddc2d5452 --- /dev/null +++ b/components/Colors.mdx @@ -0,0 +1,220 @@ +import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'; + + + +# Colors + + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + +{' '} + + + + + diff --git a/components/Testimonial.tsx b/components/Testimonial.tsx index a1dae1c6a28..5d25a769fc0 100644 --- a/components/Testimonial.tsx +++ b/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({
  • - + {text}