infinitymodules_snakarnir

Assignment V
The USA (Universal Style Assocation) needs your help! They feel like they are missing out (fomo..)
because of all the new styling libraries such as MaterialUI and ReactBootstrap. They want to
create a new styling library called InfinityModules. This module should work similarly as
MaterialUI or ReactBootstrap. Every styles should be implemented using CSS Modules. If the
component must use provided props for styling, the style props can be used. Let’s take a look at
what it should implement:
1. (10%) - Create a component called Modal which should be a floating dialog. This
component should receive as props:
I. isOpen - default false
II. onClose : func
(3) The modal should contain a title which should be rendered as the following:
My Modal Title
(4) The modal should contain a body which should be rendered as the following:
My Modal Body
(5) The modal should contain an optional footer which should be rendered as the
following:
My Modal Footer
2. (10%) - Create a component called ProgressBar which should display a progress bar.
This component should receive as props:
I. progress (0 - 100)
II. striped (true/false) - default false
III. animated (true/false) - default false
IV. state (info/success/warning/danger)
3. (10%) - Create a component called NameCard which should display a name card for a
person. This component should receive as props:
I. name
II. email
III. telephone
IV. imageUrl
4. (10%) - Create a component called Carousel which should be a basic image slider
with two arrows (left and right) to navigate between images. This component should
receive as props:
I. images (an array)
II. size (small, medium, large) - default medium
5. (10%) - Create a component called Row which should contain Col (see below) within.
This component should receive as props:
I. children (node)
6. (10%) - Create a component called Col which should reside within a Row (see above)
component. Each row should accept twelve , which results in a
fully stacked row. Two also results in a fully stacked row.
Whenever there is a combined size of more than twelve the column should jump to the
next line. This component should receive as props:
I. size - default 1
7. (10%) - Create a component called TimePicker which should be used to select time.
This must a visual component, where a user picks a time, similar to the Material-UI
Time Picker. This component should receive as props:
I. onTimePick : func
II. format (24/12) - determines the format either 24H or 12H (using AM/PM). It
should default to 24
8. (10%) - Create a component called DatePicker which should be used to select a date.
This must a visual component, where a user picks a date, similar to the Material-UI
Date Picker. This component should receive as props:
I. onDatePick : func,
II. locale : (en-EN, is-IS, de-DE, …, ko-KR) - determines what locale the date
string should be passed to onDatePick. It should default to is-IS.
9. (10%) - Create a component called Tabs which should serve as a container for tabs.
Within Tabs one to many Tab can reside. This should look and feel like switching
between tabs in the browser.
Tabs should receive as props:
I. theme (dark/light) - default light
II. layout (horizontal/vertical) - default horizontal
III. onSelect : func
IV. currentSelectedTab : number
Tab should receive as props:
V. selectionKey : number (this number should correspond to
currentSelectedTab in the Tabs component)
VI. title
10. (10%) - Create a component called CartoonNetworkSpinner which should be like a
washer which spins in an even interval (provided as props) and every time it spins it
should display a new image from any Cartoon Network characters you want. The
component should receive as props:
I. interval : number (representing seconds) - default 3
Submission
This package should be published using NPM (https://docs.npmjs.com/getting-started/
publishing-npm-packages) and the link to the NPM repository should be submitted in Canvas.
External libraries
No external libraries can be used for this assignment.
Other
Feel free to let your inner artist bloom. There will be a prize for the best looking styling library.
As usual we will be aware of other tools such as Material-UI, React-Bootstrap, Elemental etc…
If the code looks to similar to the code of the these libraries, the student/s will be brought in for
questioning and if the result will be negative from the questioning the assignment will receive a
grade of 0.