[CLIENT] [ACCESSIBLE-COMPONENT] Button Component - [Toggle/Loading/Link]

[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 - Toggle, Loading, Link. Create and develop them, make sure to follow the industry standard accessible protocals required for making the components accessible.

📂 FOLDER GUIDE

• Toggle : src\lab\AccessibleButtons\Toogle (folder) .

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Toggle/
                ├── ToggleButtonVariant.tsx
                ├── ToggleButtonTags.ts
                ├── ToggleButtonVariant.code.ts
                └── ToggleButtonVariant.props.ts

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

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Loading/
                ├── LoadingButtonVariant.tsx
                ├── LoadingButtonTags.ts
                ├── LoadingButtonVariant.code.ts
                └── LoadingButtonVariant.props.ts

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

.
└── src/
    └── lab/
        └── AccessibleButtons/
            └── Link/
                ├── LinkButtonVariant.tsx
                ├── LinkButtonTags.ts
                ├── LinkButtonVariant.code.ts
                └── LinkButtonVariant.props.ts

🔗 ROUTING GUIDE

• Toggle : src\app\button\toggle\page.tsx.

'use client';

// Modules

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

export default ToogleAccessibleButtonVariantPage;

• Loading : src\app\button\loading\page.tsx

'use client';

// Modules

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

export default LoadingAccessibleButtonVariantPage;

• Link : src\app\button\link\page.tsx

'use client';

// Modules

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

export default LinkAccessibleButtonVariantPage;

🤔 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
Subhajit	@codeSubhajit0

💻 GIT GUIDE

Branch	Commit type
page/accessible-component-Toogle-button	page(accessible-component-Toggle-button)
page/accessible-component-Loading-button	page(accessible-component-Loading-button)
page/accessible-component-Link-button	page(accessible-component-Link-button)