super-infinity-modules are a npm package that provides various components with their own logic, style and purposes. The package was developed for Reykjavik University for the course T-427-WEPO Web Programming by authors Edda Steinunn Rúnarsdóttir, Darri
npm install super-infinity-modules``bash`
username$ npm install --save super-infinity-modules
`html`
* __isOpen__: Boolean. Specifies whether modal is open or not. This value defaults to false if this prop is not provided.
* __onClose__ (Required!): Function. Specifies which actions are taken when the modal closes.
In addition to this, the modal can contain the following children (all of which are optional):
* __Modal.Title__: JSX. The Modal title appearing at the top of the Modal screen.
* __Modal.Body__: JSX. The Modal body appearing in the middle of the Modal screen.
* __Modal.Footer__: JSX: The Modal footer appearing in the bottom left corner of the Modal.
#### Modal Example Usage:
The following shows a button that shows the Modal component. The modal component renders title, body and footer.
__JSX:__
`html
import { Modal } from 'super-infinity-modules';
Well hello, I am the modal body I don't need to be text, can also be html elements, look:
onClose={() => this.setState({showModule: false})}
>
`
__Result:__
#### the Progress Bar Striped and Animated Props
The following demonstrates how setting the striped prop to true for a progress bar changes it's appearance:
__Striped prop true__
__Striped prop false__
If animated, the stripes move forward infinitely and linearily. __NOTE HOWEVER__ that the animated props has no effect if the striped prop is set to false. The animation depends solely on the progress bar being striped.
#### the Progress Bar Progress Prop
The following demonstrates various percentages of progress for a progress bar:
The progress is the % of the progress bar width as whole.
#### the Progress Bar State Prop
As stated, the state prop changes progress bar colors. The following demonstrates how the state prop varies by which prop user gives it. In order of appearence: 'info', 'success', 'warning' and last 'danger.
#### ProgressBar Example Usage:
__JSX:__
`html
import { ProgressBar } from 'super-infinity-modules';
animated={true}
striped={true}
state='info'
/>
`
__Result:__
The NameCard component displays a name card for user given name, email, telephone and imageURL. It takes in as props (all of which are required):
* __name__(Required!): String. name of cardholder.
* __email__(Required!): String. email of cardholder.
* __telephone__(Required!): String. telephone of cardholder.
* __imageUrl__(Required!): String. URL for cardholder profile image to be displayed on card.
#### NameCard Example Usage:
__JSX:__
`html
import { NameCard } from 'super-infinity-modules';
email="ilovebananas@thebads.com"
telephone="+666-777-888"
imageUrl="https://yt3.ggpht.com/a-/AJLlDp0Fqzwoio4JgrqFLkb53ZumHHCfm5jYTuDTyw=s900-mo-c-c0xffffffff-rj-k-no"
/>
`
__Result:__
The Carousel component displays specified images in a slideshow that can be navigated. It's size can be manipulated. It takes in as props:
* __images__(Required!): Array of Strings. URL to images to be displayed in carousel.
* __size__: String, either 'small', 'medium' or 'large'. Determines the size of carousel. Defaults to medium if none is provided.
#### Carousel Navigation
The Carousel can be navigated either by the arrows the carousel provides or by the squares appearing at the bottom. These squares essentially correspond to image array indices. The following demonstrates both ways of navigating the carousel:
#### Carousel Example Usage:
__JSX:__
`html
import { Carousel } from 'super-infinity-modules';
size="small"
/>
`
__Result:__
The rows and col components correspond to a gridsystem very similar to the bootstrap grid system. The row component takes in col components and children and the col component takes in the following prop
* __size__(Required!) Number in the range of 0-12. An error is raised if number is invalid and not in the range. Corresponds to column size. 12 is a full row, 6 is a half-row, etc.
Rows can contain multiple columns. The following demonstrates a row with multiple columns of various sizes:
Rows' height are automatically adjusted by the Col height and corresponds to the Row's highest Col. The following demonstrates a row with multiple columns which vary in height:
#### Row and Col Example Usage:
__JSX:__
`html
import { Row, Col } from 'super-infinity-modules';
`
__Result:__
* __format__: Number, either 12 or 24. Determines whether time picker shows military time or 12H with AM/PM identifier. Defaults to 24 (military time).
* __onTimePick__ (Required!): Actions taken when user picks a time. Takes in time string as parameter.
The following shows a 24HRS format TimePicker to demonstrate how user can pick a time, both by using the arrow to increment his time and by clicking the time and using an input box to change it:
__Military Time TimePicker:__
__12H AM/PM TimePicker:__
#### TimePicker Usage:
__JSX:__
`html
import { TimePicker } from 'super-infinity-modules';
format={24}
/>
Time from timepicker: {this.state.time}
`
__Result:__
The following demonstrates the effect locale has on return type of DatePicker component string:
__Locale en-EN:__
__Locale ar-EG:-
__JSX:__
`html
import { DatePicker } from 'super-infinity-modules';
locale='en-EN'
/>
Date from datepicker: {this.state.date}
__Result:__
$3
The Tabs component is a way to display a selection menu in a very easy manner. It can be used to seperate different content into seperate panes, making only one tab visible at a time. The Tabs component takes in the following props:* __theme__: String, either 'light' or 'dark'. Denotes which theme the tab bar should conform to. Defaults to 'light' if none is provided.
* __layout__: String, either 'horizontal' or 'vertical'. Denotes which way the tabs should render.
* __onSelect__(Required!): Function. Specifies what should happen when tabs are clicked on.
* __currentSelectedTab__(Required!): Number. Specifies what tab is selected when the component renders.
The Tab component is a child of the Tabs component . A Tabs component can include any number of Tab components. The Tab component takes in the following props:
* __selectionKey__(Required!): Number. A unique key that differentiates one tab from another. Must be unique between tabs!
* __title__(Required!): String. The title of the tab. Is displayed in the tab header.
$3
The following demonstrates the differences of 'light' and 'dark' themes of Tabs component:
The following demonstrates a 'vertical' Tabs component:
$3
__JSX:__
`html
import { Tabs, Tab } from 'super-infinity-modules'; theme={'light'}
layout={'horizontal'}
onSelect={newTab => this.setState({currentSelectedTab: newTab})}
currentSelectedTab={1} >
Darri er
- 88% Coffee
- 11% Beard
- 1% Tattoos
Stulli
Stulli
Stulli
`__Result:__
$3
The CartoonNetworkSpinner component includes a spinner including your favorite characters from Cartoon Network. The component displays one character at a time, then spins in a washing machine effect before changing to the next character. The CartoonNetworkSpinner takes in the following props:
* __interval__: Number. Denotes number of seconds that the spinner should wait before changing displayed character. The value defaults to 3 if not provided.
$3
__JSX:__
`html
import { CartoonNetworkSpinner } from 'super-infinity-modules';
``__Result:__