Skip to content

Commit

Permalink
docs: rename ogcio with gov-ie naming conventions (#212)
Browse files Browse the repository at this point in the history
  • Loading branch information
hamza14khan authored Jul 15, 2024
1 parent 69115a6 commit 85309f6
Show file tree
Hide file tree
Showing 15 changed files with 134 additions and 133 deletions.
2 changes: 1 addition & 1 deletion .storybook/preview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const parameters = {
'Install using precompiled files',
'Import CSS, assets and JavaScript',
'Configure components with JavaScript',
'Localise OGCIO-DS',
'Localise Gov IE DS',
'Support Internet Explorer 8',
'JavaScript API Reference',
'Sass API Reference',
Expand Down
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
# OGCIO Design System
# Gov IE Design System

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

See live examples of OGCIO components, and guidance on when to use them in your service, in the [OGCIO Design System](https://ogcio.github.io/ogcio-ds/).
See live examples of Gov IE components, and guidance on when to use them in your service, in the [Gov IE Design System](https://ogcio.github.io/ogcio-ds/).

## Contact the team

If you want to know more about OGCIO-DS, you can go to the [Contact us](https://www.design-system.ogcio.gov.ie/contact/) page.
If you want to know more about Gov IE Design System, you can go to the [Contact us](https://www.design-system.ogcio.gov.ie/contact/) page.

## Quick start

There are 2 ways to start using OGCIO-DS components in your app.
There are 2 ways to start using Gov IE Design System components in your app.

Once installed, you will be able to use the code from the examples in the OGCIO-DS in your service.
Once installed, you will be able to use the code from the examples in the Gov IE Design System in your service.

### 1. Install with npm (recommended)

We recommend [installing OGCIO-DS using node package manager
We recommend [installing Gov IE Design System using node package manager
(npm)](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-install-with-npm--docs).

### 2. Install using compiled files

You can also install OGCIO-DS by [copying our CSS, JavaScript and asset files into your project](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-install-using-precompiled-files--docs).
You can also install Gov IE Design System by [copying our CSS, JavaScript and asset files into your project](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-install-using-precompiled-files--docs).

## Accessibility

The OGCIO-DS team works hard to ensure that OGCIO-DS is accessible.
The Gov IE DS team works hard to ensure that Gov IE DS is accessible.

Using Frontend will help your service meet [level AA of WCAG 2.1](https://www.w3.org/TR/WCAG21/). 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 OGCIO-DS](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-import-css-assets-and-javascript--docs)
- [the JavaScript from Gov IE DS](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-import-css-assets-and-javascript--docs)
- [a separate stylesheet](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-support-internet-explorer-8--docs) if you support Internet Explorer 8

You can also read the [accessibility statement for OGCIO-DS](https://www.design-system.ogcio.gov.ie/accessibility/)
You can also read the [accessibility statement for Gov IE DS](https://www.design-system.ogcio.gov.ie/accessibility/)

## Getting updates

To be notified when there’s a new release, you can [watch the ogcio-ds Github repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)
To be notified when there’s a new release, you can [watch the Gov IE DS Github repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)

Find out how to [update with npm](https://ogcio.github.io/ogcio-ds/?path=/story/docs-update-with-npm--docs/).

Expand Down Expand Up @@ -128,7 +128,7 @@ To uninstall Husky hooks, run the following command:
npm run husky:uninstall
```

## OGCIO-DS package publishing
## Gov IE DS package publishing

- Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) and [squash commits](https://github.com/googleapis/release-please?tab=readme-ov-file#linear-git-commit-history-use-squash-merge) to `main`
- Versioning and npm package publishing is handled by the [Release Please GitHub action](https://github.com/google-github-actions/release-please-action)
Expand All @@ -147,4 +147,4 @@ When changes are pushed to `main` branch on GitHub, [Github Actions][github-acti

## Contributing

Contributors to OGCIO repositories are expected to follow the [Contributor Guide](https://ogcio.github.io/ogcio-ds-website/help/how-to-contribute/).
Contributors to Gov IE repositories are expected to follow the [Contributor Guide](https://ogcio.github.io/ogcio-ds-website/help/how-to-contribute/).
2 changes: 1 addition & 1 deletion src/govie/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Structure

OGCIO-DS is broken into a number of layers in order to help provide a
Gov IE DS is broken into a number of layers in order to help provide a
logical structure, loosely following the conventions of [ITCSS].

1. [Settings](#settings)
Expand Down
152 changes: 76 additions & 76 deletions src/govie/all.mjs
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { nodeListForEach } from './common.mjs'
import Accordion from './components/accordion/accordion.mjs'
import Button from './components/button/button.mjs'
import CharacterCount from './components/character-count/character-count.mjs'
import Checkboxes from './components/checkboxes/checkboxes.mjs'
import Details from './components/details/details.mjs'
import ErrorSummary from './components/error-summary/error-summary.mjs'
import Header from './components/header/header.mjs'
import Navigation from './components/navigation/navigation.mjs'
import NotificationBanner from './components/notification-banner/notification-banner.mjs'
import ProgressStepper from './components/progress-stepper/progress-stepper.mjs'
import Radios from './components/radios/radios.mjs'
import SkipLink from './components/skip-link/skip-link.mjs'
import StepByStepNav from './components/step-by-step-navigation/step-by-step-navigation.mjs'
import Superheader from './components/superheader/superheader.mjs'
import Tabs from './components/tabs/tabs.mjs'
import Tick from './components/tick/tick.mjs'
import Tooltip from './components/tooltip/tooltip.mjs'
import { nodeListForEach } from './common.mjs';
import Accordion from './components/accordion/accordion.mjs';
import Button from './components/button/button.mjs';
import CharacterCount from './components/character-count/character-count.mjs';
import Checkboxes from './components/checkboxes/checkboxes.mjs';
import Details from './components/details/details.mjs';
import ErrorSummary from './components/error-summary/error-summary.mjs';
import Header from './components/header/header.mjs';
import Navigation from './components/navigation/navigation.mjs';
import NotificationBanner from './components/notification-banner/notification-banner.mjs';
import ProgressStepper from './components/progress-stepper/progress-stepper.mjs';
import Radios from './components/radios/radios.mjs';
import SkipLink from './components/skip-link/skip-link.mjs';
import StepByStepNav from './components/step-by-step-navigation/step-by-step-navigation.mjs';
import Superheader from './components/superheader/superheader.mjs';
import Tabs from './components/tabs/tabs.mjs';
import Tick from './components/tick/tick.mjs';
import Tooltip from './components/tooltip/tooltip.mjs';

/**
* Initialise all components
*
* Use the `data-module` attributes to find, instantiate and init all of the
* components provided as part of OGCIO-DS.
* components provided as part of Gov IE DS.
*
* @param {object} [config] - Config
* @param {HTMLElement} [config.scope=document] - Scope to query for components
Expand All @@ -32,111 +32,111 @@ import Tooltip from './components/tooltip/tooltip.mjs'
* @param {object} [config.notificationBanner] - Notification Banner config
*/
function initAll(config) {
config = typeof config !== 'undefined' ? config : {}
config = typeof config !== 'undefined' ? config : {};

// Allow the user to initialise OGCIO-DS in only certain sections of the page
// Allow the user to initialise Gov IE DS in only certain sections of the page
// Defaults to the entire document if nothing is set.
var $scope = typeof config.scope !== 'undefined' ? config.scope : document
var $scope = typeof config.scope !== 'undefined' ? config.scope : document;

var $accordions = $scope.querySelectorAll('[data-module="govie-accordion"]')
var $accordions = $scope.querySelectorAll('[data-module="govie-accordion"]');
nodeListForEach($accordions, function ($accordion) {
new Accordion($accordion, config.accordion).init()
})
new Accordion($accordion, config.accordion).init();
});

var $buttons = $scope.querySelectorAll('[data-module="govie-button"]')
var $buttons = $scope.querySelectorAll('[data-module="govie-button"]');
nodeListForEach($buttons, function ($button) {
new Button($button, config.button).init()
})
new Button($button, config.button).init();
});

var $iconButtons = $scope.querySelectorAll(
'[data-module="govie-icon-button"]'
)
'[data-module="govie-icon-button"]',
);
nodeListForEach($iconButtons, function ($button) {
new Button($button, config.button).init()
})
new Button($button, config.button).init();
});

var $characterCounts = $scope.querySelectorAll(
'[data-module="govie-character-count"]'
)
'[data-module="govie-character-count"]',
);
nodeListForEach($characterCounts, function ($characterCount) {
new CharacterCount($characterCount, config.characterCount).init()
})
new CharacterCount($characterCount, config.characterCount).init();
});

var $checkboxes = $scope.querySelectorAll('[data-module="govie-checkboxes"]')
var $checkboxes = $scope.querySelectorAll('[data-module="govie-checkboxes"]');
nodeListForEach($checkboxes, function ($checkbox) {
new Checkboxes($checkbox).init()
})
new Checkboxes($checkbox).init();
});

var $details = $scope.querySelectorAll('[data-module="govie-details"]')
var $details = $scope.querySelectorAll('[data-module="govie-details"]');
nodeListForEach($details, function ($detail) {
new Details($detail).init()
})
new Details($detail).init();
});

// Find first error summary module to enhance.
var $errorSummary = $scope.querySelector(
'[data-module="govie-error-summary"]'
)
'[data-module="govie-error-summary"]',
);
if ($errorSummary) {
new ErrorSummary($errorSummary, config.errorSummary).init()
new ErrorSummary($errorSummary, config.errorSummary).init();
}

// Find first header module to enhance.
var $header = $scope.querySelector('[data-module="govie-header"]')
var $header = $scope.querySelector('[data-module="govie-header"]');
if ($header) {
new Header($header).init()
new Header($header).init();
}

// Find first header module to enhance.
var $superheader = $scope.querySelector('[data-module="govie-superheader"]')
var $superheader = $scope.querySelector('[data-module="govie-superheader"]');
if ($superheader) {
new Superheader($superheader).init()
new Superheader($superheader).init();
}

var $notificationBanners = $scope.querySelectorAll(
'[data-module="govie-notification-banner"]'
)
'[data-module="govie-notification-banner"]',
);
nodeListForEach($notificationBanners, function ($notificationBanner) {
new NotificationBanner(
$notificationBanner,
config.notificationBanner
).init()
})
config.notificationBanner,
).init();
});

var $radios = $scope.querySelectorAll('[data-module="govie-radios"]')
var $radios = $scope.querySelectorAll('[data-module="govie-radios"]');
nodeListForEach($radios, function ($radio) {
new Radios($radio).init()
})
new Radios($radio).init();
});

// Find first skip link module to enhance.
var $skipLink = $scope.querySelector('[data-module="govie-skip-link"]')
new SkipLink($skipLink).init()
var $skipLink = $scope.querySelector('[data-module="govie-skip-link"]');
new SkipLink($skipLink).init();

var $tabs = $scope.querySelectorAll('[data-module="govie-tabs"]')
var $tabs = $scope.querySelectorAll('[data-module="govie-tabs"]');
nodeListForEach($tabs, function ($tabs) {
new Tabs($tabs).init()
})
new Tabs($tabs).init();
});

var $stepByStepNav = $scope.querySelector('#govie-step-by-step-navigation')
new StepByStepNav($stepByStepNav).init()
var $stepByStepNav = $scope.querySelector('#govie-step-by-step-navigation');
new StepByStepNav($stepByStepNav).init();

var $progressSteppers = $scope.querySelectorAll(
'[data-module="govie-progress-stepper"]'
)
'[data-module="govie-progress-stepper"]',
);
nodeListForEach($progressSteppers, function ($progressStepper) {
new ProgressStepper($progressStepper).init()
})
new ProgressStepper($progressStepper).init();
});

var $ticks = $scope.querySelectorAll('[data-module="govie-tick"]')
var $ticks = $scope.querySelectorAll('[data-module="govie-tick"]');
nodeListForEach($ticks, function ($tick) {
new Tick($tick).init()
})
new Tick($tick).init();
});

var $tooltips = $scope.querySelectorAll('[data-module="govie-tooltip"]')
var $tooltips = $scope.querySelectorAll('[data-module="govie-tooltip"]');
nodeListForEach($tooltips, function ($tooltip) {
new Tooltip($tooltip).init()
})
new Tooltip($tooltip).init();
});

new Navigation().init()
new Navigation().init();
}

export {
Expand All @@ -158,7 +158,7 @@ export {
Tabs,
Tick,
Tooltip,
}
};

/**
* Config for all components
Expand Down
2 changes: 1 addition & 1 deletion src/govie/components/header/Header.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default {
docs: {
description: {
component:
'The OGCIO-DS header shows users that they are on gov.ie and which service they are using.',
'The Gov IE DS header shows users that they are on gov.ie and which service they are using.',
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/govie/templates/basic-page/BasicPage.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Template = () => {
<head>
<meta charset="utf-8">
<title>OGCIO-DS</title>
<title>Gov IE DS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down
2 changes: 1 addition & 1 deletion storybook/stories/api-reference/sass-api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,7 @@ $govie-show-breakpoints: false;
#### $govie-font-family-lato

List of font families to use if using Lato (the default font 'stack for
OGCIO-DS)
Gov IE DS)

#### Default value

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Link } from '../components/Link.jsx';

# Configure components with JavaScript

You can configure some of the components in OGCIO-DS to customise their behaviour.
You can configure some of the components in Gov IE DS to customise their behaviour.

You can configure a component by:

Expand Down
Loading

0 comments on commit 85309f6

Please sign in to comment.