Card Component

The Card component in goobs-frontend is a versatile container for displaying content and actions in a single topic. It supports various layouts and can be used to present different types of information, such as product details, pricing summaries, or general content.

Importing the Component

To use the Card component in your project, import it from the goobs-frontend package:

import { Card } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the Card component:

import React from 'react';
import { Card } from 'goobs-frontend';

const CardExample: React.FC = () => {
  return (
    <Card
      variant="default"
      title="Example Card"
      body="This is the content of the card."
      width="300px"
    />
  );
};

export default CardExample;

Props

The Card component accepts the following props:

• variant: 'default' | 'inventory' | 'pricingsummary' | 'detailedpricingsummary' | 'product' | 'productsummary' - The type of card to render.
• title: string - The title of the card.
• titleUnderline: boolean - Whether to show an underline for the title.
• body: string - The main content text of the card.
• image: string - URL or path of the image to display.
• imagePosition: 'top' | 'left' - Position of the image in the card.
• parentText: string - Text for the parent breadcrumb.
• parentLink: string - Link for the parent breadcrumb.
• childText: string - Text for the child breadcrumb.
• childLink: string - Link for the child breadcrumb.
• grandchildLink: string - Link for the grandchild breadcrumb.
• favoriteEnabled: boolean - Whether to enable the favorite feature.
• breadcrumbEnabled: boolean - Whether to show breadcrumbs.
• linkEnabled: boolean - Whether to enable links.
• width: string - Width of the card.
• height: string | number - Height of the card.
• stepperEnabled: boolean - Whether to show a stepper.
• stepperActiveStep: number - Active step in the stepper.
• stepperSteps: CustomStepperProps['steps'] - Steps configuration for the stepper.

Additional props are available for specific card variants:

Pricing Summary Props

• pricingSummaryProps: object
  • subtotal: string - Subtotal amount.
  • total: string - Total amount.
  • proceedText: string - Text for the proceed button.
  • taxText: string - Text explaining tax information.
  • discountText: string - Text explaining discount information.
  • onProceed: () => void - Callback function for proceed button.

Detailed Pricing Summary Props

• detailedPricingSummaryProps: object
  • product: string - Product description.
  • vendor: string - Vendor name.
  • vendorPrice: string - Price from the vendor.
  • subtotal: string - Subtotal amount.
  • vat: string - VAT amount.
  • total: string - Total amount.
  • proceedText: string - Text for the proceed button.
  • onProceed: () => void - Callback function for proceed button.

Inventory Props

• inventoryProps: object
  • license: string - License information.
  • developmentUse: string - Development use information.
  • productionUse: string - Production use information.
  • updates: string - Update information.
  • support: string - Support information.
  • price: string - Price of the item.
  • quantity: number - Quantity of the item.
  • onRemove: () => void - Callback function for removing the item.

Product Props

• productProps: object
  • title: string - Product title.
  • description: string - Product description.
  • image: string - Product image URL.
  • price: string - Product price.
  • onBuy: () => void - Callback function for buy action.
  • favoriteEnabled: boolean - Whether to enable favorite feature.
  • linkEnabled: boolean - Whether to enable links.
  • grandchildLink: string - Link for grandchild.
  • numDevelopers: number - Number of developers.
  • onAddDeveloper: () => void - Callback for adding a developer.
  • licenses: number - Number of licenses.
  • unitPrice: number - Unit price of the product.
  • total: number - Total price.
  • rating: number - Product rating.
  • numReviews: number - Number of reviews.
  • releaseDate: string - Release date of the product.
  • category: string - Product category.
  • onContact: () => void - Callback for contact action.
  • createdBy: string - Creator of the product.
  • featuredescriptions: string[] - Array of feature descriptions.

Product Summary Props

• productSummaryProps: object
  • annualPrice: string - Annual price of the product.
  • monthlyPrice: string - Monthly price of the product.
  • button1Props: CustomButtonProps - Props for the first button.
  • button2Props: CustomButtonProps - Props for the second button.

Variants

The Card component supports several variants, each with its own layout and purpose:

Default Variant

The default variant is a general-purpose card that can display a title, body content, image, and optional breadcrumbs and favorite icon.

import React from 'react';
import { Card } from 'goobs-frontend';

const DefaultCardExample: React.FC = () => {
  return (
    <Card
      variant="default"
      title="Default Card"
      body="This is a default card with various options."
      image="/path/to/image.jpg"
      imagePosition="top"
      favoriteEnabled={true}
      breadcrumbEnabled={true}
      linkEnabled={true}
      parentText="Home"
      parentLink="/"
      childText="Cards"
      childLink="/cards"
      grandchildLink="/cards/default"
      width="300px"
    />
  );
};

export default DefaultCardExample;

Inventory Variant

The inventory variant is designed to display information about inventory items, including license details, usage information, and pricing.

import React from 'react';
import { Card } from 'goobs-frontend';

const InventoryCardExample: React.FC = () => {
  return (
    <Card
      variant="inventory"
      title="Product License"
      image="/path/to/product-image.jpg"
      width="400px"
      inventoryProps={{
        license: "Enterprise",
        developmentUse: "Unlimited",
        productionUse: "Unlimited",
        updates: "1 Year",
        support: "24/7 Premium",
        price: "$999",
        quantity: 1,
        onRemove: () => console.log("Remove item")
      }}
    />
  );
};

