-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from edx/fsheets/readme
README creation for Paragon components
- Loading branch information
Showing
7 changed files
with
119 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# Button | ||
|
||
Provides a button component that can be customized and handle multiple event handlers such as `onBlur`, `onClick`, and `onKeyDown`. | ||
|
||
## API | ||
|
||
### `buttonType` (string; optional) | ||
`buttonType` is used to determine the type of button to be rendered. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. | ||
|
||
### `className` (string array; optional) | ||
`className` specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array. | ||
|
||
### `display` (string; required) | ||
`display` specifies the text that is displayed within the button. | ||
|
||
### `inputRef` (function; optional) | ||
`inputRef` is a function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. | ||
|
||
### `isClose` (boolean; optional) | ||
`isClose` is used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing). The default is false. | ||
|
||
### `onBlur` (function; optional) | ||
`onBlur` is a function that would specify what the button should do when the `onBlur` event is triggered. For example, the button could change in color or `buttonType` when focus is changed. The default is an empty function. | ||
|
||
### `onClick` (function; optional) | ||
`onClick` is a function that would specify what the button should do when the `onClick` event is triggered. For example, the button could launch a `Modal`. The default is an empty function. | ||
|
||
### `onKeyDown` (function; optional) | ||
`onKeyDown` is a function that would specify what the button should do when the `onKeyDown` event is triggered. For example, this could handle using the `Escape` key to trigger the button's action. The default is an empty function. | ||
|
||
### `type` (string; optional) | ||
`type` is used to set the `type` attribute on the `button` tag. The default type is `button`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
# CssJail | ||
|
||
Provides the wrapper for CSS rules of all children components. | ||
|
||
## API | ||
|
||
### `children` (element array; required) | ||
`children` specifies the list of elements that will be displayed within the `CssJail` wrapper. Children should not be passed as Props, but should instead be nested between the opening and closing `<CssJail> </CssJail>` tags. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# Dropdown | ||
|
||
Provides a dropdown component that will maintain focus and keyboard navigation on an array of `menuItems` that is passed in. | ||
|
||
## API | ||
|
||
### `buttonType` (string; optional) | ||
`buttonType` is used to determine the type of button to be rendered. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. The default is `buttonType="light"`. | ||
|
||
### `menuItems` (shape array; required) | ||
`menuItems` specifies the list of items that will be rendered within the dropdown for selection. It takes in the type `shape` that appears a Javascript object containing the menu item `label` and the `href` properties as strings. | ||
|
||
### `title` (string; required) | ||
`title` specifies the text that is displayed within the original dropdown button. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# InputSelect | ||
|
||
Provides an selector component called InputSelect that allows for various selection options including separate option groups and including extra validation. | ||
|
||
## API | ||
|
||
### `inputProps` (view asInput component for details) | ||
`inputProps` specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component. | ||
|
||
### `options` (string array or object array; required) | ||
`options` specifies the list of options that the component will allow users to select from. This can be a simple array of strings, listing their options. It can also be an array containing more complex object in order to show the options in a grouped format. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
# InputText | ||
|
||
Provides an input component called InputText that gives users a reusable input field. | ||
|
||
## API | ||
|
||
### `inputProps` (view asInput component for details) | ||
`inputProps` specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# Tabs | ||
|
||
Provides the ability for a Tab view that allows for switching between tabs to view panels within a page. | ||
|
||
## API | ||
|
||
### `children` (element array; required) | ||
`children` specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. | ||
|
||
### `labels` (string array or element array; required) | ||
`labels` specifies the list of headings that will appear on all of the tabs that will be created. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# asInput | ||
|
||
Handles all necessary props that are related to Input typed components. | ||
|
||
## API | ||
|
||
### `className` (string array; optional) | ||
`className` specifies Bootstrap class names to apply to the input component. The default is an empty array. | ||
|
||
### `description` (string or element; optional) | ||
`description` can be used to provide a longer description of the component. It will show up below the input component specified. The default is an empty string. | ||
|
||
### `disabled` (boolean; optional) | ||
`disabled` specifies if the component is disabled. The default type is false. | ||
|
||
### `label` (string; required) | ||
`label` specifies the label to be used for the overarching form-group. It appears above the input component. | ||
|
||
### `name` (string; required) | ||
`name` specifies the value for the name property within the component. | ||
|
||
### `onBlur` (function; optional) | ||
`onBlur` is a function that would specify what the input component should do when the `onBlur` event is triggered. For example, it could be used to update which element is currently in focus within the state. The default is an empty function. | ||
|
||
### `onChange` (function; optional) | ||
`onChange` is a function that would specify what the input component should do when the `onChange` event is triggered. For example, it could be storing the updated input data within the state. The default is an empty function. | ||
|
||
### `required` (boolean; optional) | ||
`required` specifies if the component is required. The default type is false. | ||
|
||
### `validator` (function; optional) | ||
`validator` specifies the function to use for validation logic if the input needs to be validated. Default is undefined. | ||
|
||
### `value` (string; optional) | ||
`value` specifies the value for the value property within the component. The default is an empty string. |