glasswall-ui

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

Getting Started

Importing a Component

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

Quickstart

Our dev testing page Dev.tsx gives a good indication of how to use the components.

Components

Auth

The Auth components provide a UX for handling authentication in a React app. Note: 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";

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

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

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

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

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

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

GlasswallNavbar

Navigation components that by default resemble the sidebar from Rebuild for Email.

It's designed to work with 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";

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

Props

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

Props

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

Props

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

Props

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

Props

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. This was also designed to work with 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

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

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

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

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

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

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