vslr-component-library

Library of UI components and other useful universal utilities for use in Vivint Solar frontend environments

Table of contents

• Install
• Usage
• Available Components
• Running the Project Locally

Install

npm install --save @vivintsolar/component-library

If you intend to use AboutSlider, BannerValueStack, or VideoWithCarousel, you'll also need the peer-dependency of slick-carousel:

npm install --save slick-carousel

Usage

import React from 'react'

import { Section, Text } from '@vivintsolar/component-library'
// Use Int Circular Pro 3 font and base styles
import '@vivintsolar/component-library/dist/index.css'

// slick-carousel needed for AboutSlider, BannerValueStack, and VideoWithCarousel
import 'slick-carousel/slick/slick.css'

const Example = () => {
  return (
    <Section>
      <Text kind='h2'>My Title Text</Text>
    </Section>
  )
}

Storybook

https://component-library.vivintsolar.com/

Available Components

A - F

• AboutSlider
• Achievements
• AssetDownloads
• BadgeVerification
• BannerValueStack
• BaseLink
• BioHero
• Button
• Chart
• CheckboxOptions
• CollapsibleCollection
• Copyright
• Disclaimer
• Dropdown
• DropdownMultiselect
• Footer
• Form

G - P

• Header
• Hero
• ImageBannerCta
• ImageBannerWithText
• Infographic
• Input
• Markdown
• PageIntro
• ParallaxHero
• PDFDownload
• ProductCards
• ProductSelector
• PromptModal

Q - Z

• RadioOptions
• Section
• SideBySide
• SideBySidePromotion
• SpecFaqTabs
• SpecSideBySide
• SolarPlanCards
• Testimonials
• Textarea
• TitleCopyCta
• TitleCta
• ValueProposition
• ValueStack
• VideoAndTitle
• VideoTestimonial
• VideoWithCarousel

Running the Project Locally

Start the package server

From the root directory:

  npm start

Start the example file

After starting the package server

cd example
npm start

Start the Storybook server

From the root directory

npm run storybook