TangoCode React UI Components

AnimatedLabel

Description

An input with a floting label animation that describes the expected value of the input.

Props

1. placeholder (string): The placeholder is a string that will be used as a short hint that describes the expected value of the input field.

2. autosize ? (boolean):

   • True : You will get an input element
   • Fale : You will get a textarea element

3. value (string): The value to be shown in the input or textarea.

4. onValueChange (function): ((value: string) => void) : Function to be called when the input changes. It passes the new value.

5. styles ? (AnimatedLabel.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

   • FloatingLabel : Is the label component for the input/textarea

     • height, font-size, color and top can not be customized becouse it depends on the float prop.

   • FloatingInput: Is the input component

   • TextArea: Is the Text area component

       styles={{
           FloatingLabel?: <styled component>;
           FloatingInput?: <styled component>;
           TextArea?: <styled component>;          
           LabelContainer?: <styled component>;
       }};

6. floatingLabelAnimation ? (Json): A json with the values for the animation.

   • minSize
   • maxSize
   • color
   • floatingColor
   • transition
   • top
   • floatingTop

7. id ? (string): A prefix identifier for all the html elements of the component.

8. name ? (string): A prefix name for all the html elements of the component

Usage

<AnimatedLabel 
    placeholder={'TESTING'}
    autosize={false}
    value={this.state.value}
    onValueChange={(e: any) => this.setState({ value: e.target.value })}
    id={'animatedId'} 
    name={'animatedNamed'}
/>

Styling

render() {
        const theme = {
            minSize: "5px",
            maxSize: "28px",
            color: "#F36822",
            floatingColor: "#3C2D26",
            transition: "0.90s all",
            top: "20px",
            floatingTop: "3px"
        }

        const style = {
            FloatingInput: styles.animatedLabel.FloatingInput.extend`
            padding-left: 30px;    
            border-bottom: 5x solid; 
                `

        };
        return (
            <div style={{ width: 200 }}>

                <AnimatedLabel
                    placeholder={'TESTING'}
                    autosize={false}
                    value={this.state.value}
                    onValueChange={(e: any) => this.setState({ value: e.target.value })}
                    styles={style}
                    floatingLabelAnimation={theme}
                    id={'animatedId'} 
                    name={'animatedNamed'}
                >
                </AnimatedLabel>
            </div>
        );
    }

CheckBox

Description

A checkbox component.

Props

1. value (boolean): Value sets the state of Checkbox and whether it begins checked or not. This will be required to prevent any mistakes when needing the checked value to being true or false.

2. id (string): The id is required to connect the label and input elements to the checkbox by using their for and id attributes, and also will be used as a prefix identifier for all the html elements of the component.

3. onChange ((event: any) => void): This allows a callback to be set so that the desired action can be set. This is will also be where the checked attribute of the input can be changed with the callback

4. readonly ? (boolean): Readonly allows the checkbox to be disabled completely by setting its value to be true. This allows for perameters to be set fow when the checkbox can be used by someone

5. styles ? (CheckBox.Styles): Allows for custom styles to be set on the checkbox to not be confined to the same look always. The Checkbox has three elements that can be changed and styled

• CheckBoxContainer: The width/height of the checkbox can be changed here as well as the border

• CheckBoxInput: The Input is where the size of the Icon is controlled and the where the background color is also changed

• CheckboxLabel: If the width/height or border is changed in the CheckBoxContainer it has to be done in unison with the Label to avoid the checkbox coming out distorted

      styles={{
          CheckBoxContainer?: <styled component>;
          CheckBoxInput?: <styled component>;
          CheckBoxLabel?: <styled component>;          
      }}

6. name ? (string): A prefix name for all the html elements of the component

Usage

<CheckboxComponent value={false} uniqueID={"123"} onClick={() => {}} />

This is the Checkbox with the base styles and with the icon given from the constants

The Checkbox and Icon can be changed a lot. In the example I was able to change the checkbox color and border-width. I changed the Icon to a completely different one with a diffent color and size

Styling

All the Components Elements targeted are case-sensitive any incorrect charater will not add the style. You will also not receive an error for the misspelling

const style = {
    //This will style the Checkbox border
    CheckBoxContainer: styles.checkBox.CheckBoxContainer.extend`
    border: 4px solid orange;
    border-radius: 50px;
    width: 46px;
    height: 46px;
 `,
    CheckBoxInput: styles.checkBox.CheckBoxInput.extend`
      &:checked + label{
            font-size: 35px;
            color: blue;
      }
    `,
};
<CheckBox id={"4"} onChange={() => {}} value={true} styles={styles} />;

DropDown

Description

A customizable DropDown component.

Props

1. customInput ? (any) : If you have your own custom input component you can use it with this prop

2. customInputProps ? (any) : The props for the custom input

3. customEmptyStateMessage ? (JSX.Element) : A JSX Element to be shown in the drop down, in case there are no options to show. The element will be shown exactly as passed.

4. emptyStateMessage ? (string) : A string to be shown in the drop down, in case there are no options to show. The message will be shown with a default style, but it can be changed (see prop styles).

5. inputValue (string) : The value to be shown in the input.

6. onSelectOption ((value: { toString: () => string }) => void;) : Function to be called when an option is selected. It passes the new value.

7. placeholder ? (string) : Placeholder for the input.

8. readOnly ? (boolean) : Indicates whether the input is editable or not. If not, the drop down will never be displayed. By default, it is false.

9. showDropDownOnEmpty ? (boolean) : Indicates whether the drop down will be shown when no suggestions match the input value or not. Use in true when passing an empty state message. By default, it is false.

10. styles ? (DropDown.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    • InputDropDownDrawer is the component used inside InputSuggest that renders the input and the drop down.
      • Container is a div that has all the content of InputDropDownDrawer.
      • Input is the input where the user types.
      • InputSelectIconOnCollapse is the div that contains the icon where the user clicks to expand the drop down.
      • InputSelectIconOnExpand is the div the contains the icon where the user clicks to collapse the drop down.
      • InputWrapper is a div that contains the Input.
      • DropDownDrawer is a component used inside InputDropDownDrawer that renders the drop down.
        • Container is a div that has all the content of DropDownDrawer.
        • List is a ul that has all the options (li).
        • DropDownEmptyState is a component used inside DropDownDrawer that renders the empty state message.
          • Container is a div that has all the content of DropDownEmptyState.
          • Message is a div that styles the emptyStateMessage.
        • DropDownItem is a component used inside DropDownDrawer that renders an option.
          • HighlightedItemChunk is a span that contains the highlighted parts of the option.
          • ListItemFocused is a div that has all the content of DropDownItem when the option is focused.
          • ListItemNotFocused is a div that has all the content of DropDownItem when the option is not focused.
          • RegularItemChunk is a span that contains the regular parts of the option.

    styles={{
        Container?: <styled component>;
        Input?: <styled component>;
        InputSelectIconOnCollapse?: <styled component>;
        InputSelectIconOnExpand?: <styled component>;
        InputWrapper?: <styled component>;
        DropDownDrawer?: {
            Container?: <styled component>;
            List?: <styled component>;
            DropDownEmptyState?: {
                Container?: <styled component>;
                Message?: <styled component>;
            };
            DropDownItem?: {
                HighlightedItemChunk?: <styled component>;
                ListItemFocused?: <styled component>;
                ListItemNotFocused?: <styled component>;
                RegularItemChunk?: <styled component>;
            };
        };
    }};

11. suggestOptions ({ toString: () => string }[]) : Required. The definition of all posible suggestions. It supports a list of anything that can be transformed in a string using the function toString() (['a', 'b', 'c'] is a valid value). All the suggestions will be shown when the drop down is displayed.

12. id ? (string): A prefix id for all the html elements of the component

13. name ? (string): A prefix name for all the html elements of the component

Usage

The initial state of the component just shows the input. The drop down is displayed once the user clicks in the input. After that, the following features are available: When pressing Arrow Down or Arrow Up, the drop down is displayed, switching the focused option. When pressing Enter when an option is focused, the drop down is closed and the component notifies that the new value should be the option selected. When pressing Escape or Tab when the drop down is being displayed, the drop down is not displayed anymore.

The following DropDow was created with the props:

    <div style={{ width: '200px' }}>
        <DropDown
            inputValue={'Los Angeles'}
            onSelectOption={(value: string) => { }}
            suggestOptions={[
                'Cleveland',
                'Chicago',
                'Indianapolis',
                'Los Angeles',
                'Milwaukee',
                'New York',
                'San Francisco'
            ]}
        />
    </div >

Resulting, after clicking on the input, in the render of:

Styling

  const newStyles = {
        Container: styles.inputDropDownDrawer.Container.extend`
            color: black;     `
    }

    return(
            
        <div style={{width: '400px'}}>
        <DropDown            
            inputValue={'Los Angeles'}
            onSelectOption={(value: string) => { }}
            styles={newStyles}
            suggestOptions={[
                'Cleveland',
                'Chicago',
                'Indianapolis',
                'Los Angeles',
                'Milwaukee',
                'New York',
                'San Francisco'
            ]}
        />
        </div>        
    )

GroupedGrid

Description

An scrolleable groupedGrid. This feature depends on two componentes GroupedGrid and GropedGridElement

Props

• GroupedGrid

  1. styles ? (GroupedGrid.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match the options below.

  • Root : Is the outer div container of the component

      styles={{
          Root?: <styled component>;               
      }};

  2. __id ?__ (string): A prefix id for all the html elements of the component
  
  3. __name ?__ (string): A prefix name for all the html elements of the component

• GroupedGridElement

  1. header (any) : Is the header element of the grid.
  2. styles ? (GroupedGridElement.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

  • Group : Is the div container for the header and its lines

  • HeaderRoot: The div container of the Header

  • GroupRows: Is the div container for the group of rows

  • RowRoot : Is the div container for a single row

     styles={{
         Group?: <styled component>;               
         HeaderRoot?: <styled component>; 
         GroupRows?: <styled component>; 
         RowRoot?: <styled component>; 
     }};

  3. id ? (string): A prefix id for all the html elements of the component

  4. name ? (string): A prefix name for all the html elements of the component

Usage

render() {
        return (
            <div style={{ width: '100%', height: '180px' }}>
                <GroupedGrid>
                    {this.state.list.map((item, index) =>
                        <GroupedGridElement key={index} header={item.header} >
                            {item.rows.map((row) => { return (row.text) })}
                        </GroupedGridElement>


                    )}
                </GroupedGrid>
            </div>
        );
    }

Styling

const newGroupedGridStyles = {
        Root: styles.groupedGrid.Root.extend`
           width: 50%;    `
    }

const newGroupedGridElementStyles = {
    Root: styles.groupedGridElement.GroupRows.extend`
        padding: 16px; `
}

render() {
        return (
            <div style={{ width: '100%', height: '180px' }}>
                <GroupedGrid styles={newGroupedGridStyles}>
                    {this.state.list.map((item, index) =>
                        <GroupedGridElement key={index} header={item.header} styles={newGroupedGridElementStyles}>
                            {item.rows.map((row) => { return (row.text) })}
                        </GroupedGridElement>
                    )}
                </GroupedGrid>
            </div>
        );
    }

## Input Pill List ##

### Description ###

It's a Tagging component.

### Props ###

1. __items__ (string[]) : It receives an array of items that are presented as pills.

2. __onClick__ (`(name: string) => void` ) : Function that controls the action of the click when the user hits the button inside the pill. 

3. __updateItems__ (`(items: string[]) => void` ) : Function to add more . 

4. __disable ?__ (`(newPage: number) => void` ) : This callback sends back the currentPageNumber. Since the totalItems and itemsPerPage were provided by the parent, the parent should be able to decide what items are to be displayed with the current page number. Simple math.

5. __styles ?__ (InputPillList.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

```ts
    interface Styles {
        PillListStyles?: Object {
            ListContainer: <styled component>
            PillContainer: <styled component>
            PillButtonStyles: Object {
                - Pill: <styled component>
                - PillWrapper: <styled component>
                - PillText: <styled component>
                - DeleteIcon: <styled component>
                - DeleteContainer: <styled component>
            }
        };
        TextInputStyles?: Object {
            Input: <styled component> 
            Button: <styled component>
            EnterInfoText: <styled component>
            ReturnArrow: <styled component>
        };        
    }

6. placeholder ? (string) : This property allows to set a placeholder text in the input.

7. id ? (string): A prefix id for all the html elements of the component

8. name ? (string): A prefix name for all the html elements of the component

Usage

The following pager was created with the props:

    <InputPillList 
        onClick={(value) => this.onDelete(value)} 
        items={this.state.items}
        updateItems={(items) => this.setState({items})}
    >
        <TextInput />
        <PillList />
    </InputPillList>

Using this component:

import * as React from 'react';
import InputPillList from "./index";
import PillList from "../PillList";
import TextInput from "../TextInput";

class Example extends React.Component {

    state = { items: ['one', 'second large item', 'third item'] }

    onDelete = (value: string) => {
        const items = this.state.items.filter(item => item !== value)
        this.setState({ items});
    }

    render() {
        return (
            <InputPillList 
                onClick={(value) => this.onDelete(value)} 
                items={this.state.items}
                updateItems={(items) => this.setState({items})}
            >
                <TextInput />
                <PillList />

            </InputPillList>
        );
    }
}

export default Example;

Styling

const style = {
    //This will style the Checkbox border
    ListContainer: styles.pilllist.ListContainer.extend`
        width: 50%;        
        border-radius: 8px;
 `
};

    state = { items: ['one', 'second large item', 'third item'] }

    onDelete = (value: string) => {
        const items = this.state.items.filter(item => item !== value)
        this.setState({ items});
    }

    render() {
        return (
            <InputPillList 
                onClick={(value) => this.onDelete(value)} 
                items={this.state.items}
                updateItems={(items) => this.setState({items})}
                styles={style}
            >
                <TextInput />
                <PillList />

            </InputPillList>
        );
    }

Input Suggest

Description

An input that takes care of filtering a list of suggestions.

Props

1. customInput ? (any) : If you have your own custom input component you can use it with this prop

2. customInputProps ? (any) : The props for the custom input

3. customEmptyStateMessage ? (JSX.Element) : A JSX Element to be shown in the drop down, in case there are no options to show. The element will be shown exactly as passed.

4. emptyStateMessage ? (string) : A string to be shown in the drop down, in case there are no options to show. The message will be shown with a default style, but it can be changed (see prop styles).

5. initialSuggestOptions ({ toString: () => string }[]) : The definition of all posible suggestions. It supports a list of anything that can be transformed in a string using the function toString() (['a', 'b', 'c'] is a valid value). The component takes care of filtering the suggestions, depending on the input.

6. inputValue (string) : The value to be shown in the input. It is used also to filter the suggestions.

7. onEnterKeyPressed ? (() => void) : Function to be called every time the user hits Enter, but not for selecting an option. If the drop down is displayed, and an option is focused, hitting Enter doesn't trigger this function.

8. onSelectOption (event, option: { toString: () => string } => void) : Function to be called when an option of the list is selected. It passes the event and the new value.

9. onValueChange ((value: string) => void) : Function to be called when the input changes. It passes the new value.

10. optionMatches ? ((option: { toString: () => string }, currentValue: string) => boolean) : Function to be called every time the input value changes, in order to filter the suggestions. The function is called for each option in the initialSuggestOptions. It receives an option and the current input value, returning true if it is matches and should be shown. By default, function includes is used (case insensitive).

11. placeholder ? (string) : Placeholder for the input.

12. readOnly ? (boolean) : Indicates whether the input is editable or not. If not, the drop down will never be displayed. By default, it is false.

13. showDropDownOnEmpty ? (boolean) : Indicates whether the drop down will be shown when no suggestions match the input value or not. Use in true when passing an empty state message. By default, it is false.

14. styles ? (InputSuggest.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    • InputDropDownDrawer is the component used inside InputSuggest that renders the input and the drop down.
      • Container is a div that has all the content of InputDropDownDrawer.
      • Input is the input where the user types.
      • InputWrapper is a div that contains the Input.
      • DropDownDrawer is a component used inside InputDropDownDrawer that renders the drop down.
        • Container is a div that has all the content of DropDownDrawer.
        • List is a ul that has all the options (li).
        • DropDownEmptyState is a component used inside DropDownDrawer that renders the empty state message.
          • Container is a div that has all the content of DropDownEmptyState.
          • Message is a div that styles the emptyStateMessage.
        • DropDownItem is a component used inside DropDownDrawer that renders an option.
          • HighlightedItemChunk is a span that contains the highlighted parts of the option.
          • ListItemFocused is a div that has all the content of DropDownItem when the option is focused.
          • ListItemNotFocused is a div that has all the content of DropDownItem when the option is not focused.
          • RegularItemChunk is a span that contains the regular parts of the option.

    InputDropDownDrawer: {
        Container: <styled component>;
        Input: <styled component>;
        InputWrapper: <styled component>;
        DropDownDrawer: {
            Container: <styled component>;
            List: <styled component>;
            DropDownEmptyState: {
                Container: <styled component>;
                Message: <styled component>;
            };
            DropDownItem: {
                HighlightedItemChunk: <styled component>;
                ListItemFocused: <styled component>;
                ListItemNotFocused: <styled component>;
                RegularItemChunk: <styled component>;
            };
        };
    };

15. id ? (string): A prefix id for all the html elements of the component

16. name ? (string): A prefix name for all the html elements of the component

Usage

The initial state of the component just shows the input. The drop down is displayed once the user types inside the input. When pressing Arrow Down or Arrow Up, the drop down is displayed, switching the focused option. When pressing Enter when an option is focused, the drop down is closed and the component notifies that the new value should be the option selected. When pressing Escape or Tab when the drop down is being displayed, the drop down is not displayed anymore.

The following Input Suggest was created with the props:

    <div style={{ width: '200px' }}>
        <InputSuggest
            initialSuggestOptions={[
                'Cleveland',
                'Chicago',
                'Indianapolis',
                'Los Angeles',
                'Milwaukee',
                'New York',
                'San Francisco'
            ]}
            inputValue={'C'}
            onValueChange={(value: string) => { }}
        />
    </div>

Resulting, after two hits of Arrow Down, in the render of:

Styling

  const newStyles = {
        Container: styles.inputDropDownDrawer.Container.extend`
            color: black;     `
    }

    render() {
        return (
              <div style={{ width: '200px' }}>
                <InputSuggest
                    initialSuggestOptions={[
                        'Cleveland',
                        'Chicago',
                        'Indianapolis',
                        'Los Angeles',
                        'Milwaukee',
                        'New York',
                        'San Francisco'
                    ]}
                    inputValue={'C'}
                    onValueChange={(value: string) => { }}
                    styles={newStyles}
                />
             </div>
        )
        }

List

Description

A list component that can load more items with a button or reaching the end of the list

Props

1. showLoadMoreButton ? (boolean): Flag to show or not the Load More button

2. handleItemClick ? (function): Function to be called every time the user clicks on a list item

3. handleShowMore ? (function): The callback function that notifies that the load more button was clicked or the bottom of the list was reached

4. customLoadingAnimation ? (any): Is the loading animation that is shown when the component is waitng for the data

5. status ? (String): String that represents the status of the component. If the string value is equal to "LOADING" a loading animation will be displayed

6. styles ? (List.Styles): Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

   • ListItemsContainer

     • Is the Div container of the list, display, flex-direction and width can be customized.

   • MemberList

     • This is the list style.

   • LoadMoreButton

     • Custom div for the load more button (showLoadMoreButton = true)

   • LoadMoreButtonContainer

     • Container div for the button

      styles={{
          ListItemsContainer?: <styled component>;
          MemberList?: <styled component>;
          LoadMoreButton?: <styled component>;          
          LoadMoreButtonContainer?: <styled component>;
      }};

7. id ? (string): A prefix id for all the html elements of the component

8. name ? (string): A prefix name for all the html elements of the component

9. onScroll ? (function(e)): Function executed when the user scrolls

Usage

    const list = [
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }
        ];
    <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick} 
    handleShowMore={this.handleShowMore}>
        {
            list.map((item, i) => {
                return (
                    <ListItem
                        key={i}
                        index={i}
                        item={item}
                        onEditClick={this.handleEditItemClick}
                    />
                );
            })
        }
    </List>

Styling

  const newStyles = {
        LoadMoreButton: styles.list.LoadMoreButton.extend`
            font-family: Jaldi;
            font-size: 16px;   `
    }

    render() {
        return (
              <div style={{ width: '400px' }}>
                <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick} 
                    handleShowMore={this.handleShowMore}>
                    {
                        list.map((item, i) => {
                            return (
                                <ListItem
                                    key={i}
                                    index={i}
                                    item={item}
                                    onEditClick={this.handleEditItemClick}
                                />
                            );
                        })
                    }
                </List>
             </div>
        )
        }

List Picker

Description

A component with two lists where one is generated with the items selected from the first list.

Props

1. items (CheckItem[]) : This is the list with the items that can be selected by the user.

2. checkedItems ? (CheckItem[]): The list of selected items.

3. styles ? (ListPicker.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components

   • Container -Is the container is the outer element that holds the search bar and lists. Display and flex-direction can be customized

   • Median -Is the separator between both lists

   • ListWrapper

     • Is the container that holds the two lists.

   • SearchInput

     • The styles for the Search input bar

   • SearchContainer

     • The container Div for the Search input.

   • ResetIcon

     • Styles for the reset search icon.

       styles={{
           Container?: <styled component>;
           Mediant?: <styled component>;
           ListWrapper?: <styled component>;          
           SearchInput?: <styled component>;
           SearchContainer?: <styled component>;
           ResetIcon?: <styled component>;
       }};

4. listComponent ? (JSX.Element) : A custom list component can be used.

5. listChange ((list: CheckItem[]) => void) : Callback function to notify list changes.

6. id ? (string): A prefix id for all the html elements of the component

7. name ? (string): A prefix name for all the html elements of the component

Usage

    <div style={{ width: "100vw", height: "300px" }}>
        <ListPicker
            items={this.listPickerItems()}            
            listChange={list => console.log("list", list)}
        />
    </div>

Styling

const newStyles = {
    Median: styles.listpicker.Median.extend`
        width: 40px;   `
    }

 render() {
        return (
    <div style={{ width: "100vw", height: "300px" }}>
        <ListPicker
            items={this.listPickerItems()}            
            listChange={list => console.log("list", list)}
            styles={newStyles}
        />
    </div>
        )
 }

Loading Button

Description

A loading button animation.

Props

1. onClick(function): This allows a callback to be set for a desired action on the click of the button.

2. name(string): This will set the name attribute for the button

3. content(string): This will be the text that is displayed on the button

4. disableMouseOverStyles ?(boolean): This will remove the hover styles that the button is initially given by being set to true

5. styles ?(LoadingButton.Styles): Allows for custom styles to be set on the loading button. There are different modes that the button can be set to and those modes can all have their styling changed through this prop

       styles={{
           Container?: <styled component>;
           LoadingImg?: <styled component>;
           Button?: <styled component>;          
           Loading?: <styled component>;
           Failed?: <styled component>;
           Success?: <styled component>;
           Disabled?: <styled component>;
       }};
   
   

6. mode ?(string): This is where the button's modes are set. The button can be set to loading, failed, success, and disabled mode. This is done by passing in the name of the mode wanted.

7. id ? (string): A prefix id for all the html elements of the component

Usage

    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.LOADING} />

This is the button in Loading mode

    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.DISABLED} />

This is the button in Disabled mode

    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.SUCCESS} />

This is the button in Success mode

    <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.FAILED} />

This is the button in Failed mode

Styling

const newStyles = {
    Container: styles.loadingbutton.Container.extend`
        width: 70px;
        height: 38px; `
    }

 render() {
        return (
    <div style={{ width: "100vw", height: "300px" }}>
       <LoadingButton onClick={() =>{}} content={'button'} name={'button'} mode={MODES.LOADING} styles={newStyles}/>
    </div>
        )
 }

Pager

Description

A customizable pagination component.

Props

1. pagesToShow (number) : Defines how many pages are to be shown. For example, if the totalItems prop is 100, and the itemsPerPage prop is 20, that means that there will be a total of 5 pages. If the pagesToShow prop is 3, then the pager will start out looking like the depiction below.

   

2. itemsPerPage (number) : Defines how many items per page are to be shown.

3. totalItems (number) : Defines how many items there are total.

4. onPageChange ((newPage: number) => void ) : This callback sends back the currentPageNumber. Since the totalItems and itemsPerPage were provided by the parent, the parent should be able to decide what items are to be displayed with the current page number. Simple math.

5. startingPage ? (number) : This functionality allows for the pager to be set to any page.

6. styles ? (Pager.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    interface Styles {
        Container?: <styled component>;
        PagerContainer?: <styled component>;        
        PagerItemSelected?: <styled component>;
        PagerItemUnselected?: <styled component>;
        PagerItemContent?: <styled component>;   
    }

7. id ? (string): A prefix id for all the html elements of the component

8. name ? (string): A prefix name for all the html elements of the component

Usage

The following pager was created with the props:

    <Pager
        pagesToShow={3}
        totalItems={200}
        itemsPerPage={20}
        onPageChange={() => {}}
    />

Resulting with an inital render of:

Clicking the three dots makes the pager shift to the next page set or previous page set depending on what position they are relative to the number set. Since the prop passed in for pagesToShow was 3, a good guess for the resulting render would be pages ranging from 4 to 6 as depicted in the following:

Clicking the double arrows makes the pager go to either the first page

Styling

const newStyles = {
    Container: styles.pager.Container.extend`
        width: 70px;
        height: 38px; `
    }

 render() {
        return (
            <Pager
                    pagesToShow={3}
                    totalItems={200}
                    itemsPerPage={20}
                    onPageChange={() => {}}
                    styles={newStyles}
                />
        )
 }

Radio Group

Description

A customizable radio group component

Props

1. items (RadioItem[]) : An array of items for the group of radio buttons. The name will be applied to the label of the radio button. The selected property on the item will determine if the radio button is selected. The id is a unique identifier that is used for the key of the radio element.

2. selectedId (string) : Is the Id of the selected radiobutton.

3. onRadioButtonChange ((item: RadioItem) => void)) : Defines how many items per page are to be shown.

4. title (string) : Adds a name to the group of radio buttons so when wrapped in a form element the submit will provide the key of title, value of the selected radio button.

5. styles ? (RadioGroup.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

   • RadioWrapper is a div that wraps the label and input in a pair
   • RadioInput is an input of type 'radio' that defines the form group behavior
   • RadioLabel is the label that

    interface Styles {
        RadioWrapper?: <styled component>;
        RadioInput?: <styled component>;
        RadioLabel?: <styled component>;
    }

7. id ? (string): A prefix id for all the html elements of the component

8. name ? (string): A prefix name for all the html elements of the component

Usage

The following pager was created with the props:

    <div style={{ display: "grid", gridTemplateColumns: "150px 150px" }} >
        <RadioGroup
            items={this.props.items}
            title={"title"}
            onRadioButtonChange={this.clicked}
        />
    </div>

• Resulting with an inital render of:

• note that the div wrapping the RadioGroup determines the layout of the buttons. In this example the display grid with 2 template columns layed the buttons into 2 columns.

• Changing the container to have a display flex and flex-direction row will lay the buttons out like so.

    <div style={{ display: "flex", flexDirection: "row" }} >
        <RadioGroup
            items={this.props.items}
            title={"title"}
            onRadioButtonChange={this.clicked}
        />
    </div>

• Example with a title

<div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
    <span>Title</span>
    <div style={{ display: "flex", flexDirection: "row" }}>
        <RadioGroup
            items={this.props.items}
            title={"Title"}
            onRadioButtonChange={this.clicked}
        />
    </div>
</div>

Styling

const newStyles = {
    Title: styles.radiogroup.Title.extend`
        align-items: left;
        margin-left: 2px;`
    }

 render() {
        return (
            <div style={{ display: "flex", flexDirection: "row" }}>
                <RadioGroup
                    items={this.props.items}
                    title={"Title"}
                    onRadioButtonChange={this.clicked}
                    styles={newStyles}
                />
    </div>
        )
 }

Scroller

Description

A simple scroller component.

Props

1. onScroll ? (function(e)): Function executed when the user scrolls

Usage

You can make any custom component scrolleable

        return (
            <div style={{ width: '40px', height: '60px' }}>
                <Scroller>
                   <MyComponent />
                </Scroller>
            </div>
        );

        return (
            <div style={{ width: '58px', height: '100px' }}>
                <Scroller>
                    <p>Hello this is the scroller test</p>
                </Scroller>
            </div>
        );

This is the scroller for a tag.

Text Input

Props

The Text Input will have 12 props that are all optional

1. onChange (any): This allows for any action to be passed when the user is typing inside of the input. Common use for this is to pass a function to it.

2. onBlur (any): This allows for an action to be set for when the input is focused and then leaves the input's focus

3. onFocus (any): This allows for an action to be set for when the user gets in focus of the input.

4. label (string): This sets a header for Input in large text

5. helperText (string): This will set a smaller header under the label

6. value (string): This sets the text that is inside of the Input

7. placeholder (string): This will set placeholder text inside the input that is removed once the user begins to type inside of it

8. readonly (booleam): When set this will disable the input from being used

9. styles (Styles): This will allow the user to style all aspects of the Input

10. onClickSave (any) Allows for the input to be able to be submitted with a button

11. id (string): Sets an id for the Input component

12. name (string): Sets a name for the Input component

Usage

    <TextInput
        placeholder={'This is a placeholder'}
        helperText={'This is helper text'}
        label={'This is a label'}
    />

Styled

Token Suggest

Description

An easily stylable React select / token / autocomplete

Props

1. customInput ? (any) : If you have your own custom input component you can use it with this prop

2. customInputProps ? (any) : The props for the custom input

3. customEmptyStateMessage ? (JSX.Element) : A JSX Element to be shown in the drop down, in case there are no options to show. The element will be shown exactly as passed.

4. defaultAfterToken ? (string) : A string that is added automatically after the token is closed. The default value is a space.

5. emptyStateMessage ? (string) : A string to be shown in the drop down, in case there are no options to show. The message will be shown with a default style, but it can be changed (see prop styles).

6. initialSuggestOptions ({ toString: () => string }[]) : The definition of all posible suggestions. It supports a list of anything that can be transformed in a string using the function toString() (['a', 'b', 'c'] is a valid value). The component takes care of filtering the suggestions, depending on the input. The options will only show after the user types the token opener.

7. inputValue (string) : The value to be shown in the input. It is used also to filter the suggestions.

8. onEnterKeyPressed ? (() => void) : Function to be called every time the user hits Enter, but not for selecting an option. If the drop down is displayed, and an option is focused, hitting Enter doesn't trigger this function.

9. onValueChange ((value: string, isValid: boolean) => void) : Function to be called when the input changes. It passes the new value and a boolean if it is valid or not (tokens are correctly defined and valid).

10. optionMatches ? ((option: { toString: () => string }, currentValue: string) => boolean) : Function to be called every time the input value changes and the token opener typed, in order to filter the suggestions. The function is called for each option in the initialSuggestOptions. It receives an option and the current input value, returning true if it is matches and should be shown. By default, function startsWith is used (case insensitive).

11. placeholder ? (string) : Placeholder for the input.

12. readOnly ? (boolean) : Indicates whether the input is editable or not. If not, the drop down will never be displayed. By default, it is false.

13. showDropDownOnEmpty ? (boolean) : Indicates whether the drop down will be shown when no suggestions match the input value or not. Use in true when passing an empty state message. By default, it is false.

14. styles ? (TokenSuggest.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    • InputDropDownDrawer is the component used inside InputSuggest that renders the input and the drop down.
      • Container is a div that has all the content of InputDropDownDrawer.
      • Input is the input where the user types.
      • InputWrapper is a div that contains the Input.
      • DropDownDrawer is a component used inside InputDropDownDrawer that renders the drop down.
        • Container is a div that has all the content of DropDownDrawer.
        • List is a ul that has all the options (li).
        • DropDownEmptyState is a component used inside DropDownDrawer that renders the empty state message.
          • Container is a div that has all the content of DropDownEmptyState.
          • Message is a div that styles the emptyStateMessage.
        • DropDownItem is a component used inside DropDownDrawer that renders an option.
          • HighlightedItemChunk is a span that contains the highlighted parts of the option.
          • ListItemFocused is a div that has all the content of DropDownItem when the option is focused.
          • ListItemNotFocused is a div that has all the content of DropDownItem when the option is not focused.
          • RegularItemChunk is a span that contains the regular parts of the option.

    InputDropDownDrawer: {
        Container: <styled component>;
        Input: <styled component>;
        InputWrapper: <styled component>;
        DropDownDrawer: {
            Container: <styled component>;
            List: <styled component>;
            DropDownEmptyState: {
                Container: <styled component>;
                Message: <styled component>;
            };
            DropDownItem: {
                HighlightedItemChunk: <styled component>;
                ListItemFocused: <styled component>;
                ListItemNotFocused: <styled component>;
                RegularItemChunk: <styled component>;
            };
        };
    };

15. tokenCloser ? (string) : Indicates the token closer. The default value is '>'.

16. tokenOpener ? (string) : Indicates the token opener. The default value is '<'.

17. id ? (string): A prefix id for all the html elements of the component

18. name ? (string): A prefix name for all the html elements of the component

Usage

The initial state of the component just shows the input. The drop down is displayed once the user types the token opener inside the input. After that, the following features are available: When pressing Arrow Down or Arrow Up, the drop down is displayed, switching the focused option. When pressing Enter when an option is focused, the drop down is closed and the component notifies that the new value should be the option selected. When pressing Escape or Tab when the drop down is being displayed, the drop down is not displayed anymore.

The following Input Suggest was created with the props:

    <div style={{ width: '200px' }}>
        <TokenSuggest
            initialSuggestOptions={[
                'AdHeadline',
                'AdDescription',
                'ClientAddress',
                'ClientName',
                'ClientUrl'
            ]}
            inputValue={this.state.value}
            onValueChange={(value: string) => { this.setState({ value }) }}
        />
    </div>

Resulting, after typing 'Visit us on <C', in the render of:

Underline Animation

Customizable underline animation

Props

1. children (JSX.Element) : An input JSX element has to be passed in order for the focus animation to work.

2. styles ? (UnderlineAnimation.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    styles= {{
        UnderlineWrapper?: <styled component>;
        Underline?: <styled component>;    
    }}

Usage

     <div  style={{width: "200px", height: "40px"}}>
        <UnderlineAnimation>
            <input placeholder={"some input"}/>
        </UnderlineAnimation>
    </div>
    />

Styling

const newStyles= {{
    Underline: UnderlineAnimationStyles.Underline.extend`
        &: before {
            height: 5px; 
            background: red; 

        }
        &: after {
            height: 5px; 
            background: red; 

        };
    `;
}}

render() {
        return (
            <div  style={{width: "500px", height: "80px"}}>
                <UnderlineAnimation
                    styles={newStyles}
                >
                    <input placeholder={"some input"}/>
                </UnderlineAnimation>
            </div>
        )
}

SideBar Menu

A collapsable side bar menu

Props

The SideBar will have 2 components that it will be made up of.

SideMenu Component

1. onClick ((item: string) => void): This allows a function to passed whenever the sidebar has been interacted with. This is can be done in tandem that MenuItem component so that each item can have a different action

2. styles ? (SideMenu.Styles): Allows custom styles to be set onto the SideMenu Component like the positioning of the Menu, Background-Color and padding/margins

    styles={{
        MenuListContainer?: <styled component>;
        Container?: <styled component>;
        SubTitle?: <styled component>;
        MenuEligibleItem?: <styled component>;
        MenuItem?: <styled component>;
        MenuImage?: <styled component>;
    }}  

3. id ? (string): A prefix id for all the html elements of the component

4. name ? (string): A prefix name for all the html elements of the component

MenuItem Component

This component will have 7 props that can be passed with 2 being required.

1. displayValue (string): This will be the title of each MenuItem Title will be hidden and shown on hover

2. item (any):This will be used to be able to target individual menu items

3. disabled ? (boolean): The props allows for items on the menu to be disabled whent this has been set to true

4. selectedValue ? (boolean): This props allows the Item to have the selected attribute set to true.

5. onClick ? (function): This prop allow for the MenuItem to be given a function to preform when clicked on.

6. image ? (string): This prop will have the image/icon being shown in the sidemenu. There is no default so this needs to be passed

7. styles ? (MenuItem.Styles): Allows for custom styles to be set like the font-size of the text and icon. The color of the text/icon. The Icon itself can also be changed to a different one here.

    styles={{             
        MenuItem?: <styled component>;
        MenuImage?: <styled component>;
        SubTitle?: <styled component>;  
    }}  

8. id ? (string): A prefix id for all the html elements of the component

9. name ? (string): A prefix name for all the html elements of the component

Usage

        const items: JSX.Element[] = [
        <MenuItem
            key={1}
            displayValue={'Item:1'}
            item={'1'}
            image={image}
        />,
        <MenuItem
            key={2}
            displayValue={'Item:2'}
            item={'2'}
            image={image}
        />,
        <MenuItem
            key={3}
            displayValue={'Item:3'}
            item={image}
        />
        ]

    <SideMenuComponent onClick={(item) => { }} selectedValue={''} items={items}>
    </SideMenuComponent>

Styling

All the Components Elements targeted are case-sensitive any incorrect charater will not add the style. You will also not receive an error for the misspelling

const style = {
    This will target the text above the Icon
    SubTitle: styles.sideMenu.SubTitle.extend`
        font-size: 30px;
    `,
    This will target the text Icon itself
    MenuImage: styles.sideMenu.MenuImage.extend`
        font-size:30px;
        color: tomato;
    `,
    This will target the container that has the collapse animation
    MenuListContainer: styles.sideMenu.MenuListContainer.extend`
        width: 60px;
        &:hover{
            width: 300px
        }
    `,
};

    const item =[
        <MenuItem
            displayValue={"Item:1"}
            item={"1"}
            image={ICON_CODE.CLOSE}
            key={1}
        />
    ]
    <SideMenuComponent onClick={() =>{}}>{item}</SideMenuComponent>