Migrating Card Component

Overview

This guide explains how to migrate the Card component from GHL-UI to HighRise UI.

Component Changes

Import Changes

- import { UICard } from '@gohighlevel/ghl-ui'
+ import { HLCard } from '@platform-ui/highrise'

Basic Usage Changes

- <UICard>
+ <HLCard id="example-card">
    <p>Card content</p>
- </UICard>
+ </HLCard>

Props Changes

GHL-UI Prop	HighRise Prop	Notes
borderType	borderType	Now requires an id prop and has more specific types

Breaking Changes

1. The id prop is now required in HighRise
2. borderType values are more strictly typed as: 'info' | 'success' | 'warning' | 'error'

Slots Changes

The slots remain the same but with slightly different usage patterns:

• default: Main content is unchanged
• header: Header content is unchanged
• footer: Footer content is unchanged

Examples

Basic Card with Header and Footer

<!-- Before (GHL-UI) -->
<UICard>
  <template #header>
    <div class="flex items-center">
      <h3>Card Title</h3>
    </div>
  </template>
  
  <p>This is the main content of the card.</p>
  
  <template #footer>
    <div class="flex justify-end">
      <UIButton id="action-button">Action</UIButton>
    </div>
  </template>
</UICard>

<!-- After (HighRise) -->
<HLCard id="example-card">
  <template #header>
    <div class="flex items-center">
      <HLText size="md" weight="medium">Card Title</HLText>
    </div>
  </template>
  
  <p>This is the main content of the card.</p>
  
  <template #footer>
    <div class="flex justify-end">
      <HLButton id="action-button">Action</HLButton>
    </div>
  </template>
</HLCard>

Card with Icon and Border Type

<!-- Before (GHL-UI) -->
<UICard borderType="success">
  <template #header>
    <div class="flex items-center">
      <div class="w-10">
        <Gift01Icon class="w-8 h-8 text-primary-600" />
      </div>
      <div>
        <UITextLgMedium>Card Title</UITextLgMedium>
        <UITextSmNormal>Card subtitle</UITextSmNormal>
      </div>
    </div>
  </template>
  <p>Card content</p>
</UICard>

<!-- After (HighRise) -->
<HLCard id="example-card" borderType="success">
  <template #header>
    <div class="flex items-center p-4 gap-4">
      <HLIcon size="24">
        <Gift01Icon class="w-8 h-8 text-primary-600" />
      </HLIcon>
      <div>
        <HLText class="text-gray-900" size="2xl" weight="medium">Card Title</HLText>
        <HLText class="text-gray-500" size="sm" weight="regular">Card subtitle</HLText>
      </div>
    </div>
  </template>
  <p>Card content</p>
</HLCard>

CSS Changes

The CSS classes have been updated:

- .hl-card
+ .highrise-card

- .hl-card-header
+ .highrise-card-header

- .hl-card-content
+ .highrise-card-content

- .hl-card-footer
+ .highrise-card-footer

- .hl-success, .hl-info, .hl-error, .hl-warning
+ /* Border types are now handled internally */

Additional Notes

1. Always provide a unique id prop for each card in HighRise
2. Use HighRise's typography components (HLText) instead of the old UI text components
3. The padding and spacing in HighRise cards are pre-configured for optimal layout
4. Icon usage should now use the HLIcon component wrapper
5. Border types are more strictly typed and validated in HighRise