diff --git a/README.md b/README.md index 6f9aee13..94bf88e7 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![NPM Version](https://badgen.net/npm/v/@hospitalrun/components)](https://www.npmjs.com/package/@hospitalrun/components) [![Build Status](https://travis-ci.com/HospitalRun/components.svg?branch=master)](https://travis-ci.com/HospitalRun/components) [![Build Status](https://dev.azure.com/HospitalRun/components/_apis/build/status/HospitalRun.components?branchName=master)](https://dev.azure.com/HospitalRun/components/_build?definitionId=1) [![GitHub CI](https://github.com/HospitalRun/components/workflows/GitHub%20CI/badge.svg)](https://github.com/HospitalRun/components/actions) [![Coverage Status](https://coveralls.io/repos/github/HospitalRun/components/badge.svg?branch=master)](https://coveralls.io/github/HospitalRun/components?branch=master) [![Bundlephobia](https://badgen.net/bundlephobia/min/@hospitalrun/components)](https://bundlephobia.com/result?p=@hospitalrun/components) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FHospitalRun%2Fcomponents.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FHospitalRun%2Fcomponents?ref=badge_shield) -![dependabot](https://api.dependabot.com/badges/status?host=github&repo=HospitalRun/components) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) +![dependabot](https://api.dependabot.com/badges/status?host=github&repo=HospitalRun/components) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Slack](https://hospitalrun-slackin.herokuapp.com/badge.svg)](https://hospitalrun-slackin.herokuapp.com) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/hospitalrun) [![Netlify Status](https://api.netlify.com/api/v1/badges/70c843de-c1b2-4e7d-abb5-61939f21f8cb/deploy-status)](https://app.netlify.com/sites/hospitalrun/deploys) diff --git a/docs/Alert.md b/docs/Alert.md new file mode 100644 index 00000000..d803dd16 --- /dev/null +++ b/docs/Alert.md @@ -0,0 +1,14 @@ +# `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 new file mode 100644 index 00000000..53c44356 --- /dev/null +++ b/docs/Badge.md @@ -0,0 +1,10 @@ +# `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/Button.md b/docs/Button.md new file mode 100644 index 00000000..22984cdc --- /dev/null +++ b/docs/Button.md @@ -0,0 +1,16 @@ +# `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) => 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 new file mode 100644 index 00000000..45fce5f6 --- /dev/null +++ b/docs/Checkbox.md @@ -0,0 +1,16 @@ +# `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) => void` | - | | The onChange listener | diff --git a/docs/Icon.md b/docs/Icon.md new file mode 100644 index 00000000..a1f67380 --- /dev/null +++ b/docs/Icon.md @@ -0,0 +1,9 @@ +# `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 new file mode 100644 index 00000000..9349f151 --- /dev/null +++ b/docs/Label.md @@ -0,0 +1,10 @@ +# `Label` (component) + +Labels are used to display textnpm + +## Props + +| property | propType | required | default | description | +| -------- | ------------- | -------- | ------- | ------------------------ | +| htmlFor | `string | ''` | - | | Ties labels to input | +| text | `string` | yes | | Text to display in label | diff --git a/docs/Navbar.md b/docs/Navbar.md new file mode 100644 index 00000000..b11e426b --- /dev/null +++ b/docs/Navbar.md @@ -0,0 +1,21 @@ +# `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) => void`|yes||Handles the on click search button event| |onSearchTextBoxChange|`( +event: React.FormEvent & 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/Pill.md b/docs/Pill.md new file mode 100644 index 00000000..2ea78de7 --- /dev/null +++ b/docs/Pill.md @@ -0,0 +1,10 @@ +# `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 new file mode 100644 index 00000000..5dd2ea5e --- /dev/null +++ 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) => 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 new file mode 100644 index 00000000..14b51c3c --- /dev/null +++ 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) => 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/Switch.md b/docs/Switch.md new file mode 100644 index 00000000..4c780b14 --- /dev/null +++ b/docs/Switch.md @@ -0,0 +1,12 @@ +# `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) => void` | - | | The onChange listener | diff --git a/docs/TextField.md b/docs/TextField.md new file mode 100644 index 00000000..0d89ca27 --- /dev/null +++ b/docs/TextField.md @@ -0,0 +1,15 @@ +# `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) => 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 | diff --git a/docs/TextInput.md b/docs/TextInput.md new file mode 100644 index 00000000..d65fee18 --- /dev/null +++ b/docs/TextInput.md @@ -0,0 +1,18 @@ +# `TextInput` (component) + +A flexible text input as a wrapper around the React Bootstrap Form Control. + +## Props + +| property | propType | required | default | description | +| ----------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------------------- | +| disabled | `boolean` | - | | Defines whether the input should be disabled or not. Defaults to false. | +| id | `string | ''` | - | | The id value of the input | +| isInvalid | `boolean` | - | | Defines whether the input should display as invalid. Defaults to false. | +| isValid | `boolean` | - | | Defines whether the input should display as valid. Defaults to false | +| name | `string | ''` | - | | The name of the input | +| onChange | `(e: React.FormEvent
) => void` | - | | Handles the onChange event for the input | +| placeholder | `string | ''` | - | | | +| size | `'sm' | 'lg'` | - | | Defines the size of the input. Defaults to 'lg' | +| type | `'text' | 'number' | 'email'` | - | | Defines the type of the input. Defaults to 'text' if not specified. | +| value | `string | ''` | - | | The value of the input | diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx new file mode 100644 index 00000000..5fc75320 --- /dev/null +++ b/src/components/Label/Label.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import FormLabel from 'react-bootstrap/FormLabel' + +interface Props { + /** Text to display in label */ + text: string + /** Ties labels to input */ + htmlFor?: string | '' +} + +/** + * Labels are used to display textnpm + */ +const Label = (props: Props) => { + const { htmlFor, text } = props + return {text} +} + +export { Label } diff --git a/src/components/Label/index.tsx b/src/components/Label/index.tsx new file mode 100644 index 00000000..e7141a8e --- /dev/null +++ b/src/components/Label/index.tsx @@ -0,0 +1 @@ +export * from './Label' diff --git a/stories/label.stories.tsx b/stories/label.stories.tsx new file mode 100644 index 00000000..8236f504 --- /dev/null +++ b/stories/label.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { storiesOf } from '@storybook/react' + +import { Label } from '../src/components/Label' +import { TextInput } from '../src/components/TextInput' + +storiesOf('Label', module) + .addParameters({ + info: { + inline: true, + }, + }) + .addDecorator(storyFn => ( +
+ {storyFn()} +
+ )) + .add('Label', () => ( + + + )) diff --git a/test/badge.test.tsx b/test/badge.test.tsx index d4569af8..759f319e 100644 --- a/test/badge.test.tsx +++ b/test/badge.test.tsx @@ -21,7 +21,7 @@ describe('Badge', () => { expect(bootstrapBadge.props().variant).toEqual('secondary') }) - it('Badge can redner children elements', () => { + it('Badge can render children elements', () => { const badgeWrapper = shallow(Hello World) const bootstrapBadge = badgeWrapper.find(BootstrapBadge) expect(bootstrapBadge.text()).toEqual('Hello World') diff --git a/test/label.test.tsx b/test/label.test.tsx new file mode 100644 index 00000000..67401140 --- /dev/null +++ b/test/label.test.tsx @@ -0,0 +1,23 @@ +import * as React from 'react' +import { shallow } from 'enzyme' +import { Label } from '../src/components/Label' +import { FormLabel } from 'react-bootstrap' + +describe('Label', () => { + it('Label renders itself without crashing', () => { + const labelWrapper = shallow(