Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

feat(label): added label component to library #84

Merged
merged 3 commits into from
Nov 15, 2019
Merged

feat(label): added label component to library #84

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ddb776
feat(label): added label component to library
gqycloud Oct 30, 2019
0fc6d0a
feat: label to functional component w/ addition htmlfor prop
gqycloud Nov 12, 2019
c3b92f0
feat(labels): destructuring props assignment for labels
gqycloud Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions docs/Alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# `Alert` (component)

Alerts can provide contextual feedback messages for typical user actions
with the handful of available and flexible alert messages.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|closeLabel|`string`|-||Defines the label of the close button if the alert is dismissible. @default "Dismiss"|
|color|`'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'`|-||Defines the color of the alert. Defaults to primary. @default "primary"|
|dismissible|`boolean`|-||Defines if the alert should be dismissible. Defaults to false.|
|message|`ReactNode`|-||Defines the message of the alert.|
|title|`string`|-||Defines the title of the alert.|
Expand Down
8 changes: 8 additions & 0 deletions docs/Badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# `Badge` (component)

Badges can provide contextual clues to the user by differentiating color and styling
from the surrounding content.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|color|`'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'`|-||Defines the color of the badge. Defaults to primary.|
26 changes: 12 additions & 14 deletions docs/BarGraph.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
# `BarGraph` (component)

A customizable Bar Graph component built on chart.js

## Props

| property | propType | required | default | description |
| -------------- | ----------- | -------- | ------- | ---------------------------------------------------------------------- |
| datasets | `Dataset[]` | yes | | the datasets for the graph |
| height | `string` | - | | The height of the graph |
| horizontal | `boolean` | - | | Determines if the bar graph should be displayed in a horizontal manner |
| stacked | `boolean` | - | | Determines if the bar graph should be displayed as a stacked bar graph |
| title | `string` | - | | the title of the graph for the legend |
| titleFontColor | `string` | - | | the color for the title |
| titleFontSize | `number` | - | | the font size for the title |
| width | `string` | - | | The width of the graph |
| xAxes | `Axis[]` | yes | | the list of x axis information |
| yAxes | `Axis[]` | yes | | the list of y axis information |
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|datasets|`Dataset[]`|yes||the datasets for the graph|
|height|`string`|-||The height of the graph|
|horizontal|`boolean`|-||Determines if the bar graph should be displayed in a horizontal manner|
|stacked|`boolean`|-||Determines if the bar graph should be displayed as a stacked bar graph|
|title|`string`|-||the title of the graph for the legend|
|titleFontColor|`string`|-||the color for the title|
|titleFontSize|`number`|-||the font size for the title|
|width|`string`|-||The width of the graph|
|xAxes|`Axis[]`|yes||the list of x axis information|
|yAxes|`Axis[]`|yes||the list of y axis information|
14 changes: 14 additions & 0 deletions docs/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# `Button` (component)

Buttons are used to initiate an action.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|block|`boolean`|-||Determines whether or not the button should be a block button or not. By default false|
|color|`'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'`|-||Defines the button variant. By default is primary|
|disabled|`boolean`|-||Determines whether or not the button should be disabled or not. By default is false.|
|icon|`IconType`|-||The icon to display|
|iconLocation|`'left' | 'right'`|-||Determines whether or not the icon should display on the left side or right side of the button. By default is left|
|onClick|`(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void`|-||Handles the on click event for a button|
|outlined|`boolean`|-||Determines if the button should be outlined and not filled. By defaut is false|
|size|`'small' | 'large'`|-||Determines whether or not the button should be a small or large button. By default is undefined.|
14 changes: 14 additions & 0 deletions docs/Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# `Checkbox` (component)

Checkbox is used to mark if something is true or not. Often times is used in a group where
multiple things can be true at one time.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|disabled|`boolean`|-||Determines if the checkbox should be disabled or not. By default false|
|id|`string`|-||The id for the checkbox|
|inline|`boolean`|-||Determines if the checkbox should render inline or not. By default false.|
|label|`string`|yes||The label to render next to the checkbox|
|labelSide|`'right' | 'left'`|-|||
|name|`string`|-||Gives the checkbox a name|
|onChange|`(event: React.ChangeEvent<HTMLInputElement>) => void`|-||The onChange listener|
7 changes: 7 additions & 0 deletions docs/Icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# `Icon` (component)

