@glasswallsolutions/glasswall-ui/README.md

A React and Typescript UI Library to enforce a consistent codebase and allow for our frontend styles to come together from pre-packaged NPM modules.

# glasswall-ui
[![CI](https://github.com/filetrust/glasswall-ui/actions/workflows/CI.yaml/badge.svg)](https://github.com/filetrust/glasswall-ui/actions/workflows/CI.yaml)
[![CD](https://github.com/filetrust/glasswall-ui/actions/workflows/CD.yaml/badge.svg)](https://github.com/filetrust/glasswall-ui/actions/workflows/CD.yaml)
[![Release](https://github.com/filetrust/glasswall-ui/actions/workflows/Release.yaml/badge.svg)](https://github.com/filetrust/glasswall-ui/actions/workflows/Release.yaml)  
A React and Typescript UI Library to enforce a consistent codebase and allow for our frontend styles to come together from pre-packaged NPM modules.
  
# Installation
```
npm install @glasswallsolutions/glasswall-ui
```
  
or
  
```
yarn add @glasswallsolutions/glasswall-ui
```

<br/>

# Getting Started
## Importing a Component
```
import { GlasswallLogo } from "@glasswallsolutions/glasswall-ui";
```
  
## Quickstart
Our dev testing page [Dev.tsx](https://github.com/filetrust/glasswall-ui/blob/main/Dev.tsx) gives a good indication of how to use the components.

<br/>

# Components
## Auth
The Auth components provide a UX for handling authentication in a React app. <b>Note:</b> Auth does not include User Management components.

### Usage
```
<Auth.Container>
	<GlasswallLogo className={styles.logo} />

	<Auth.Login onSubmit={login}>
		<Auth.Username
			type="text"
			username={username}
			onChange={setUsername}
			placeholder="Username" />

		<Auth.Password
			password={password}
			onChange={setPassword}
			placeholder="Password" />

		<Auth.SubmitButton text="Login" />
	</Auth.Login>
</Auth.Container>
```

### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

<br/>

### Auth.Container
The Container provides the backdrop for the rest of the Login components, with Glasswall's blue gradient as a background by default.

#### Usage
```
<Auth.Container>
	<Auth.Login>
		{...}
	</Auth.Login>
</Auth.Container>
```

#### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-auth-container"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultAuthContainer (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the container div element. Defaults to .defaultAuthContainer which can be found in Container.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>Anything placed inside the <code><Auth.Container></code> tag will be displayed as a child of the div.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### Auth.Login
Login is an html `<form>` element designed for use on a Login page. The login function should be passed in as a prop and will be executed in the form's onSubmit event.

#### Usage
```
<Auth.Login onSubmit={login}>
	<Auth.Username
		type="text"
		username={username}
		onChange={setUsername}
		placeholder="Username" />

	<Auth.Password
		password={password}
		onChange={setPassword}
		placeholder="Password" />

	<Auth.SubmitButton text="Login" />
</Auth.Login>
```

#### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-auth-login"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>children</td>
			<td>
				<b>username:</b> LoginUsername (required)<br/>
				<b>password:</b> LoginPassword (required)<br/>
				<b>submitButton:</b> LoginSubmitButton (required)<br/>
				<b>children:</b> React.ReactNode
			</td>
			<td></td>
			<td>
				Expects an array containing Auth.Username, Auth.Password and Auth.SubmitButton. 
				These are required, but an optional array of react children can also be passed in and will be displayed under the required children.
			</td>
			<td>required</td>
		</tr>
		<tr>
			<td>onSubmit</td>
			<td><code>(event: FormEvent<HTMLFormElement>) => any</code></td>
			<td></td>
			<td>Submit function - gets executed when the login form is submitted. Can return anything (including void).</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultLoginForm (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the form element. Defaults to .defaultLoginForm which can be found in Login.module.scss.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### Auth.Username
An HTML `<input>` for the Login form - required by `Auth.Login`.

#### Usage
```
<Auth.Username
	type="text"
	username={username}
	onChange={setUsername}
	placeholder="Username"/>
```

#### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-auth-login-username"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>type</td>
			<td><code>"text" | "email"</code></td>
			<td></td>
			<td>The HTML <code>type</code> attribute to be applied to the Username input element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>username</td>
			<td>string</td>
			<td></td>
			<td>The username string passed to the HTML <code>value</code> of the Username input element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>onChange</td>
			<td><code>(username: string) => any</code></td>
			<td></td>
			<td>HTML <code>onChange</code> function - executed on input event to the Username input element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>string</td>
			<td></td>
			<td>HTML <code>placeholder</code> value of the Username input element.</td>
			<td></td>
		</tr>
		<tr>
			<td>required</td>
			<td>boolean</td>
			<td>false</td>
			<td>HTML <code>required</code> value on the Username input element.</td>
			<td></td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultLoginUsername (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the input element. Defaults to .defaultLoginUsername which can be found in LoginUsername.module.scss.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### Auth.Password
An HTML `<input>` for the Login form - required by `Auth.Login`.

#### Usage
```
<Auth.Password
		password={password}
		onChange={setPassword}
		placeholder="Password" />
```

#### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-auth-login-password"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>password</td>
			<td>string</td>
			<td></td>
			<td>The password string passed to the HTML <code>value</code> of the Password input element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>onChange</td>
			<td><code>(password: string) => any</code></td>
			<td></td>
			<td>HTML <code>onChange</code> function - executed on input event to the Password input element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>string</td>
			<td></td>
			<td>HTML <code>placeholder</code> value of the Password input element.</td>
			<td></td>
		</tr>
		<tr>
			<td>required</td>
			<td>boolean</td>
			<td>false</td>
			<td>HTML <code>required</code> value on the Password input element.</td>
			<td></td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultLoginPassword (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the input element. Defaults to .defaultLoginPassword which can be found in LoginPassword.module.scss.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### Auth.SubmitButton
An HTML `<button>` for the Login form - required by `Auth.Login`. The `type` attribute is set to `submit` and it submits the form when clicked.

#### Usage
```
<Auth.SubmitButton text="Login" />
```

#### API
```
import { Auth } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-auth-login-submit-button"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>text</td>
			<td>string</td>
			<td></td>
			<td>The text to be displayed in the HTML <code>button</code> element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultLoginSubmitButton (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the button element. Defaults to .defaultLoginSubmitButton which can be found in LoginSubmitButton.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>disabled</td>
			<td>boolean</td>
			<td>false</td>
			<td>HTML <code>disabled</code> value on the button element.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

## GlasswallLogo
Glasswall's company logo rendered as the SVG background of an HTML `<div>` element.

### Usage
```
<GlasswallLogo className={styles.logo} />
```

### API
```
import { GlasswallLogo } from "@glasswallsolutions/glasswall-ui";
```

### TestId
```
data-testid="glasswall-ui-logo"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultGlasswallLogo (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the div element. Defaults to .defaultGlasswallLogo which can be found in GlasswallLogo.module.scss.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

## GlasswallNavbar
Navigation components that by default resemble the sidebar from Rebuild for Email.
  
It's designed to work with [react-router-dom](https://www.npmjs.com/package/react-router-dom), but you can also implement your own navigation.

### Usage
```
<GlasswallNavbar.Navbar expanded={expanded}>
	<GlasswallLogo className={styles.navLogo} />

	<GlasswallNavbar.Nav>
		<GlasswallNavbar.NavItem onClick={onPageChange}>
			<NavLink
				to={"/"}
				exact={true}
				activeClassName={styles.defaultActive}
				isActive={() => isActive("/")}>
				<div>
					<p>Home</p>
				</div>
			</NavLink>
		</GlasswallNavbar.NavItem>

		<GlasswallNavbar.NavItem onClick={onPageChange}>
			<NavLink
				to={"/test"}
				exact={true}
				activeClassName={styles.defaultActive}
				isActive={() => isActive("/test")}>
				<div>
					<p>Test</p>
				</div>
			</NavLink>
		</GlasswallNavbar.NavItem>
	</GlasswallNavbar.Nav>

	<GlasswallNavbar.Username username="Username" expanded={expanded} />

	<GlasswallNavbar.ExpandButton expanded={expanded} toggle={() => setExpanded(!expanded)} />

</GlasswallNavbar.Navbar>
```

### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<br/>

### GlasswallNavbar.Navbar
Navbar is an HTML `<section>` element with default styling with Glasswall's dark blue gradient. It can be expanded and is used as a container to display the rest of the GlasswallNavbar components.

#### Usage
```
<GlasswallNavbar.Navbar>
	<GlasswallNavbar.Nav>
		{...}
	</GlasswallNavbar.Nav>
</GlasswallNavbar.Navbar>
```

#### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<!-- #### TestId
```
data-testid=""
``` -->

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultNavbar (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the section element. Defaults to .defaultNavbar which can be found in Navbar.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>expanded</td>
			<td>boolean</td>
			<td>false</td>
			<td>If the expanded prop is true, an expanded class will be added to the section element - that className is determined by the expandedClassName prop.</td>
			<td></td>
		</tr>
		<tr>
			<td>expandedClassName</td>
			<td>string</td>
			<td><code>.defaultExpanded  (name may be modified by CSSModules)</code></td>
			<td>
				An optional HTML <code>class</code> to be passed to the section element when the <code>expanded</code> prop is <code>true</code>. 
				Defaults to .defaultExpanded, which can be found in Navbar.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>
				<b>logo:</b> TGlasswallLogo<br/>
				<b>nav:</b> TNavbar<br/>
				<b>expandButton:</b> TExpandButton<br/>
				<b>username:</b> TNavUsername<br/>
				<b>children:</b> React.ReactNode
			</td>
			<td></td>
			<td>
				Expects an array containing GlasswallLogo, GlasswallNav.Navbar, GlasswallNav.ExpandButton and GlasswallNav.NavUsername. These are all optional but will be displayed in this order.
				An optional array of react children can also be passed in and will be displayed at the bottom of the Navbar.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallNavbar.Nav
Nav is an HTML `<nav>` element which contains a `<ul>` and expects 1 or more TNavItems.

### Usage
```
<GlasswallNavbar.Nav>
	{...}
</GlasswallNavbar.Nav>
```

#### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<!-- #### TestId
```
data-testid=""
``` -->

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultNav (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the section element. Defaults to .defaultNav which can be found in Nav.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td><code>TNavItem[]</code></td>
			<td></td>
			<td>The list of <code>TNavItem</code> displayed in an HTML UL tag.</td>
			<td>required</td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallNavbar.NavItem
NavItems are `<li>` tags that represent the navigtion links to other pages. The current page is highlighted by default.

#### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<!-- #### TestId
```
data-testid=""
``` -->

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>onClick</td>
			<td><code>() => any</code></td>
			<td></td>
			<td>onClick function - gets executed when clicking on the li element. Can return anything (including void).</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultNavItem (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the li element. Defaults to .defaultNavItem which can be found in NavItem.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>React elements displayed as children of the li element. If you're using <code>react-router-dom</code>, we recommend declaring NavLinks here.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallNavbar.ExpandButton
ExpandButton is a `<button>` element, styled by default to look like a `<` character when the Navbar is expanded, and a `>` character when it's not expanded.

#### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<!-- #### TestId
```
data-testid=""
``` -->

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>toggle</td>
			<td><code>() => void</code></td>
			<td></td>
			<td>onClick function - gets executed when clicking on the button element.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultExpandButton (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the button element. Defaults to .defaultExpandButton which can be found in ExpandButton.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>expanded</td>
			<td>boolean</td>
			<td>false</td>
			<td>If the expanded prop is true, an expanded class will be added to the button element - that className is determined by the expandedClassName prop.</td>
			<td></td>
		</tr>
		<tr>
			<td>expandedClassName</td>
			<td>string</td>
			<td><code>.defaultExpanded  (name may be modified by CSSModules)</code></td>
			<td>
				An optional HTML <code>class</code> to be passed to the section element when the <code>expanded</code> prop is <code>true</code>. 
				Defaults to .defaultExpanded, which can be found in ExpandButton.module.scss.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallNavbar.NavUsername
NavUsername is a `section` element, intended for displaying the currently signed in user's username. It's positioned at the bottom of the Navbar.

#### API
```
import { GlasswallNavbar } from "@glasswallsolutions/glasswall-ui";
```

<!-- #### TestId
```
data-testid=""
``` -->

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>username</td>
			<td>string</code></td>
			<td></td>
			<td>The username string is displayed in a HTML p tag, and by default the text is centered.</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultNavUsername (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the section element. Defaults to .defaultNavUsername which can be found in NavUsername.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>expanded</td>
			<td>boolean</td>
			<td>false</td>
			<td>If the expanded prop is true, an expanded class will be added to the section element - that className is determined by the expandedClassName prop.</td>
			<td></td>
		</tr>
		<tr>
			<td>expandedClassName</td>
			<td>string</td>
			<td><code>.defaultExpanded  (name may be modified by CSSModules)</code></td>
			<td>
				An optional HTML <code>class</code> to be passed to the section element when the <code>expanded</code> prop is <code>true</code>. 
				Defaults to .defaultExpanded, which can be found in NavUsername.module.scss.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

## Main
The `<div` component `Main` is intended to visually work with the `GlasswallNavbar` and `Content` components, and make up the main content 'pane' of the page.
<br/>
This was also designed to work with [react-router-dom](https://www.npmjs.com/package/react-router-dom), with `Main` sitting inside of a `<Route>`.

### Usage
```
<Route exact path="/test">
	<Main>
		<Content>
			{...}
		</Content>
	</Main>
</Route>
```

### API
```
import { Main } from "@glasswallsolutions/glasswall-ui";
```

### TestId
```
data-testid="glasswall-ui-main"
```

### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>expanded</td>
			<td>boolean</td>
			<td>false</td>
			<td>If the expanded prop is true, an expanded class will be added to the div element - that className is determined by the expandedClassName prop.</td>
			<td></td>
		</tr>
		<tr>
			<td>expandedClassName</td>
			<td>string</td>
			<td><code>.defaultExpanded  (name may be modified by CSSModules)</code></td>
			<td>
				An optional HTML <code>class</code> to be passed to the div element when the <code>expanded</code> prop is <code>true</code>. 
				Defaults to .defaultExpanded, which can be found in Main.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultMain (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the div element. Defaults to .defaultMain which can be found in Main.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>loading</td>
			<td>boolean</td>
			<td>false</td>
			<td>If the loading prop is true, a loading class will be added to the div element - that className is determined by the loadingClassName prop.</td>
			<td></td>
		</tr>
		<tr>
			<td>loadingClassName</td>
			<td>string</td>
			<td><code>.defaultLoading  (name may be modified by CSSModules)</code></td>
			<td>
				An optional HTML <code>class</code> to be passed to the div element when the <code>loading</code> prop is <code>true</code>. 
				Defaults to .defaultLoading, which can be found in Main.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>React elements displayed as children of the div element. By default, use of the <code>Content</code> component is expected here.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

## Content
The `Content` component is a `<div>`, which is expeceted to be the first child of the `Main` component.

### Usage
```
<Content>
	{...}
</Content>
```

### API
```
import { Content } from "@glasswallsolutions/glasswall-ui";
```

### TestId
```
data-testid="glasswall-ui-main-content"
```

### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td><code>.defaultContent (name may be modified by CSSModules)</code></td>
			<td>An optional HTML <code>class</code> to be passed to the div element. Defaults to .defaultContent which can be found in Content.module.scss.</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>React elements displayed as children of the div element. This is where we recommend you put the components for each page.</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

## GlasswallModal
GlasswallModal is a ReactPortal that sits outside of the root DOM tree. It allows for a pop up box to be displayed in front of the rest of the app.

### Usage
```
<GlasswallModal.Modal parentElement={document.getElementById("modalRoot")} isOpen={modalOpen} onClickOutside={() => setModalOpen(false)}>
	<GlasswallModal.Header title="Header" />

	<GlasswallModal.CloseButton onClick={() => setModalOpen(false)} />

	<GlasswallModal.Body>
		<div>Test Body</div>
	</GlasswallModal.Body>

	<GlasswallModal.Footer>
		<div>Test Footer</div>
	</GlasswallModal.Footer>
</GlasswallModal.Modal>
```

### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

### GlasswallModal.Modal
The Modal is a React Portal element, the logic to show/hide the modal goes here. It appends a DIV to the `parentElement` on render, and removes it on cleanup.

#### Usage
```
<GlasswallModal.Modal parentElement={document.getElementById("modalRoot")} isOpen={modalOpen} onClickOutside={() => setModalOpen(false)}>
	{...}
</GlasswallModal.Modal>
```

#### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-glasswall-modal"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>parentElement</td>
			<td>HTMLElement</td>
			<td></td>
			<td>
				A HTML element outside of the app's root, the portal is appended to this element in a <code>div</code>.
			</td>
			<td>required</td>
		</tr>
		<tr>
			<td>isOpen</td>
			<td>boolean</td>
			<td></td>
			<td>
				Bool to determine the open state of the modal. The Modal will be hidden if this is set to <code>false</code>, and if the <code>unmountOnClose</code> prop is set, the modal is removed from the DOM.
			</td>
			<td>required</td>
		</tr>
		<tr>
			<td>children</td>
			<td>
				<b>header:</b> TModalHeader (required)<br/>
				<b>body:</b> TModalBody (required)<br/>
				<b>footer:</b> TModalFooter (required)<br/>
				<b>closeButton:</b> TModalCloseButton
			</td>
			<td></td>
			<td>
				Expects an array containing GlasswallModal.ModalHeader, GlasswallModal.ModalBody and GlasswallModal.ModalFooter.  
				These are required, and optionally a GlasswallModal.CloseButton can also be displayed.
			</td>
			<td>required</td>
		</tr>
		<tr>
			<td>onClickOutside</td>
			<td><code>() => any</code></td>
			<td></td>
			<td>
				Function passed to the Modal div's <code>onMouseDown</code> attribute.  
				Gets executed if the user clicks outside of the Modal box (on the modal overlay). It's recommended to place a close handler here.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>overlayClassName</td>
			<td>string</td>
			<td>.defaultModalOverlay (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the overlay div element. Defaults to .defaultModalOverlay which can be found in GlasswallModal.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>modalClassName</td>
			<td>string</td>
			<td>.defaultModal (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the modal div element. Defaults to .defaultModal which can be found in GlasswallModal.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>openClassName</td>
			<td>string</td>
			<td>.open (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the modal div element when the <code>isOpen</code> prop is <code>true</code>. Defaults to .open which can be found in GlasswallModal.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>unmountOnClose</td>
			<td>boolean</td>
			<td>false</td>
			<td>
				If true, will remove the modal from the DOM when the <code>isOpen</code> is <code>false</code>.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallModal.Header
The header is a `<header>` element, intended for displaying a title for the Modal. It's positioned at the top of the Modal div.

#### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-glasswall-modal-header"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>title</td>
			<td>string | HTMLElement</td>
			<td></td>
			<td>
				If the title is a string, it's displayed in an HTML <code>h1</code> element. If it's not, it displays the component as it was passed in.
			</td>
			<td>required</td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td>.defaultModalHeader (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the header element. Defaults to .defaultModalHeader which can be found in ModalHeader.module.scss.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallModal.Body
The body of the Modal is a `div` element, positioned between the header and footer.

#### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-glasswall-modal-body"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td>.defaultModalHeader (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the div element. Defaults to .defaultModalBody which can be found in ModalBody.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>
				React elements displayed as children of the div element.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallModal.Footer
An HTML `<footer>` element, positioned at the bottom of the Modal, under the Body.

#### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-glasswall-modal-footer"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>className</td>
			<td>string</td>
			<td>.defaultModalFooter (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the div element. Defaults to .defaultModalFooter which can be found in ModalFooter.module.scss.
			</td>
			<td></td>
		</tr>
		<tr>
			<td>children</td>
			<td>React.ReactNode</td>
			<td></td>
			<td>
				React elements displayed as children of the footer element.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

<br/>

### GlasswallModal.CloseButton
An optional HTML `<button>` positioned in the top right of the Modal, on the same level as the Header.

#### API
```
import { GlasswallModal } from "@glasswallsolutions/glasswall-ui";
```

#### TestId
```
data-testid="glasswall-ui-glasswall-modal-close-button"
```

#### Props
<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Type</th>
			<th>Default</th>
			<th>Description</th>
			<th>Required</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>onClick</td>
			<td><code>() => any</code></td>
			<td></td>
			<td>
				onClick function - gets executed when clicking on the button element. Can return anything (including void).
			</td>
			<td></td>
		</tr>
		<tr>
			<td>className</td>
			<td>string</td>
			<td>.defaultModalFooter (name may be modified by CSSModules)</td>
			<td>
				An optional HTML class to be passed to the div element. Defaults to .defaultModalFooter which can be found in ModalFooter.module.scss.
			</td>
			<td></td>
		</tr>
	</tbody>
</table>