UPN Cards Library

This document provides guidelines and usage examples for the following components: Card, Button, and Badge.

Installation

You can install the upn-cards library via npm:

npm install upn-cards

or via yarn:

yarn add upn-cards

or via pnpm:

pnpm add upn-cards

Usage

Card Component Style Guide

This document provides guidelines and usage examples for the Card component.

Importing the Card Component

First, import the Card component into your React component:

import Card from './Card';

Props

The Card component accepts the following props:

Required Props

• None

Optional Props

• className: Additional class names for the card.

• variants: The variant of the card:

  • default
  • default-small
  • profile
  • profile-button
  • profile-secondary
  • price
  • list
  • avatar
  • avatar-row
  • avatar-col
  • avatar-meeting
  • avatar-profile

• imageProps: Object containing image-related properties:

  • src: The URL of the image to be displayed in the card.
  • alt: The alternative text for the image.
  • width: The width of the image.
  • height: The height of the image.
  • imgClassName: Additional class names for the image.
  • imgButtonText: Text for the button displayed over the image.
  • imgButtonVariant: Variant of the image button.

• badgeProps: Object containing badge-related properties:

  • badgeText: The text to be displayed in the badge.
  • badgeVariant: The variant of the badge.
  • badgeClassName: Additional class names for the badge.
  • badgeDate: The date to be displayed in the badge.
  • badgeDateClassName: Additional class names for the badge date.

• titleProps: Object containing title-related properties:

  • titleChildren: The title of the card.
  • titleClassName: Additional class names for the title.
  • subtitleChildren: The subtitle of the card.
  • subtitleClassName: Additional class names for the subtitle.

• ratingProps: Object containing rating-related properties:

  • ratingBadgeText: The text to be displayed in the rating badge.
  • ratingIcon: The icon to be displayed in the rating badge.

• descriptionProps: Object containing description-related properties:

  • descriptionChildren: The content to be displayed in the card description.
  • descriptionClassName: Additional class names for the description.

• footerButtonProps: Object containing footer button-related properties:

  • footerButtonText: Text for the footer button.
  • footerButtonClassName: Additional class names for the footer button.
  • footerButtonVariant: Variant of the footer button.
  • footerClassName: Additional class names for the footer.

• profileButtonProps: Object containing profile button-related properties:

  • profileButtonText: Text for the profile button.
  • profileButtonVariant: Variant of the profile button.

• secondaryButtonProps: Object containing secondary button-related properties:

  • profileSecBtnOneText: Text for the first secondary button.
  • profileSecBtnOneVariant: Variant of the first secondary button.
  • profileSecBtnTwoText: Text for the second secondary button.
  • profileSecBtnTwoVariant: Variant of the second secondary button.

• linkProps: Object containing link-related properties:

  • linkText: The text for the link.
  • linkUrl: The URL for the link.

• iconTextItems: Array of objects containing icon and text items:

  • id: Unique identifier for the item.
  • icon: The icon to be displayed.
  • text: The text to be displayed.

• profileIconTextItems: Array of objects containing profile icon and text items:

  • id: Unique identifier for the item.
  • icon: The icon to be displayed.
  • text: The text to be displayed.

• priceProps: Object containing price-related properties:

  • price: The price to be displayed.
  • priceButtonText: Text for the price button.
  • priceButtonVariant: Variant of the price button.
  • discountPercent: Discount percentage.
  • cartIcon: Icon to be displayed for the cart.

• listItems: Array of objects containing list items:

  • id: Unique identifier for the item.
  • title: The title of the list item.
  • description: The description of the list item.

• avatarProps: Object containing avatar-related properties:

  • avatarDate: The date to be displayed with the avatar.
  • avatarTime: The time to be displayed with the avatar.
  • avatarProfileItems: Array of objects containing avatar profile items: - id: Unique identifier for the item. - title: The title of the profile item. - description: The description of the profile item.

• favoriteIcon: Component to be used as the favorite icon.

• moreIcon: Component to be used as the more icon.

Usage Examples

