57wng NPM | npm.io

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

README text editor

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;