GOV-GUI Component Library

Overview

GOV-GUI is a comprehensive web component library designed to enhance the user experience across the 1Gov/1Citizen Portal of Botswana. This library standardizes the graphical user interface across various government services, ensuring a consistent, accessible, and high-quality user experience that reflects the Botswana Government brand.

Built with Stencil.js, these web components work seamlessly across all modern JavaScript frameworks (Angular, React, Vue, Ember) and vanilla JavaScript projects.

Project Mission

GOV-GUI aims to solve the interface fragmentation issue in the 1Gov/1Citizen Portal by providing a unified component library. As the portal is built using a microservice architecture with contributions from various 100% citizen-owned companies, GOV-GUI ensures consistent UI/UX across all services while maintaining web accessibility standards and brand identity.

Installation

npm install gov-gui

Usage

Basic Integration

Import and register the components in your main JavaScript file:

// For JavaScript projects
import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);

After registration, you can use any component in your HTML:

<gov-button label="Click Me"></gov-button>

Framework-Specific Integration

React (JavaScript)

import React from 'react';
import { defineCustomElements } from 'gov-gui/loader';

// Register components once at the application root
defineCustomElements(window);

function App() {
  return (
    <div>
      <gov-button label="Click Me"></gov-button>
    </div>
  );
}

React (TypeScript / TSX)

import React from 'react';
import { JSX as GovGuiJSX } from 'gov-gui';
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements extends GovGuiJSX.IntrinsicElements {}
  }
}
function App() {
  return (
    <div>
      <gov-button label="Click Me"></gov-button>
    </div>
  );
}

Angular

In main.ts:

import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);

In app.module.ts:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  // other configurations
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Vue

In main.js:

import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);

Ember

In app/index.html:

<script src="node_modules/gov-gui/dist/gov-gui/gov-gui.esm.js"></script>

Or in your application code:

import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);

Available Components

GOV-GUI offers a rich set of components designed for government service interfaces:

• Layout Components: gov-layout, gov-container, gov-row, gov-box,gov-topbar, gov-sidebar,
• Components: gov-menubar, gov-breadcrumb, gov-tabs,gov-form, gov-input, gov-checkbox, gov-radiobutton, gov-dropdown, gov-combo-box, gov-date-time-picker, gov-alert, gov-modal, gov-toaster, gov-tooltip, gov-popups,gov-table, gov-pagination, gov-chart, gov-badge, gov-avatar, gov-button, gov-accordion, gov-stepper, gov-slider, gov-switcher, gov-chip, gov-choice-chips, gov-segmented-chips, gov-icon, gov-upload, gov-calender

TypeScript Support

For TypeScript projects, especially those using React with TSX files, GOV-GUI provides full type definitions. To use components in TSX files without TypeScript errors:

1. Import and Declare the intrinsic element once in your application's entry point:

  import { JSX as GovGuiJSX } from 'gov-gui';
  declare module 'react' {
    namespace JSX {
      interface IntrinsicElements extends GovGuiJSX.IntrinsicElements {}
    }
  }

2. Now you can use any GOV-GUI component in your TSX files without type errors.

Development

To contribute to GOV-GUI:

git clone [repository-url]
cd gov-gui
npm install
npm start

To build for production:

npm run build

To run tests:

npm test

License

[License information]

About the 1Gov/1Citizen Portal

The 1Gov/1Citizen Portal is a key initiative by the Government of Botswana to digitize government services. Built on a microservice architecture, it improves accessibility, efficiency, and transparency in public service delivery through digital transformation.