<Card
  className="custom-card"
  variants="default-small"
  imageProps={{
    src: '/assets/image.jpg',
    alt: 'Image',
    width: '150',
    height: '150',
    imgClassName: 'custom-img',
  }}
  titleProps={{
    titleChildren: 'Card Title',
    titleClassName: 'custom-title',
    subtitleChildren: 'Card Subtitle',
    subtitleClassName: 'custom-subtitle',
  }}
  descriptionProps={{
    descriptionChildren: <p>This is the card description.</p>,
    descriptionClassName: 'custom-description',
  }}
  footerButtonProps={{
    footerButtonText: 'Read More',
    footerButtonClassName: 'custom-footer-button',
    footerButtonVariant: 'primary',
  }}
/>

Full Example

import React from 'react';
import Card from './Card';

const App = () => {
  return (
    <>
      <Card
        variants="default"
        imageProps={{
          src: '/assets/Man.svg',
          alt: 'Man',
          width: '300',
          height: '300',
        }}
        badgeProps={{
          badgeText: 'Lifestyle',
          badgeVariant: 'primary',
          badgeDate: 'Sep 05, 2021',
        }}
        titleProps={{
          titleChildren: '28 Health and Nutrition Tips That Are Actually Evidence Based',
        }}
        descriptionProps={{
          descriptionChildren:
            ' It’s easy to get confused when it comes to health and nutrition. Even qualified experts often seem to hold opposing opinions, which can make it difficult to figure out what you should actually be doing to optimize your health.',
        }}
        footerButtonProps={{
          footerButtonText: 'Read More',
        }}
        iconTextItems={[
          {
            id: 1,
            icon: Eye,
            text: '1.5K',
          },
          {
            id: 2,
            icon: Favorite,
            text: '10K',
          },
          {
            id: 3,
            icon: Send,
            text: 'Share',
          },
        ]}
      />
    </>
  );
};

export default App;

Button Component Style Guide

This document provides guidelines and usage examples for the Button component.

Importing the Button Component

First, import the Button component into your React component:

import Button from './Button';

Props

The Button component accepts the following props:

Required Props

• children: The content to be displayed inside the button.

Optional Props

• variant: The style variant of the badge. It can be one of default, primary, secondary or outlined.

• className: Additional class names for the badge.

• disabled: Boolean value indicating whether the button is disabled.

• loading: Boolean value indicating whether the button is in a loading state.

• ...props: Any additional props that can be applied to a standard HTML button element.

Usage Examples

<Button
  onClick={() => {
    console.log('Clicked');
  }}
>
  Click me
</Button>

Button with Different Variants

<Button variant="default">Default Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outlined">Outlined Button</Button>

Full Example

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button>Click me</Button>
      <Button variant="primary">Primary Button</Button>
      <Button variant="outlined">Outlined Button</Button>
    </div>
  );
};

export default App;

Badge Component Style Guide

This document provides guidelines and usage examples for the Badge component.

Importing the Badge Component

First, import the Badge component into your React component:

import Badge from './Badge';

Props

The Badge component accepts the following props:

Required Props

• children: The content to be displayed inside the button.

Optional Props

• variant: The style variant of the badge. It can be one of default, primary, secondary, or tertiary.

• className: Additional class names for the badge.

• ...props: Any additional props that can be applied to a standard HTML button element.

Usage Examples

<Badge>Small Badge</Badge>

Badge with Different Variants

<Badge variant="default">Default Badge</Badge>
<Badge variant="primary">Primary Badge</Badge>
<Badge variant="secondary">Secondary Badge</Badge>
<Badge variant="tertiary">Tertiary Badge</Badge>

Full Example

import React from 'react';
import Badge from './Badge';

const App = () => {
  return (
    <div>
      <h3>Badge Variants</h3>
      <Badge variant="default">Default Badge</Badge>
      <Badge variant="primary">Primary Badge</Badge>
      <Badge variant="secondary">Secondary Badge</Badge>
      <Badge variant="tertiary">Tertiary Badge</Badge>
    </div>
  );
};

export default App;