feat: APP-2943 - Implement MemberDataListItem.Skeleton module compone…

…nt (#178)

CHANGELOG.md

@@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Implement `AssetDataListItem.Skeleton` and `DaoDataListItem.Skeleton` module components
+-   Implement `MemberDataListItem.Skeleton`, `AssetDataListItem.Skeleton`, and `DaoDataListItem.Skeleton` module
+    components
 -   Implement `Tabs` core component
 -   Custom CSS property added for `Collapsible` to adjust z-index
 

src/modules/components/asset/assetDataListItem/assetDataListItemSkeleton/assetDataListItemSkeleton.stories.tsx

@@ -22,10 +22,8 @@ type Story = StoryObj<typeof AssetDataListItem.Skeleton>;
 export const Default: Story = {
     args: {},
     render: () => (
-        <DataList.Root entityLabel="Daos">
-            <DataList.Container>
-                <AssetDataListItem.Skeleton />
-            </DataList.Container>
+        <DataList.Root entityLabel="Asset" state="initialLoading" pageSize={1}>
+            <DataList.Container SkeletonElement={AssetDataListItem.Skeleton} />
         </DataList.Root>
     ),
 };

src/modules/components/dao/daoDataListItem/daoDataListItemSkeleton/daoDataListItemSkeleton.stories.tsx

@@ -22,10 +22,8 @@ type Story = StoryObj<typeof DaoDataListItem.Skeleton>;
 export const Default: Story = {
     args: {},
     render: () => (
-        <DataList.Root entityLabel="Daos">
-            <DataList.Container>
-                <DaoDataListItem.Skeleton />
-            </DataList.Container>
+        <DataList.Root entityLabel="DAO" state="initialLoading" pageSize={1}>
+            <DataList.Container SkeletonElement={DaoDataListItem.Skeleton} />
         </DataList.Root>
     ),
 };

src/modules/components/member/memberDataListItem/index.ts

@@ -1,7 +1,10 @@
+import { MemberDataListItemSkeleton } from './memberDataListItemSkeleton';
 import { MemberDataListItemStructure } from './memberDataListItemStructure';
 
 export const MemberDataListItem = {
     Structure: MemberDataListItemStructure,
+    Skeleton: MemberDataListItemSkeleton,
 };
 
+export * from './memberDataListItemSkeleton';
 export * from './memberDataListItemStructure';

src/modules/components/member/memberDataListItem/memberDataListItemSkeleton/index.ts

@@ -0,0 +1 @@
+export { MemberDataListItemSkeleton, type IMemberDataListItemSkeletonProps } from './memberDataListItemSkeleton';

src/modules/components/member/memberDataListItem/memberDataListItemSkeleton/memberDataListItemSkeleton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemberDataListItem } from '../../../..';
+import { DataList } from '../../../../../core';
+
+const meta: Meta<typeof MemberDataListItem.Skeleton> = {
+    title: 'Modules/Components/Member/MemberDataListItem.Skeleton',
+    component: MemberDataListItem.Skeleton,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/ISSDryshtEpB7SUSdNqAcw/branch/P0GeJKqILL7UXvaqu5Jj7V/Aragon-ODS?m=auto&node-id=14385%3A25034&t=E0kPRQYhJqWbVmAh-1',
+        },
+    },
+};
+
+type Story = StoryObj<typeof MemberDataListItem.Skeleton>;
+
+/**
+ * Default usage example of the MemberDataListItemSkeleton component.
+ */
+export const Default: Story = {
+    render: () => (
+        <DataList.Root entityLabel="Proposal" state="initialLoading" pageSize={1}>
+            <DataList.Container SkeletonElement={MemberDataListItem.Skeleton} />
+        </DataList.Root>
+    ),
+};
+
+export default meta;

src/modules/components/member/memberDataListItem/memberDataListItemSkeleton/memberDataListItemSkeleton.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { DataList, StateSkeletonBar, StateSkeletonCircular, type IDataListItemProps } from '../../../../../core';
+
+export interface IMemberDataListItemSkeletonProps extends IDataListItemProps {}
+
+export const MemberDataListItemSkeleton: React.FC<IMemberDataListItemSkeletonProps> = (props) => {
+    const { className, ...otherProps } = props;
+
+    return (
+        <DataList.Item
+            tabIndex={0}
+            aria-busy="true"
+            aria-label="loading"
+            className={classNames('bg-neutral-0 py-3 md:py-3.5', className)}
+            {...otherProps}
+        >
+            <div className="flex flex-col items-start justify-center gap-y-3 py-2 md:min-w-44 md:gap-y-4 md:py-3 ">
+                <StateSkeletonCircular size="sm" responsiveSize={{ md: 'lg' }} />
+
+                <StateSkeletonBar size="lg" responsiveSize={{ md: 'xl' }} width="100%" />
+
+                <div className="flex w-full flex-col gap-y-2 md:w-5/6 md:gap-y-2.5">
+                    <StateSkeletonBar width="50%" />
+                    <StateSkeletonBar width="65%" />
+                </div>
+            </div>
+        </DataList.Item>
+    );
+};

src/modules/components/member/memberDataListItem/memberDataListItemSkeleton/memberDataListItemStructure.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { DataList } from '../../../../../core';
+import { MemberDataListItemSkeleton, type IMemberDataListItemSkeletonProps } from './memberDataListItemSkeleton';
+
+describe('<MemberDataListItem.Skeleton /> component', () => {
+    const createTestComponent = (props?: Partial<IMemberDataListItemSkeletonProps>) => {
+        const completeProps: IMemberDataListItemSkeletonProps = { ...props };
+
+        return (
+            <DataList.Root entityLabel="Member">
+                <MemberDataListItemSkeleton {...completeProps} />
+            </DataList.Root>
+        );
+    };
+
+    it('has correct accessibility attributes', () => {
+        render(createTestComponent());
+        const listItem = screen.getByLabelText('loading');
+        expect(listItem).toHaveAttribute('aria-busy', 'true');
+        expect(listItem).toHaveAttribute('tabIndex', '0');
+    });
+});

src/modules/components/proposal/proposalDataListItem/proposalDataListItemSkeleton/proposalDataListItemSkeleton.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { DataList } from '../../../../../core';
 import { ProposalDataListItemSkeleton, type IProposalDataListItemSkeletonProps } from './proposalDataListItemSkeleton';
 
-describe('<ProposalDataListItemSkeleton /> component', () => {
+describe('<ProposalDataListItem.Skeleton /> component', () => {
     const createTestComponent = (props?: Partial<IProposalDataListItemSkeletonProps>) => {
         const completeProps: IProposalDataListItemSkeletonProps = { ...props };