feat(APP-3490): Add custom label property for VoteProposalDataListIte…

…m component (#296)

CHANGELOG.md

@@ -7,6 +7,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Add optional `confirmationLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string
+    when needed.
+-   Add new `xs` size for core `Avatar` component
+
 ## [1.0.46] - 2024-09-21
 
 ### Added

src/core/components/avatars/avatar/avatar.tsx

@@ -6,7 +6,7 @@ import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../.
 import { responsiveUtils } from '../../../utils';
 import { AvatarBase } from '../avatarBase';
 
-export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface IAvatarProps extends ComponentPropsWithoutRef<'img'> {
     /**
@@ -25,6 +25,14 @@ export interface IAvatarProps extends ComponentPropsWithoutRef<'img'> {
 }
 
 const responsiveSizeClasses: ResponsiveAttributeClassMap<AvatarSize> = {
+    xs: {
+        default: 'size-4',
+        sm: 'sm:size-4',
+        md: 'md:size-4',
+        lg: 'lg:size-4',
+        xl: 'xl:size-4',
+        '2xl': '2xl:size-4',
+    },
     sm: {
         default: 'size-6',
         sm: 'sm:size-6',

src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx

@@ -26,6 +26,19 @@ export const TokenVoting: Story = {
     },
 };
 
+/**
+ * Usage example of the VotesDataListItem module component with a custom label.
+ */
+export const TokenVotingCustomLabel: Story = {
+    args: {
+        proposalId: 'PIP-06',
+        proposalTitle: 'Introduction of Layer 2 Scaling Solutions',
+        voteIndicator: 'yes',
+        date: 1613984914000,
+        confirmationLabel: 'Custom label',
+    },
+};
+
 /**
  * Usage example of the VotesDataListItem module component for a multisig vote.
  */

src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx

@@ -37,4 +37,11 @@ describe('<VoteProposalDataListItemStructure /> component', () => {
 
         expect(screen.getByText('2 days ago')).toBeInTheDocument();
     });
+
+    it('renders the custom label if available', () => {
+        const confirmationLabel = 'Custom label';
+        render(createTestComponent({ confirmationLabel }));
+
+        expect(screen.getByText(confirmationLabel)).toBeInTheDocument();
+    });
 });

src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx

@@ -20,10 +20,14 @@ export type IVoteProposalDataListItemStructureProps = IDataListItemProps & {
      *  Date of the vote on the proposal in ISO format or as a timestamp
      */
     date?: number | string;
+    /**
+     *   Custom label for the tag
+     */
+    confirmationLabel?: string;
 };
 
 export const VoteProposalDataListItemStructure: React.FC<IVoteProposalDataListItemStructureProps> = (props) => {
-    const { proposalTitle, proposalId, voteIndicator, date, className, ...otherProps } = props;
+    const { proposalTitle, proposalId, voteIndicator, date, confirmationLabel, className, ...otherProps } = props;
 
     const { copy } = useOdsModulesContext();
 
@@ -37,7 +41,7 @@ export const VoteProposalDataListItemStructure: React.FC<IVoteProposalDataListIt
                 <span className="truncate text-neutral-800">{proposalTitle}</span>
             </div>
             <div className="flex items-center gap-x-1 text-sm font-normal leading-tight text-neutral-500 md:gap-x-1.5 md:text-base">
-                <span>{copy.voteProposalDataListItemStructure.voted}</span>
+                <span>{confirmationLabel ?? copy.voteProposalDataListItemStructure.voted}</span>
                 <Tag
                     variant={voteIndicatorToTagVariant[voteIndicator]}
                     className="capitalize"