-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed style settings. Changed all components. Added radio and switch …
…components.
- Loading branch information
Showing
17 changed files
with
446 additions
and
45 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
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
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
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
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
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,76 @@ | ||
| import React from 'react' | ||
|
|
||
| import PropTypes from 'prop-types' | ||
|
|
||
| import { FormGroup, Input, Label } from 'reactstrap' | ||
|
|
||
| // Add your info to the docs if you edit this! | ||
|
|
||
| /** | ||
| * ### Baseline radio! | ||
| * | ||
| * @version 0.0.1 | ||
| * @author Noah Templet ([w3aseL](https://github.com/w3aseL)) | ||
| */ | ||
| class Radio extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| } | ||
|
|
||
| static propTypes = { | ||
| /** | ||
| * The label text. | ||
| */ | ||
| label: PropTypes.string, | ||
| /** | ||
| * Function to handle change. | ||
| */ | ||
| onChange: PropTypes.func, | ||
| /** | ||
| * Value of the radio. | ||
| */ | ||
| value: PropTypes.string, | ||
| /** | ||
| * Name of the group that radios belong to. REQUIRED! | ||
| */ | ||
| name: PropTypes.string.isRequired, | ||
| /** | ||
| * Sets whether the checkbox is inline or not. | ||
| */ | ||
| inline: PropTypes.bool, | ||
| /** | ||
| * Sets whether the checkbox is enabled or disabled. | ||
| */ | ||
| disabled: PropTypes.bool | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| label: "Default text!" | ||
| } | ||
|
|
||
| render() { | ||
| const { label, onChange, value, name, inline, disabled } = this.props | ||
|
|
||
| return ( | ||
| <div className="content"> | ||
| <FormGroup check inline={inline} disabled={disabled} className="form-check-radio"> | ||
| <Label className="form-check-label"> | ||
| <Input | ||
| type="radio" | ||
| onChange={onChange} | ||
| value={value} | ||
| name={name} | ||
| disabled={disabled} | ||
| /> | ||
| {label} | ||
| <span className="form-check-sign" /> | ||
| </Label> | ||
| </FormGroup> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export { Radio } | ||
|
|
||
| export default Radio |
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,26 @@ | ||
| ### Radio Syntax | ||
|
|
||
| Importing the radio. | ||
| ```js static | ||
| import Radio from 'revibe-component-library/Checkbox' | ||
|
|
||
| import { Radio } from 'revibe-component-library' | ||
| ``` | ||
|
|
||
| ### Radio Text Examples | ||
| ```js padded | ||
| <div className="content"> | ||
| <Radio name="examples1" value="option1" /> | ||
| <Radio name="examples1" value="option2" label="Test Label" /> | ||
| <Radio disabled name="examples1" value="option3" label="Disabled" /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Radio Inline Examples | ||
| ```js padded | ||
| <div className="content"> | ||
| <Radio inline name="examples2" value="option1" /> | ||
| <Radio inline name="examples2" value="option2" label="Test Label" /> | ||
| <Radio disabled inline name="examples2" value="option3" label="Disabled" /> | ||
| </div> | ||
| ``` |
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,3 @@ | ||
| { | ||
| "main": "Radio.jsx" | ||
| } |
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,67 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
|
|
||
| import ToggleSwitch from 'react-bootstrap-switch' | ||
|
|
||
| // Add your info to the docs if you edit this! | ||
|
|
||
| /** | ||
| * ### Baseline radio! | ||
| * | ||
| * @version 0.0.1 | ||
| * @author Noah Templet ([w3aseL](https://github.com/w3aseL)) | ||
| */ | ||
| class Switch extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| } | ||
|
|
||
| static propTypes = { | ||
| /** | ||
| * The color when the switch is on. | ||
| */ | ||
| onColor: PropTypes.string, | ||
| /** | ||
| * The color when the switch is off. | ||
| */ | ||
| offColor: PropTypes.string, | ||
| /** | ||
| * The default value of the switch | ||
| */ | ||
| defaultValue: PropTypes.bool, | ||
| /** | ||
| * The text when the switch is on. | ||
| */ | ||
| onText: PropTypes.node, | ||
| /** | ||
| * The text when the switch is off. | ||
| */ | ||
| offText: PropTypes.node | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| onColor: "default", | ||
| offColor: "default", | ||
| defaultValue: false, | ||
| onText: "", | ||
| offText: "" | ||
| } | ||
|
|
||
| render() { | ||
| const { onColor, offColor, defaultValue, onText, offText } = this.props | ||
|
|
||
| return ( | ||
| <ToggleSwitch | ||
| defaultValue={defaultValue} | ||
| onColor={onColor} | ||
| offColor={offColor} | ||
| onText={onText} | ||
| offText={offText} | ||
| /> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export { Switch } | ||
|
|
||
| export default Switch |
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,15 @@ | ||
| ### Switch Syntax | ||
|
|
||
| Importing the switch. | ||
| ```js static | ||
| import Switch from 'revibe-component-library/Checkbox' | ||
|
|
||
| import { Switch } from 'revibe-component-library' | ||
| ``` | ||
|
|
||
| ### Switch Examples | ||
| ```js padded | ||
| <Switch /> | ||
| <Switch onText="On" onColor="primary" offText="Off" offColor="secondary" /> | ||
| <Switch onText={<i className="fas fa-bell" />} onColor="primary" offText={<i className="far fa-bell" />} offColor="secondary" /> | ||
| ``` |
Empty file.
Oops, something went wrong.