From 3050d5e9f8488b6d7bd1d3ac4f2364cb0accf585 Mon Sep 17 00:00:00 2001 From: shan8851 Date: Mon, 23 Sep 2024 08:55:52 +0100 Subject: [PATCH 1/7] feat: Add cusotm label for data list item --- .../voteProposalDataListItemStructure.stories.tsx | 13 +++++++++++++ .../voteProposalDataListItemStructure.tsx | 8 ++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx index 77a37532..cd25008c 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx +++ b/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, + voteLabel: 'Cutom label', + }, +}; + /** * Usage example of the VotesDataListItem module component for a multisig vote. */ diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx index 55f959e9..86230890 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx +++ b/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 + */ + voteLabel?: string; }; export const VoteProposalDataListItemStructure: React.FC = (props) => { - const { proposalTitle, proposalId, voteIndicator, date, className, ...otherProps } = props; + const { proposalTitle, proposalId, voteIndicator, date, voteLabel, className, ...otherProps } = props; const { copy } = useOdsModulesContext(); @@ -37,7 +41,7 @@ export const VoteProposalDataListItemStructure: React.FC{proposalTitle}
- {copy.voteProposalDataListItemStructure.voted} + {voteLabel ?? copy.voteProposalDataListItemStructure.voted} Date: Mon, 23 Sep 2024 08:57:23 +0100 Subject: [PATCH 2/7] chore: Update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd36f7f7..35e2eaa3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Added + +- Add optional `voteLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string wen needed. + ## [1.0.46] - 2024-09-21 ### Added From da7a84f6156b55e9177b4f039f8f40b5a534be94 Mon Sep 17 00:00:00 2001 From: shan8851 Date: Mon, 23 Sep 2024 08:58:30 +0100 Subject: [PATCH 3/7] chore: Add test to check for custom label --- .../voteProposalDataListItemStructure.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx index a65e863f..0c15eda9 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx +++ b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx @@ -37,4 +37,11 @@ describe(' component', () => { expect(screen.getByText('2 days ago')).toBeInTheDocument(); }); + + it('renders the custom label if available', () => { + const voteLabel = 'Custom label'; + render(createTestComponent({ voteLabel })); + + expect(screen.getByText(voteLabel)).toBeInTheDocument(); + }); }); From 9cf0bd10ee3988963585f60ee323ce4162cca88a Mon Sep 17 00:00:00 2001 From: shan8851 Date: Mon, 23 Sep 2024 09:10:54 +0100 Subject: [PATCH 4/7] chore: linting --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35e2eaa3..39d38c0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added -- Add optional `voteLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string wen needed. +- Add optional `voteLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string wen + needed. ## [1.0.46] - 2024-09-21 From 7a1eca8fdb11ced7dd21e6482a1605a68922fbea Mon Sep 17 00:00:00 2001 From: shan8851 Date: Mon, 23 Sep 2024 09:35:01 +0100 Subject: [PATCH 5/7] feat: Add new xs size to avatar component --- CHANGELOG.md | 1 + src/core/components/avatars/avatar/avatar.tsx | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39d38c0c..f107a465 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Add optional `voteLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string wen needed. +- Add new `xs` size for core `Avatar` component ## [1.0.46] - 2024-09-21 diff --git a/src/core/components/avatars/avatar/avatar.tsx b/src/core/components/avatars/avatar/avatar.tsx index b7294645..324a3966 100644 --- a/src/core/components/avatars/avatar/avatar.tsx +++ b/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 = { + 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', From 02ff986b110c0fba73c00384f7dc7ca65424f1ee Mon Sep 17 00:00:00 2001 From: shan8851 Date: Mon, 23 Sep 2024 10:11:45 +0100 Subject: [PATCH 6/7] chore: Update naming of new prop --- CHANGELOG.md | 2 +- .../voteProposalDataListItemStructure.stories.tsx | 2 +- .../voteProposalDataListItemStructure.test.tsx | 6 +++--- .../voteProposalDataListItemStructure.tsx | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f107a465..86238bca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added -- Add optional `voteLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string wen +- 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 diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx index cd25008c..3e675186 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx +++ b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx @@ -35,7 +35,7 @@ export const TokenVotingCustomLabel: Story = { proposalTitle: 'Introduction of Layer 2 Scaling Solutions', voteIndicator: 'yes', date: 1613984914000, - voteLabel: 'Cutom label', + confirmationLabel: 'Cutom label', }, }; diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx index 0c15eda9..04bc722e 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx +++ b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.test.tsx @@ -39,9 +39,9 @@ describe(' component', () => { }); it('renders the custom label if available', () => { - const voteLabel = 'Custom label'; - render(createTestComponent({ voteLabel })); + const confirmationLabel = 'Custom label'; + render(createTestComponent({ confirmationLabel })); - expect(screen.getByText(voteLabel)).toBeInTheDocument(); + expect(screen.getByText(confirmationLabel)).toBeInTheDocument(); }); }); diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx index 86230890..098826bb 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx +++ b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.tsx @@ -23,11 +23,11 @@ export type IVoteProposalDataListItemStructureProps = IDataListItemProps & { /** * Custom label for the tag */ - voteLabel?: string; + confirmationLabel?: string; }; export const VoteProposalDataListItemStructure: React.FC = (props) => { - const { proposalTitle, proposalId, voteIndicator, date, voteLabel, className, ...otherProps } = props; + const { proposalTitle, proposalId, voteIndicator, date, confirmationLabel, className, ...otherProps } = props; const { copy } = useOdsModulesContext(); @@ -41,7 +41,7 @@ export const VoteProposalDataListItemStructure: React.FC{proposalTitle}
- {voteLabel ?? copy.voteProposalDataListItemStructure.voted} + {confirmationLabel ?? copy.voteProposalDataListItemStructure.voted} Date: Mon, 23 Sep 2024 10:23:49 +0100 Subject: [PATCH 7/7] chore: linting --- CHANGELOG.md | 4 ++-- .../voteProposalDataListItemStructure.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86238bca..b2ca61e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,8 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added -- Add optional `confirmationLabel` prop to the `VoteProposalDataListItem` component in order to pass a custom string when - needed. +- 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 diff --git a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx index 3e675186..34ede288 100644 --- a/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx +++ b/src/modules/components/vote/voteProposalDataListItem/voteProposalDataListItemStructure/voteProposalDataListItemStructure.stories.tsx @@ -35,7 +35,7 @@ export const TokenVotingCustomLabel: Story = { proposalTitle: 'Introduction of Layer 2 Scaling Solutions', voteIndicator: 'yes', date: 1613984914000, - confirmationLabel: 'Cutom label', + confirmationLabel: 'Custom label', }, };