jeanelle-chek

The following are required to use the library: * [Node.js](https://nodejs.org/en/download/) * [Storybook](https://storybook.js.org/docs/guides/quick-start-guide/) * Get started using the automated command line tool. This command automatically setups

Usage no npm install needed!

<script type="module">
  import jeanelleChek from 'https://cdn.skypack.dev/jeanelle-chek';
</script>

README

Get Started

The following are required to use the library:

  • Node.js
  • Storybook
    • Get started using the automated command line tool. This command automatically setups storybook.
    npx -p @storybook/cli sb init --type react
    • Run storybook
    npm run storybook
  • Visual Code

Components included:

Components

Buttons

Buttons are touchable components that users can use to interact with the screen. Buttons can be styled according to needs to look a specific way.

Floating Action Buttons

FloatingButtons

Usage
import FloatingButton from '../src/components/floating-button/floating-button';

<FloatingButton
     style=""
     color="blue"
     textColor="white"
     position="left"
     icon="plus"
     title="Add location" />
Props

Contained Buttons

ContainedButtons

Usage
import ContainedButton from '../src/components/contained-button/contained-button'

<ContainedButton
     style=""
     title="Save"
     deactivated={true} />)
Props

References

Style

Value Description
- External style defined

Color

Value Description
Blue Render a component with blue background
White Render a component with White background

textColor

Value Description
Blue Render a component with blue text
White Render a component with white text

Position

Value Description
Left Render a component positioned on the left
Right Render a component positioned on the right

Icon

Value Description
plus Render a component with a plus icon
location Render a component with a location icon

Title

Value Description
- Text to be displayed on the component

Deactivated

Value Description
true Render a deactivated component that is not clickable
false Render a component that is clickable