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:

• [x] Buttons

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

Usage

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

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

Props

• Style
• Color
• textColor
• Position
• Icon
• Title
• Deactivated

Contained Buttons

Usage

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

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

Props

• Style

• Title

• Deactivated

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|