@medignition/medignition-ui

A library of React components created using create-react-app.

Installation

Run the following command: npm install @medignition/medignition-ui

Use

The components of this library can be used by importing them with the object deconstruction pattern, e.g:
import { TextInput } from "@medignition/medignition-ui"

Demo

A demonstration of all components can be found on our Demo

Customization

Customizing the style of each of the framework's component relies in styled-components's theming property, which exposes the property theme through React's context API to every styled-component. This means that each component offers a specific set of customizable properties that completely change the components appearance without the user having to understand the structure of the component's Markup and CSS.
In addition to each component-specific theme, there is a general theme that is used as a dependency by most of the components. This is on purpose, as it represents a solution to maintain consistency in style while deeply changing the appearance of an whole app, achieved by just customizing a small set of properties (the base theme).
To customize a component's theme, you could do:

import React from "react";
import { TextInput } from "@medignition/medignition-ui";

const customTheme = {
  label: {
    width: "300px",
    fontSize: "15px"
  },
  field: {
    backgroundColor: "white",
    borderRadius: "0px",
    fontSize: "15px"
  }
}

() => (
  <TextInput customTheme={customTheme} label={"Dummy Input"} />
)

Every customizable component of this framework supports a customTheme prop as a way to override its own theme. The available properties to customize are different from component to component. Currently, the only way to see which are available, is to check the documentation. You should pick which ones you want to change and create an object with the same structure, but only with the "key-value" pairs of the properties to change.
For customizing the base theme, you should do, e.g:

// ideally, right in App.js, or uppermost component in the project
import { ThemeProvider } from "styled-components";
import { generateBaseTheme } from "@medignition/medignition-ui";

const customTheme = generateBaseTheme({
  colors: {
    primary: "red",
    secondary: "blue",
    formField: "white"
  },
  font: {
    colors: {
      label: "black"
    },
    sizes: {
      copy: "12px"
    }
  }
});

() => (
  <ThemeProvider theme={customTheme}>
    <App />
  </ThemeProvider>
);

generateBaseTheme receives as argument an object representing the base theme and returns a theme complete with each component's theme updated in order to respect these base rules. The generated theme should be passed down through a ThemeProvider component, but can actually be passed whenever the user uses one of the framework's component, by providing it to the customTheme prop.

Available Components and Utilities

As of this version, the available components in this library are:

• medignition-ui

- Installation - Use - Demo - Customization - Available Components and Utilities - Components Specification

