57 Wing Component Library

QUICK NOTE

$3

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

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';

$3

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
$3

PROPSvalue- The text inside the buttoncolor- 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 (


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

)
}

export default Component;`

`$3`

PROPSvalue- 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 inputrequired- 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 (


              value={text}
        type="text"
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-input-class"
      />

)
}

export default Component;`

`$3`

PROPSvalue- 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 textarearows- General height of the textarearequired- 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 (


              value={text}
        type="text"
        rows={5}
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-textarea-class"
      />

)
}

export default Component;`top

`$3`

PROPSoptions- takes an array of Integers or Strings and displays these values as optionsname- sets a title for the radio group to tie the different radio options to a groupinline- Boolean value to force radio to inline. (Defaults to a column view)onChange- Accepts a state functionstate- REQUIRED** changes the state from the onChange propcustomClass- 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 (


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

)
}

export default Component;`

$3

PROPSvalue- 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 slidermin- Minimum value for slidermax- Maximum value for sliderstep- Sets the increment of values in a given slidersize- height of the sliderdefaultValue- Sets the default number for a sliderrequired- 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 (


              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"
      />

)
}

export default Component;`

top

`$3`

PROPSlabel- 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 (


                  label={'text'}
          value={state}
          setState={(event) => setState(event)}
          options={[]}
          customClass="custom-dropdown-class"
        />


    )
}
export default Component;

`INFO DISPLAY`

top

`$3`

PROPScolor- 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 (


                  color="dark"
          elevation={3}
          hover={true}
          customClass="custom-dropdown-class"
        />


    )
}
export default Component;

top

`$3`


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 (


      
        Modal Title

        Some Content for the Modal

)
}

export default Component;`

`$3`

PROPSsize- changes the size of the avatar imageimage- url pointing to an image filecustomClass- 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 (

)
}

export default Component;`

`$3`

PROPScustomClass- 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 $primarycolor.

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 (

)
}

export default Component;`

`TODO`

`$3`

#### 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 |

`$3`

#### 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.

top

57 Wing Component Library

QUICK NOTE

$3

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

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';

$3

This will go in your variables.scss file.
``$primary: #00308f; $secondary: #d1af3a; $success: #4acc4b; $warn: #f3d60e; $danger: #c50400;

`DATA INPUTS`


top
$3

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

const Component = () => {

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

return (


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

)
}

export default Component;`

`$3`

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

const Component = () => { const [text, setText] = useState(''); return (


              value={text}
        type="text"
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-input-class"
      />

)
}

export default Component;`

`$3`

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

const Component = () => { const [text, setText] = useState(''); return (


              value={text}
        type="text"
        rows={5}
        placeholder="Text Placeholder"
        required={true}
        onChange={(event) => setText(event)}
        customClass="custom-textarea-class"
      />

)
}

export default Component;`top

`$3`

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

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

return (


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

)
}

export default Component;`

$3

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

const Component = () => { const [text, setValue] = useState(''); return (


              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"
      />

)
}

export default Component;`

top

`$3`

`import React, { useState } from 'react; import { Dropdown } from '57wng/dist'; const Component = () => { const [state, setState] = useState(''); return (


                  label={'text'}
          value={state}
          setState={(event) => setState(event)}
          options={[]}
          customClass="custom-dropdown-class"
        />


    )
}
export default Component;

`INFO DISPLAY`

top

`$3`

`import React from 'react; import { Card } from '57wng/dist'; const Component = () => { return (


                  color="dark"
          elevation={3}
          hover={true}
          customClass="custom-dropdown-class"
        />


    )
}
export default Component;

top

`$3`


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 (


      
        Modal Title

        Some Content for the Modal

)
}

export default Component;`

`$3`

PROPSsize- changes the size of the avatar imageimage- url pointing to an image filecustomClass- 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 (

)
}

export default Component;`

`$3`

PROPScustomClass- 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 $primarycolor.

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 (

)
}

export default Component;`

`TODO`

`$3`

#### 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 |

`$3`

#### 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.

top

57wng

57 Wing Component Library

QUICK NOTE

$3

Table Of Contents

GETTING STARTED

$3

DATA INPUTS

$3

$3

$3

$3

$3

$3

INFO DISPLAY

$3

$3

Modal Title

$3

$3

TODO

$3

$3

$3

57wng

57 Wing Component Library

QUICK NOTE

$3

Table Of Contents

GETTING STARTED

$3

DATA INPUTS

$3

$3

$3

$3

$3

$3

INFO DISPLAY

$3

$3

Modal Title

$3

$3

TODO

$3

$3

$3

`DATA INPUTS`

`$3`

`$3`

`$3`

`$3`

`INFO DISPLAY`

`$3`

`$3`

`$3`

`$3`

`TODO`

`$3`

`$3`

`$3`

`DATA INPUTS`

`$3`

`$3`

`$3`

`$3`

`INFO DISPLAY`

`$3`

`$3`

`$3`

`$3`

`TODO`

`$3`

`$3`

`$3`