@glasswallsolutions/glasswall-ui-dev
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

glasswall-ui

CI CD Release
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.

Dependents (0)

Package Sidebar

Install

npm i @glasswallsolutions/glasswall-ui-dev

Weekly Downloads

0

Version

1.2.2

License

Apache-2.0

Unpacked Size

524 kB

Total Files

68

Last publish

Collaborators

  • glasswallsolutionssupport
  • ash_kapow
  • jmouldergw
  • jrowl0910
  • hgeorgiou
  • nadhode
  • sbirch
  • jpoolgw
  • dpatel7
  • pgerard
  • ahewitt-glasswall
  • mdignum
  • mbussell
  • lukerobbertse
  • asloman
  • vinnietram
  • gregrhein
  • gwromeyromes
  • acunning