- [The Base Theme](#The-Base-Theme)
  - [Interface (Theme)](#Interface-Theme)
- [Accordion Component](#Accordion-Component)
  - [Interface (Theme)](#Interface-Theme-1)
  - [Properties](#Properties)
  - [Use Case](#Use-Case)
- [Button Component](#Button-Component)
  - [Interface (Theme)](#Interface-Theme-2)
  - [Properties](#Properties-1)
- [Checkbox Component](#Checkbox-Component)
  - [Interface (Theme)](#Interface-Theme-3)
  - [Properties](#Properties-2)
- [Dropdown Component](#Dropdown-Component)
  - [Interface (Theme)](#Interface-Theme-4)
  - [Properties](#Properties-3)
- [File Upload Component](#File-Upload-Component)
  - [Properties](#Properties-4)
- [Hide Component](#Hide-Component)
  - [Properties](#Properties-5)
- [Radio Group Component](#Radio-Group-Component)
  - [Interface (Theme)](#Interface-Theme-5)
  - [Properties](#Properties-6)
- [Radio Button Component](#Radio-Button-Component)
  - [Interface (Theme)](#Interface-Theme-6)
  - [Properties](#Properties-7)
- [Selectable Elements Component](#Selectable-Elements-Component)
  - [Properties](#Properties-8)
  - [Use Case](#Use-Case-1)
- [Show Component](#Show-Component)
  - [Properties](#Properties-9)
- [Sidebar Component](#Sidebar-Component)
  - [Interface (Theme)](#Interface-Theme-7)
  - [Properties](#Properties-10)
- [Table Component](#Table-Component)
  - [Interface (Theme)](#Interface-Theme-8)
  - [Properties](#Properties-11)
  - [Use Case](#Use-Case-2)
- [Tab Navigation Component](#Tab-Navigation-Component)
  - [Interface (Theme)](#Interface-Theme-9)
  - [Properties](#Properties-12)
  - [Use Case](#Use-Case-3)
- [Text Area Component](#Text-Area-Component)
  - [Interface (Theme)](#Interface-Theme-10)
  - [Properties](#Properties-13)
- [Text Input Component](#Text-Input-Component)
  - [Interface (Theme)](#Interface-Theme-11)
  - [Properties](#Properties-14)

- Utils

- [generateBaseTheme Util](#generateBaseTheme-Util)

There is a small set of other utilities offered by the framework that serve, for the most part, as an abstraction layer to how the global and base themes are structured. These are:

• generateBaseTheme

Components Specification

Each themable component offers a different set of properties, the theme object, to allow customization of its appearance. The interface of each theme can be consulted in this section. You should pick the properties to change and create an object with the same structure, but only with the "key-value" pairs of the properties to change.

The Base Theme

Interface (Theme)

{
  colors: {
    primary,
    secondary,
    success,
    danger,
    warning,
    info,
    body,
    light,
    dark,
    muted,
    white,
    formField,
    card
  },
  font: {
    family,
    sizes: {
      copy,
      emphasized,
      label,
      inputValue,
      button,
      headline
    },
    weights: {
      formLabel,
      light,
      regular,
      medium,
      semiBold,
      bold
    },
    colors: {
      ...colors, // all base colors are replicated here
      placeholder,
      inputValue,
      label,
      copy,
      inverse,
      highlighted,
      success,
      error
    }
  }
}

Accordion Component

Interface (Theme)

{
  container: {
    topMargin,
    vPadding,
    hPadding,
    backgroundColor,
    fontColor,
    borderRadius,
    borderTop
  },
  header: {
    paddingLeft,
    paddingRight,
    width,
  },
  actionIcon: {
    // represents the appearance of action icons such as 'help', 'info', etc.
    width,
    height
  },
  actionsContainer: {
    rightMargin
  },
  arrowIcon: {
    // represents the appearance of the arrow icon on each accordion section
    width,
    height
  },
  infoContent: {
    // represents the appearance of the information box when an action is clicked
    maxWidth,
    fontSize,
    padding,
    backgroundColor
  },
  itemContent: {
    // represents the appearance of each accordion item content
    hPadding,
  }
}

Properties

The Accordion component offers the following props:

• items (array): array of accordion section data, each as a data object
• itemId (function): a function that gets an item as argument and returns its id. Important: make sure to give unique ids, avoid using indexes for this purpose
• initiallyActiveItem (object): an object representing the item to be initially open within the accordion
• renderItemHeader (function): a function that gets an item id as argument and returns the html code to render the accordion item header
• renderItemHeaderIcon (function): a function that returns an icon to be displayed at the header most right position. If this function is not provided, a default arrow icon will be display
• headerIconRotation (number): a number that will represent the rotation (in degrees) of the header icon whenever the accordion is opened. Defaults to 180
• renderItemActionIcons (funtion): a function that gets an item id as argument and return the html code to render the accordion item action icons
• getActionInfoText (function): a function that gets an item id as argument and return the text information relative to a specific action. Therefore, whenever this function sends a text as returning argument, that text will be shown within a box bellow the action icons. Note: the text can be returned as an HTML object such as

<b>Some bolder text</b>

• renderItemContent (function): a function that gets an item id as argument and return the html code to render the accordion item content
• withBorderBottom (boolean): if set to true, the accordion last element will have a border bottom of same style as top border
• customTheme (object): a custom theme that follows the structure explained above

Use Case

An example use of the component:

// accordionActionText = ["", "", ""];
const {accordionActionText} = this.state
const accordionContent = [
  { id: "id-for-firstheader", title: "First Header", content: <div />, info: "Some info" },
  { id: "id-for-secondheader", title: "Second Header", content: <div />, info: "" },
  { id: "id-for-thirdheader", title: "Third Header", content: <div />, info: "" }
]

<Accordion
  customTheme={accordionTheme}
  items={accordionContent}
  itemId={({ id = {} }) => id}
  initiallyActiveItem={accordionContent[0]}
  renderItemHeader={(id) => {
    const item = accordionContent.filter(ex => ex.id === id)[0];
    return <h3>{item.title}</h3>;
  }}
  renderItemContent={(id) => {
    const item = accordionContent.filter(ex => ex.id === id)[0];
    return item.content
  }}
  getActionInfoText={id => accordionActionText[id]}
  renderItemActionIcons={(id) => {
    const item = accordionContent.filter(ex => ex.id === id)[0];
    return (
      <IconInfo
        onClick={() => {
          const infoText = accordionActionText[id] ? '' : item.info;

          const newActionText = [...accordionActionText];
          newActionText[id] = infoText;

          this.setState({ accordionActionText: newActionText });
        }}
      />
    );
  }}
/>

Button Component

Interface (Theme)

{
  default: {
    color,
    hoverColor,
    clickColor,
    disabledColor,
    disabledFontColor,
    fontColor,
    fontWeight
  },
  success: {
    color,
    hoverColor,
    clickColor,
    disabledColor,
    disabledFontColor,
    fontColor,
    fontWeight
  },
  danger: {
    color,
    hoverColor,
    clickColor,
    disabledColor,
    disabledFontColor,
    fontColor,
    fontWeight
  },
  width,
  shadow,
  borderRadius,
  border,
  vPadding,
  hPadding,
  fontSize
}

The Button component offers a prop named markup that accepts a string. That string is used to access a "markup" object on the theme. By default, it supports the default state and a "success" state (activited by doing markup="success"). This properties allows for further customization, by creating a custom theme object with whichever markup states you see fit. For example, you could do:

// ...

const customTheme = {
  dangerState: {
    color: "red",
    fontColor: "white"
  }
}

const ButtonWrapper = (props) => (
  <Button customTheme={customTheme} {...props}>
)

export default ButtonWrapper

You could then use that ButtonWrapper with markup="dangerState" and it would use the custom theme state provided.

Properties

The Button component offers the following props:

• falseButton (boolean): if set to true, the component will use a div element instead of a native button element
• markup (string): easily change the button appearance to a predefined state, see above
• disabled (boolean): if set to true, the button will lose the onClick interaction
• text (string): text to be inside the button
• onClick (function): callback to be called when the button is clicked
• customTheme (object): a custom theme that follows the structure explained above

Checkbox Component

Interface (Theme)

{
  box: {
    size,
    backgroundColor,
    borderRadius,
    border // border CSS element, e.g "solid 1px red"
  },
  check: {
    color
  },
  label: {
    fontSize,
    fontColor,
    letterSpacing,
    marginToCheckbox
  },
  errorMessage: {
    fontColor,
    fontSize,
    topMargin,
    bottomMargin
  },
  labelReadMode: {
    width,
    fontSize,
    fontColor,
    fontWeight,
    letterSpacing,
    marginToValue
  },
  valueReadMode: {
    vPadding,
    hPadding,
    border,
    borderColor, // makes possible to have different colors on each border side
    borderRadius,
    backgroundColor,
    fontSize,
    fontWeight,
    fontColor
  }
}

An example of the borderColor property: The following code will add a border of width 1px and black color only to the bottom border

const customTheme = {
  valueReadMode: {
    border: '1px solid',
    borderColor: 'transparent transparent black transparent', // top right bottom left
  }
}

Properties

The Checkbox component offers the following props:

• label (string): a text at the right of the checkbox; If empty does not show label
• selected (boolean): if set to true, it will display a checked box
• onClick (function): callback to be called when the checkbox is clicked
• customTheme (object): a custom theme that follows the structure explained above
• disabled (boolean): if set to true, it won't call the onClick callback when clicked and the cursor will be in a not-allowed state
• trueValue (string): the text to be shown in read mode if checkbox is selected
• falseValue (string): the text to be shown in read mode if checkbox is not selected
• errorMessage (string): a text to be shown at the bottom of the checkbox if some error occurred
• renderMarkerIcon (function): a function that returns an icon to be displayed inside the box, when it is selected. If this function is not provided, a default icon will be displayed
• readMode (boolean): if set to true, it will show the answer given as plain text yes/no whether the box is checked/unchecked. The answer becomes not editable

Dropdown Component

Interface (Theme)

{
  label: {
    // represents the appearance of the label for the dropdown field
    width,
    fontSize,
    fontWeight,
    fontColor,
    letterSpacing
  },
  field: {
    // represents the appearance of the clickable area that displays the selected value
    vPadding,
    hPadding,
    height,
    backgroundColor,
    placeholderFontColor,
    fontColor,
    border,
    borderColor,
    borderRadius,
    fontSize,
    fontWeight
  },
  toggleDropdownIcon: {
    // represents the appearance of the icon which shows the state of the dropdown (usually an arrow)
    width,
    hPadding, // horizontal padding
    rotateOnToggle, // boolean; if true the icon rotates 180 degrees when the dropdown is opened
    backgroundColor, // color of the area behind the icon
    color, // color of the icon
    svgStyle // string with css to place under an svg element; usually should be left untouched
  },
  fieldReadMode: {
    // represents the appearance of the text area that displays the selected value
    vPadding,
    hPadding,
    border,
    borderColor,
    borderRadius,
    backgroundColor,
    fontSize,
    fontWeight,
    fontColor
  }
}

Note that for usability sake, we opted for using the native select element, thus leaving the dropdown menu with the browser's native style.

Properties

The Dropdown component offers the following props:

• label (string): a text at the left of the dropdown; If empty does not show label
• placeholder (string): placeholder text to show before any option is chosen
• selectedOption (string): selected option (with same data structure as it was passed)
• onSelect (function): callback to be called when an option of the menu is clicked; the selected option, with the same data structure, is passed as argument
• options (array): array of options, each having any type of data. Each option should have an id which must be a string value.
• getOptionLabel (function): gets an option, and returns a string representing the label of the option
• getOptionId (function): gets an option, and return a string representing the ID of the option
• renderArrowIcon (function): a function that returns an icon to be displayed as the dropdown arrow icon. If this function is not provided, a default arrow icon will be displayed
• readMode (boolean): if set to true, it will show the selected option as plain text, not editable
• customTheme (object): a custom theme that follows the structure explained above

File Upload Component

This component does not offer a customizable theme, as it encapsules only some functionality to abstract file uploading.

Properties

• renderUploadButton (function): callback function that should return a react component to render inside the FileUpload markup; the click event handlers are taken care by FileUpload, thus the returning component doesn't need to care about "placing" the callback in a specific element.
• onChooseFile (function): callback function to call when the user selects a file to upload from his/her computer.
• validateFile (function): callback function that gets the selected file and returns a boolean which tells whether the file is valid or not.
• onError (function): callback function to call when there is an error after selecting the file from the computer.
• name (string): native attribute name for input elements in HTML; will avoid bugs in case there is more than 1 FileUpload in the same page.
• accept (string): native attribute accept for input HTML elements of type="file"
• all other native <input type="file"> attributes are supported and passed to the due element

Hide Component

The Hide component behaves as the hidden class in Bootstrap and follows the same grid breakpoint values.

Properties

• xs (boolean): if true it's hidden on xs screens
• sm (boolean): if true it's hidden on sm screens
• md (boolean): if true it's hidden on md screens
• lg (boolean): if true it's hidden on lg screens
• xl (boolean): if true it's hidden on xl screens

Can be used simply as, e.g: <Hide md sm xs />

Radio Group Component

The Radio Group is, as the name indicates, a components that groups several answer options represented by radio buttons. This component makes it easier to label a certain question which has a diverse range of possible answers as well as representing a read mode of the selected option.

Interface (Theme)

{
  label: {
    // represents the appearance of the group label
    width,
    fontSize,
    fontColor,
    fontWeight,
    letterSpacing,
    marginToValue
  },
  valueReadMode: {
    // represents the appearance of the text area that displays the selected value
    vPadding,
    hPadding,
    border,
    borderColor,
    borderRadius,
    backgroundColor,
    fontSize,
    fontWeight,
    fontColor
  }
}

Properties

The Radio Group component offers the following props:

• label (string): a text at the left of the radio buttons; can be empty
• selectedOption (string): selected option (with same data structure as it was passed)
• disabled (boolean): if set to true, it won't call the onClick callback when a radio button is clicked and the cursor will be in a not-allowed state
• readMode (boolean): if set to true, it will show the selected radio button option as plain text, not editable
• children (JSX object): the possible options represented by radio buttons
• customTheme (object): a custom theme that follows the structure explained above

Radio Button Component

Interface (Theme)

{
  outer: {
    // represents the appearance of the outer circle
    size, // unitless, use an integer; contrary to the default string with units
    backgroundColor,
    border  // border CSS element, e.g "solid 1px red"
  },
  inner: {
    // represents the appearance of the inner circle, shown when the button is selected
    size, // unitless, use an integer; contrary to the default string with units
    backgroundColor
  },
  label: {
    fontSize,
    fontColor,
    fontWeight,
    textAlign,
    letterSpacing,
    marginToButton,
    width
  }
}

Properties

The Radio Button component offers the following props:

• selected (boolean): if set to true, it will display an inner circle
• label (string): a text at the right of the button; can be empty
• onClick (function): callback to be called when the radio button is clicked
• customTheme (object): a custom theme that follows the structure explained above
• disabled (boolean): if set to true, it won't call the onClick callback when clicked and the cursor will be in a not-allowed state

Selectable Elements Component

This component does not offer a customizable theme. Its goal is to keep the state of what is selected. This grants an abstraction layer to many components like for example radio buttons, where only one can be selected at a time. It also contributes to the speed of development for many mundane and repetitive cases like the previous one.
It works as a "render props" component, providing a render prop which should get a callback function as its value. That function gets "equipped" with the due callback functions to change and access the encapsuled state.

Properties

• elementComparator (function): a function that gets two of the selectable elements and returns if they are the same; used by the component to know what element is selected.
• initiallySelected (any): the initially selected element; can have any data structure, as long as the elementComparator is able to identify equal elements
• render (function): a function called to render the content of this component; the function is called with an object argument, with the following properties:

- handleSelect: function that gets an element as argument and saves it as the selected element in the component. - clearSelection: function that makes the component have no element selected. - isSelected: function that get an element as argument and returns a boolean telling whether that element is the selected one or not. - selectedElement: the kept selected element, with the same data structure as it's passed originally to the component.

Use Case

An example use of the component:

class MiniForm extends Component {
  const options = [
    {id: 1, label: 'A'},
    {id: 2, label: 'B'},
    {id: 3, label: 'C'},
    {id: 4, label: 'D'},
  ]

  render () {
    return (
      <SelectableElements
        initiallySelected={options[0]}
        elementComparator={(optionA, optionB) => optionA.id === optionB.id}
        render={({handleSelect, clearSelection, isSelected, selectedElement}) =>
          options.map(option => (
            <RadioButton
              selected={isSelected(option)}
              label={option.label}
              onClick={() => handleSelect(option)} />
          ))
        }
      />
    )
  }
}

This example shows how easy it is to set up an environment where you want to provide the functionality of having one element active at a time. Other examples can be tab views or toggle buttons, or event switches.

Show Component

The Show component behaves as the visible class in Bootstrap and follows the same grid breakpoint values.

Properties

• xs (boolean): if true it's visible on xs screens
• sm (boolean): if true it's visible on sm screens
• md (boolean): if true it's visible on md screens
• lg (boolean): if true it's visible on lg screens
• xl (boolean): if true it's visible on xl screens

Can be used simply as, e.g: <Show xs sm />

Sidebar Component

Interface (Theme)

{
  width,
  marginToContent,
  link: {
    // represents the appearance of a clickable link
    height,
    size,
    weight,
    lineHeight,
    color
  },
  selectedLink: {
    // represents the appearance of the currently selected link
    height,
    size,
    weight,
    lineHeight,
    color
  },
  separator: {
    // represents the appearance of a separator label between groups of links
    height,
    size,
    weight,
    lineHeight,
    color
  },
  spaceBetweenSections // basically, the margin on top of each separator
}

Properties

The Sidebar component offers the following props:

• linkLabelExtractor (function): a function that gets a link as argument and returns its label.
• sidebarLinks (array): array with all the links of the sidebar; the links can have whichever data structure is more appropriate.
• onClickLink (function): callback function that is called when a clickable link is clicked.
• isSeparator (function): callback function that is called to identify separators among links; it gets an element contained in sidebarLinks as argument, and returns whether it is a separator or not.
• isSelectedLink (function): callback function that is called to identify the selected link; it gets an element contained in sidebarLinks as argument, and returns whether it is the selected link or not.
• customTheme (object): a custom theme that follows the structure explained above

Table Component

Interface (Theme)

{
  container: {
    bottomMargin,
    rowHoverColor // row background color on hover
  },
  sortIcon: {
    vMargin,
    hMargin,
    iconWidth,
    iconHeight
  }
}

Properties

The Table component offers the following props:

• tableId (string): a text to identify the table
• tableData (array): an array of objects representing the data to be shown in the table. Each object key will represent a table column
• headerData (array): an array of objects representing each column settings. Each object has the following properties:

- label (string): a text to be shown as column header - dataKey (string): the text used as key on tableData object to represent the column - isSortable (boolean): if set to true enables sorting in the specific column - headerTextAlign (string): a text to define the text alignment of the specific header - stylingRule (function): a function that gets a cell value as argument and returns a styling rule based on that value. Ex.: ```javascript

stylingRule: value => value <= 100 ? { color: "red" } : { color: "black" }

`` - customCellRender` (function): a function that gets the cell value and row index and returns the cell render (JSX notation)

• withPagination (boolean): if set to true the table data will be split into pages
• noElementsPage (number): a number representing the number of elements to be shown on each table page
• clickableRows (boolean): if set to true shows a cursor pointer when hover a row
• clickHandler (function): a function that gets the content of the clicked row and returns the click actions
• rowTotal (boolean): is set to true will show a total sum by row
• columnsToExceptTotal (array): an array of strings, with the corresponding column keys (the ones given on tableData), that should be ignored on the rowTotal calculation
• noDataMessage (string): text to be shown if there's no data available for the table

Note: In order to display some content only on row hover, add className="hover-content" to the containers that should be displayed only on hover.

Use Case

An example use of the component:

const tableData = [
  {year: 2010, Jan: 100, Feb: 320, Mar: 321},
  {year: 2011, Jan: 320, Feb: 400, Mar: 446},
  {year: 2012, Jan: 640, Feb: 90, Mar: 200},
];

const headers = [
  {
    label: "",
    dataKey: "year",
    isSortable: false,
    customRender: value => (<div>{value}<RandomIcon /></div>)
  },
  {
    label: "January",
    dataKey: "Jan",
    isSortable: true,
    headerTextAlign: "right",
    stylingRule: value => value <= 100 ? { color: "red" } : { color: "black" }
  },
  { label: "February", dataKey: "Feb", isSortable: true},
  { label: "March", dataKey: "Mar", isSortable: true},
];

render () {
  return (
    <Table
      tableId="demo-table"
      tableData={tableData}
      headerData={headers}
      withPagination={false}
      rowTotal
      columnsToExceptTotal={["year"]}
    />
  )
}

Tab Navigation Component

Interface (Theme)

{
  header: {
    // represent the tabs container
    vPadding,
    hPadding,
  },
  tab: {
    vMargin,
    hMargin,
    vPadding,
    hPadding,
    border,
    borderTop,
    borderRadius,
    backgroundColor,
    textAlign,
    fontColor,
    fontSize,
    fontWeight,
    active: { //represents the tab style when it is active
      border,
      borderTop,
      borderRadius,
      backgroundColor,
      fontColor
	  }
  },
  content: {
    // represents the container where the tab content should be render
    vPadding,
    hPadding,
    border,
    borderTop,
    borderRadius,
    backgroundColor
  }
}

Properties

The TabNavigation component offers the following props:

• tabs (object array): an array of objects that will contain all the information needed to render a tab;
• tabsWidth (number): a number between 0 and 1 that will the define the width percentage that a tab should take inside the header (Ex.: 0.1 will correspond to 10% of the header width);
• isActive (function): a function that gets a tab as an argument and returns a boolean stating whether or not that tab is the currently selected;
• handleTabClick (function): a function that gets a tab as an argument and performs the needed actions to set it as the currently selected tab;
• renderTabHeader (function): a function that gets a tab as an argument and returns the content to be render inside the given tab header;
• renderContent (function): a function that will return the content of the currently active tab to be render ;
• customTheme (object): a custom theme that follows the structure explained above.

Use Case

An example use of the component:

class Wizard extends Component {
  const steps = [
    {id: 1, label: 'Hello', content: SplashPage},
    {id: 2, label: 'Personal Info', content: PersonalInfoFormPage},
    {id: 3, label: 'Account Info', content: AccountFormPage},
    {id: 4, label: 'Done', content: DonePage},
  ]

  render () {
    const { tabActive } = this.state;
    return (
      <TabNavigation
        customTheme={tabTheme}
        tabs={steps}
        tabsWidth={0.25}
        isActive={tab => tab.id === tabActive}
        handleTabClick={tab => this.setState({ tabActive: tab.id })}
        renderTabHeader={tab => <p>{tab.label}</p>}
        renderContent={() =>
          steps.filter(step => step.id === tabActive)[0].content
        }
      />
    )
  }
}

Text Area Component

Interface (Theme)

{
  field: {
    // represents the appearance of the field where the user inputs the text
    width,
    minHeight,
    backgroundColor,
    borderRadius,
    borderColor,
    border, // border CSS element, e.g "solid 1px red"
    vPadding,
    hPadding,
    placeholderColor
  },
	value: {
    // represents the appearance of the text input inside the text area
    fontFamily,
    fontWeight,
    fontSize,
    fontColor
  },
	error: {
    // represents the appearance of an error message to show if the input is invalid
    marginToField,
    marginToSide,
    fontSize,
    fontColor
  },
  fieldReadMode: {
    // represents the appearance of the text area on read mode
    minHeight,
    backgroundColor,
    borderRadius,
    borderColor,
    border,
    vPadding,
    hPadding,
    vMargin,
    fontColor,
    fontWeight,
    fontSize
  }
}

Properties

The TextArea component offers the following props:

• name (string): native name attribute of textArea HTML element
• errorMessage (string): error message to show
• placeholder (string): native placeholder attribute of textArea HTML element
• value (string): native value attribute of textArea HTML element; basically the text to be in the text area field
• onChangeText (function): callback function to be called when the user inputs characters inside the text area; gets the text present in the area as argument
• customTheme (object): a custom theme that follows the structure explained above
• readMode (boolean): if set to true, it will show the text written on the text area; not editable
• all other native <textarea> attributes are supported and passed to the due element

Text Input Component

Interface (Theme)

{
  label: {
    // represents the appearance of the label for the input field
    width,
    fontSize,
    fontWeight,
    fontColor,
    letterSpacing,
    style // CSS string to be used in case of very specific styling; should be left untouched in most cases
  },
  field: {
    // represents the appearance of the input field
    backgroundColor,
    borderRadius,
    fontColor,
    fontWeight,
    fontSize,
    vPadding,
    hPadding,
    placeholderColor,
    border // border CSS element, e.g "solid 1px",
    borderColor // makes possible to have different colors on each border side
  },
  searchIcon: {
    // represents the appearence of the search icon inside the input
    width,
    height,
    vPadding,
    hPadding,
  },
  showPasswordIcon: {
    // represents the appearance of the icon to use as a "show password" toggle
    height,
    marginRight,
    size, // string with units
    border, // border CSS element, e.g "solid 1px red"
    activeColor, // color when the password is showing
    inactiveColor, // color when the password is hidden
    innerCircleSize // string with units
  },
  showPasswordLabel: {
    // represents the appearance of the label by the side of the toggle
    fontSize,
    fontWeight,
    fontColor,
    maxWidth
  },
  errorMessage: {
    // represents the appearance of an error message to show if the input is invalid
    fontSize,
    fontColor
  },
  fieldReadMode: {
    // represents the appearance of the input field on read mode
    backgroundColor,
    borderRadius,
    fontColor,
    fontWeight,
    fontSize,
    vPadding,
    hPadding,
    border,
    borderColor
  }
}

Properties

The TextInput component offers the following props:

• label (string): a text at the top of the text input; can be empty
• name (string): native name attribute of textInput HTML element
• errorMessage (string): error message to show
• placeholder (string): native placeholder attribute of textInput HTML element
• type (string): native type attribute of textInput. By default is set to "text" but it can assume the following types:

- text - password - search

• value (string): native value attribute of textInput HTML element; basically the text to be in the text area field
• showPasswordText (string): text to be shown as radio button label when input is of type password
• handleChangeText (function): callback function to be called when the user inputs characters inside the text area; gets the text present in the area as argument
• renderSearchIcon (function): a function that returns an icon to be displayed when input is of type search. If this function is not provided, a default search icon will be display
• disabled (boolean): if set to true, it won't call the onChange callback when typing and the cursor will be in a not-allowed state
• customTheme (object): a custom theme that follows the structure explained above
• readMode (boolean): if set to true, it will show the text written on the text input; not editable
• all other native <input> attributes are supported and passed to the due element

Utils

generateBaseTheme Util

A function that gets a base theme (following the structure shown above) and generates a complete theme object ready to provide to a ThemeProvider component.