export default InventoryCardExample;

Pricing Summary Variant

The pricing summary variant provides a concise overview of pricing information, including subtotal, total, and action buttons.

import React from 'react';
import { Card } from 'goobs-frontend';

const PricingSummaryCardExample: React.FC = () => {
  return (
    <Card
      variant="pricingsummary"
      width="300px"
      pricingSummaryProps={{
        subtotal: "USD 180.00",
        total: "USD 180.00",
        proceedText: "Proceed to checkout",
        taxText: "Taxes may apply before placing an order.",
        discountText: "Coupons and discounts will apply on the next step.",
        onProceed: () => console.log("Proceed to checkout")
      }}
    />
  );
};

export default PricingSummaryCardExample;

Detailed Pricing Summary Variant

The detailed pricing summary variant offers a more comprehensive breakdown of pricing, including vendor information and VAT.

import React from 'react';
import { Card } from 'goobs-frontend';

const DetailedPricingSummaryCardExample: React.FC = () => {
  return (
    <Card
      variant="detailedpricingsummary"
      width="350px"
      detailedPricingSummaryProps={{
        product: "Premium Package × 1",
        vendor: "Tech Solutions Inc.",
        vendorPrice: "$200.00",
        subtotal: "$200.00",
        vat: "$20.00",
        total: "$220.00",
        proceedText: "Complete Purchase",
        onProceed: () => console.log("Complete purchase")
      }}
    />
  );
};

export default DetailedPricingSummaryCardExample;

Product Variant

The product variant is tailored for displaying detailed product information, including pricing, features, and action buttons.

import React from 'react';
import { Card } from 'goobs-frontend';

const ProductCardExample: React.FC = () => {
  return (
    <Card
      variant="product"
      width="400px"
      productProps={{
        title: "Premium Software Suite",
        description: "All-in-one solution for your business needs",
        image: "/path/to/product-image.jpg",
        price: "$499.99",
        onBuy: () => console.log("Buy product"),
        favoriteEnabled: true,
        linkEnabled: true,
        grandchildLink: "/products/premium-suite",
        numDevelopers: 5,
        onAddDeveloper: () => console.log("Add developer"),
        licenses: 10,
        unitPrice: 49.99,
        total: 499.99,
        rating: 4.5,
        numReviews: 128,
        releaseDate: "2023-01-15",
        category: "Business Software",
        onContact: () => console.log("Contact support"),
        createdBy: "Tech Innovations Ltd.",
        featuredescriptions: [
          "Cloud-based solution",
          "24/7 customer support",
          "Regular updates",
          "Custom integrations"
        ]
      }}
    />
  );
};

export default ProductCardExample;

Product Summary Variant

The product summary variant provides a compact overview of a product, including pricing options and action buttons.

import React from 'react';
import { Card } from 'goobs-frontend';

const ProductSummaryCardExample: React.FC = () => {
  return (
    <Card
      variant="productsummary"
      title="Basic Plan"
      body="Perfect for small teams and startups"
      width="300px"
      productSummaryProps={{
        annualPrice: "$99/year",
        monthlyPrice: "$9.99/month",
        button1Props: {
          text: "Start Free Trial",
          variant: "contained",
          onClick: () => console.log("Start free trial")
        },
        button2Props: {
          text: "Learn More",
          variant: "outlined",
          onClick: () => console.log("Learn more")
        }
      }}
    />
  );
};

export default ProductSummaryCardExample;

Styling

The Card component uses Material-UI's styling system, allowing you to customize its appearance using the sx prop or styled-components. Here's an example of custom styling:

import React from 'react';
import { Card } from 'goobs-frontend';

const StyledCardExample: React.FC = () => {
  return (
    <Card
      variant="default"
      title="Styled Card"
      body="This card has custom styling applied."
      width="300px"
      sx={{
        backgroundColor: '#f0f0f0',
        border: '2px solid #3f51b5',
        borderRadius: '16px',
        '& .MuiTypography-root': {
          color: '#3f51b5',
        },
      }}
    />
  );
};

export default StyledCardExample;

Accessibility

The Card component is built with accessibility in mind, using semantic HTML elements and ARIA attributes where appropriate. However, it's important to ensure that the content you place within the card is also accessible, such as providing alt text for images and using clear, descriptive text.

Best Practices

1. Choose the appropriate card variant based on the content you want to display.
2. Use consistent card styles throughout your application for a cohesive user experience.
3. Provide clear and concise content within cards to avoid overwhelming users.
4. Use images judiciously to enhance the card's content without cluttering the interface.
5. Ensure that interactive elements within cards (such as buttons or links) have sufficient hit areas for easy interaction.
6. Consider the card's width and height carefully to fit well within your layout and respond appropriately on different screen sizes.
7. Use the favoriteEnabled and breadcrumbEnabled features when they provide value to the user and fit within your application's navigation structure.

By following these guidelines and leveraging the various props and variants available, you can create informative and visually appealing cards that enhance the user experience in your goobs-frontend projects.