[go: up one dir, main page]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create Accordion component and its stories #3121

Merged
merged 13 commits into from
Aug 29, 2024

Conversation

devilkiller-ag
Copy link
Member
@devilkiller-ag devilkiller-ag commented Jul 28, 2024

Description
Created an accordion component, added stories for it, and used it in the FAQ section.

Copy link
netlify bot commented Jul 28, 2024

Deploy Preview for asyncapi-website ready!

Name Link
🔨 Latest commit 3714ce4
🔍 Latest deploy log https://app.netlify.com/sites/asyncapi-website/deploys/66d0c959ae9c28000889a64d
😎 Deploy Preview https://deploy-preview-3121--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@asyncapi-bot
Copy link
Contributor
asyncapi-bot commented Jul 28, 2024

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 44
🟢 Accessibility 98
🟢 Best practices 92
🟢 SEO 100
🔴 PWA 33

Lighthouse ran on https://deploy-preview-3121--asyncapi-website.netlify.app/


type Story = StoryObj<typeof Accordion>;

const sampleAccordionItemList = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure that this list is of AccordionItemType items only. Specify the AccordionItemType type for this variable.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@akshatnema akshatnema added the gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code label Jul 30, 2024
@devilkiller-ag devilkiller-ag changed the title feat: update faq section on the About page Created accordion component, added stories for it, and used it in the FAQ section Aug 21, 2024
@devilkiller-ag devilkiller-ag changed the title Created accordion component, added stories for it, and used it in the FAQ section feat: created accordion component, added stories for it, and used it in the FAQ section Aug 21, 2024
@devilkiller-ag devilkiller-ag changed the title feat: created accordion component, added stories for it, and used it in the FAQ section feat: created an accordion component, added stories for it, and used it in the FAQ section Aug 21, 2024
accordionItems: AccordionItemType[];
}

const Accordion = ({ accordionItems = [] }: AccordionProps) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use export default function here and create a JSdoc above this function to describe the component.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

setActiveIndex: (index: number | null) => void;
}

const AccordionItem = ({ itemIndex, title, content, isActive, setActiveIndex }: AccordionItemProps) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Comment on lines 10 to 12
<div>
<Accordion accordionItems={faqList} />
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<Accordion accordionItems={faqList} />
</div>
<Accordion accordionItems={faqList} />

No need to wrap this under a div.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

import { faqList } from './FAQList';

/**
* This is the FAQ component. It tells the user about the frequently asked questions.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Specify that this component has been created to render FAQ list inside MDX file.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

/**
* This is the FAQ component. It tells the user about the frequently asked questions.
*/
const FAQ = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use export default function here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@akshatnema akshatnema changed the title feat: created an accordion component, added stories for it, and used it in the FAQ section feat: create Accordion component and its stories Aug 24, 2024
@akshatnema akshatnema merged commit 04a2825 into asyncapi:master Aug 29, 2024
14 checks passed
@devilkiller-ag devilkiller-ag deleted the update-faq branch September 15, 2024 05:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants