@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.

    Install

    npm i @glasswallsolutions/glasswall-ui-dev

    DownloadsWeekly Downloads

    1

    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