adilallo
122 lines
2.9 KiB
JavaScript
122 lines
2.9 KiB
JavaScript
import RelatedArticles from "../app/components/RelatedArticles";
|
|
|
|
const mockRelatedPosts = [
|
|
{
|
|
slug: "related-article-1",
|
|
frontmatter: {
|
|
title: "Related Article One",
|
|
description: "This is the first related article description.",
|
|
author: "Author One",
|
|
date: "2025-01-10",
|
|
},
|
|
},
|
|
{
|
|
slug: "related-article-2",
|
|
frontmatter: {
|
|
title: "Related Article Two",
|
|
description: "This is the second related article description.",
|
|
author: "Author Two",
|
|
date: "2025-01-12",
|
|
},
|
|
},
|
|
{
|
|
slug: "related-article-3",
|
|
frontmatter: {
|
|
title: "Related Article Three",
|
|
description: "This is the third related article description.",
|
|
author: "Author Three",
|
|
date: "2025-01-14",
|
|
},
|
|
},
|
|
];
|
|
|
|
export default {
|
|
title: "Components/RelatedArticles",
|
|
component: RelatedArticles,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"The RelatedArticles component displays a carousel of related blog posts with progress bars on mobile and a scrollable slider on desktop.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
relatedPosts: {
|
|
control: "object",
|
|
description: "Array of related blog post objects",
|
|
},
|
|
currentPostSlug: {
|
|
control: "text",
|
|
description: "Slug of the current post to exclude from related articles",
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
relatedPosts: mockRelatedPosts,
|
|
currentPostSlug: "current-article",
|
|
},
|
|
};
|
|
|
|
export const TwoArticles = {
|
|
args: {
|
|
relatedPosts: mockRelatedPosts.slice(0, 2),
|
|
currentPostSlug: "current-article",
|
|
},
|
|
};
|
|
|
|
export const OneArticle = {
|
|
args: {
|
|
relatedPosts: mockRelatedPosts.slice(0, 1),
|
|
currentPostSlug: "current-article",
|
|
},
|
|
};
|
|
|
|
export const Empty = {
|
|
args: {
|
|
relatedPosts: [],
|
|
currentPostSlug: "current-article",
|
|
},
|
|
};
|
|
|
|
export const LongTitles = {
|
|
args: {
|
|
relatedPosts: [
|
|
{
|
|
slug: "long-title-1",
|
|
frontmatter: {
|
|
title:
|
|
"This is a Very Long Article Title That Tests Text Wrapping and Display",
|
|
description:
|
|
"This is a longer description that tests how the component handles extended text content.",
|
|
author: "Author One",
|
|
date: "2025-01-10",
|
|
},
|
|
},
|
|
{
|
|
slug: "long-title-2",
|
|
frontmatter: {
|
|
title: "Another Very Long Article Title for Testing Purposes",
|
|
description:
|
|
"Another longer description for testing text handling in the component.",
|
|
author: "Author Two",
|
|
date: "2025-01-12",
|
|
},
|
|
},
|
|
{
|
|
slug: "long-title-3",
|
|
frontmatter: {
|
|
title: "Third Long Article Title to Complete the Set",
|
|
description:
|
|
"Final longer description to test the component's text handling capabilities.",
|
|
author: "Author Three",
|
|
date: "2025-01-14",
|
|
},
|
|
},
|
|
],
|
|
currentPostSlug: "current-article",
|
|
},
|
|
};
|