A custom UI library built for modular usage of styling components in React app.
npm install --save team-carbon-ui[#NOTE: Dependencies used: styled-components, classnames]
Sample Deployment: https://sample-ui-deployment.vercel.app/
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 />
}
}This button is used as the highlighted buttons on the landing page and is recommeded to use in that manner.
<MainButton onClick = {() => alert('Nothing')}>Hi there!</MainButton>-
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.
<Spinner />-
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.
<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/>-
Pay buttons are generally found oval shaped buttons that are used to initiate the payment process(basically accessing the payment gateway) within the website.
<PayButton>Pay ₹XXXX</PayButton>-
Similar to the above mentioned Pay Button but varies in size and padding to accomodate more texts.
<ProceedToPayButton>Proceed to Pay ₹XXXX</ProceedToPayButton>-
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.
<PaymentSuccessAnime/>-
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.
<PaymentFailureAnime/>-
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.
<ProgressBar sliderColor = "#01bfbd" completed = {/*some numerical value out of 100 goes here*/} />-
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.
<ProgressBarThin sliderColor = "#01bfbd" completed = {/*some numerical value out of 100 goes here*/} />-
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.
<SmallSpinner />-
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.
<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.
-
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.
<ModalBox>
<ModalBodyDiv>
<CloseSpan/>
<ModalHeader>Header Sec</ModalHeader>
<ModalTextDiv>Something here</ModalTextDiv>
<ModalButton>Nothing Happens</ModalButton>
</ModalBodyDiv>
</ModalBox>-
These buttons are very similar to the above mentioned buttons, the only difference is in their implementation.
<Button type = "secondary" onClick= {()=> {alert('user has clicked secondary button now')}}>Secondary</Button>
<Button type = "primary" onClick= {()=> {alert('user has clicked primary button now')}} >Primary</Button>-
-
MIT © kiranjolisa