ogcio / ogcio-ds

Gov IE Frontend

Gov IE Frontend contains the code you need to start building a user interface for government platforms and services.

See live examples of Gov IE components, and guidance on when to use them in your service, in the Gov IE Frontend.

Contact the team

If you want to know more about Gov IE Frontend, you can go to the Contact us page.

Quick start

There are 2 ways to start using Gov IE Frontend components in your app.

Once installed, you will be able to use the code from the examples in the Gov IE Frontend in your service.

1. Install with npm (recommended)

We recommend installing Gov IE Frontend using node package manager (npm).

2. Install using compiled files

You can also install Gov IE Frontend by copying our CSS, JavaScript and asset files into your project.

Accessibility

The Gov IE Frontend team works hard to ensure that Gov IE Frontend is accessible.

Using Frontend will help your service meet level AA of WCAG 2.1. But you must still check that your service meets accessibility requirements, especially if you extend or modify components.

You should also use:

• the JavaScript from Gov IE Frontend

You can also read the accessibility statement for Gov IE Frontend

Getting updates

To be notified when there’s a new release, you can watch the Gov IE Frontend Github repository

Find out how to update with npm.

Licence

Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.

Run locally

You'll need Git and Node.js installed to get this project running.

Note: You will need the active LTS (Long-term support) Node.js version for this project (as specified in .nvmrc)

Fork repository (optional)

If you're an external contributor make sure to fork this project first

Clone repository

git clone [email protected]:ogcio/ogcio-ds.git # or clone your own fork

cd ogcio-ds

Using nvm (optional)

If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.

To enable this we use nvm (Node Version Manager) to switch between versions easily.

1. install nvm
2. Run nvm install in the project directory (this will use .nvmrc)

Install npm dependencies

npm install

Start a local server

We use Storybook to serve our components. To build Storybook locally sources (build), use:

npm run storybook:build

To build Storybook dist sources (storybook/dist), use:

npm run build:storybook:dist

If you don't need to build Storybook sources but just serve the pages.

npm run storybook:ci

And to build sources for storybook (under storybook/dist), serve Storybook and watch for changes.

npm run storybook

Storybook will be available in localhost:6006.

Husky Install Script

This repository contains a script to install and uninstall Husky hooks.

Installation

To install Husky hooks, run the following command:

npm run husky:install

Uninstall

To uninstall Husky hooks, run the following command:

npm run husky:uninstall

Gov IE Frontend package publishing

• Use conventional commits and squash commits to main
• Versioning and npm package publishing is handled by the Release Please GitHub action

---

Continuous integration

When changes are pushed to main branch on GitHub, Github Actions will:

• Build and publish the package to npm
• Deploy the Storybook website on GH pages
• Deploy the Storybook website to AWS

Contributing

Contributors to Gov IE repositories are expected to follow the Contributor Guide.

ogcio-ds's Issues

`.govie-radios--inline .govie-radios__item` is not specific enough when size attribute is also defined

Looking at the working example at https://storybook.design-system.ogcio.gov.ie/?path=/docs/form-radio--docs#inline, which works, it doesn't have a size attribute.

When using .govie-radios--medium in our codebase (FormsIE), the clear: none; property gets overridden by clear: left; defined in .govie-radios--medium .govie-radios__item.

The issue is that the specificity for both .govie-radios--medium .govie-radios__item and .govie-radios--inline .govie-radios__item is identical, therefore it's pot-luck which arrives first in the compiled css.

I have fixed this issue with an override locally in our file like so:

.govie-radios--inline.govie-radios--medium .govie-radios__item {
  clear: none;
}

But ideally, this would be taken care of in this library

Identical specificity leads to the issue:

Increased specificity when size is included fixes the problem:

Type Definitions

Hi all,

I'm trying to import javascript by using a bundler option as you mentioned here https://storybook.design-system.ogcio.gov.ie/?path=/story/docs-import-css-assets-and-javascript--page

But when I import something into a components I'm getting an error like below. To prevent this error, I'm using @ts-ignore top of the necessary lines.

import { SkipLink, Radios } from '@ogcio/ogcio-ds'

