@navinc/base-react-components/src/carousel-card.story.js

Nav's Pattern Library

import { CarouselCard } from './carousel-card.js'
import readme from './carousel.readme.md'
import { Button } from './button.js'
import { Header } from './header.js'
import { Fragment } from 'react'

export default {
  title: 'General/CarouselCard',
  component: CarouselCard,
  parameters: {
    readme: { content: readme },
  },
}
// TODO - update with actualy images
const welcomeSlides = [
  {
    content: () => (
      <img
        src="https://creditera-assets.s3.us-west-2.amazonaws.com/Onboarding_Carousel%3AImage+1.png"
        alt="carousel slide 1"
      />
    ),
    header: () => (
      <div>
        <Header size="sm">Business financing is complicated</Header>
        <Header size="md">We make it simple.</Header>
      </div>
    ),
    footer: () => <Button>Footer button</Button>,
  },
  {
    content: () => (
      <img
        src="https://creditera-assets.s3.us-west-2.amazonaws.com/Onboarding_Carousel%3AImage+2.png"
        alt="carousel slide 2"
      />
    ),
    header: () => (
      <div>
        <Header size="md">Get curated options for smarter decisions</Header>
        <Header size="sm">Share a few details to see your personalized options.</Header>
      </div>
    ),
    footer: () => <Button>Footer button</Button>,
  },
  {
    content: () => (
      <img
        src="https://creditera-assets.s3.us-west-2.amazonaws.com/Onboarding_Carousel%3AImage+3.png"
        alt="carousel slide 3"
      />
    ),
    header: () => (
      <div>
        <Header size="md">Know what you qualify for before you apply</Header>
        <Header size="sm">
          Reduce the pain in financing with streamlined applications, instant offers and approval rates that are 3.5X
          higher than industry averages. Let’s make it happen.
        </Header>
      </div>
    ),
    footer: () => <Button>Footer button</Button>,
  },
  {
    content: () => (
      <img
        src="https://creditera-assets.s3.us-west-2.amazonaws.com/Onboarding_Carousel%3AImage+4.png"
        alt="carousel slide 4"
      />
    ),
    header: () => (
      <div>
        <Header size="md">Compare personalized financing options</Header>
        <Header size="sm">
          Get a customized shortlist of your best options when Nav’s technology compares your business information to
          our network of 160+ partners’ requirements, rates, and terms.
        </Header>
      </div>
    ),
    footer: () => <Button>Footer button</Button>,
  },
  {
    content: () => (
      <img
        src="https://creditera-assets.s3.us-west-2.amazonaws.com/Onboarding_Carousel%3AImage+5.png"
        alt="carousel slide 5"
      />
    ),
    header: () => (
      <div>
        <Header size="md">Stay aware of your business credit score</Header>
        <Header size="sm">
          Better business credit scores open the door to better options for your business — and it all starts with our
          business credit-boosting plan.
        </Header>
      </div>
    ),
    footer: () => <Button>Footer button</Button>,
  },
]

export const BasicCarouselCard = (args) => {
  return (
    <CarouselCard {...args}>
      {welcomeSlides.map((slide, idx) => (
        <Fragment key={idx}>{slide.content()}</Fragment>
      ))}
    </CarouselCard>
  )
}

BasicCarouselCard.argTypes = {
  carouselProps: {
    infinite: {
      control: { type: 'boolean' },
    },
  },
}

BasicCarouselCard.args = {
  carouselProps: {
    infinite: true,
  },
  renderFooter: ({ index }) => <>{welcomeSlides[index].footer()}</>,
  renderHeader: ({ index }) => <>{welcomeSlides[index].header()}</>,
}