Skip to content

Latest commit

 

History

History
360 lines (244 loc) · 7.2 KB

UTILITIES.md

File metadata and controls

360 lines (244 loc) · 7.2 KB
Raw

UTILITIES

./src/js/components/utilities/

Purpose

Common components to for utility purposes. For example, things like error messages!

Important Items

  • error-page.jsx
  • error-message.jsx
  • load-status.jsx
  • progress-bar.jsx
  • label.jsx

ErrorMessage - error-message.jsx

Purpose

Displays a Bootstrap error message in your view where-ever it is you want it placed.

Props

error

  • Required - false

  • Data Type - OBJECT

  • Functionality - An object holding the important notes of an error

  • Expected Data -

      {
    origin: 'How error originated. An API url, a personalized message; it\'s your call!',
    code: 'Error code',
    message: 'Text message to explain error'
  }

theme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap theme class to display the message as
  • Default - 'alert-danger'

Example

import ErrorMessage from './src/js/components/utilities/error-message.jsx';

<ErrorMessage
  error={{
    origin: 'http://database.dev/api/v2/route?id=42',
    code: '422',
    message: 'You are not authorized to view this data.'
  }}
  theme="alert-warning"
/>

LoadStatus - load-status.jsx

Purpose

Displays a loading spinner icon in the view.

Props

message

  • Required - false
  • Data Type - STRING
  • Functionality - Message to display with loader
  • Default - ''

icon

  • Required - false
  • Data Type - STRING
  • Functionality - A font-awesome icon that is displayed in the component
  • Default - 'fa-refresh

spins

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Allows the icon to spin in the view
  • Default - false

size

  • Required - false
  • Data Type - STRING || NUMBER
  • Functionality - The font size of the spinner. if it is a number, it displays it in pixel(px) units
  • Default - '1em'

color

  • Required - false
  • Data Type - STRING
  • Functionality - A color string for the text and icon. Accepts hex, rgb, & rgba formats
  • Default - '#000000'

Example

import ErrorMessage from './src/js/components/utilities/load-status.jsx';

<LoadStatus
  icon="fa-circle-o-notch"
  message="Loading"
  spins
/>

ErrorPage - error-page.jsx

Purpose

Displays a page formatted to display an error. Think of those 404 error pages that many-a-site have. That is the idea.

Props

theme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap text color class to display icons and the main headline in. It is for that extra little accent of color in the mix.
  • Default - 'text-red'

icon

  • Required - false
  • Data Type - STRING
  • Functionality - A Font Awesome icon class to display with the error description.
  • Default - 'fa-warning'

headline

  • Required - false
  • Data Type - STRING
  • Functionality - The big colorful text that tells you what this page is about.
  • Default - ''

description

  • Required - false
  • Data Type - STRING
  • Functionality - The smaller, more descriptive text that tells you what this page is all about.
  • Default - ''

Takes Children

  • Expected Type - STRING or ELEMENT
  • Displays Inside - A div with an .error-content class.
  • Displays After - <h3> with the page description and icon.

Example

import ErrorPage from './src/js/components/utilities/error-page.jsx';

  <ErrorPage
    theme="text-yellow"
    icon="fa-heartbeat"
    headline="404"
    description="Oh no! The page died over-night. Sorry about that..."
  >
    <p>Here is a secondary message to show you how sorry we are. Seriously! Sorry about this error. :-(</p>
  </ErrorPage>

CalloutAlert - callout-alert.jsx

Purpose

Displays a callout or alert styled message for the user to see. You can reference it as or if you want. Go for it!

Props

theme

  • Required - false
  • Data Type - STRING
  • Functionality - A Bootstrap theme class to display the message as
  • Default - 'success'

icon

  • Required - false
  • Data Type - STRING
  • Functionality - A FontAwesome class to display with the message.
  • Default - ''

header

  • Required - false
  • Data Type - STRING
  • Functionality - A header message for the component
  • Default - ''

content

  • Required - false
  • Data Type - STRING
  • Functionality - A more descriptive string of content to display in the component
  • Default - ''

callout

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Sets the component to all of the callout classes instead of an alert class.
  • Default - false

dismissible

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - If the component is an alert, allow it to be closed and have a close button.

Example

import CalloutAlert from './src/js/components/utilities/callout-alert.jsx';

<CalloutAlert
  theme="callout-warning"
  header="Check this out!"
  content="This is text that I really want you to see!!!"
  callout
/>

ProgressBar - progress-bar.jsx

Purpose

Displaying a progress bar in various decorative tones.

Props

percent

  • Required - false
  • Data Type - NUMBER || STRING
  • Functionality - Percentage number to show the progress bar displayed at.
  • Default - 0

theme

  • Required - false
  • Data Type - STRING
  • Functionality - A progress bar color class string
  • Default - 'progress-bar-yellow'

size

  • Required - false
  • Data Type - STRING
  • Functionality - A progress bar size class string
  • Expects - 'sm', 'xs', 'xxs', ''
  • Default - ''

striped

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Gives the progress bar a striped effect.
  • Default - false

vertical

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Sets the progress bar to display vertically instead of horizontally.
  • Default - false

active

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Animated the progress bar. It's really only noticable if striped is set to true.
  • Default - false

Example

import ProgressBar from './src/js/components/utilities/progress-bar.jsx';

<ProgressBar
  percent={50}
  size="xs"
  theme="progress-bar-warning"
  striped
  active
/>

Label - label.jsx

Purpose

Display a cute little label within and next to components. Good for showing numbers, words, icons, etc. within a tiny colorful inline container.

Props

theme

  • Required - false
  • Data Type - STRING
  • Functionality - A class string to display the label in a color. You can use the 'bg-'-color format, or the 'label-'-bootstrap-color formats.
  • Default - 'label-primary'

icon

  • Required - false
  • Data Type - STRING
  • Functionality - A font-awesome icon that is displayed in the component
  • Default - 'fa-refresh

align

  • Required - false
  • Data Type - STRING
  • Functionality - The alignment of where to pull the label. Can go 'left' or 'right'
  • Default - 'right'

stat

  • Required - false
  • Data Type - STRING || NUMBER
  • Functionality - A string or a number to display in the component.
  • Default - ''

Example

import ErrorMessage from './src/js/components/utilities/label.jsx';

<Label stat="New" theme="label-warning" />