team-carbon-ui v1.1.2

team-carbon-ui

A custom UI library built for modular usage of styling components in React app.

Install

npm install --save team-carbon-ui

#NOTE: Dependencies used: styled-components, classnames

Sample Deployment: https://sample-ui-deployment.vercel.app/

Usage

import React, { Component } from 'react'

import MyComponent from 'team-carbon-ui'
import 'team-carbon-ui/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Available Components

Main Button

When To Use

This button is used as the highlighted buttons on the landing page and is recommeded to use in that manner.

How To Use

<MainButton onClick = {() => alert('Nothing')}>Hi there!</MainButton>

Sample Implementation

-

Loading Spinner

When To Use

Spinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is doing something from behind.

How To Use

  <Spinner />

Sample Implementation

-

Display Card

When To Use

These kinds of cards are generally used to depict informations regarding to a peculiar matter in-short. Here, in the context of our web app, it's used to display the short format information regarding the fundraisers.

How To Use

<DisplayCard />

The above implementation will work since there are enough supplies for default parameters but the programmer using this library is advised to use their custom values.Like the one defined below

  <DisplayCard
   title = "Help Jasper Paul Rescue People Abandoned, Dying On The Streets. Support ‘The Second Chance’"
    imageURL = "https://kettocdn.gumlet.io/media/campaign/342000/342482/image/wid323b78c9f7e9daa2179f02aa6cfffc4dbfbafc29.jpg?w=300"
    achievedPercent = 110
    AuthorName = "Jasper Paul" 
    raisedValue= 123356
    lastDonation = 7
    daysLeft = 21
    supportersCount = 13997
    id/>

Sample Implementation

-

Pay Button

When To Use

Pay buttons are generally found oval shaped buttons that are used to initiate the payment process(basically accessing the payment gateway) within the website.

How To Use

<PayButton>Pay &#8377;XXXX</PayButton>

Sample Implementation

-

Proceed to Pay Button

When To Use

Similar to the above mentioned Pay Button but varies in size and padding to accomodate more texts.

How To Use

 <ProceedToPayButton>Proceed to Pay &#8377;XXXX</ProceedToPayButton>

Sample Implementation

-

Payment Success Animation

When To Use

After successful completion of a payment, the user has to be made aware that the payment procedures were accomplised successfully and therefore this anime does that job.

How To Use

 <PaymentSuccessAnime/>

Sample Implementation

-

Payment Failure Animation

When To Use

After incurring failure of a payment process, the user has to be made aware that the payment procedures weren't accomplised successfully and therefore this anime does that job.

How To Use

 <PaymentFailureAnime/>

Sample Implementation

-

Progress Bar

When To Use

Progress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the target value can be portrayed using Progress Bar.

How To Use

 <ProgressBar sliderColor = "#01bfbd" completed = {/*some numerical value out of 100 goes here*/} />

Sample Implementation

-

Progress Bar (Thin)

When To Use

Progress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the target value can be portrayed using Progress Bar. This UI component is very similar to the above one but the only diffeence is that it's relatively slimmer.

How To Use

 <ProgressBarThin sliderColor = "#01bfbd" completed = {/*some numerical value out of 100 goes here*/} />

Sample Implementation

-

Loading Spinner (Small)

When To Use

Spinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is doing something from behind. This is very similar to the spinner mentioned above in the same documentation but smaller in as the name suggests, the choice of sizes depends on many UI design factors.

How To Use

<SmallSpinner />

Sample Implementation

-

Sidebar

When To Use

Inorder to enlist many things categorically in a styled format and at the same time has some tasks to be persued on the remain area of the application when they are clicked, sidebar gets handy on such scenarios. Here in the context of the web application developed by our team, the sidebars were used mainly to list the different categories of fundraisers and list them when the buttons are clicked.

How To Use

  <SideBar>
    <SideBarItem children = {["Item1", "Item2", "Item3", "Item4"]} />
  </SideBar>

Passing an array of items directly to the component will easily render a Sidebar without much hassle and that makes code look more neat.

Sample Implementation

-

Modal Box

When To Use

Modal boxes are generally rendered for 2 cases, when the user has to be alerted with some sudden messages for their action or simplify the task or rendering a new page again. For example: Payments are mostly initiated from the gateway owners site but this can be simplified by taking the essential values for payment such as name, card number, cvv etc with the help of modal and then calling and redirecting to an api that tests the correctness of the entry and take adequate actions.

How To Use

    <ModalBox>
    <ModalBodyDiv>
    <CloseSpan/>
    <ModalHeader>Header Sec</ModalHeader>
      <ModalTextDiv>Something here</ModalTextDiv>
      <ModalButton>Nothing Happens</ModalButton>
    </ModalBodyDiv>
  </ModalBox>

Sample Implementation

-

License

MIT © kiranjolisa