57 Wing Component Library

QUICK NOTE

DO NOT WORK ON MASTER BRANCH

Please update the in progress chart at the bottom of ReadMe.

Branch Naming

Feature/Bug/Hotfix_NameOfComponent_BranchedFrom_ByDeveloper Feature/Radio_Main_FirstNameLastName

Table Of Contents

README text editor

1. Getting Started
2. Data Inputs
   1. Button
   2. Input
   3. Textarea
   4. Radio
   5. Slider
   6. Dropdown
3. Info Display
   1. Card
   2. Modal
   3. Avatar
   4. Loading
4. TODO

GETTING STARTED

Install - npm i 57wng Import - import {Componenent} from '57wng/dist';

Change Standard SCSS Variables

This will go in your variables.scss file.

$primary:  #00308f;
$secondary:  #d1af3a;
$success:  #4acc4b;
$warn:  #f3d60e;
$danger:  #c50400;

$white:  #efefef;
$black:  #111111;
$grey-light:  #ccc;
$grey:  #888;
$grey-dark:  #444;
@import  '../node_modules/57wng/src/Style/import.scss';
@import  '../node_modules/57wng/src/Style/variable.scss';
@import  '../node_modules/57wng/src/Style/main.scss';

DATA INPUTS

top

Button

PROPS value - The text inside the button color - color of the button ("primary", "secondary", "success", "warn", "danger") onClick - Function to be called when the button is clicked. customClass - adds a custom class to the container of the Button

import React from 'react';
import { Button } from '57wng/dist';

const Component = () => {

  const buttonTest = () => {
    console.log("Button is working");
  };

  return (
    <div>
      <Button
        value="Button Text"
        color="primary"
        onClick={()  => buttonTest()} 
        customClass="custom-button-class"
      />
    </div>
  )
}

export default Component;

Input

PROPS value - The text inside the input that the user enters (this is based on state) type - The type of input field you need ex:("text", "email", "number", "password") onChange - Function to change the state of the value. name - Takes a string if you are wanting to use formData for state change. placeholder - Placeholder/ Label for the input required - Is this a required field or not? Takes a boolean value. customClass - adds a custom class to the container of the Modal

import React, { useState } from 'react;
import { Input } from '57wng/dist';

const Component = () => {
  const [text, setText] = useState('');
  
  return (
    <div>
      <Input
        value={text}
        type="text"
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-input-class"
      />
    </div>
  )
}

export default Component;

Textarea

PROPS value - The text inside the input that the user enters (this is based on state) onChange - Function to change the state of the value. placeholder - Placeholder/ Label for the textarea rows - General height of the textarea required - Is this a required field or not? Takes a boolean value. customClass - adds a custom class to the container of the Modal

import React, { useState } from 'react;
import { Textarea } from '57wng/dist';

const Component = () => {
  const [text, setText] = useState('');
  
  return (
    <div>
      <Textarea
        value={text}
        type="text"
        rows={5}
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-textarea-class"
      />
    </div>
  )
}

export default Component;

top

Radio

PROPS options - takes an array of Integers or Strings and displays these values as options name - sets a title for the radio group to tie the different radio options to a group inline - Boolean value to force radio to inline. (Defaults to a column view) onChange - Accepts a state function state - REQUIRED** changes the state from the onChange prop customClass - adds a custom class to the container of the Radio

import React, { useState } from 'react';
import { Radio } from '57wng/dist';

const Component = () => {
  const [state, setState] = useState('');

  return (
    <div>
      <Radio
        customClass="custom-radio-class"
        options={['Option 1',  'Option 2']}
        name={'TEST'}
        inline={true}
        onChange={(event)  => setState(event)}
        state={state}
      />
    </div>
  )
}

export default Component;

PROPS value - The text inside the input that the user enters (this is based on state) onChange - Function to change the state of the value. label - Label for the slider min - Minimum value for slider max - Maximum value for slider step - Sets the increment of values in a given slider size - height of the slider defaultValue - Sets the default number for a slider required - Is this a required field or not? Takes a boolean value. customClass - adds a custom class to the container of the Modal

