Skip to content

Commit

Permalink
Merge pull request #46 from edx/fsheets/readme
Browse files Browse the repository at this point in the history
README creation for Paragon components
  • Loading branch information
Farhanah Sheets authored Oct 16, 2017
2 parents c046e63 + 5dd244c commit 8c9cf8e
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 0 deletions.
32 changes: 32 additions & 0 deletions src/Button/README.md
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`.
8 changes: 8 additions & 0 deletions src/CssJail/README.md
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.
14 changes: 14 additions & 0 deletions src/Dropdown/README.md
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.
11 changes: 11 additions & 0 deletions src/InputSelect/README.md
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.
8 changes: 8 additions & 0 deletions src/InputText/README.md
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.
11 changes: 11 additions & 0 deletions src/Tabs/README.md
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.
35 changes: 35 additions & 0 deletions src/asInput/README.md
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.

0 comments on commit 8c9cf8e

Please sign in to comment.