error TS7016: Could not find a declaration file for module '@ogcio/ogcio-ds'. 'C:/Users/alkimk/OneDrive/<PROJECT_NAME>/node_modules/@ogcio/ogcio-ds/govie/all.js' implicitly has an 'any' type. Try `npm i --save-dev @types/ogcio__ogcio-ds` if it exists or add a new declaration (.d.ts) file containing `declare module '@ogcio/ogcio-ds';` 20 import { SkipLink, Radios } from '@ogcio/ogcio-ds'

Assets Problems

Hi all,

I'm working on a new service which is using OGCIO's components. But I'm getting an error like below in build time.
Package version I used is "@ogcio/ogcio-ds": "^0.0.24"

./node_modules/@ogcio/ogcio-ds/govie/all.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
C:\Users\alkimk\OneDrive\online-cvo-ui\node_modules\@ogcio\ogcio-ds\govie\helpers\_font-faces.scss:24:10: Can't resolve './helpers/assets/fonts/lato-regular.woff2' in 'C:\Users\alkimk\OneDrive\<PROJECT_NAME>\node_modules\@ogcio\ogcio-ds\govie'

./node_modules/@ogcio/ogcio-ds/govie/all.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
C:\Users\alkimk\OneDrive\online-cvo-ui\node_modules\@ogcio\ogcio-ds\govie\helpers\_font-faces.scss:33:10: Can't resolve './helpers/assets/fonts/lato-bold.woff' in 'C:\Users\alkimk\OneDrive\<PROJECT_NAME>\node_modules\@ogcio\ogcio-ds\govie'

./node_modules/@ogcio/ogcio-ds/govie/all.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
C:\Users\alkimk\OneDrive\online-cvo-ui\node_modules\@ogcio\ogcio-ds\govie\helpers\_font-faces.scss:33:10: Can't resolve './helpers/assets/fonts/lato-bold.woff2' in 'C:\Users\alkimk\OneDrive\<PROJECT_NAME>\node_modules\@ogcio\ogcio-ds\govie'

I've developed a node script to move necessary files and folder to correct places that the project needs. But this problem is supposed to be solved in OGCIO's repository.

const path = require('path');
var fs = require('fs');

const ogcioSource = '/node_modules/@ogcio/ogcio-ds/govie/assets'
const ogcioTarget1 = '/node_modules/@ogcio/ogcio-ds/govie/components/footer/assets'
const ogcioTarget2 = '/node_modules/@ogcio/ogcio-ds/govie/helpers/assets'

const sourceDir = path.join(__dirname, ogcioSource);
const ogcioTarget1Dir = path.join(__dirname, ogcioTarget1);
const ogcioTarget2Dir = path.join(__dirname, ogcioTarget2);

console.log("Assets Path :  ", ogcioSource);
console.log("Target Path 1 : ", ogcioTarget1Dir);
console.log("Target Path 2 : ", ogcioTarget2Dir);

console.log("OGCIO's assets folder is copying into target 1")
fs.cp(sourceDir, ogcioTarget1Dir, {recursive: true}, (err) => {
  if (err) {
    console.error(err);
  }
});

console.log("OGCIO's assets folder is moving into target 2")
fs.cp(sourceDir, ogcioTarget2Dir, {recursive: true}, (err) => {
  if (err) {
    console.error(err);
  }
});

Checkboxes focus states are inconsistent in "medium" size

Whilst using checkboxes in our forms in https://github.com/ogcio/formsSG-4IE, we noticed that when using

.govie-checkboxes-medium__input with .govie-checkboxes-medium__label, the outlines aren't shown on focus.

I believe the issue is because the css in https://github.com/ogcio/ogcio-ds/blob/main/src/govie/components/checkboxes/_index.scss#L319 references govie-checkboxes__label rather than govie-checkboxes-medium__label

Comparing this to code around this line, and to the styles of medium Radio elements in focus (which focus styles do work as expected), I believe that the correct selector should be .govie-checkboxes-medium__input:focus+.govie-checkboxes-medium__label:before {

We've added a temporary fix in our application's css overrides, but ideally the fix should be in here.