import React, { useState } from 'react;
import { Slider } from '57wng/dist';

const Component = () => {
  const [text, setValue] = useState('');
  
  return (
    <div>
      <Slider
        value={text}
        defaultValue={30}
        label="Slider Label"
        required={true}
        size={"md"}
        step={10}
        min={0}
        max={100}
        onChange={(event) => setValue(event)}
        customClass="custom-slider-class"
      />
    </div>
  )
}

export default Component;

top

Dropdown

PROPS label - The title of the dropdown that the user enters. value - This is the parent component's state. setState - Function to change the state of the value. options - Array of available options under the dropdown menu. customClass - adds a custom class to the container of the Dropdown

import React, { useState } from 'react;
import { Dropdown } from '57wng/dist';
  
const Component = () => {
  const [state, setState] = useState('');  
  
    return (
      <div>
        <Dropdown
          label={'text'}
          value={state}
          setState={(event) => setState(event)}
          options={[]}
          customClass="custom-dropdown-class"
        />
      </div>
    )
}

export default Component;

INFO DISPLAY

top

Card

PROPS color - passing the string "dark" will make it have a dark background with light text. elevation - Enter a number 1 - 5. The higher the number the more it appears to hover. hover - Boolean. If this is true then the card will appear to elevate when you hover over it. customClass - adds a custom class to the container of the Card

import React from 'react;
import { Card } from '57wng/dist';
  
const Component = () => {
  
    return (
      <div>
        <Card
          color="dark"
          elevation={3}
          hover={true}
          customClass="custom-dropdown-class"
        />
      </div>
    )
}

export default Component;

top

Modal

PROPS value - The text inside the button that opens the modal customClass - adds a custom class to the container of the Modal

import React from 'react';
import { Modal } from '57wng/dist';

const Component = () => {
  return (
    <div>
      <Modal value="Open Modal" customClass="custom-modal-class">
        <h1>Modal Title</h1>
        <p>Some Content for the Modal</p>
      </Modal
    </div>
  )
}

export default Component;

Avatar

PROPS size - changes the size of the avatar image image - url pointing to an image file customClass - adds a class to the avatar component container

| Size | size | |--|--| | "lg" | 200px | | "md" | 100px | | "sm" | 50px |

import React from 'react';
import { Avatar } from '57wng/dist';

const Component = () => {
  return (
    <div>
      <Avatar size="md" image="image.jpg" customClass="custom-avatar-class"/>
    </div>
  )
}

export default Component;

Loading

PROPS customClass - adds a custom class to loading container.

The loading component does not take any customization props. The external spinning circle is the $secondary color and the inner spinning circle is the $primary color.

To customize the circles color add a customClass prop and then select .external-circle and .internal-circle. to change the color use stroke: $color;

import React from 'react';
import { Loading } from '57wng/dist';

const Component = () => {
  return (
    <div>
      <Loading customClass="custom-loading-class"/>
    </div>
  )
}

export default Component;

TODO

WHEN EDITING THE TODO LIST PLEASE EDIT README DIRECTLY IN GITHUB.`

HIGH PRIORITY

DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE

if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.

| tags | in progress | by | example | |--|--|--|--| | Badge | | | here | | Chip | | | here |
| A | | | here |

if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.

| components | in progress | by | example | |--|--|--|--| | Alert | | Perri L. | here | | Accordion | | | here | | Nav | | | here |

LOW PRIORITY

DO NOT DELETE FROM LIST UNTIL DOCUMENTATION AND TESTING IS COMPLETE

if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.

| tags | in progress | by | example | |--|--|--|--| | Tooltip | | | here | | Notification | | | here | | Paper | | | here |

if it is currently in progress please put a link to the working branch in the in progress column and your name in the by column.

| components | in progress | by | example | |--|--|--|--| | Table | | | here | | Toggle | | | here | | GhostLoader | | | here | | Graph | | | here |

top