OSU-Application

This is a stylized component library used for building React applications for OSU ECampus. This library is included by default in the 'react-redux-boilerplate' project.

Installation

Installation is crazy easy! Just run the following in your project:

yarn add osu-application

Usage

Let's make your app pretty! Below is the JSX to use inside your React App, just import whatever component you'd like to use.

import {Header, Footer, Welcome, Instructions, GA, FormButton, FormDropdown, FormTextArea, FormInput, Toolbar} from 'osu-application';

Components

Header

This is main header UI for Ecampus interactives.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show | | courseCode | true | none | string | This is the course code (ex: BA 101) | | courseTitle | true | none | string | This is the title of the interactive (ex: Matching Game) | | disableHelp | | false | boolean | passing true will hide the technical issues link in the header | | appState | | none | redux state props | Pass Redux state to this prop to gather information on the app when people have technical issues | | token | | none | auth token | Pass the token from osu-auth for use in troubleshooting technical issues |

Example:

<Header courseCode={'BA 101'} courseTitle={'Matching Game'} />

Footer

This is main footer UI for Ecampus interactives.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show |

Example:

<Footer />

Welcome

This is main welcome screen used when students first access an Ecampus interactive. It displays the learning objective and an overview of the interactive.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show | | courseCode | true | none | string | This is the course code (ex: BA 101) | | courseTitle | true | none | string | This is the title of the interactive (ex: Matching Game) | | intro | true | none | string | This is an instroduction to the activity | | learningObjective | true | none | string | This is the learning objective for the activity |

Example:

<Welcome courseCode={'BA 101'} courseTitle={'Matching Game'} intro={'This is an activity where you match photos'} learningObjective={'For students to learn more about different objects'} />

Toolbar

This is a navigation bar component that can include basic navigation items and call-to-action buttons.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show |

Children Elements

Children elements must be wrapped in special tags to signify what they are.

NavItem

tags are navigation links shown on the left-hand side of the bar.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | keys | true | none | number | Key of the object | | customStyles | | none | object {{}} | Custom styles for the link | | action | true | none | function | Action taken when pressed | | active | | none | boolean | Denotes active item, must be controlled through your application's state | | children | true | none | tags | Text children of this tag will be displayed as link text |

ActionItem

tags are call to action buttons shown on the right-hand side of the bar.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | keys | true | none | number | Key of the object | | customStyles | | none | object {{}} | Custom styles for the link | | action | true | none | function | Action taken when pressed | | children | true | none | string | Text children of this tag will be displayed as the button text |

Example:

<Toolbar>
    <navItem keys={1} action={() => this.function()} active={true}>
        Home
    </navItem>
    <actionItem keys={1} action={() => this.function()}>
        New Item
    </actionItem>
</Toolbar>

Instructions

These are inline instructions used in interactives.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show | | width | | calc(100% - 2px) | string ('full' or 'padded'), number (will turn into XXpx) | Determines the width of the instructions component | | children | true | none | string | These are the instructions shown inside the instructions box |

Example:

<Instructions>
    Here are the instructions.
</Instructions>

FormInput

This a stylized form input.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show for the input | | initialValue | true | none | string | This is the initial value sent to the component. Something must be passed, even if it's an empty string | | disabled | | false | boolean | Determines whether the input is disabled or not | | customStyles | | none | object {{}} | This allows you to pass custom styles to the parent of the input | | innerStyles | | none | object {{}} | This allows you to pass custom styles to the input | | placeholder | !Do not use! | none | string | Do not use this | | inputValue | true | none | function | This will fire when there is an onChange event triggered on the input (adding/removing text). Will return the text from the input (no need to define e.target.value) | | inputName | true | none | string | This is the name of the input | | label | true | none | string | This is the animated label that tells users what the input is for | | onBlur | | none | function | This is triggered when the input is blurred | | onFocus | | none | function | This is triggered when the input is focused | | onClick | | none | function | This is triggered when the input is clicked | | pattern | | none | RegEx | Pass a regex statement to test the input on | | isValid | | none | function | This is triggered if the pattern specified fails testing |

