Robust React UI Docs

Introduction

Robust React UI is built with the following points in mind.

Robust components

Full typescript support to increase developer productivity.
Components are heavily tested, such that unexpected bugs are minimised.
Most components use the controlled component design pattern, meaning you can separate your component data into the parent component, making managing state easier.

Strong focus on accessibility

Most of the components functionality is ported over from aria 1.1 spec.
Designs are also tested using the a11y storybook addon.

Theme support & modern CSS

General theming support for component sizes and colours via props.
This project makes use of CSS variables, meaning overriding CSS is simple, and creating custom themes (such as a dark theme) is achievable in a short amount of time.

Robust React UI is being developed using the latest LTS Node release (the current LTS is 14.17.1). It is recommended to use this version with the library, albeit other versions may work perfectly fine too.

Installing with npm

npm install robust-react-ui

Installing with yarn

yarn add robust-react-ui

Importing the styles

Robust React UI comes with both compressed (minified) and uncompressed css. You will need to import either of these CSS files into the root of your react application.

import 'robust-react-ui/build/styles/main.css'

or minified:

import 'robust-react-ui/build/styles/main.min.css'

How to use code splitting

Code splitting is enabled in this library. Meaning you can import components directly in some cases, reducing your bundle size and increasing the overall performance of your application.

Example 1: Importing components without code splitting

Using this method you get the benefit of IntelliSense. However it will import the full component, this may not be ideal especially in cases where the component is a compound component and has several children components.

import { Button, Link, Form } from 'robust-react-ui'

Example 2: Importing components using code splitting

This is the optimal way to import. However you may have to dig through build folder to find the component you're looking for. Note: this method must be used for the Icon component, as it has over 280 children fragments.

import Button from 'robust-react-ui/build/components/Button';
import Icon from 'robust-react-ui/build/components/Icon';
# import two icon fragments
import Map from 'robust-react-ui/build/components/Icon/Map';
import Phone from 'robust-react-ui/build/components/Icon/Phone';

How to access Typescript types

Why it is important to use interfaces

Each component in Robust React UI has a set of Typescript interfaces. These can be used to add IntelliSense and increase productivity whilst using Robust React UI components in your project. All interfaces are exported from the root of the project and every single interface is prefixed with a capital 'I', for example IButtonProps.

Example: Importing types for `Accordion` and `Carousel` components

import {
  IAccordionPanelProps,
  IAccordionProps,
  ICarouselProps,
  ICarouselSlideProps,
} from "robust-react-ui";

Components

Alert

src/components/Alert/Alert.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`fullWidth`	boolean		Component will take up the full width available.
`onCloseActionFunction`	(visibleState: boolean) => void		Function triggered when the close button is activated
`variant`	"primary" \| "success" \| "danger"	`primary`	Provides component with a colour theme.
`visible`	boolean		Controls the visibility of the Alert component

Features

Close button accessible by keyboard
Ability to pass in children
Supports multiple colour themes

Primary

Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod proident adipisicing.

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert onCloseActionFunction={onCloseActionFunction} visible={open}>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert onCloseActionFunction={onCloseActionFunction} visible={open}>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

Danger

Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod proident adipisicing.

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert
  variant="danger"
  onCloseActionFunction={onCloseActionFunction}
  visible={open}
>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert
  variant="danger"
  onCloseActionFunction={onCloseActionFunction}
  visible={open}
>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

Success

Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod proident adipisicing.

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert
  variant="success"
  onCloseActionFunction={onCloseActionFunction}
  visible={open}
>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

import React from 'react';
import Alert from 'robust-react-ui/build/components/Alert';
import Typography from 'robust-react-ui/build/components/Typography';
const [open, setOpen] = React.useState(true);
const onCloseActionFunction = () => setOpen(false);
<Alert
  variant="success"
  onCloseActionFunction={onCloseActionFunction}
  visible={open}
>
  <Typography.Paragraph>
    Et consectetur ex fugiat quis ipsum id aute adipisicing magna ex ad eiusmod
    proident adipisicing.
  </Typography.Paragraph>
</Alert>;

AlertDialogue

src/components/AlertDialogue/AlertDialogue.tsx

Prop name	Type	Default	Description
`bodyText`	string	Required	The body text of the modal.
`onCloseActionFunction`	() => void	Required	Function triggered when close button is activated.
`onConfirmActionFunction`	() => void	Required	Function triggered when confirm button is activated.
`open`	boolean	Required	Used to control the visibility of the modal.
`titleText`	string	Required	The title of the modal.
`cancelButtonText`	string	`Cancel`	Text to be shown in the cancel action button.
`confirmButtonText`	string	`Confrim`	Text to be shown in the confirm action button.

Features

Uses controlled component pattern
Pressing escape will close popup
Tab & shift tab to switch focus to next button
Close button auto focus on open
Focus is 'trapped' once open

Default

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
const [open, setOpen] = React.useState(false);
const onCloseActionFunction = () => setOpen(false);
const onConfirmActionFunction = () => setOpen(false);
const onClickFunction = () => setOpen(true);
<div>
  <Button onClickFunction={onClickFunction}>Show</Button>
  <AlertDialogue
    onCloseActionFunction={onCloseActionFunction}
    onConfirmActionFunction={onConfirmActionFunction}
    bodyText="Proident ex nostrud ex qui culpa utLabore ex duis aliqua culpa et."
    titleText="Cillumm fugiat Lorem esse."
    open={open}
    cancelButtonText="Close"
    confirmButtonText="Ok"
  />
</div>;

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
const [open, setOpen] = React.useState(false);
const onCloseActionFunction = () => setOpen(false);
const onConfirmActionFunction = () => setOpen(false);
const onClickFunction = () => setOpen(true);
<div>
  <Button onClickFunction={onClickFunction}>Show</Button>
  <AlertDialogue
    onCloseActionFunction={onCloseActionFunction}
    onConfirmActionFunction={onConfirmActionFunction}
    bodyText="Proident ex nostrud ex qui culpa utLabore ex duis aliqua culpa et."
    titleText="Cillumm fugiat Lorem esse."
    open={open}
    cancelButtonText="Close"
    confirmButtonText="Ok"
  />
</div>;

AutoComplete

src/components/AutoComplete/AutoComplete.tsx

Prop name	Type	Default	Description
`labelId`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`labelText`	string	Required	An accessible label.
`onChangeFunction`	(value: string) => void	Required	Function triggered interally, used when onChange event is activated.
`onClearOptionsFunction`	() => void	Required	Function triggered internally, used to clear the state of options prop
`onSelectOptionFunction`	(value: string) => void	Required	Function triggered internally, when an option is selected. Used to change the value prop
`options`	string[]	Required	Controlled state for a list of options.
`value`	string	Required	Controlled state for the current selected option.

Features

Uses controlled component pattern
Display a list of results from the parent component
Pressing up or down key will focus and select
Mouse hover will focus and select
If down is pressed and last item is selected, the first item will be selected
If up is pressed and first item is selected, the last item will be selected
Pressing escape closes the popup
Clicking away from popup will close the popup (blur)

Default

Choose a vegetable

import React from 'react';
import AutoComplete from 'robust-react-ui/build/components/AutoComplete';
const [options, setOptions] = React.useState([]);
const [mockData, setMockData] = React.useState([
  'acorn squash',
  'alfalfa sprout',
  'amaranth',
  'anise',
  'artichoke',
  'arugula',
  'asparagus',
  'aubergine',
  'azuki bean',
  'banana squash',
  'basil',
  'bean sprout',
  'beet',
  'black bean',
  'black-eyed pea',
  'bok choy',
  'borlotti bean',
  'broad beans',
  'broccoflower',
  'broccoli',
  'brussels sprout',
  'butternut squash',
  'cabbage',
  'calabrese',
  'caraway',
  'carrot',
  'cauliflower',
  'cayenne pepper',
  'celeriac',
  'celery',
  'chamomile',
  'chard',
  'chayote',
  'chickpea',
  'chives',
  'cilantro',
  'collard green',
  'corn',
  'corn salad',
  'courgette',
  'cucumber',
  'daikon',
  'delicata',
  'dill',
  'eggplant',
  'endive',
  'fennel',
  'fiddlehead',
  'frisee',
  'garlic',
  'gem squash',
  'ginger',
  'green bean',
  'green pepper',
  'habanero',
  'herbs and spice',
  'horseradish',
  'hubbard squash',
  'jalapeno',
  'jerusalem artichoke',
  'jicama',
  'kale',
  'kidney bean',
  'kohlrabi',
  'lavender',
  'leek ',
  'legume',
  'lemon grass',
  'lentils',
  'lettuce',
  'lima bean',
  'mamey',
  'mangetout',
  'marjoram',
  'mung bean',
  'mushroom',
  'mustard green',
  'navy bean',
  'new zealand spinach',
  'nopale',
  'okra',
  'onion',
  'oregano',
  'paprika',
  'parsley',
  'parsnip',
  'patty pan',
  'pea',
  'pinto bean',
  'potato',
  'pumpkin',
  'radicchio',
  'radish',
  'rhubarb',
  'rosemary',
  'runner bean',
  'rutabaga',
  'sage',
  'scallion',
  'shallot',
  'skirret',
  'snap pea',
  'soy bean',
  'spaghetti squash',
  'spinach',
  'squash',
  'sweet potato',
  'tabasco pepper',
  'taro',
  'tat soi',
  'thyme',
  'topinambur',
  'tubers',
  'turnip',
  'wasabi',
  'water chestnut',
  'watercress',
  'white radish',
  'yam',
  'zucchini',
]);
const [value, setValue] = React.useState('');
const onChangeFunction = (newValue) => {
  setValue(newValue);
  setOptions(
    mockData.filter((o) => o.toLowerCase().indexOf(newValue.toLowerCase()) > -1)
  );
};
const onSelectOptionFunction = (newValue) => setValue(newValue);
const onClearOptionsFunction = () => setOptions([]);
<AutoComplete
  labelText="Choose a vegetable"
  options={options}
  value={value}
  onClearOptionsFunction={onClearOptionsFunction}
  onSelectOptionFunction={onSelectOptionFunction}
  onChangeFunction={onChangeFunction}
/>;

