feat(label): added label component to library

re HospitalRun#65
gqycloud · Oct 30, 2019 · 6ddb776 · 6ddb776
1 parent f4e6732
commit 6ddb776
Show file tree

Hide file tree

Showing 22 changed files with 259 additions and 50 deletions.
diff --git a/docs/Alert.md b/docs/Alert.md
@@ -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.|

diff --git a/docs/Badge.md b/docs/Badge.md
@@ -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.|
diff --git a/docs/BarGraph.md b/docs/BarGraph.md
@@ -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|
diff --git a/docs/Button.md b/docs/Button.md
@@ -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.|
diff --git a/docs/Checkbox.md b/docs/Checkbox.md
@@ -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|
diff --git a/docs/Icon.md b/docs/Icon.md
@@ -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|
diff --git a/docs/Label.md b/docs/Label.md
@@ -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|
diff --git a/docs/LineGraph.md b/docs/LineGraph.md
@@ -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|
diff --git a/docs/Navbar.md b/docs/Navbar.md
@@ -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)|
diff --git a/docs/PieGraph.md b/docs/PieGraph.md
@@ -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|
diff --git a/docs/Pill.md b/docs/Pill.md
@@ -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.|
diff --git a/docs/Radio.md b/docs/Radio.md
@@ -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.|
diff --git a/docs/Select.md b/docs/Select.md
@@ -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|
diff --git a/docs/Spinner.md b/docs/Spinner.md
@@ -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|

diff --git a/docs/Switch.md b/docs/Switch.md
@@ -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|
diff --git a/docs/TextField.md b/docs/TextField.md
@@ -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|