aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout/posts-list.stories.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-13 17:45:59 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-13 17:45:59 +0100
commit56878f647ea0f1066fa3e222d7aa0d83057f496d (patch)
tree26f673a062741414bfa7db5d37990936ce115f49 /src/components/organisms/layout/posts-list.stories.tsx
parent599b70cd2390d08ce26ee44174b3f39c6587110c (diff)
refactor(components): rewrite PostsList component
* remove NoResults component and move logic to Search page * add a usePostsList hook * remove Pagination from PostsList (it is only used if javascript is disabled and not on every posts list) * replace `byYear` prop with `sortByYear` * replace `loadMore` prop with `onLoadMore` * remove `showLoadMoreBtn` (we can use `loadMore` prop instead to determine if we need to display the button) * replace `titleLevel` prop with `headingLvl` * add `firstNewResult` prop to handle focus on the new results when loading more article (we should not focus a useless span but the item directly)
Diffstat (limited to 'src/components/organisms/layout/posts-list.stories.tsx')
-rw-r--r--src/components/organisms/layout/posts-list.stories.tsx191
1 files changed, 0 insertions, 191 deletions
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
deleted file mode 100644
index b5af1d3..0000000
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PostsList } from './posts-list';
-import { posts } from './posts-list.fixture';
-
-/**
- * PostsList - Storybook Meta
- */
-export default {
- title: 'Organisms/Layout/PostsList',
- component: PostsList,
- args: {
- byYear: false,
- isLoading: false,
- pageNumber: 1,
- showLoadMoreBtn: false,
- siblings: 1,
- titleLevel: 2,
- },
- argTypes: {
- baseUrl: {
- control: {
- type: 'text',
- },
- description: 'The pagination base url.',
- table: {
- category: 'Options',
- defaultValue: { summary: '/page/' },
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- byYear: {
- control: {
- type: 'boolean',
- },
- description: 'True to display the posts by year.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- isLoading: {
- control: {
- type: 'boolean',
- },
- description: 'Determine if the data is loading.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- loadMore: {
- control: {
- type: null,
- },
- description: 'A function to load more posts on button click.',
- table: {
- category: 'Events',
- },
- type: {
- name: 'function',
- required: false,
- },
- },
- pageNumber: {
- control: {
- type: 'number',
- },
- description: 'The current page number.',
- table: {
- category: 'Options',
- defaultValue: { summary: 1 },
- },
- type: {
- name: 'number',
- required: false,
- },
- },
- posts: {
- description: 'The posts data.',
- type: {
- name: 'object',
- required: true,
- value: {},
- },
- },
- showLoadMoreBtn: {
- control: {
- type: 'boolean',
- },
- description: 'Determine if the load more button should be visible.',
- table: {
- category: 'Options',
- defaultValue: { summary: false },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
- siblings: {
- control: {
- type: 'number',
- },
- description: 'The number of page siblings inside pagination.',
- table: {
- category: 'Options',
- defaultValue: { summary: 1 },
- },
- type: {
- name: 'number',
- required: false,
- },
- },
- titleLevel: {
- control: {
- type: 'number',
- min: 1,
- max: 6,
- },
- description: 'The title level (hn).',
- table: {
- category: 'Options',
- defaultValue: { summary: 2 },
- },
- type: {
- name: 'number',
- required: false,
- },
- },
- total: {
- control: {
- type: 'number',
- },
- description: 'The number of posts.',
- type: {
- name: 'number',
- required: true,
- },
- },
- },
-} as ComponentMeta<typeof PostsList>;
-
-const Template: ComponentStory<typeof PostsList> = (args) => (
- <PostsList {...args} />
-);
-
-/**
- * PostsList Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
- posts,
- total: posts.length,
-};
-
-/**
- * PostsList Stories - By years
- */
-export const ByYears = Template.bind({});
-ByYears.args = {
- posts,
- byYear: true,
- total: posts.length,
-};
-ByYears.decorators = [
- (Story) => (
- <div style={{ marginLeft: 150 }}>
- <Story />
- </div>
- ),
-];
-
-/**
- * PostsList Stories - No results
- */
-export const NoResults = Template.bind({});
-NoResults.args = {
- posts: [],
- total: posts.length,
-};