commons-shared-web-ui 0.0.55 → 0.0.57

package/documentation/cards-usage-guidelines.md

@@ -1,131 +0,0 @@
-# Cards Module Documentation
-
-The `CardsModule` provides reusable, configurable card components with multi-theme support.
-
-## Installation
-
-To install the latest version of the `commons-shared-web-ui` library, run the following command:
-
-```bash
-npm install commons-shared-web-ui@latest
-```
-
-Import the `CardsModule` in your application module:
-
-```typescript
-import { CardsModule } from "shared-ui";
-
-@NgModule({
-  imports: [
-    CardsModule,
-    // ...
-  ],
-})
-export class AppModule {}
-```
-
-## Styling & Theming
-
-The cards rely on global CSS variables. You can override these in your app's `styles.scss` or component styles.
-
-### Themes
-
-The module supports two built-in themes:
-
-- `theme-1`: Compact, native look (Matches strict design).
-- `theme-2`: Spacious, aesthetic look.
-
-Pass the theme name to the component input: `[theme]="'theme-2'"`.
-
-## Components
-
-### 1. Card Type 1 (Text Based)
-
-Ideal for displaying financial stats or summary data.
-
-**Selector**: `<lib-card-type-1>`
-
-**Inputs**:
-
-- `config`: `CardType1Config` (Includes `width`, `height`)
-- `theme`: `'theme-1' | 'theme-2'` (Default: `theme-1`)
-
-**Output**:
-
-- `cardClick`: Emits when card is clicked.
-
-**Usage Example**:
-
-```html
-<lib-card-type-1
-  [config]="grantConfig"
-  [theme]="'theme-1'"
-  (cardClick)="onCardClick()"
->
-</lib-card-type-1>
-```
-
-```typescript
-import { CardType1Config } from "shared-ui";
-
-grantConfig: CardType1Config = {
-  label: "TOTAL GRANT AMOUNT",
-  value: "₹ 25,00,000",
-  subtext: "Across 3 contracts",
-  width: "300px",
-  height: "150px",
-};
-
-receivedConfig: CardType1Config = {
-  label: "RECEIVED",
-  value: "₹ 18,00,000",
-  valueColor: "#00C853", // Custom color override
-  subtext: "74% Funded",
-};
-```
-
-### 2. Card Type 2 (Icon Based)
-
-Ideal for displaying metrics with an icon.
-
-**Selector**: `<lib-card-type-2>`
-
-**Inputs**:
-
-- `config`: `CardType2Config` (Includes `width`, `height`)
-- `theme`: `'theme-1' | 'theme-2'`
-
-```html
-<lib-card-type-2 [config]="beneficiaryConfig" theme="theme-2">
-</lib-card-type-2>
-```
-
-## Responsive Behavior
-
-Both card types are designed to be responsive.
-
-- The `width` and `height` properties in the `config` object accept any valid CSS unit (px, %, rem, vh, etc.).
-- Even when custom dimensions are provided, cards follow `max-width: 100%` to prevent overflow in smaller containers.
-- If no dimensions are provided, cards default to `100%` width and height, occupying the full area of their parent container.
-
-```typescript
-import { CardType2Config } from "shared-ui";
-
-beneficiaryConfig: CardType2Config = {
-  iconName: "card_membership",
-  iconBackgroundColor: "#FFF8E1",
-  iconColor: "#FF6F00",
-  label: "TOTAL BENEFICIARIES",
-  value: "45,000",
-  targetText: "Target",
-  width: "250px",
-  height: "120px",
-};
-
-// Example with Image Icon
-beneficiaryConfigWithImage: CardType2Config = {
-  iconUrl: "assets/images/custom-icon.png",
-  label: "TOTAL BENEFICIARIES",
-  value: "45,000",
-};
-```