Example:

validate = (name, validity) => {
    this.setState({
        valid: {
            ...this.state.valid,
            [name]: validity
        }
    });
}
...
<FormInput
    initialValue={''}
    inputValue={(e) => this.function(e)}
    inputName={'customInput'}
    label={'Custom Input'}
    isValid={(value) => this.validate('customInput', value)}
    pattern='(someregexpattern)'/>

Use the contents of this.state.valid to determine if the whole form is valid.

FormDropdown

This a stylized form dropdown.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show for the input | | unique | | none | string | For cases where you need to reset the dropdown to default state, you can pass a new string to this prop and the dropdown will reset | | initialValue | true | none | string | This is the initial value sent to the component. Something must be passed, even if it's an empty string | | customStyles | | none | object {{}} | This allows you to pass custom styles to the parent of the input | | innerStyles | | none | object {{}} | This allows you to pass custom styles to the input | | placeholder | !Do not use! | none | string | Do not use this | | inputValue | true | none | function | This will fire when there is an onChange event triggered on the input (adding/removing text). Will return the text from the input (no need to define e.target.value) | | inputName | true | none | string | This is the name of the input | | label | true | none | string | This is the animated label that tells users what the input is for | | children | true | none | tags | These are the options that will display in the dropdown |

Example:

<FormDropdown initialValue={''} inputValue={(e) => this.function(e)} inputName={'customDropdown'} label={'Custom Dropdown'}>
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
</FormDropdown>

FormTextArea

This a stylized form text area.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | Determines which theme to show for the input | | initialValue | true | none | string | This is the initial value sent to the component. Something must be passed, even if it's an empty string | | customStyles | | none | object {{}} | This allows you to pass custom styles to the parent of the input | | innerStyles | | none | object {{}} | This allows you to pass custom styles to the input | | placeholder | !Do not use! | none | string | Do not use this | | inputValue | true | none | function | This will fire when there is an onChange event triggered on the input (adding/removing text). Will return the text from the input (no need to define e.target.value) | | inputName | true | none | string | This is the name of the input | | label | true | none | string | This is the animated label that tells users what the input is for |

Example:

<FormTextArea initialValue={''} inputValue={(e) => this.function(e)} inputName={'customTextArea'} label={'Custom TextArea'} />

FormButton

This a stylized form button.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | customStyles | | none | object {{}} | This allows you to pass custom styles to the parent of the button | | innerStyles | | none | object {{}} | This allows you to pass custom styles to the button | | action | true | none | function | This function is triggered when the button is pressed | | label | true | none | string | This is the text inside the button |

Example:

<FormButton action={(e) => this.function(e)} label={'Button Text'} />

GA

This component will include OSU Ecampus' Google Analytics in your project. No props necessary.

Example:

<GA />

Sidebar

This a customizable sidebar.

Props

| Prop Name | Required | Default | Expecting | Description | | --- | --- | --- | --- | --- | | theme | | 'light' | string ('light' or 'dark') | This will change the sidebar to a dark or light theme | | sidebarPosition | | 'left' | string ('left' or 'right') | This determines which side of the screen the sidebar will open from | | overlay | | false | boolean | This will include an overlay that covers and tints your content. Clicking it will hide the sidebar and trigger the sidebarVisible prop with false | | sidebarVisible | | none | function | This function will trigger false when the sidebar is closed using the overlay. You must handle conditionally not rendering the sidebar when this is triggered | | triggerClose | | none | !boolean | If this prop changes, it will trigger the sidebar to hide, then fire off sidebarVisible once completed. If you are handling closing the sidebar with a button or programatically, you'll want to pass !boolean to it when you're ready to shut it | | children | true | none | content | This is the content that will appear inside the sidebar |

Example:

<Sidebar theme={'dark'} sidebarPosition={'left'} overlay={true} sidebarVisible={() => this.unrenderSidebar()} triggerClose={this.state.boolean}>Child content</Sidebar>