WIP feat(APP-3508): Remove title and description props from ProposalVoting module component

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## Changed
+
+-   Remove `title` and `description` properties from `ProposalVoting` module component
+
 ## [1.0.52] - 2024-10-30
 
 ### Changed

src/modules/components/proposal/proposalVoting/proposalVoting.stories.tsx

@@ -108,9 +108,6 @@ const getMultisigSettings = (minApprovals: number) => [
  */
 export const MultiStage: Story = {
     args: {
-        title: 'Voting',
-        description:
-            'The proposal must pass all governance stages to be accepted and potential onchain actions to execute.',
         activeStage: '0',
         className: 'max-w-[560px]',
     },
@@ -183,8 +180,6 @@ export const MultiStage: Story = {
  */
 export const SingleStage: Story = {
     args: {
-        title: 'Voting',
-        description: 'The proposal must pass the voting to be accepted and potential onchain actions to execute.',
         className: 'max-w-[560px]',
     },
     render: (args) => {

src/modules/components/proposal/proposalVoting/proposalVotingContainer/proposalVotingContainer.stories.tsx

@@ -17,11 +17,6 @@ type Story = StoryObj<typeof ProposalVoting.Container>;
 /**
  * Default usage example of the ProposalVoting.Container component.
  */
-export const Default: Story = {
-    args: {
-        title: 'Proposal voting',
-        description: 'The proposal must pass the voting to be accepted and potential onchain actions to execute.',
-    },
-};
+export const Default: Story = {};
 
 export default meta;

src/modules/components/proposal/proposalVoting/proposalVotingContainer/proposalVotingContainer.test.tsx

@@ -6,22 +6,12 @@ import { type IProposalVotingContainerProps, ProposalVotingContainer } from './p
 describe('<ProposalVotingContainer /> component', () => {
     const createTestComponent = (props?: Partial<IProposalVotingContainerProps>) => {
         const completeProps: IProposalVotingContainerProps = {
-            title: '',
-            description: '',
             ...props,
         };
 
         return <ProposalVotingContainer {...completeProps} />;
     };
 
-    it('renders the proposal voting title and description', () => {
-        const title = 'Proposal voting';
-        const description = 'Description for the voting terminal';
-        render(createTestComponent({ title, description }));
-        expect(screen.getByRole('heading', { level: 2, name: title })).toBeInTheDocument();
-        expect(screen.getByText(description)).toBeInTheDocument();
-    });
-
     it('renders an accordion container when having more than one child', () => {
         const children = [
             <ProposalVotingStage key="0" status={ProposalVotingStatus.ACCEPTED} startDate={0} endDate={0} />,

src/modules/components/proposal/proposalVoting/proposalVotingContainer/proposalVotingContainer.tsx

@@ -1,34 +1,22 @@
 import classNames from 'classnames';
 import React, { Children, type ComponentProps } from 'react';
-import { Accordion, Card, Heading } from '../../../../../core';
+import { Accordion, Card } from '../../../../../core';
 
 export interface IProposalVotingContainerProps extends ComponentProps<'div'> {
-    /**
-     * Title displayed on top.
-     */
-    title: string;
-    /**
-     * Description of the proposal voting.
-     */
-    description: string;
     /**
      * Active stage that will be expanded by default for multi-stage proposals.
      */
     activeStage?: string;
 }
 
 export const ProposalVotingContainer: React.FC<IProposalVotingContainerProps> = (props) => {
-    const { title, description, className, children, activeStage, ...otherProps } = props;
+    const { className, children, activeStage, ...otherProps } = props;
 
     const processedChildren = Children.toArray(children);
     const isMultiStage = processedChildren.length > 1;
 
     return (
-        <Card className={classNames('flex flex-col overflow-hidden', className)} {...otherProps}>
-            <div className={classNames('flex flex-col gap-2 p-4 md:gap-3 md:p-6', { 'pb-2 md:pb-3': !isMultiStage })}>
-                <Heading size="h2">{title}</Heading>
-                <p className="text-base font-normal leading-normal text-neutral-500">{description}</p>
-            </div>
+        <Card className={classNames('flex w-full flex-col overflow-hidden', className)} {...otherProps}>
             {isMultiStage && (
                 <Accordion.Container isMulti={false} defaultValue={activeStage}>
                     {processedChildren.map((child, index) =>