import React from 'react';
import AutoComplete from 'robust-react-ui/build/components/AutoComplete';
const [options, setOptions] = React.useState([]);
const [mockData, setMockData] = React.useState([
  'acorn squash',
  'alfalfa sprout',
  'amaranth',
  'anise',
  'artichoke',
  'arugula',
  'asparagus',
  'aubergine',
  'azuki bean',
  'banana squash',
  'basil',
  'bean sprout',
  'beet',
  'black bean',
  'black-eyed pea',
  'bok choy',
  'borlotti bean',
  'broad beans',
  'broccoflower',
  'broccoli',
  'brussels sprout',
  'butternut squash',
  'cabbage',
  'calabrese',
  'caraway',
  'carrot',
  'cauliflower',
  'cayenne pepper',
  'celeriac',
  'celery',
  'chamomile',
  'chard',
  'chayote',
  'chickpea',
  'chives',
  'cilantro',
  'collard green',
  'corn',
  'corn salad',
  'courgette',
  'cucumber',
  'daikon',
  'delicata',
  'dill',
  'eggplant',
  'endive',
  'fennel',
  'fiddlehead',
  'frisee',
  'garlic',
  'gem squash',
  'ginger',
  'green bean',
  'green pepper',
  'habanero',
  'herbs and spice',
  'horseradish',
  'hubbard squash',
  'jalapeno',
  'jerusalem artichoke',
  'jicama',
  'kale',
  'kidney bean',
  'kohlrabi',
  'lavender',
  'leek ',
  'legume',
  'lemon grass',
  'lentils',
  'lettuce',
  'lima bean',
  'mamey',
  'mangetout',
  'marjoram',
  'mung bean',
  'mushroom',
  'mustard green',
  'navy bean',
  'new zealand spinach',
  'nopale',
  'okra',
  'onion',
  'oregano',
  'paprika',
  'parsley',
  'parsnip',
  'patty pan',
  'pea',
  'pinto bean',
  'potato',
  'pumpkin',
  'radicchio',
  'radish',
  'rhubarb',
  'rosemary',
  'runner bean',
  'rutabaga',
  'sage',
  'scallion',
  'shallot',
  'skirret',
  'snap pea',
  'soy bean',
  'spaghetti squash',
  'spinach',
  'squash',
  'sweet potato',
  'tabasco pepper',
  'taro',
  'tat soi',
  'thyme',
  'topinambur',
  'tubers',
  'turnip',
  'wasabi',
  'water chestnut',
  'watercress',
  'white radish',
  'yam',
  'zucchini',
]);
const [value, setValue] = React.useState('');
const onChangeFunction = (newValue) => {
  setValue(newValue);
  setOptions(
    mockData.filter((o) => o.toLowerCase().indexOf(newValue.toLowerCase()) > -1)
  );
};
const onSelectOptionFunction = (newValue) => setValue(newValue);
const onClearOptionsFunction = () => setOptions([]);
<AutoComplete
  labelText="Choose a vegetable"
  options={options}
  value={value}
  onClearOptionsFunction={onClearOptionsFunction}
  onSelectOptionFunction={onSelectOptionFunction}
  onChangeFunction={onChangeFunction}
/>;

Breadcrumbs

src/components/Breadcrumbs/Breadcrumbs.tsx

Prop name	Type	Default	Description
`data`	IBreadcrumbProps[]	Required	Data supporting an array of breadcrumbs
`ariaLabel`	string		An accessible label.
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.

Features

Uses the controlled component design pattern
Supports multiple links
Support multiple sizes

Small

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="small"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="small"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

Medium

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="medium"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="medium"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

Large

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="large"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

import React from 'react';
import Breadcrumbs from 'robust-react-ui/build/components/Breadcrumbs';
<Breadcrumbs
  size="large"
  data={[
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Nuhten',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Delore',
    },
    {
      isCurrent: false,
      linkHref: '#',
      linkText: 'Ipsum',
    },
    {
      isCurrent: true,
      linkHref: '#',
      linkText: 'Lorem',
    },
  ]}
/>;

Button