Icons provide contextual clues to users to make it easier to recognize functionality
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|icon|`IconType`|yes||The type of icon to display|
7 changes: 7 additions & 0 deletions docs/Label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# `Label` (component)

Labels are used to display textnpm
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|text|`string`|yes||Text to display in label|
26 changes: 12 additions & 14 deletions docs/LineGraph.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
# `LineGraph` (component)

A customizable Line Graph component built on chart.js

## Props

| property | propType | required | default | description |
| -------------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------------------------- |
| datasets | `Dataset[]` | yes | | the datasets for the graph |
| fill | `boolean` | - | | Determines if the area under the line should be filled with the background color from the dataset |
| height | `string` | - | | The height of the graph |
| stacked | `boolean` | - | | Determines if the the Line Graphs should be displayed in a stacked manner |
| title | `string` | - | | the title of the graph for the legend |
| titleFontColor | `string` | - | | the color for the title |
| titleFontSize | `number` | - | | the font size for the title |
| width | `string` | - | | The width of the graph |
| xAxes | `Axis[]` | yes | | the list of x axis information |
| yAxes | `Axis[]` | yes | | the list of y axis information |
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|datasets|`Dataset[]`|yes||the datasets for the graph|
|fill|`boolean`|-||Determines if the area under the line should be filled with the background color from the dataset|
|height|`string`|-||The height of the graph|
|stacked|`boolean`|-||Determines if the the Line Graphs should be displayed in a stacked manner|
|title|`string`|-||the title of the graph for the legend|
|titleFontColor|`string`|-||the color for the title|
|titleFontSize|`number`|-||the font size for the title|
|width|`string`|-||The width of the graph|
|xAxes|`Axis[]`|yes||the list of x axis information|
|yAxes|`Axis[]`|yes||the list of y axis information|
22 changes: 22 additions & 0 deletions docs/Navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# `Navbar` (component)

Used to redirect users to the main topics.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|bg|`string`|-||Determines the navbar background color|
|brand|`Brand`|yes||Determines the hospital/clinic name to be shown at the navbar|
|buttonColor|`'primary'
| 'secondary'
| 'success'
| 'warning'
| 'danger'
| 'info'
| 'light'
| 'dark'`|-||Defines the button variant. By default is primary|
|navLinks|`NavLink[]`|yes||Determines the links names, theirs onClick methods and paths. It has children array which contain links to be used on a dropdown.|
|onSeachButtonClick|`(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void`|yes||Handles the on click search button event|
|onSearchTextBoxChange|`(
event: React.FormEvent<ReplaceProps<'input', BsPrefixProps<'input'> & FormControlProps>>,
) => void`|yes||Handles the on change search form event|
|variant|`'light' | 'dark'`|-||Determines the letters color. It should be combined with the background color (bg)|
20 changes: 9 additions & 11 deletions docs/PieGraph.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
# `PieGraph` (component)

A customizable Pie Graph component built on chart.js

## Props

| property | propType | required | default | description |
| -------------- | ----------- | -------- | ------- | --------------------------------------------------------------- |
| datasets | `Dataset[]` | yes | | the datasets for the graph |
| doughnut | `boolean` | - | | Determines if the pie graph should be displayed with a doughnut |
| height | `string` | - | | The height of the graph |
| title | `string` | - | | the title of the graph for the legend |
| titleFontColor | `string` | - | | the color for the title |
| titleFontSize | `number` | - | | the font size for the title |
| width | `string` | - | | The width of the graph |
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|datasets|`Dataset[]`|yes||the datasets for the graph|
|doughnut|`boolean`|-||Determines if the pie graph should be displayed with a doughnut|
|height|`string`|-||The height of the graph|
|title|`string`|-||the title of the graph for the legend|
|titleFontColor|`string`|-||the color for the title|
|titleFontSize|`number`|-||the font size for the title|
|width|`string`|-||The width of the graph|
8 changes: 8 additions & 0 deletions docs/Pill.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# `Pill` (component)

Pills can provide contextual clues to the user by differentiating color and styling
from the surrounding content.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|color|`'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'light' | 'dark'`|-||Defines the color of the pill. Defaults to primary.|
16 changes: 16 additions & 0 deletions docs/Radio.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# `Radio` (component)


## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|checked|`boolean`|-||When checked is true, the Radio button is selected.|
|disabled|`boolean`|-||When disabled, the Radio cannot be clicked or changed by the user. Default is false.|
|feedback|`string | ReactNode`|-||Message to display when the Radio is invalid.|
|id|`string`|-||Necessary to link the label with the input.|
|inline|`boolean`|-||When inline, Radio elements are stacked horizontally instead of vertically. Default is false.|
|isInvalid|`boolean`|-||Determines whether the Radio should be rendered as invalid or not. Default is false.|
|label|`string | ReactNode`|-||Label to display next to the Radio.|
|name|`string`|-||Name to group Radios together. Two Radios with the same name can't be checked at the same time.|
|onChange|`(event: React.ChangeEvent<HTMLInputElement>) => void`|-||Listener will be called when the Radio is checked.|
|value|`string`|-||Value associated with the Radio.|
12 changes: 12 additions & 0 deletions docs/Select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# `Select` (component)


## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|disabled|`boolean`|-||Determines whether the Select should be disabled. False by default.|
|isInvalid|`boolean`|-||Determines whether the Select should be invalid. False by default.|
|multiple|`boolean`|-||When multiple is true, the user can select multiple options. Otherwise, one option only. False by default.|
|onChange|`(event: React.FormEvent<FormControl & FormControlProps>) => void`|-||Handles the onChange event for the Select.|
|size|`'small' | 'large'`|-||Determines whether to render a small or large TextField. By default, it is undefined.|
|value|`string`|-||Selected value in the|
18 changes: 8 additions & 10 deletions docs/Spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
# `Spinner` (component)

A customizable spinner component. It's a wrapper component built upon react-spinners.

## Props

| property | propType | required | default | description |
| -------- | ------------------------------------------------------ | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| color | `string` | - | | Choose the spinner color. |
| loading | `boolean` | yes | | This prop tells Spinner when to show itself. It should be linked to something dynamic, like a property in the parent component's state. |
| margin | `string` | - | | Adds a margin to the Spinner component. |
| size | `number | [number, number]` | - | | Declares the size of the spinner. If you choose to declare it, in the following spinners it must be an array of two numbers (for width & height): BarLoader, FadeLoader, ScaleLoader |
| sizeUnit | `SpinnerSizeUnit | [SpinnerSizeUnit, SpinnerSizeUnit]` | - | | Declares the unit of measure for the previous size parameter. If you choose to declare it, in the following spinners it must be an array of two strings (respectively for width & height): BarLoader, FadeLoader, ScaleLoader |
| type | `SpinnerType` | yes | | The type of spinner to render |
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|color|`string`|-||Choose the spinner color.|
|loading|`boolean`|yes||This prop tells Spinner when to show itself. It should be linked to something dynamic, like a property in the parent component's state.|
|margin|`string`|-||Adds a margin to the Spinner component.|
|size|`number | [number, number]`|-||Declares the size of the spinner. If you choose to declare it, in the following spinners it must be an array of two numbers (for width & height): BarLoader, FadeLoader, ScaleLoader|
|sizeUnit|`SpinnerSizeUnit | [SpinnerSizeUnit, SpinnerSizeUnit]`|-||Declares the unit of measure for the previous size parameter. If you choose to declare it, in the following spinners it must be an array of two strings (respectively for width & height): BarLoader, FadeLoader, ScaleLoader|
|type|`SpinnerType`|yes||The type of spinner to render|
Expand Down
10 changes: 10 additions & 0 deletions docs/Switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# `Switch` (component)

Switches are used to choose if something is true or false
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|disabled|`boolean`|-||Determines if the switch should be disabled or not. By default false|
|id|`string`|yes||The id for the switch element|
|label|`string`|yes||The label to render next to the switch|
|onChange|`(event: React.ChangeEvent<HTMLInputElement>) => void`|-||The onChange listener|
13 changes: 13 additions & 0 deletions docs/TextField.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# `TextField` (component)

A customizable text field component. It's a wrapper component built upon react's form controls.
## Props
| property | propType | required | default | description |
|----------|----------|----------|---------|-------------|
|disabled|`boolean`|-||Determines whether the TextField should be disabled or not. By default, it is false.|
|isInvalid|`boolean`|-||Determines whether the TextField should be rendered as invalid or not. By default, it is false.|
|name|`string | ''`|-||The name of the text field|
|onChange|`(event: React.KeyboardEvent<HTMLTextAreaElement>) => void`|-||Handles the onChange event for the TextField|
|rows|`number`|-||The number of rows to render|
|size|`'small' | 'large'`|-||Determines whether to render a small or large TextField. By default, it is undefined.|
|value|`string | ''`|-||The value of the text field|
Loading