[CLIENT] [ACCESSIBLE-COMPONENT] Button Component - [Standard, Submit, Reset]

[SUVAJIT-KARMAKAR]

✨ FEATURE REPORT

Key	Description
Button Component	Create and develop the button accessible components

📌 DESCRIPTION

Your task is to focus in the accessible buttons - Standard, Submit, Reset. Create and develop them, make sure to follow the industry standard accessible protocals required for making the components accessible.

📂 FOLDER GUIDE

• Standard : src\lab\AccessibleButtons\Standard(folder) .

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Standard/
                ├── StandardButtonVariant.tsx
                ├── StandardButtonTags.ts
                ├── StandardButtonVariant.code.ts
                └── StandardButtonVariant.props.ts

• Submit : src\lab\AccessibleButtons\Submit (folder).

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Submit/
                ├── SubmitButtonVariant.tsx
                ├── SubmitButtonTags.ts
                ├── SubmitButtonVariant.code.ts
                └── SubmitButtonVariant.props.ts

• Reset : src\lab\AccessibleButtons\Reset(folder).

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Reset/
                ├── ResetButtonVariant.tsx
                ├── ResetButtonTags.ts
                ├── ResetButtonVariant.code.ts
                └── ResetButtonVariant.props.ts

🔗 ROUTING GUIDE

• Standard : src\app\button\standard\page.tsx.

'use client';

// Modules

const StandardAccessibleButtonVariantPage = () => {
  return (
    <div className="min-h-screen">
      <h1>Standard Variant!</h1>
    </div>
  );
};

export default StandardAccessibleButtonVariantPage;

• Submit : src\app\button\submit\page.tsx

'use client';

// Modules

const SubmitAccessibleButtonVariantPage = () => {
  return (
    <div className="min-h-screen">
      <h1>Submit Variant!</h1>
    </div>
  );
};

export default SubmitAccessibleButtonVariantPage;

• Reset : src\app\button\reset\page.tsx

'use client';

// Modules

const ResetAccessibleButtonVariantPage = () => {
  return (
    <div className="min-h-screen">
      <h1>Reset Variant!</h1>
    </div>
  );
};

export default ResetccessibleButtonVariantPage;

🤔 ACCEPTANCE CRITERIA

• Should not break the existing layout of the content.
• Should follow the designed convention folder-structure for developing the accessible components.
• Should follow the proper types and should be strict in nature.
• Should have proper naming conventions and provided.
• Should have individual test-coverages >80% or more.
• Should have overall test-coverage of >90%.

👤 ASSIGNEE

Member	GitHub Handle
Suvajit	@SUVAJIT-KARMAKAR

💻 GIT GUIDE

Branch	Commit type
page/accessible-component-Standard-button	page(accessible-component-Standard-button)
page/accessible-component-Submit-button	page(accessible-component-Submit-button)
page/accessible-component-Reset-button	page(accessible-component-Reset-button)

[SUVAJIT-KARMAKAR]

Picked up, working on the Standard button component !