src/components/Button/Button.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`ariaControls`	string
`ariaLabel`	string		An accessible label.
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`key`	ReactText
`onClickFunction`	(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void		A function to be triggered on mouse click event.
`onKeyDownFunction`	(event: KeyboardEvent<HTMLButtonElement>) => void		A function to be triggered on keydown event.
`ref`	Ref<HTMLButtonElement>
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.
`square`	boolean	`false`	Creates equal padding vertically and horizontally
`tabIndex`	number
`variant`	"primary" \| "danger" \| "success" \| "secondary"	`primary`	Provides component with a colour theme.

Features

Uses native html tags for accessibility
Supports multiple sizes
Supports multiple colour themes
Supports custom onClick function

Themes

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
<>
  <Button variant="primary">Click me</Button>
  <Button variant="danger">Click me</Button>
  <Button variant="secondary">Click me</Button>
  <Button variant="success">Click me</Button>
</>;

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
<>
  <Button variant="primary">Click me</Button>
  <Button variant="danger">Click me</Button>
  <Button variant="secondary">Click me</Button>
  <Button variant="success">Click me</Button>
</>;

Sizes

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
<>
  <Button size="large">Click me</Button>
  <Button size="medium">Click me</Button>
  <Button size="small">Click me</Button>
</>;

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
<>
  <Button size="large">Click me</Button>
  <Button size="medium">Click me</Button>
  <Button size="small">Click me</Button>
</>;

Embedding icons

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
import Icon from 'robust-react-ui/build/components/Icon';
import Box from 'robust-react-ui/build/components/Icon/Box';
import Layout from 'robust-react-ui/build/components/Layout';
const { Row } = Layout;

<>
  <Button variant="success" size="small">
    <Row alignY="middle">
      <Icon variant="light" width={18} height={18}>
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>
  <Button variant="success" size="medium">
    <Row alignY="middle">
      <Icon variant="light" width={20} height={20}>
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>
  <Button variant="success" size="large">
    <Row alignY="middle">
      <Icon variant="light">
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>

  <Button size="small" square ariaLabel="visit gallery">
    <Icon variant="light" width={18} height={18}>
      <Box />
    </Icon>
  </Button>
  <Button size="medium" square ariaLabel="visit gallery">
    <Icon variant="light" width={20} height={20}>
      <Box />
    </Icon>
  </Button>
  <Button size="large" square ariaLabel="visit gallery">
    <Icon variant="light">
      <Box />
    </Icon>
  </Button>
</>;

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
import Icon from 'robust-react-ui/build/components/Icon';
import Box from 'robust-react-ui/build/components/Icon/Box';
import Layout from 'robust-react-ui/build/components/Layout';
const { Row } = Layout;

<>
  <Button variant="success" size="small">
    <Row alignY="middle">
      <Icon variant="light" width={18} height={18}>
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>
  <Button variant="success" size="medium">
    <Row alignY="middle">
      <Icon variant="light" width={20} height={20}>
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>
  <Button variant="success" size="large">
    <Row alignY="middle">
      <Icon variant="light">
        <Box />
      </Icon>
      <span>Learn more</span>
    </Row>
  </Button>

  <Button size="small" square ariaLabel="visit gallery">
    <Icon variant="light" width={18} height={18}>
      <Box />
    </Icon>
  </Button>
  <Button size="medium" square ariaLabel="visit gallery">
    <Icon variant="light" width={20} height={20}>
      <Box />
    </Icon>
  </Button>
  <Button size="large" square ariaLabel="visit gallery">
    <Icon variant="light">
      <Box />
    </Icon>
  </Button>
</>;

Using onClickFunction

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
const onClickFunction = () => alert('Hello');
<Button variant="secondary" onClickFunction={onClickFunction}>
  Click me
</Button>;

import React from 'react';
import Button from 'robust-react-ui/build/components/Button';
const onClickFunction = () => alert('Hello');
<Button variant="secondary" onClickFunction={onClickFunction}>
  Click me
</Button>;

Carousel

src/components/Carousel/Carousel.tsx

Prop name	Type	Default	Description
`ariaLabel`	string	Required	An accessible label.
`slides`	ICarouselSlideProps[]	Required	An array of slides.
`autoplay`	boolean	`false`	Toggles autoplay.
`intervalSeconds`	number	`5`	Delay in between slide transitions (seconds).

Features

Uses the controlled component pattern
Supports autoplay
Supports button actions for pause, play, next slide, previous slide
Pressing enter on focused image/text will visit link
Press tab or shift + tab will navigate between focusable elements

Default

Do dolored. Alolore quis temris e adipisicing deserunt.

Officia consectetur anim quis eu sit. Pariatur quis ea cupidatat ea irure ad laboris in esse minim excepteur. Dolor aliqua voluptate nisi ex ut tempor officia. Culpa ipsum voluptate ut amet elit cupidatat cillum aliqua fugiat nostrud exercitation pariatur deserunt. Id dolor veniam aliqua voluptate eiusmod pariatur excepteur dolor fugiat do et in.

Esse non mollit laborum amet sint veniam.

Magna nulla ea nulla ea commodo minim Lorem eu nisi laborum est nisi esse. Fugiat velit anim ea fugiat esse tempor esse. Lorem non sit ad enim laboris duis ad eu dolor ex velit nulla. Excepteur sint culpa irure ipsum ea amet ipsum. Sit reprehenderit exercitation Lorem consequat cupidatat mollit ullamco in ullamco exercitation veniam. Irure irure sint magna deserunt aliqua. Tempor consequat deserunt deserunt culpa incididunt et cillum sit deserunt.

Ea elit labore laboris ex deserunt.

Deserunt Lorem laboris mollit proident pariatur. Velit duis velit ut mollit laborum laborum eu cupidatat veniam deserunt culpa. Irure anim dolor et voluptate quis magna aliqua tempor nostrud labore consequat do. Quis nisi do enim mollit labore sint. Ullamco cupidatat commodo magna esse officia adipisicing aliquip ea ad magna magna excepteur.

import React from 'react';
import Carousel from 'robust-react-ui/build/components/Carousel';
import Layout from 'robust-react-ui/build/components/Layout';

<Layout.Container>
  <Carousel
    ariaLabel="Sample carousel"
    slides={[
      {
        imageSrc: 'https://via.placeholder.com/1200x500/bf9c0d/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading:
          'Do dolored. Alolore quis temris e adipisicing deserunt.',
        captionText:
          'Officia consectetur anim quis eu sit. Pariatur quis ea cupidatat ea irure ad laboris in esse minim excepteur. Dolor aliqua voluptate nisi ex ut tempor officia. Culpa ipsum voluptate ut amet elit cupidatat cillum aliqua fugiat nostrud exercitation pariatur deserunt. Id dolor veniam aliqua voluptate eiusmod pariatur excepteur dolor fugiat do et in.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/135691/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Esse non mollit laborum amet sint veniam.',
        captionText:
          'Magna nulla ea nulla ea commodo minim Lorem eu nisi laborum est nisi esse. Fugiat velit anim ea fugiat esse tempor esse. Lorem non sit ad enim laboris duis ad eu dolor ex velit nulla. Excepteur sint culpa irure ipsum ea amet ipsum. Sit reprehenderit exercitation Lorem consequat cupidatat mollit ullamco in ullamco exercitation veniam. Irure irure sint magna deserunt aliqua. Tempor consequat deserunt deserunt culpa incididunt et cillum sit deserunt.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/751754/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Ea elit labore laboris ex deserunt.',
        captionText:
          'Deserunt Lorem laboris mollit proident pariatur. Velit duis velit ut mollit laborum laborum eu cupidatat veniam deserunt culpa. Irure anim dolor et voluptate quis magna aliqua tempor nostrud labore consequat do. Quis nisi do enim mollit labore sint. Ullamco cupidatat commodo magna esse officia adipisicing aliquip ea ad magna magna excepteur.',
      },
    ]}
  />
</Layout.Container>;

import React from 'react';
import Carousel from 'robust-react-ui/build/components/Carousel';
import Layout from 'robust-react-ui/build/components/Layout';

<Layout.Container>
  <Carousel
    ariaLabel="Sample carousel"
    slides={[
      {
        imageSrc: 'https://via.placeholder.com/1200x500/bf9c0d/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading:
          'Do dolored. Alolore quis temris e adipisicing deserunt.',
        captionText:
          'Officia consectetur anim quis eu sit. Pariatur quis ea cupidatat ea irure ad laboris in esse minim excepteur. Dolor aliqua voluptate nisi ex ut tempor officia. Culpa ipsum voluptate ut amet elit cupidatat cillum aliqua fugiat nostrud exercitation pariatur deserunt. Id dolor veniam aliqua voluptate eiusmod pariatur excepteur dolor fugiat do et in.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/135691/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Esse non mollit laborum amet sint veniam.',
        captionText:
          'Magna nulla ea nulla ea commodo minim Lorem eu nisi laborum est nisi esse. Fugiat velit anim ea fugiat esse tempor esse. Lorem non sit ad enim laboris duis ad eu dolor ex velit nulla. Excepteur sint culpa irure ipsum ea amet ipsum. Sit reprehenderit exercitation Lorem consequat cupidatat mollit ullamco in ullamco exercitation veniam. Irure irure sint magna deserunt aliqua. Tempor consequat deserunt deserunt culpa incididunt et cillum sit deserunt.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/751754/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Ea elit labore laboris ex deserunt.',
        captionText:
          'Deserunt Lorem laboris mollit proident pariatur. Velit duis velit ut mollit laborum laborum eu cupidatat veniam deserunt culpa. Irure anim dolor et voluptate quis magna aliqua tempor nostrud labore consequat do. Quis nisi do enim mollit labore sint. Ullamco cupidatat commodo magna esse officia adipisicing aliquip ea ad magna magna excepteur.',
      },
    ]}
  />
</Layout.Container>;

Autoplay

Do dolored. Alolore quis temris e adipisicing deserunt.

Esse non mollit laborum amet sint veniam.

Ea elit labore laboris ex deserunt.

import React from 'react';
import Carousel from 'robust-react-ui/build/components/Carousel';
import Layout from 'robust-react-ui/build/components/Layout';
<Layout.Container>
  <Carousel
    ariaLabel="Sample carousel"
    autoplay
    slides={[
      {
        imageSrc: 'https://via.placeholder.com/1200x500/bf9c0d/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading:
          'Do dolored. Alolore quis temris e adipisicing deserunt.',
        captionText:
          'Officia consectetur anim quis eu sit. Pariatur quis ea cupidatat ea irure ad laboris in esse minim excepteur. Dolor aliqua voluptate nisi ex ut tempor officia. Culpa ipsum voluptate ut amet elit cupidatat cillum aliqua fugiat nostrud exercitation pariatur deserunt. Id dolor veniam aliqua voluptate eiusmod pariatur excepteur dolor fugiat do et in.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/135691/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Esse non mollit laborum amet sint veniam.',
        captionText:
          'Magna nulla ea nulla ea commodo minim Lorem eu nisi laborum est nisi esse. Fugiat velit anim ea fugiat esse tempor esse. Lorem non sit ad enim laboris duis ad eu dolor ex velit nulla. Excepteur sint culpa irure ipsum ea amet ipsum. Sit reprehenderit exercitation Lorem consequat cupidatat mollit ullamco in ullamco exercitation veniam. Irure irure sint magna deserunt aliqua. Tempor consequat deserunt deserunt culpa incididunt et cillum sit deserunt.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/751754/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Ea elit labore laboris ex deserunt.',
        captionText:
          'Deserunt Lorem laboris mollit proident pariatur. Velit duis velit ut mollit laborum laborum eu cupidatat veniam deserunt culpa. Irure anim dolor et voluptate quis magna aliqua tempor nostrud labore consequat do. Quis nisi do enim mollit labore sint. Ullamco cupidatat commodo magna esse officia adipisicing aliquip ea ad magna magna excepteur.',
      },
    ]}
  />
</Layout.Container>;

import React from 'react';
import Carousel from 'robust-react-ui/build/components/Carousel';
import Layout from 'robust-react-ui/build/components/Layout';
<Layout.Container>
  <Carousel
    ariaLabel="Sample carousel"
    autoplay
    slides={[
      {
        imageSrc: 'https://via.placeholder.com/1200x500/bf9c0d/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading:
          'Do dolored. Alolore quis temris e adipisicing deserunt.',
        captionText:
          'Officia consectetur anim quis eu sit. Pariatur quis ea cupidatat ea irure ad laboris in esse minim excepteur. Dolor aliqua voluptate nisi ex ut tempor officia. Culpa ipsum voluptate ut amet elit cupidatat cillum aliqua fugiat nostrud exercitation pariatur deserunt. Id dolor veniam aliqua voluptate eiusmod pariatur excepteur dolor fugiat do et in.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/135691/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Esse non mollit laborum amet sint veniam.',
        captionText:
          'Magna nulla ea nulla ea commodo minim Lorem eu nisi laborum est nisi esse. Fugiat velit anim ea fugiat esse tempor esse. Lorem non sit ad enim laboris duis ad eu dolor ex velit nulla. Excepteur sint culpa irure ipsum ea amet ipsum. Sit reprehenderit exercitation Lorem consequat cupidatat mollit ullamco in ullamco exercitation veniam. Irure irure sint magna deserunt aliqua. Tempor consequat deserunt deserunt culpa incididunt et cillum sit deserunt.',
      },
      {
        imageSrc: 'https://via.placeholder.com/1200x500/751754/ffffff',
        imageAlt: 'alt text for an image',
        href: 'https://github.com',
        captionHeading: 'Ea elit labore laboris ex deserunt.',
        captionText:
          'Deserunt Lorem laboris mollit proident pariatur. Velit duis velit ut mollit laborum laborum eu cupidatat veniam deserunt culpa. Irure anim dolor et voluptate quis magna aliqua tempor nostrud labore consequat do. Quis nisi do enim mollit labore sint. Ullamco cupidatat commodo magna esse officia adipisicing aliquip ea ad magna magna excepteur.',
      },
    ]}
  />
</Layout.Container>;

Icon

src/components/Icon/Base/Icon.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`height`	number	`24`	Changes the height attribute of the icon wrapper.
`variant`	"primary" \| "danger" \| "light" \| "dark" \| "success"	`primary`	Changes the colour theme of the icon.
`viewBox`	string	`0 0 24 24`	Changes the viewBox attribute of the icon wrapper.
`width`	number	`24`	Changes the width attribute of the icon wrapper.

Features

Supports multiple colour and size themes
Supports approximately 286 icon fragments
Icon has the ability to use a custom icon
All icons are sourced from the feather icon set (currently using v4.28.0).

Default

import Icon from 'robust-react-ui/build/components/Icon';
import CheckCircle from 'robust-react-ui/build/components/Icon/CheckCircle';
<Icon>
  <CheckCircle />
</Icon>;

import Icon from 'robust-react-ui/build/components/Icon';
import CheckCircle from 'robust-react-ui/build/components/Icon/CheckCircle';
<Icon>
  <CheckCircle />
</Icon>;

Using different icons

import Icon from 'robust-react-ui/build/components/Icon';
import CheckCircle from 'robust-react-ui/build/components/Icon/CheckCircle';
import Cloud from 'robust-react-ui/build/components/Icon/Cloud';
import Clipboard from 'robust-react-ui/build/components/Icon/Clipboard';
import ChevronUp from 'robust-react-ui/build/components/Icon/ChevronUp';
<>
  <Icon>
    <CheckCircle />
  </Icon>
  <Icon>
    <Cloud />
  </Icon>
  <Icon>
    <Clipboard />
  </Icon>
  <Icon>
    <ChevronUp />
  </Icon>
</>;

import Icon from 'robust-react-ui/build/components/Icon';
import CheckCircle from 'robust-react-ui/build/components/Icon/CheckCircle';
import Cloud from 'robust-react-ui/build/components/Icon/Cloud';
import Clipboard from 'robust-react-ui/build/components/Icon/Clipboard';
import ChevronUp from 'robust-react-ui/build/components/Icon/ChevronUp';
<>
  <Icon>
    <CheckCircle />
  </Icon>
  <Icon>
    <Cloud />
  </Icon>
  <Icon>
    <Clipboard />
  </Icon>
  <Icon>
    <ChevronUp />
  </Icon>
</>;

Using custom paths

import Icon from 'robust-react-ui/build/components/Icon';
<Icon>
  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
  <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
  <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
  <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
  <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
  <line x1="12" y1="22.08" x2="12" y2="12"></line>
</Icon>;

import Icon from 'robust-react-ui/build/components/Icon';
<Icon>
  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
  <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
  <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
  <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
  <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
  <line x1="12" y1="22.08" x2="12" y2="12"></line>
</Icon>;

Using variants (themes)

The default is "primary"

import Box from 'robust-react-ui/build/components/Icon/Box';
import Icon from 'robust-react-ui/build/components/Icon';
<>
  <Icon>
    <Box />
  </Icon>
  <Icon variant="danger">
    <Box />
  </Icon>

  <Icon variant="success">
    <Box />
  </Icon>
  <Icon variant="dark">
    <Box />
  </Icon>
  <Icon variant="light">
    <Box />
  </Icon>
</>;

import Box from 'robust-react-ui/build/components/Icon/Box';
import Icon from 'robust-react-ui/build/components/Icon';
<>
  <Icon>
    <Box />
  </Icon>
  <Icon variant="danger">
    <Box />
  </Icon>

  <Icon variant="success">
    <Box />
  </Icon>
  <Icon variant="dark">
    <Box />
  </Icon>
  <Icon variant="light">
    <Box />
  </Icon>
</>;

Custom sizes

import Box from 'robust-react-ui/build/components/Icon/Box';
import Icon from 'robust-react-ui/build/components/Icon';
<>
  <Icon width={48} height={48}>
    <Box />
  </Icon>
  <Icon width={32} height={32}>
    <Box />
  </Icon>
  <Icon width={24} height={24}>
    <Box />
  </Icon>
  <Icon width={16} height={16}>
    <Box />
  </Icon>
</>;

import Box from 'robust-react-ui/build/components/Icon/Box';
import Icon from 'robust-react-ui/build/components/Icon';
<>
  <Icon width={48} height={48}>
    <Box />
  </Icon>
  <Icon width={32} height={32}>
    <Box />
  </Icon>
  <Icon width={24} height={24}>
    <Box />
  </Icon>
  <Icon width={16} height={16}>
    <Box />
  </Icon>
</>;

Image

src/components/Image/Image.tsx

Prop name	Type	Default	Description
`alt`	string	Required	An accessible label for the component.
`src`	string	Required	The source url of the image.
`blurred`	boolean		Adds a blur filter effect to the image.
`bordered`	boolean		Renders Image with a border.
`circle`	boolean		Renders Image as a circle.
`height`	number		A fixed height for the component. Improves layout performance.
`scaling`	"unrestricted" \| "restricted-width"		Control how scaling behaviour of the Image.
`style`	CSSProperties		Style overrides.
`width`	number		A fixed width for the component. Improves layout performance.

Features

Uses native html tags for accessibility
Supports different scaling options
Supports circular images
Supports bordered images
Supports blurred images

Default

<Image
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

<Image
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

Scaling - Unrestricted

<Image
  scaling="unrestricted"
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

<Image
  scaling="unrestricted"
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

Scaling - Restricting width

<Image
  scaling="restricted-width"
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

<Image
  scaling="restricted-width"
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

Bordered

<Image
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

<Image
  bordered
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

Blurred

<Image
  blurred
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

<Image
  blurred
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={600}
  height={350}
/>

Circle

<Image
  circle
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={350}
  height={350}
/>

<Image
  circle
  alt="Lego pieces on the floor"
  src="https://picsum.photos/id/237/600/350"
  width={350}
  height={350}
/>

Link

src/components/Link/Link.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`href`	string	Required
`ariaDescribedBy`	string		Indicate id of component used to describe this component.
`ariaLabel`	string		An accessible label.
`display`	"inline" \| "block"	`inline`	Set display type, inline or block.
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.

Features

Supports multiple sizes

Small

Visit github

import Link from 'robust-react-ui/build/components/Link';
<Link size="small" href="https://github.com">
  Visit github
</Link>;

import Link from 'robust-react-ui/build/components/Link';
<Link size="small" href="https://github.com">
  Visit github
</Link>;

Default

Visit github

import Link from 'robust-react-ui/build/components/Link';
<Link size="medium" href="https://github.com">
  Visit github
</Link>;

import Link from 'robust-react-ui/build/components/Link';
<Link size="medium" href="https://github.com">
  Visit github
</Link>;

Large

Visit github

import Link from 'robust-react-ui/build/components/Link';
<Link size="large" href="https://github.com">
  Visit github
</Link>;

import Link from 'robust-react-ui/build/components/Link';
<Link size="large" href="https://github.com">
  Visit github
</Link>;

NavigationBar

src/components/NavigationBar/NavigationBar.tsx

Prop name	Type	Default	Description
`ariaLabel`	string	Required	An accessible label.
`data`	INavigationDataProps[]	Required
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`onEnterLinkFunction`	(href: string) => void

Features

Uses the controlled component design pattern
Supports nested dropdowns 2 levels deep
Hover to open menus
Full keyboard support
- Left arrow key to close current menu
- right arrow key to open sub menu
- Down arrow key
- Escape to close all menus

Default

<NavigationBar
  id="my-nav"
  ariaLabel="sample navigation bar"
  data={[
    {
      id: 1,
      parentId: null,
      linkName: 'Home',
      linkHref: 'https://github.com/danielc92/robust-react-ui',
    },

    {
      id: 17,
      parentId: null,
      linkName: 'Vegetables',
      children: [
        {
          id: 18,
          parentId: 17,
          linkName: 'Broccoli',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 19,
          parentId: 17,
          linkName: 'Carrot',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 20,
          parentId: 17,
          linkName: 'Radish',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 21,
          parentId: 17,
          linkName: 'Potato',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 22,
          parentId: 17,
          linkName: 'Eggplant',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
    {
      id: 23,
      parentId: null,
      linkName: 'Nuts',
      children: [
        {
          id: 24,
          parentId: 23,
          linkName: 'Almonds',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 25,
          parentId: 23,
          linkName: 'Peanuts',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 26,
          parentId: 23,
          linkName: 'Cashew',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 27,
          parentId: 23,
          linkName: 'Macadamia',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
    {
      id: 2,
      parentId: null,
      linkName: 'Fruits',
      children: [
        {
          id: 6,
          parentId: 2,
          linkName: 'Sweet Fruits',
          children: [
            {
              id: 10,
              parentId: 6,
              linkName: 'Apple',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 11,
              parentId: 6,
              linkName: 'Strawberries',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },

            {
              id: 13,
              parentId: 6,
              linkName: 'Kiwi',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
          ],
        },
        {
          id: 5,
          parentId: 2,
          linkName: 'Sour Fruits',
          children: [
            {
              id: 54,
              parentId: 5,
              linkName: 'Lemon',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 6548,
              parentId: 5,
              linkName: 'Mango',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 289654,
              parentId: 5,
              linkName: 'Lime',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 2544,
              parentId: 5,
              linkName: 'Grape',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
          ],
        },

        {
          id: 4,
          parentId: 2,
          linkName: 'Other',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
  ]}
/>

<NavigationBar
  id="my-nav"
  ariaLabel="sample navigation bar"
  data={[
    {
      id: 1,
      parentId: null,
      linkName: 'Home',
      linkHref: 'https://github.com/danielc92/robust-react-ui',
    },

    {
      id: 17,
      parentId: null,
      linkName: 'Vegetables',
      children: [
        {
          id: 18,
          parentId: 17,
          linkName: 'Broccoli',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 19,
          parentId: 17,
          linkName: 'Carrot',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 20,
          parentId: 17,
          linkName: 'Radish',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 21,
          parentId: 17,
          linkName: 'Potato',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 22,
          parentId: 17,
          linkName: 'Eggplant',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
    {
      id: 23,
      parentId: null,
      linkName: 'Nuts',
      children: [
        {
          id: 24,
          parentId: 23,
          linkName: 'Almonds',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 25,
          parentId: 23,
          linkName: 'Peanuts',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 26,
          parentId: 23,
          linkName: 'Cashew',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
        {
          id: 27,
          parentId: 23,
          linkName: 'Macadamia',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
    {
      id: 2,
      parentId: null,
      linkName: 'Fruits',
      children: [
        {
          id: 6,
          parentId: 2,
          linkName: 'Sweet Fruits',
          children: [
            {
              id: 10,
              parentId: 6,
              linkName: 'Apple',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 11,
              parentId: 6,
              linkName: 'Strawberries',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },

            {
              id: 13,
              parentId: 6,
              linkName: 'Kiwi',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
          ],
        },
        {
          id: 5,
          parentId: 2,
          linkName: 'Sour Fruits',
          children: [
            {
              id: 54,
              parentId: 5,
              linkName: 'Lemon',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 6548,
              parentId: 5,
              linkName: 'Mango',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 289654,
              parentId: 5,
              linkName: 'Lime',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
            {
              id: 2544,
              parentId: 5,
              linkName: 'Grape',
              linkHref: 'https://github.com/danielc92/robust-react-ui',
            },
          ],
        },

        {
          id: 4,
          parentId: 2,
          linkName: 'Other',
          linkHref: 'https://github.com/danielc92/robust-react-ui',
        },
      ],
    },
  ]}
/>

Pagination

src/components/Pagination/Pagination.tsx

Prop name	Type	Default	Description
`data`	IPaginationButtonProps[]	Required	Data supporting an array of pagination buttons
`ariaLabel`	string		An accessible label.
`rounded`	boolean		Enables a rounded button theme.

Features

Uses the controlled component pattern
Support for rounded button theme

Default

import React from 'react';
import Pagination from 'robust-react-ui/build/components/Pagination';
<Pagination
  data={[
    {
      current: false,
      href: '#',
      pageNumber: 1,
    },
    {
      current: true,
      href: '#',
      pageNumber: 2,
    },
    {
      current: false,
      href: '#',
      pageNumber: 3,
    },
    {
      current: false,
      href: '#',
      pageNumber: 4,
    },
    {
      current: false,
      href: '#',
      pageNumber: 5,
    },
    {
      current: false,
      href: '#',
      pageNumber: 6,
    },
  ]}
  ariaLabel="Pagination label"
  rounded={false}
/>;

import React from 'react';
import Pagination from 'robust-react-ui/build/components/Pagination';
<Pagination
  data={[
    {
      current: false,
      href: '#',
      pageNumber: 1,
    },
    {
      current: true,
      href: '#',
      pageNumber: 2,
    },
    {
      current: false,
      href: '#',
      pageNumber: 3,
    },
    {
      current: false,
      href: '#',
      pageNumber: 4,
    },
    {
      current: false,
      href: '#',
      pageNumber: 5,
    },
    {
      current: false,
      href: '#',
      pageNumber: 6,
    },
  ]}
  ariaLabel="Pagination label"
  rounded={false}
/>;

Rounded

import React from 'react';
import Pagination from 'robust-react-ui/build/components/Pagination';
<Pagination
  data={[
    {
      current: false,
      href: '#',
      pageNumber: 1,
    },
    {
      current: true,
      href: '#',
      pageNumber: 2,
    },
    {
      current: false,
      href: '#',
      pageNumber: 3,
    },
    {
      current: false,
      href: '#',
      pageNumber: 4,
    },
    {
      current: false,
      href: '#',
      pageNumber: 5,
    },
    {
      current: false,
      href: '#',
      pageNumber: 6,
    },
  ]}
  ariaLabel="Pagination label"
  rounded={true}
/>;

import React from 'react';
import Pagination from 'robust-react-ui/build/components/Pagination';
<Pagination
  data={[
    {
      current: false,
      href: '#',
      pageNumber: 1,
    },
    {
      current: true,
      href: '#',
      pageNumber: 2,
    },
    {
      current: false,
      href: '#',
      pageNumber: 3,
    },
    {
      current: false,
      href: '#',
      pageNumber: 4,
    },
    {
      current: false,
      href: '#',
      pageNumber: 5,
    },
    {
      current: false,
      href: '#',
      pageNumber: 6,
    },
  ]}
  ariaLabel="Pagination label"
  rounded={true}
/>;

ProgressBar

src/components/ProgressBar/ProgressBar.tsx

Prop name	Type	Default	Description
`currentValue`	number	Required	Controlled value for progress bar
`ariaLabel`	string	`Progress bar`	An accessible label
`fullWidth`	boolean		Component will take up the full width available.
`maximumValue`	number	`100`	Maximum value for the progress bar
`minimumValue`	number	`0`	Minimum value for the progress bar
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.
`variant`	"primary" \| "secondary" \| "danger" \| "success"	`primary`	Provides component with a colour theme.

Primary

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="primary" currentValue={80} />;

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="primary" currentValue={80} />;

Danger

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="danger" currentValue={35} />;

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="danger" currentValue={35} />;

Success

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="success" currentValue={60} />;

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="success" currentValue={60} />;

Full Width

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="primary" fullWidth currentValue={80} />;

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar variant="primary" fullWidth currentValue={80} />;

Custom minimum and maximum

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar
  variant="primary"
  currentValue={35}
  minimumValue={20}
  maximumValue={60}
/>;

import React from 'react';
import ProgressBar from 'robust-react-ui/build/components/ProgressBar';
<ProgressBar
  variant="primary"
  currentValue={35}
  minimumValue={20}
  maximumValue={60}
/>;

Review

src/components/Review/Review.tsx

Prop name	Type	Default	Description
`onCrossClickFunction`	() => void	Required	Function to clear the controlled state of Review
`onStarClickFunction`	(rating: number) => void	Required	Function to set controlled state of Review
`currentValue`	number	`0`
`formId`	string	`star_rating`	The wrapping form's id
`size`	"small" \| "medium" \| "large"	`medium`	Size of review stars

Features

Uses the controlled component design pattern
Supports up to 5 star review
Supports clearing review state

Default

import React from 'react';
import Review from 'robust-react-ui/build/components/Review';
const [rating, setRating] = React.useState(0);
const onCrossClickFunction = () => {
  setRating(0);
};
// rating is type number
const onStarClickFunction = (newRating) => {
  setRating(newRating);
};

<Review
  size="medium"
  currentValue={rating}
  onCrossClickFunction={onCrossClickFunction}
  onStarClickFunction={onStarClickFunction}
/>;

import React from 'react';
import Review from 'robust-react-ui/build/components/Review';
const [rating, setRating] = React.useState(0);
const onCrossClickFunction = () => {
  setRating(0);
};
// rating is type number
const onStarClickFunction = (newRating) => {
  setRating(newRating);
};

<Review
  size="medium"
  currentValue={rating}
  onCrossClickFunction={onCrossClickFunction}
  onStarClickFunction={onStarClickFunction}
/>;

TabList

src/components/TabList/TabList.tsx

Prop name	Type	Default	Description
`tabs`	ITabListTabProps[]	Required	Data supporting an array of tabs.
`ariaLabel`	string		An accessible label.
`fullWidth`	boolean	`false`	Component will take up the full width available.
`variant`	"primary" \| "danger" \| "success" \| "secondary"	`primary`	Provides component with a colour theme.

Features

Uses controlled component pattern
Pressing left will move to previous tab
Pressing right arrow will move to next tab
Pressing tab will move focus to content area
Pressing shift + tab will move focus back to tabs, from content area
Supports multiple colour themes

Primary

Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore culpa id ut dolor aliquip occaecat in proident mollit labore nulla.

Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa. Voluptate aute magna eu voluptate mollit cupidatat aute enim anim tempor. Officia amet tempor irure fugiat commodo dolor id.

Ea minim ex officia pariatur reprehenderit culpa officia in cillum voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis enim dolor pariatur eiusmod.

Mollit ex nulla incididunt consectetur aliquip aute duis magna do. Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex culpa ipsum Lorem fugiat enim.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="primary"
  tabs={[
    {
      tabId: 'pluto-tab',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="primary"
  tabs={[
    {
      tabId: 'pluto-tab',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

Success

Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa. Voluptate aute magna eu voluptate mollit cupidatat aute enim anim tempor. Officia amet tempor irure fugiat commodo dolor id.

Mollit ex nulla incididunt consectetur aliquip aute duis magna do. Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex culpa ipsum Lorem fugiat enim.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="success"
  tabs={[
    {
      tabId: 'pluto-tab2',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab2',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab2',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab2',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="success"
  tabs={[
    {
      tabId: 'pluto-tab2',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab2',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab2',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab2',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

Danger

Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa. Voluptate aute magna eu voluptate mollit cupidatat aute enim anim tempor. Officia amet tempor irure fugiat commodo dolor id.

Mollit ex nulla incididunt consectetur aliquip aute duis magna do. Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex culpa ipsum Lorem fugiat enim.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="danger"
  tabs={[
    {
      tabId: 'pluto-tab3',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab3',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab3',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab3',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="danger"
  tabs={[
    {
      tabId: 'pluto-tab3',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab3',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab3',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab3',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

Secondary

Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa. Voluptate aute magna eu voluptate mollit cupidatat aute enim anim tempor. Officia amet tempor irure fugiat commodo dolor id.

Mollit ex nulla incididunt consectetur aliquip aute duis magna do. Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex culpa ipsum Lorem fugiat enim.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="secondary"
  tabs={[
    {
      tabId: 'pluto-tab4',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab4',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab4',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab4',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
import TabList from 'robust-react-ui/build/components/TabList';
<TabList
  ariaLabel="Four planets"
  variant="secondary"
  tabs={[
    {
      tabId: 'pluto-tab4',
      buttonLabel: 'Pluto',
      buttonId: 'pluto',
      tabContent: (
        <Typography.Paragraph>
          Ex deserunt irure in et nisi est fugiat et laborum. Amet esse elit
          excepteur Lorem aute magna aliqua fugiat fugiat eu. Est minim labore
          culpa id ut dolor aliquip occaecat in proident mollit labore nulla.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'earth-tab4',
      buttonLabel: 'Earth',
      buttonId: 'earth',

      tabContent: (
        <Typography.Paragraph>
          Dolor pariatur id labore pariatur cillum amet officia in fugiat culpa.
          Voluptate aute magna eu voluptate mollit cupidatat aute enim anim
          tempor. Officia amet tempor irure fugiat commodo dolor id.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'venus-tab4',
      buttonLabel: 'Venus',
      buttonId: 'venus',
      tabContent: (
        <Typography.Paragraph>
          Ea minim ex officia pariatur reprehenderit culpa officia in cillum
          voluptate labore id dolor. Exercitation irure ipsum aute qui deserunt
          nisi in in ad tempor do in cupidatat. Reprehenderit sint nulla duis
          enim dolor pariatur eiusmod.
        </Typography.Paragraph>
      ),
    },
    {
      tabId: 'jupiter-tab4',
      buttonLabel: 'Jupiter',
      buttonId: 'jupiter',
      tabContent: (
        <Typography.Paragraph>
          Mollit ex nulla incididunt consectetur aliquip aute duis magna do.
          Culpa reprehenderit cupidatat eiusmod dolor anim in qui anim. In do ex
          culpa ipsum Lorem fugiat enim.
        </Typography.Paragraph>
      ),
    },
  ]}
/>;

Accordion

src/components/Accordion/Base/Accordion.tsx

Prop name	Type	Default	Description
`activePanel`	string	Required
`children`	ReactNode	Required
`onSelectPanelFunction`	(panelId: string) => void	Required
`fullWidth`	boolean		Component will take up the full width available.

Features

Uses the compound component design pattern
Uses controlled component pattern
Pressing down will move focus to next panel header
Pressing up will move focus to previous panel header
Pressing enter/space will open the current panel
Contents can be inserted into panels via children
Support for full width appearance

Default

Nisi sunt sint occaecat eu.

is ex in dolor magna aliqua ex.um aliquipem adipisicing. Mollin dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur officia irure.

import React from 'react';
import Accordion from 'robust-react-ui/build/components/Accordion';
import Image from 'robust-react-ui/build/components/Image';
import Typography from 'robust-react-ui/build/components/Typography';
const { Panel } = Accordion;
const [activePanel, setActivePanel] = React.useState('1');
const onSelectPanelFunction = (panelId) => setActivePanel(panelId);

<Accordion
  activePanel={activePanel}
  onSelectPanelFunction={onSelectPanelFunction}
>
  <Panel panelId="1" panelTitle="Lorem Ipsum">
    <Typography.Heading level={3}>
      Nisi sunt sint occaecat eu.
    </Typography.Heading>
    <Typography.Paragraph>
      is ex in dolor magna aliqua ex.um aliquipem adipisicing. Mollin dolor
      magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut
      ipsum sit proident dolor ipsum aliquipem adipisicing. Mollit et occaecat
      dolor proident fugiat pariatur officia irure.
    </Typography.Paragraph>
    <Image
      scaling="restricted-width"
      alt="Doggy"
      src="https://picsum.photos/id/237/600/350"
      width={600}
      height={350}
    />
  </Panel>
  <Panel panelId="2" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliqua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="3" panelTitle="Strud consequat offici">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliq ua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="4" panelTitle="Grud consequat offi">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
</Accordion>;

import React from 'react';
import Accordion from 'robust-react-ui/build/components/Accordion';
import Image from 'robust-react-ui/build/components/Image';
import Typography from 'robust-react-ui/build/components/Typography';
const { Panel } = Accordion;
const [activePanel, setActivePanel] = React.useState('1');
const onSelectPanelFunction = (panelId) => setActivePanel(panelId);

<Accordion
  activePanel={activePanel}
  onSelectPanelFunction={onSelectPanelFunction}
>
  <Panel panelId="1" panelTitle="Lorem Ipsum">
    <Typography.Heading level={3}>
      Nisi sunt sint occaecat eu.
    </Typography.Heading>
    <Typography.Paragraph>
      is ex in dolor magna aliqua ex.um aliquipem adipisicing. Mollin dolor
      magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut
      ipsum sit proident dolor ipsum aliquipem adipisicing. Mollit et occaecat
      dolor proident fugiat pariatur officia irure.
    </Typography.Paragraph>
    <Image
      scaling="restricted-width"
      alt="Doggy"
      src="https://picsum.photos/id/237/600/350"
      width={600}
      height={350}
    />
  </Panel>
  <Panel panelId="2" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliqua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="3" panelTitle="Strud consequat offici">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliq ua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="4" panelTitle="Grud consequat offi">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
</Accordion>;

Full Width

is ex in dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur officia irure.

import React from 'react';
import Accordion from 'robust-react-ui/build/components/Accordion';

import Typography from 'robust-react-ui/build/components/Typography';
const { Panel } = Accordion;
const [activePanel, setActivePanel] = React.useState('1');
const onSelectPanelFunction = (panelId) => setActivePanel(panelId);

<Accordion
  fullWidth
  activePanel={activePanel}
  onSelectPanelFunction={onSelectPanelFunction}
>
  <Panel panelId="1" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      is ex in dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat
      officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin
      dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia
      ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor
      magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut
      ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor magna
      aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit
      proident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="2" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliqua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="3" panelTitle="Strud consequat offici">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliq ua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="4" panelTitle="Grud consequat offi">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
</Accordion>;

import React from 'react';
import Accordion from 'robust-react-ui/build/components/Accordion';

import Typography from 'robust-react-ui/build/components/Typography';
const { Panel } = Accordion;
const [activePanel, setActivePanel] = React.useState('1');
const onSelectPanelFunction = (panelId) => setActivePanel(panelId);

<Accordion
  fullWidth
  activePanel={activePanel}
  onSelectPanelFunction={onSelectPanelFunction}
>
  <Panel panelId="1" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      is ex in dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat
      officia ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin
      dolor magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia
      ut ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor
      magna aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut
      ipsum sit proident dolor ipsum aliquipem adipisicing. Mollin dolor magna
      aliqua ex. Consectetur cupidatat ea nostrud consequat officia ut ipsum sit
      proident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="2" panelTitle="Lorem Ipsum">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliqua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="3" panelTitle="Strud consequat offici">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiat velit adipisicing duis ex in dolor magna aliq ua ex. Consectetur
      cupidatat ea nostrud consequat officia ut ipsum sit proident dolor ipsum
      aliquipem adipisicing. Mollit et occaecat dolor proident fugiat pariatur
      officia irure.
    </Typography.Paragraph>
  </Panel>
  <Panel panelId="4" panelTitle="Grud consequat offi">
    <Typography.Paragraph>
      Id ullamco commodo sunt velit in ea consequat ut aliquip consequat. Elit
      fugiident dolor ipsum aliquipem adipisicing. Mollit et occaecat dolor
      proident fugiat pariatur officia irure.
    </Typography.Paragraph>
  </Panel>
</Accordion>;

Panel

src/components/Accordion/Panel/Panel.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`panelId`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`panelTitle`	string	Required
`activePanel`	string
`handleFocusFirst`	() => void
`handleFocusLast`	() => void
`handleFocusNext`	(_index: number) => void
`handleFocusPrevious`	(_index: number) => void
`index`	number
`key`	ReactText
`onSelectPanelFunction`	(panelId: string) => void
`ref`	Ref<HTMLButtonElement>

Form

src/components/Form/Base/Form.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`onSubmitFunction`	() => void	Required	Function triggered interally, when form is submitted.
`ariaDescribedBy`	string		Indicate id of component used to describe this component.

Features

Uses the compound component design pattern

Full Example

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState({
  input_1: '',
  input_2: '',
  input_3: '',
});
const onChangeFunction = (event) => {
  setValue({ ...value, [event.target.name]: event.target.value });
};
const onSubmitFunction = () => alert(JSON.stringify(value));
<Form onSubmitFunction={onSubmitFunction}>
  <Form.FieldSet>
    <Form.Legend>Legend text</Form.Legend>
    <Form.Label htmlFor="input_1">Label text</Form.Label>
    <Form.Input
      name="input_1"
      placeholder="Enter some text"
      id="input_1"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_1}
    />

    <Form.Label htmlFor="input_2">Label text 2</Form.Label>
    <Form.Input
      name="input_2"
      placeholder="Enter some text"
      id="input_2"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_2}
    />

    <Form.Label htmlFor="input_3">Label text 3</Form.Label>
    <Form.Input
      name="input_3"
      placeholder="Enter some text"
      id="input_3"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_3}
    />
  </Form.FieldSet>
  <Form.Submit>Submit</Form.Submit>
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState({
  input_1: '',
  input_2: '',
  input_3: '',
});
const onChangeFunction = (event) => {
  setValue({ ...value, [event.target.name]: event.target.value });
};
const onSubmitFunction = () => alert(JSON.stringify(value));
<Form onSubmitFunction={onSubmitFunction}>
  <Form.FieldSet>
    <Form.Legend>Legend text</Form.Legend>
    <Form.Label htmlFor="input_1">Label text</Form.Label>
    <Form.Input
      name="input_1"
      placeholder="Enter some text"
      id="input_1"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_1}
    />

    <Form.Label htmlFor="input_2">Label text 2</Form.Label>
    <Form.Input
      name="input_2"
      placeholder="Enter some text"
      id="input_2"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_2}
    />

    <Form.Label htmlFor="input_3">Label text 3</Form.Label>
    <Form.Input
      name="input_3"
      placeholder="Enter some text"
      id="input_3"
      onChangeFunction={onChangeFunction}
      type="text"
      value={value.input_3}
    />
  </Form.FieldSet>
  <Form.Submit>Submit</Form.Submit>
</Form>;

CheckboxGroup

src/components/Form/CheckboxGroup/CheckboxGroup.tsx

Prop name	Type	Default	Description
`ariaLabelledBy`	string	Required	An accessible label via id of another element.
`id`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`onSelectFunction`	(keyValue: string, checkedValue: boolean) => void	Required
`values`	IFormCheckboxOptionProps[]	Required

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [values, setValues] = React.useState([
  {
    displayValue: 'Apple',
    keyValue: 'a',
    checked: false,
  },
  {
    displayValue: 'Apricot',
    keyValue: 'a2',
    checked: false,
  },
  {
    displayValue: 'Watermelon',
    keyValue: 'w',
    checked: true,
  },
  {
    displayValue: 'Banana',
    keyValue: 'b',
    checked: true,
  },
  {
    displayValue: 'Peach',
    keyValue: 'p',
    checked: true,
  },
  {
    displayValue: 'Orange',
    keyValue: 'o',
    checked: false,
  },
]);

const onSelectFunction = (keyValue, checked) => {
  setValues(
    values.map((option) => {
      if (option.keyValue === keyValue) {
        return { ...option, checked };
      }
      return option;
    })
  );
};

<Form>
  <Form.Label htmlFor="CheckboxGroup-example">Label</Form.Label>
  <Form.CheckboxGroup
    onSelectFunction={onSelectFunction}
    id="CheckboxGroup-example"
    placeholder="Type some text"
    type="text"
    ariaLabelledBy="checkbox-label"
    values={values}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [values, setValues] = React.useState([
  {
    displayValue: 'Apple',
    keyValue: 'a',
    checked: false,
  },
  {
    displayValue: 'Apricot',
    keyValue: 'a2',
    checked: false,
  },
  {
    displayValue: 'Watermelon',
    keyValue: 'w',
    checked: true,
  },
  {
    displayValue: 'Banana',
    keyValue: 'b',
    checked: true,
  },
  {
    displayValue: 'Peach',
    keyValue: 'p',
    checked: true,
  },
  {
    displayValue: 'Orange',
    keyValue: 'o',
    checked: false,
  },
]);

const onSelectFunction = (keyValue, checked) => {
  setValues(
    values.map((option) => {
      if (option.keyValue === keyValue) {
        return { ...option, checked };
      }
      return option;
    })
  );
};

<Form>
  <Form.Label htmlFor="CheckboxGroup-example">Label</Form.Label>
  <Form.CheckboxGroup
    onSelectFunction={onSelectFunction}
    id="CheckboxGroup-example"
    placeholder="Type some text"
    type="text"
    ariaLabelledBy="checkbox-label"
    values={values}
  />
</Form>;

FieldSet

src/components/Form/FieldSet/FieldSet.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Features

Uses native html tags for accessibility

Input

src/components/Form/Input/Input.tsx

Prop name	Type	Default	Description
`id`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`name`	string	Required	Maps to the name attribute
`onChangeFunction`	(event: ChangeEvent<HTMLInputElement>) => void	Required	Function triggered interally, used when onChange event is activated.
`placeholder`	string	Required	Placeholder text
`value`	string	Required	Controlled value for the Input
`disabled`	boolean		Controls the disabled state.
`error`	boolean
`errorMessage`	string
`fullWidth`	boolean		Component will take up the full width available.
`onBlurFunction`	(event: FocusEvent<HTMLInputElement>) => void		A function triggered when component loses focus.
`type`	"color" \| "text" \| "password" \| "date"	`text`

Features

Uses native html tags for accessibility
Uses the controlled component pattern
Supports multiple input types
Supports disabled and error states

Text

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Full width

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    fullWidth
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    fullWidth
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Error state

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    input
    placeholder="input placeholder text"
    text
    id="input_1"
    name="input_1"
    error
    errorMessage="Something is wrong."
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    input
    placeholder="input placeholder text"
    text
    id="input_1"
    name="input_1"
    error
    errorMessage="Something is wrong."
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Disabled state

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    id="input_1"
    name="input_1"
    disabled
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    id="input_1"
    name="input_1"
    disabled
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Password

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="password"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    placeholder="input placeholder text"
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="password"
    value={value}
  />
</Form>;

Color

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="color"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="color"
    value={value}
  />
</Form>;

Date

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="date"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="input_1">Label</Form.Label>
  <Form.Input
    id="input_1"
    name="input_1"
    onChangeFunction={onChangeFunction}
    type="date"
    value={value}
  />
</Form>;

Label

src/components/Form/Label/Label.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`htmlFor`	string
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`required`	boolean

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form>
  <Form.FieldSet>
    <Form.Legend>Form Legend</Form.Legend>
    <Form.Label>Input Label</Form.Label>
    <Form.Input />
  </Form.FieldSet>
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form>
  <Form.FieldSet>
    <Form.Legend>Form Legend</Form.Legend>
    <Form.Label>Input Label</Form.Label>
    <Form.Input />
  </Form.FieldSet>
</Form>;

Legend

src/components/Form/Legend/Legend.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`id`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.

Features

Uses native html tags for accessibility

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form>
  <Form.FieldSet>
    <Form.Legend>Form Legend</Form.Legend>
    <Form.Label>Input Label</Form.Label>
    <Form.Input />
  </Form.FieldSet>
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form>
  <Form.FieldSet>
    <Form.Legend>Form Legend</Form.Legend>
    <Form.Label>Input Label</Form.Label>
    <Form.Input />
  </Form.FieldSet>
</Form>;

Select

src/components/Form/Select/Select.tsx

Prop name	Type	Default	Description
`id`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`onChangeFunction`	(event: FocusEvent<HTMLSelectElement>) => void	Required	Function triggered interally, used when onChange event is activated.
`selectedValue`	string \| string[]	Required	Controlled selected value
`values`	IFormSelectOptionProps[]	Required	An array of values, each with a display name and key value.
`disabled`	boolean		Controls the disabled state.
`multiple`	boolean
`onBlurFunction`	(event: FocusEvent<HTMLSelectElement>) => void		A function triggered when component loses focus.

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [selectedValue, setSelected] = React.useState('');

const onChangeFunction = (event) => {
  setSelected(event.target.value);
};
<Form>
  <Form.Label htmlFor="select-example">Label</Form.Label>
  <Form.Select
    id="select-example"
    onChangeFunction={onChangeFunction}
    selectedValue={selectedValue}
    values={[
      {
        displayValue: 'Apple',
        keyValue: 'a',
      },
      {
        displayValue: 'Orange',
        keyValue: 'o',
      },
      {
        displayValue: 'Pear',
        keyValue: 'p',
      },
      {
        displayValue: 'Peace',
        keyValue: 'p2',
      },
    ]}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [selectedValue, setSelected] = React.useState('');

const onChangeFunction = (event) => {
  setSelected(event.target.value);
};
<Form>
  <Form.Label htmlFor="select-example">Label</Form.Label>
  <Form.Select
    id="select-example"
    onChangeFunction={onChangeFunction}
    selectedValue={selectedValue}
    values={[
      {
        displayValue: 'Apple',
        keyValue: 'a',
      },
      {
        displayValue: 'Orange',
        keyValue: 'o',
      },
      {
        displayValue: 'Pear',
        keyValue: 'p',
      },
      {
        displayValue: 'Peace',
        keyValue: 'p2',
      },
    ]}
  />
</Form>;

Submit

src/components/Form/Submit/Submit.tsx

Prop name	Type	Default	Description
`value`	string	Required
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.
`variant`	"primary" \| "danger" \| "success"	`primary`	Provides component with a colour theme.

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form.Submit>Submit</Form.Submit>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
<Form.Submit>Submit</Form.Submit>;

TextArea

src/components/Form/TextArea/TextArea.tsx

Prop name	Type	Default	Description
`id`	string	Required	Provides the component with an id attribute. May be used for accessibility purposes.
`name`	string	Required	Maps to the name attribute
`onChangeFunction`	(event: ChangeEvent<HTMLTextAreaElement>) => void	Required	Function triggered interally, used when onChange event is activated.
`placeholder`	string	Required	Placeholder text
`value`	string	Required	Controlled value for the TextArea
`disabled`	boolean		Controls the disabled state.
`error`	boolean
`errorMessage`	string
`fullWidth`	boolean		Component will take up the full width available.
`onBlurFunction`	(event: FocusEvent<HTMLTextAreaElement>) => void		A function triggered when component loses focus.
`rows`	number

Default

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="textArea1">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="textArea1">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea1"
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Features

Uses the controlled component pattern
Supports disabled and error states

Full width

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="textArea2">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea2"
    fullWidth
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);

<Form>
  <Form.Label htmlFor="textArea2">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea2"
    fullWidth
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Error state

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="textArea3">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea3"
    error
    errorMessage="Something is wrong."
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="textArea3">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea3"
    error
    errorMessage="Something is wrong."
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Disabled state

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="textArea4">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea4"
    disabled
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

import React from 'react';
import Form from 'robust-react-ui/build/components/Form';
const [value, setValue] = React.useState('');
const onChangeFunction = (event) => setValue(event.target.value);
<Form>
  <Form.Label htmlFor="textArea4">Label</Form.Label>
  <Form.TextArea
    placeholder="textarea placeholder text"
    id="textArea4"
    disabled
    onChangeFunction={onChangeFunction}
    type="text"
    value={value}
  />
</Form>;

Layout

src/components/Layout/Base/Layout.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Features

Uses the compound component design pattern

Column

src/components/Layout/Column/Column.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`ariaLabel`	string		An accessible label.
`ariaLabelledBy`	string		An accessible label via id of another element.
`id`	string		Unique id for the component
`paddingX`	"xxs" \| "xs" \| "s" \| "m" \| "l"	`s`	The horizontal padding
`paddingY`	"xxs" \| "xs" \| "s" \| "m" \| "l"	`s`	The vertical padding
`size`	"third" \| "half" \| "quarter"	`quarter`	Size setting for component.
`tagName`	"div" \| "aside" \| "main" \| "section"	`div`	The tag name, defaults to DIV tag

Features

Flexbox based layout
Different sizes quarter, third, half
By default, columns are responsive and wrap on laptop, tablet and mobile breakpoints

Quarter

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Half

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="half">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="half">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Third

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>

  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>

  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Quarter (no wrap)

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="quarter">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Half (no wrap)

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="half">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="half">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Third (no wrap)

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="third">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Custom tags

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="half" tagName="main">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half" tagName="section" ariaLabelledBy="Cupidatat">
    <Typography.Heading level={3} id="Cupidatat">
      Cupidatat temollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row wrap={false}>
  <Layout.Column size="half" tagName="main">
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column size="half" tagName="section" ariaLabelledBy="Cupidatat">
    <Typography.Heading level={3} id="Cupidatat">
      Cupidatat temollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Container

src/components/Layout/Container/Container.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.

Features

A centered container with 3 size presets

Small

Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat ipsum et mollit tempor ea.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Container size="small">
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Container size="small">
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

Medium (default)

Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat ipsum et mollit tempor ea.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';

<Layout.Container>
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';

<Layout.Container>
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

Large

Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat ipsum et mollit tempor ea.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';

<Layout.Container size="large">
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';

<Layout.Container size="large">
  <Typography.Paragraph>
    Dolore minim eiusmod fugiat sunt occaecat occaecat aliquip ullamco velit
    sit. Sunt eu voluptate in irure. Voluptate amet ullamco quis proident fugiat
    ipsum et mollit tempor ea.
  </Typography.Paragraph>
</Layout.Container>;

Grid

src/components/Layout/Grid/Grid.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`gap`	"xxs" \| "xs" \| "s" \| "m" \| "l"	`s`	Vertical horizontal spacing between grid items
`type`	"fixed" \| "fluid"	`fixed`

Features

Features split into two sections below;

Fixed type

Grid based layout.
Default of 6 column layout
Supports consistent spacing between GridItems, both horizontally and vertically
Supports highly custom layouts
Supports auto resizing on tablet and mobile breakpoints
On tablet layout changes to 4 columns
On mobile layout changes to 2 columns
Uses media queries under the hood to achieve responsive layout
More suitable towards image gallerys or high level layouts

Fluid type

Media query free responsive grid items of a predefined size
Does not use media queries to achieve responsive layout
More suitable for homogeous items, such as products or article listing

Fixed (default)

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim ';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore  sunt';
<Grid gap="m">
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>

  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim ';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore  sunt';
<Grid gap="m">
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>

  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

Fixed, with custom layout

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

Sunt cupidatat anim

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim ';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore  sunt';
<Grid gap="m">
  <Grid.GridItem
    variant="danger"
    config={{
      colStart: 2,
      rowStart: 2,
      width: 3,
      height: 2,
    }}
  >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem
    variant="success"
    config={{
      colStart: 4,
      rowStart: 1,
      width: 3,
      height: 1,
    }}
  >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim ';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore  sunt';
<Grid gap="m">
  <Grid.GridItem
    variant="danger"
    config={{
      colStart: 2,
      rowStart: 2,
      width: 3,
      height: 2,
    }}
  >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem
    variant="success"
    config={{
      colStart: 4,
      rowStart: 1,
      width: 3,
      height: 1,
    }}
  >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

Fluid

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid" gap="m">
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid" gap="m">
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem>
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

GridItem

src/components/Layout/GridItem/GridItem.tsx

Prop name	Type	Default	Description
`ariaLabel`	string		An accessible label.
`ariaLabelledBy`	string		An accessible label via id of another element.
`children`	ReactNode
`config`	{ rowStart: number; colStart: number; width: number; height: number; }		Used for custom positioning with 'fixed'.
`id`	string		Unique id for the component
`paddingX`	"xxs" \| "xs" \| "s" \| "m" \| "l"	`s`	The horizontal padding
`paddingY`	"xxs" \| "xs" \| "s" \| "m" \| "l"	`s`	The vertical padding
`tagName`	"div" \| "aside" \| "main" \| "section"	`div`	The tag name, defaults to DIV tag
`variant`	"primary" \| "dark" \| "light" \| "success" \| "danger"	`primary`	Colour theme.

Padding

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem paddingX="s" paddingY="s">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="l" paddingY="l">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem paddingX="s" paddingY="s">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="l" paddingY="l">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

Variants

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem paddingX="m" paddingY="m" variant="danger">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem paddingX="m" paddingY="m" variant="primary">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem paddingX="m" paddingY="m" variant="light">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="dark">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="success" >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem paddingX="m" paddingY="m" variant="danger">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem paddingX="m" paddingY="m" variant="primary">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem paddingX="m" paddingY="m" variant="light">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="dark">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="success" >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

Rendering with custom tag names

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

Sunt cupidatat anim duis occaecat. Adipisicing aliqua

Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem tagName="section" paddingX="m" paddingY="m" variant="danger">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem tagName="main"  paddingX="m" paddingY="m" variant="primary">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem tagName="aside" paddingX="m" paddingY="m" variant="light">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="dark">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="success" >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

import Grid from 'robust-react-ui/build/components/Layout/Grid';
import Typography from 'robust-react-ui/build/components/Typography';
const heading = 'Sunt cupidatat anim duis occaecat. Adipisicing aliqua';
const paragraph =
  'Non pariatur incididunt eu culpa laboris ullamco ea. Magna culpa mollit in mollit. Sunt ea qui culpa ut labore Lorem est reprehenderit est eiusmod cupidatat eiusmod. Consequat fugiat aute ut sunt';
<Grid type="fluid">
  <Grid.GridItem tagName="section" paddingX="m" paddingY="m" variant="danger">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem tagName="main"  paddingX="m" paddingY="m" variant="primary">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>{' '}
  <Grid.GridItem tagName="aside" paddingX="m" paddingY="m" variant="light">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="dark">
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
  <Grid.GridItem paddingX="m" paddingY="m" variant="success" >
    <Typography.Heading level={4}>{heading}</Typography.Heading>
    <Typography.Paragraph>{paragraph}</Typography.Paragraph>
  </Grid.GridItem>
</Grid>;

Row

src/components/Layout/Row/Row.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`alignX`	"left" \| "right" \| "even-between" \| "even-around"	`left`
`alignY`	"top" \| "bottom" \| "middle" \| "stretch"	`stretch`
`wrap`	boolean	`true`	Wrap columns when they overflow.

Default

Cupidatat tempor deserunt in do nisi eiusmllit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat temollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.

Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum commodo elit cillum.

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

import React from 'react';
import Layout from 'robust-react-ui/build/components/Layout';
import Typography from 'robust-react-ui/build/components/Typography';
<Layout.Row>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmllit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>Cupidatat temollit.</Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmod esse ad nullt.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
  <Layout.Column>
    <Typography.Heading level={3}>
      Cupidatat tempor deserunt in do nisi eiusmooccaecat mollit.
    </Typography.Heading>
    <Typography.Paragraph>
      Anim commodo laborum eu anim sint officia reprehenderit commodo anim ea
      officia esse occaecat. Laborum ipsum qui Lorem sint eiusmod Lorem. Ipsum
      commodo elit cillum.
    </Typography.Paragraph>
  </Layout.Column>
</Layout.Row>;

Table

src/components/Table/Base/Table.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`ariaDescribedBy`	string		Indicate id of component used to describe this component.
`ariaLabel`	string		An accessible label.
`centerCellContent`	boolean		Center content of Cells.
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`striped`	boolean		Adds a striped background pattern to Rows.

Features

Uses the compound component design pattern
Uses native html tags for accessibility
Supports striped mode
Supports grouping table headers together
Support full width mode

Default

Ipsum	Ipsum	Ipsum	Ipsum
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem

import React from 'react';
import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

import React from 'react';
import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Full width

Ipsum	Ipsum	Ipsum	Ipsum
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem

import Table from 'robust-react-ui/build/components/Table';
<Table fullWidth>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

import Table from 'robust-react-ui/build/components/Table';
<Table fullWidth>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Striped

Ipsum	Ipsum	Ipsum	Ipsum
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem

import Table from 'robust-react-ui/build/components/Table';
<Table striped>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

import Table from 'robust-react-ui/build/components/Table';
<Table striped>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Centered cells

Ipsum	Ipsum	Ipsum	Ipsum
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem
Lorem	Lorem	Lorem	Lorem

import Table from 'robust-react-ui/build/components/Table';
<Table centerCellContent>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

import Table from 'robust-react-ui/build/components/Table';
<Table centerCellContent>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Row Span

Ipsum	Ipsum	Ipsum	Ipsum
Lorem	Lorem	Lorem	Lorem
	Lorem	Lorem	Lorem
	Lorem	Lorem	Lorem
Lipsim	Lorem	Lorem	Lorem
Lipsim	Lorem	Lorem	Lorem

import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Header scope="row" rowSpan={3}>
        Lorem
      </Table.Header>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row" rowSpan={2}>
        Lipsim
      </Table.Header>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
      <Table.Header>Ipsum</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Header scope="row" rowSpan={3}>
        Lorem
      </Table.Header>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row" rowSpan={2}>
        Lipsim
      </Table.Header>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
      <Table.Cell>Lorem</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

With Table.Foot

Items	Expenditure
Lorem	23,000
Ipsum	345,000
Delore	45,000
Septum	413,000

import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Items</Table.Header>
      <Table.Header scope="col">Expenditure</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Header scope="row">Lorem</Table.Header>
      <Table.Cell>23,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row">Ipsum</Table.Header>
      <Table.Cell>345,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row">Delore</Table.Header>
      <Table.Cell>45,000</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot>
    <Table.Row>
      <Table.Header scope="row">Septum</Table.Header>
      <Table.Cell>413,000</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>;

import Table from 'robust-react-ui/build/components/Table';
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Header>Items</Table.Header>
      <Table.Header scope="col">Expenditure</Table.Header>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Header scope="row">Lorem</Table.Header>
      <Table.Cell>23,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row">Ipsum</Table.Header>
      <Table.Cell>345,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Header scope="row">Delore</Table.Header>
      <Table.Cell>45,000</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot>
    <Table.Row>
      <Table.Header scope="row">Septum</Table.Header>
      <Table.Cell>413,000</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>;

Body

src/components/Table/Body/Body.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Cell

src/components/Table/Cell/Cell.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Foot

src/components/Table/Foot/Foot.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Head

src/components/Table/Head/Head.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

src/components/Table/Header/Header.tsx

Prop name	Type	Default
`children`	ReactNode	Required
`colSpan`	number
`rowSpan`	number
`scope`	"col" \| "row"

Row

src/components/Table/Row/Row.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Typography

src/components/Typography/Base/Typography.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Features

Uses the compound component design pattern

Heading

src/components/Typography/Heading/Heading.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`jumbo`	boolean	`false`	Increases the size by a multiplier factor. Can be applied to any level.
`level`	1 \| 2 \| 3 \| 4 \| 5 \| 6	`1`	Maps to tag size

Features

Uses native html tags for accessibility
Supports multiple sizes

Levels

Anim do exercitation consequat aute irure ut sit.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<React.Fragment>
  <Typography.Heading level={1}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={2}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={3}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={4}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={5}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={6}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
</React.Fragment>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<React.Fragment>
  <Typography.Heading level={1}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={2}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={3}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={4}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={5}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
  <Typography.Heading level={6}>
    Anim do exercitation consequat aute irure ut sit.
  </Typography.Heading>
</React.Fragment>;

Jumbo

Anim do exercitation consequat aute irure ut sit.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Heading jumbo level={1}>
  Anim do exercitation consequat aute irure ut sit.
</Typography.Heading>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Heading jumbo level={1}>
  Anim do exercitation consequat aute irure ut sit.
</Typography.Heading>;

Paragraph

src/components/Typography/Paragraph/Paragraph.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required
`bolded`	boolean	`false`	Toggles font weight to bold
`id`	string		Provides the component with an id attribute. May be used for accessibility purposes.
`size`	"small" \| "medium" \| "large"	`medium`	Size setting for component.

Features

Uses native html tags for accessibility
Supports multiple
Support bolding text

Default

Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui. Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing. Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore cillum officia irure pariatur anim laborum laborum dolor magna exercitation enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

Native text transforms

Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui. Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing. Consequat elit consequat esse magna sun commodo velit deserunt fugiat. Labore cillum officia irure pariatur anim laborum laborum dolor magna exercitation enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation <strong>do adipisicing fugiat</strong> incididunt ut minim
  eiusmod qui. Culpa incididunt do dolore Lorem mollit culpa laboris cillum
  adipisicing. Consequat elit consequat esse magna sun
  <em>commodo velit deserunt</em> fugiat. Labore cillum officia irure pariatur anim
  laborum laborum dolor magna exercitation enim. Ad mollit tempor nisi anim ex velit
  enim do quis ea nulla cillum est.
</Typography.Paragraph>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation <strong>do adipisicing fugiat</strong> incididunt ut minim
  eiusmod qui. Culpa incididunt do dolore Lorem mollit culpa laboris cillum
  adipisicing. Consequat elit consequat esse magna sun
  <em>commodo velit deserunt</em> fugiat. Labore cillum officia irure pariatur anim
  laborum laborum dolor magna exercitation enim. Ad mollit tempor nisi anim ex velit
  enim do quis ea nulla cillum est.
</Typography.Paragraph>;

Bold

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph bolded>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph bolded>
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

Small

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph size="small">
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph size="small">
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

Large

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph size="large">
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

import React from 'react';
import Typography from 'robust-react-ui/build/components/Typography';
<Typography.Paragraph size="large">
  Dolor sunt pariatur laboris tempor enim id cupidatat sunt veniam. Id ullamco
  fugiat exercitation do adipisicing fugiat incididunt ut minim eiusmod qui.
  Culpa incididunt do dolore Lorem mollit culpa laboris cillum adipisicing.
  Consequat elit consequat esse magna sunt commodo velit deserunt fugiat. Labore
  cillum officia irure pariatur anim laborum laborum dolor magna exercitation
  enim. Ad mollit tempor nisi anim ex velit enim do quis ea nulla cillum est.
</Typography.Paragraph>;

Robust components

Strong focus on accessibility

Theme support & modern CSS

Installing node

Installing with npm

Installing with yarn

Importing the styles

Example 1: Importing components without code splitting

Example 2: Importing components using code splitting

Why it is important to use interfaces

Example: Importing types for Accordion and Carousel components

Features

Primary

Danger

Success

Features

Default

Features

Default

Features

Small

Medium

Large

Features

Themes

Sizes

Embedding icons

Using onClickFunction

Features

Default

Autoplay

Features

Default

Using different icons

Using custom paths

Using variants (themes)

Custom sizes

Features

Default

Scaling - Unrestricted

Scaling - Restricting width

Bordered

Blurred

Circle

Features

Small

Default

Large

Features

Default

Features

Default

Rounded

Primary

Danger

Success

Full Width

Custom minimum and maximum

Features

Default

Features

Primary

Success

Danger

Secondary

Features

Default

Lorem Ipsum

Nisi sunt sint occaecat eu.

Lorem Ipsum

Strud consequat offici

Grud consequat offi

Full Width

Lorem Ipsum

Lorem Ipsum

Strud consequat offici

Grud consequat offi

Features

Full Example

Default

Example: Importing types for `Accordion` and `Carousel` components