DEV: Reusable post-list component (#30312)

This update adds a  _new_ `<PostList />` component, along with it's child components (`<PostListItem/>` and `<PostListItemDetails />`). This new generic component can be used to show a list of posts.

It can be used like so:
```js
/**
 * A component that renders a list of posts
 *
 * @component PostList
 *
 * @args {Array<Object>} posts - The array of post objects to display
 * @args {Function} fetchMorePosts - A function that fetches more posts. Must return a Promise that resolves to an array of new posts.
 * @args {String} emptyText (optional) - Custom text to display when there are no posts
 * @args {String|Array} additionalItemClasses (optional) - Additional classes to add to each post list item
 * @args {String} titleAriaLabel (optional) - Custom Aria label for the post title
 * 
*/
```
```hbs
<PostList
    @posts={{this.posts}}
    @fetchMorePosts={{this.loadMorePosts}}
    @emptyText={{i18n "custom_identifier.empty"}}
    @additionalItemClasses="custom-class"
 />
```
This commit is contained in:
Keegan George
2024-12-20 02:20:25 +09:00
committed by GitHub
parent 6cd964306f
commit d886c55f63
20 changed files with 520 additions and 159 deletions

View File

@ -40,6 +40,7 @@ RSpec.describe "Styleguide Smoke Test", type: :system do
],
"ORGANISMS" => [
{ href: "/organisms/post", title: "Post" },
{ href: "/organisms/post-list", title: "Post List" },
{ href: "/organisms/topic-map", title: "Topic Map" },
{ href: "/organisms/topic-footer-buttons", title: "Topic Footer Buttons" },
{ href: "/organisms/topic-list", title: "Topic List" },