ClassList component for the Max Design System
The Class List component displays a list of language classes offered at a Berlitz language center. Users can request more info about a class or register immediately by adding it to their shopping cart. Content editors can optionally provide promo messages to display below each session. If a session is sold out, the "Request Info" CTA is removed and the "Add to Cart" CTA is disabled.
yarn add @berlitz/class-list
| Prop | Type | Required | Default | Notes |
| --------------------- | ---------------- | -------- | ------- | ----------------------------------------------------------------------- |
| classData | Array of objects | X | | Class and session data to display |
| location | String | | | Location name to display to user (e.g. "New York City Language Center") |
| salesforceLocation | String | | | Location name as stored in Salesforce (e.g. "Rockefeller Center") |
| productId | String | | | Product ID for eCommerce |
| handleRequestInfo | Func | | | Function to execute when user requests info about a class |
| addToCartLink | Func | | | Function to execute when user wants to register for a class |
| requestInfoLabel | String | | | Label for CTA to request info about a class |
| addToCartLabel | String | | | Label for CTA to register for a class |
| soldOutLabel | String | | | Label for disabled CTA when a class is sold out |
| languageColLabel | String | X | | Label for language column header |
| levelColLabel | String | X | | Label for level column header |
| daysColLabel | String | X | | Label for days column header |
| classTimesColLabel | String | X | | Label for class times column header |
| sessionsColLabel | String | X | | Label for sessions column header |
``jsx``
import React from 'react'
import ClassList from '@berlitz/class-list'
const MyApp = () => (
location="New York City Language Center"
salesforceLocation="Rockefeller Center"
productId="289"
handleRequestInfo={handleRequestInfo}
addToCartLink={addToCartLink}
requestInfoLabel="Request Info"
addToCartLabel="Register"
soldOutLabel="Sold Out"
languageColLabel="Language"
levelColLabel="Level"
daysColLabel="Days"
classTimesColLabel="Class Times"
sessionsColLabel="Sessions"
/>
)