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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultAuthContainer (name may be modified by CSSModules) |
An optional HTML class to be passed to the container div element. Defaults to .defaultAuthContainer which can be found in Container.module.scss. |
|
children | React.ReactNode | Anything placed inside the tag will be displayed as a child of the div. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
children |
username: LoginUsername (required) password: LoginPassword (required) submitButton: LoginSubmitButton (required) children: React.ReactNode |
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. | required | |
onSubmit | (event: FormEvent) => any |
Submit function - gets executed when the login form is submitted. Can return anything (including void). | required | |
className | string | .defaultLoginForm (name may be modified by CSSModules) |
An optional HTML class to be passed to the form element. Defaults to .defaultLoginForm which can be found in Login.module.scss. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
type | "text" | "email" |
The HTML type attribute to be applied to the Username input element. |
required | |
username | string | The username string passed to the HTML value of the Username input element. |
required | |
onChange | (username: string) => any |
HTML onChange function - executed on input event to the Username input element. |
required | |
placeholder | string | HTML placeholder value of the Username input element. |
||
required | boolean | false | HTML required value on the Username input element. |
|
className | string | .defaultLoginUsername (name may be modified by CSSModules) |
An optional HTML class to be passed to the input element. Defaults to .defaultLoginUsername which can be found in LoginUsername.module.scss. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
password | string | The password string passed to the HTML value of the Password input element. |
required | |
onChange | (password: string) => any |
HTML onChange function - executed on input event to the Password input element. |
required | |
placeholder | string | HTML placeholder value of the Password input element. |
||
required | boolean | false | HTML required value on the Password input element. |
|
className | string | .defaultLoginPassword (name may be modified by CSSModules) |
An optional HTML class to be passed to the input element. Defaults to .defaultLoginPassword which can be found in LoginPassword.module.scss. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
text | string | The text to be displayed in the HTML button element. |
required | |
className | string | .defaultLoginSubmitButton (name may be modified by CSSModules) |
An optional HTML class to be passed to the button element. Defaults to .defaultLoginSubmitButton which can be found in LoginSubmitButton.module.scss. |
|
disabled | boolean | false | HTML disabled value on the button element. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultGlasswallLogo (name may be modified by CSSModules) |
An optional HTML class to be passed to the div element. Defaults to .defaultGlasswallLogo which can be found in GlasswallLogo.module.scss. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultNavbar (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element. Defaults to .defaultNavbar which can be found in Navbar.module.scss. |
|
expanded | boolean | false | If the expanded prop is true, an expanded class will be added to the section element - that className is determined by the expandedClassName prop. | |
expandedClassName | string | .defaultExpanded (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element when the expanded prop is true .
Defaults to .defaultExpanded, which can be found in Navbar.module.scss.
|
|
children |
logo: TGlasswallLogo nav: TNavbar expandButton: TExpandButton username: TNavUsername children: React.ReactNode |
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. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultNav (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element. Defaults to .defaultNav which can be found in Nav.module.scss. |
|
children | TNavItem[] |
The list of TNavItem displayed in an HTML UL tag. |
required |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
onClick | () => any |
onClick function - gets executed when clicking on the li element. Can return anything (including void). | required | |
className | string | .defaultNavItem (name may be modified by CSSModules) |
An optional HTML class to be passed to the li element. Defaults to .defaultNavItem which can be found in NavItem.module.scss. |
|
children | React.ReactNode | React elements displayed as children of the li element. If you're using react-router-dom , we recommend declaring NavLinks here. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
toggle | () => void |
onClick function - gets executed when clicking on the button element. | required | |
className | string | .defaultExpandButton (name may be modified by CSSModules) |
An optional HTML class to be passed to the button element. Defaults to .defaultExpandButton which can be found in ExpandButton.module.scss. |
|
expanded | boolean | false | If the expanded prop is true, an expanded class will be added to the button element - that className is determined by the expandedClassName prop. | |
expandedClassName | string | .defaultExpanded (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element when the expanded prop is true .
Defaults to .defaultExpanded, which can be found in ExpandButton.module.scss.
|
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
username | string | The username string is displayed in a HTML p tag, and by default the text is centered. | required | |
className | string | .defaultNavUsername (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element. Defaults to .defaultNavUsername which can be found in NavUsername.module.scss. |
|
expanded | boolean | false | If the expanded prop is true, an expanded class will be added to the section element - that className is determined by the expandedClassName prop. | |
expandedClassName | string | .defaultExpanded (name may be modified by CSSModules) |
An optional HTML class to be passed to the section element when the expanded prop is true .
Defaults to .defaultExpanded, which can be found in NavUsername.module.scss.
|
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
expanded | boolean | false | If the expanded prop is true, an expanded class will be added to the div element - that className is determined by the expandedClassName prop. | |
expandedClassName | string | .defaultExpanded (name may be modified by CSSModules) |
An optional HTML class to be passed to the div element when the expanded prop is true .
Defaults to .defaultExpanded, which can be found in Main.module.scss.
|
|
className | string | .defaultMain (name may be modified by CSSModules) |
An optional HTML class to be passed to the div element. Defaults to .defaultMain which can be found in Main.module.scss. |
|
loading | boolean | false | If the loading prop is true, a loading class will be added to the div element - that className is determined by the loadingClassName prop. | |
loadingClassName | string | .defaultLoading (name may be modified by CSSModules) |
An optional HTML class to be passed to the div element when the loading prop is true .
Defaults to .defaultLoading, which can be found in Main.module.scss.
|
|
children | React.ReactNode | React elements displayed as children of the div element. By default, use of the Content component is expected here. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultContent (name may be modified by CSSModules) |
An optional HTML class to be passed to the div element. Defaults to .defaultContent which can be found in Content.module.scss. |
|
children | React.ReactNode | React elements displayed as children of the div element. This is where we recommend you put the components for each page. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
parentElement | HTMLElement |
A HTML element outside of the app's root, the portal is appended to this element in a div .
|
required | |
isOpen | boolean |
Bool to determine the open state of the modal. The Modal will be hidden if this is set to false , and if the unmountOnClose prop is set, the modal is removed from the DOM.
|
required | |
children |
header: TModalHeader (required) body: TModalBody (required) footer: TModalFooter (required) closeButton: TModalCloseButton |
Expects an array containing GlasswallModal.ModalHeader, GlasswallModal.ModalBody and GlasswallModal.ModalFooter. These are required, and optionally a GlasswallModal.CloseButton can also be displayed. | required | |
onClickOutside | () => any |
Function passed to the Modal div's onMouseDown 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.
|
||
overlayClassName | string | .defaultModalOverlay (name may be modified by CSSModules) | An optional HTML class to be passed to the overlay div element. Defaults to .defaultModalOverlay which can be found in GlasswallModal.module.scss. | |
modalClassName | string | .defaultModal (name may be modified by CSSModules) | An optional HTML class to be passed to the modal div element. Defaults to .defaultModal which can be found in GlasswallModal.module.scss. | |
openClassName | string | .open (name may be modified by CSSModules) |
An optional HTML class to be passed to the modal div element when the isOpen prop is true . Defaults to .open which can be found in GlasswallModal.module.scss.
|
|
unmountOnClose | boolean | false |
If true, will remove the modal from the DOM when the isOpen is false .
|
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
title | string | HTMLElement |
If the title is a string, it's displayed in an HTML h1 element. If it's not, it displays the component as it was passed in.
|
required | |
className | string | .defaultModalHeader (name may be modified by CSSModules) | An optional HTML class to be passed to the header element. Defaults to .defaultModalHeader which can be found in ModalHeader.module.scss. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultModalHeader (name may be modified by CSSModules) | An optional HTML class to be passed to the div element. Defaults to .defaultModalBody which can be found in ModalBody.module.scss. | |
children | React.ReactNode | React elements displayed as children of the div element. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
className | string | .defaultModalFooter (name may be modified by CSSModules) | An optional HTML class to be passed to the div element. Defaults to .defaultModalFooter which can be found in ModalFooter.module.scss. | |
children | React.ReactNode | React elements displayed as children of the footer element. |
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
Name | Type | Default | Description | Required |
---|---|---|---|---|
onClick | () => any |
onClick function - gets executed when clicking on the button element. Can return anything (including void). | ||
className | string | .defaultModalFooter (name may be modified by CSSModules) | An optional HTML class to be passed to the div element. Defaults to .defaultModalFooter which can be found in ModalFooter.module.scss. |