docs: refactor govie ds naming to govie frontend (#220)

Author: hamza14khan

.storybook/preview.jsx

@@ -134,7 +134,7 @@ export const parameters = {
           'Install using precompiled files',
           'Import CSS, assets and JavaScript',
           'Configure components with JavaScript',
-          'Localise Gov IE DS',
+          'Localise Gov IE Frontend',
           'JavaScript API Reference',
           'Sass API Reference',
           'Colours',

README.md

@@ -1,43 +1,43 @@
-# Gov IE Design System
+# Gov IE Frontend
 
-Gov IE DS contains the code you need to start building a user interface for government platforms and services.
+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 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 Frontend](https://ogcio.github.io/ogcio-ds/).
 
 ## Contact the team
 
-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.
+If you want to know more about Gov IE Frontend, 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 Gov IE Design System components in your app.
+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 Design System in your service.
+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 Design System using node package manager
+We recommend [installing Gov IE Frontend 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 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).
+You can also install Gov IE Frontend 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 Gov IE DS team works hard to ensure that Gov IE DS is accessible.
+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](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 Gov IE DS](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-import-css-assets-and-javascript--docs)
+- [the JavaScript from Gov IE Frontend](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-import-css-assets-and-javascript--docs)
 
-You can also read the [accessibility statement for Gov IE DS](https://www.design-system.ogcio.gov.ie/accessibility/)
+You can also read the [accessibility statement for Gov IE Frontend](https://www.design-system.ogcio.gov.ie/accessibility/)
 
 ## Getting updates
 
-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)
+To be notified when there’s a new release, you can [watch the Gov IE Frontend 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/).
 
@@ -127,7 +127,7 @@ To uninstall Husky hooks, run the following command:
 npm run husky:uninstall
 ```
 
-## Gov IE DS package publishing
+## Gov IE Frontend 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)

src/govie/README.md

@@ -2,7 +2,7 @@
 
 ## Structure
 
-Gov IE DS is broken into a number of layers in order to help provide a
+Gov IE Frontend is broken into a number of layers in order to help provide a
 logical structure, loosely following the conventions of [ITCSS].
 
 1. [Settings](#settings)

src/govie/all.mjs

@@ -21,7 +21,7 @@ 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 Gov IE DS.
+ * components provided as part of Gov IE Frontend.
  *
  * @param {object} [config] - Config
  * @param {HTMLElement} [config.scope=document] - Scope to query for components
@@ -34,7 +34,7 @@ import Tooltip from './components/tooltip/tooltip.mjs';
 function initAll(config) {
   config = typeof config !== 'undefined' ? config : {};
 
-  // Allow the user to initialise Gov IE DS in only certain sections of the page
+  // Allow the user to initialise Gov IE Frontend 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;
 

src/govie/components/header/Header.stories.js

@@ -7,7 +7,7 @@ export default {
     docs: {
       description: {
         component:
-          'The Gov IE DS header shows users that they are on gov.ie and which service they are using.',
+          'The Gov IE Frontend header shows users that they are on gov.ie and which service they are using.',
       },
     },
   },

src/govie/templates/basic-page/BasicPage.stories.js

@@ -19,7 +19,7 @@ const Template = () => {
   
   <head>
     <meta charset="utf-8">
-    <title>Gov IE DS</title>
+    <title>Gov IE Frontend</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">

storybook/stories/api-reference/sass-api-reference.mdx

@@ -408,7 +408,7 @@ $govie-show-breakpoints: false;
 #### $govie-font-family-lato
 
 List of font families to use if using Lato (the default font 'stack for
-Gov IE DS)
+Gov IE Frontend)
 
 #### Default value
 

storybook/stories/get-started/configure-components-javascript.mdx

@@ -5,7 +5,7 @@ import { Link } from '../components/Link.jsx';
 
 # Configure components with JavaScript
 
-You can configure some of the components in Gov IE DS to customise their behaviour.
+You can configure some of the components in Gov IE Frontend to customise their behaviour.
 
 You can configure a component by:
 

storybook/stories/get-started/get-started.mdx

@@ -5,19 +5,19 @@ import { Link } from '../components/Link.jsx';
 
 # Get started
 
-Get one Gov IE DS component working in your application, so you can test everything works before you add more components or styles.
+Get one Gov IE Frontend component working in your application, so you can test everything works before you add more components or styles.
 
 You will need to do all the following steps to get your component working.
 
-1. Install Gov IE DS package.
+1. Install Gov IE Frontend package.
 2. Add the HTML for a component to your application.
 3. Get the CSS working.
 4. Get the font and images working.
 5. Get the JavaScript working.
 
-## 1. Install Gov IE DS package
+## 1. Install Gov IE Frontend package
 
-- You can <Link href="?path=/docs/docs-install-with-npm--docs">install Gov IE DS using npm</Link>.
+- You can <Link href="?path=/docs/docs-install-with-npm--docs">install Gov IE Frontend using npm</Link>.
 
 - If you've <Link href='?path=/story/docs-install-using-precompiled-files--docs'>installed using precompiled files</Link>, get started with a <Link href='?path=/story/docs-install-using-precompiled-files--docs#basic-example-page'>a basic page instead</Link>.
 
@@ -29,7 +29,7 @@ You will need to do all the following steps to get your component working.
 
 ## 3. Get the CSS working
 
-1. Add the following to the main Sass file in your project, so your Sass compiler adds all of Gov IE DS styles to your CSS file.
+1. Add the following to the main Sass file in your project, so your Sass compiler adds all of Gov IE Frontend styles to your CSS file.
 
 ```sass
 @import '@ogcio/ogcio-ds/govie/all';
@@ -48,11 +48,11 @@ Run your application and check that the accordion displays correctly.
 
 The accordion will use a generic font until you get the font and images working, and will not be interactive until you get the JavaScript working.
 
-There are also different ways you can <Link href='?path=/docs/docs-import-css-assets-and-javascript--docs'>import Gov IE DS CSS</Link>.
+There are also different ways you can <Link href='?path=/docs/docs-import-css-assets-and-javascript--docs'>import Gov IE Frontend CSS</Link>.
 
 ## 4. Get the font and images working
 
-Your component will not use the right font or images until you've added Gov IE DS assets to your application.
+Your component will not use the right font or images until you've added Gov IE Frontend assets to your application.
 
 1. Copy the following 2 folders:
 
@@ -92,7 +92,7 @@ Run your application and check it works the same way as the Design System accord
 
 In your live application:
 
-- You must use `initAll` to initialise all components that use Gov IE DS JavaScript, or some components will not work correctly for disabled users who use assistive technologies
+- You must use `initAll` to initialise all components that use Gov IE Frontend JavaScript, or some components will not work correctly for disabled users who use assistive technologies
 
 We recommend <Link href='?path=/docs/docs-import-css-assets-and-javascript--docs#import-javascript'>using an automated task or your build pipeline</Link> instead of copying the files manually
 

storybook/stories/get-started/import-assets.mdx

@@ -8,7 +8,7 @@ import { Canvas, Meta } from '@storybook/blocks';
 
 ### Import all the CSS
 
-To import all the Sass rules from Gov IE DS, add the following to your Sass file:
+To import all the Sass rules from Gov IE Frontend, add the following to your Sass file:
 
 ```sass
 @import "@ogcio/ogcio-ds/govie/all";
@@ -21,7 +21,7 @@ If you want to improve how quickly your service's pages load in browsers, you ca
 - Import `@ogcio/ogcio-ds/govie/base` in your Sass file.
 - Import the parts of the CSS you need.
 
-For example, add the following to your Sass file to import the CSS you need for a basic Gov IE DS page.
+For example, add the following to your Sass file to import the CSS you need for a basic Gov IE Frontend page.
 
 ```sass
 @import "@ogcio/ogcio-ds/govie/base";\n
@@ -48,16 +48,16 @@ To import the button component for example, add the following to your Sass file:
 
 ### Override with your own CSS
 
-If you want to override Gov IE DS styles with your own styles, `@import` Gov IE DS styles before your own Sass rules.
+If you want to override Gov IE Frontend styles with your own styles, `@import` Gov IE Frontend styles before your own Sass rules.
 
 <h2 id="fonts-and-images-assets">Font and image assets</h2>
 
-To use the font and image assets from Gov IE DS, you can either:
+To use the font and image assets from Gov IE Frontend, you can either:
 
-- serve the assets from the Gov IE DS assets folder - recommended
+- serve the assets from the Gov IE Frontend assets folder - recommended
 - copy the font and image files into your application
 
-### Serve the assets from the Gov IE DS assets folder - recommended
+### Serve the assets from the Gov IE Frontend assets folder - recommended
 
 Set up your routing so that requests for files in `<YOUR-SITE-URL>/assets` are served from `/node_modules/@ogcio/ogcio-ds/govie/assets`.
 
@@ -78,7 +78,7 @@ If you decide to copy the assets instead, copy the:
 - `/node_modules/@ogcio/ogcio-ds/govie/assets/images` folder to `<YOUR-APP>/assets/images`
 - `/node_modules/@ogcio/ogcio-ds/govie/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
 
-You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update Gov IE DS.
+You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update Gov IE Frontend.
 
 #### If you have your own folder structure
 
@@ -106,9 +106,9 @@ You can also use your own function to generate paths, for example if you're usin
 
 <h2 id="import-javascript">JavaScript</h2>
 
-To import the JavaScript from Gov IE DS, you can either:
+To import the JavaScript from Gov IE Frontend, you can either:
 
-- add Gov IE DS's JavaScript file to your HTML
+- add Gov IE Frontend's JavaScript file to your HTML
 - import JavaScript using a bundle
 
   r
@@ -164,7 +164,7 @@ if ($radios) {
 }
 ```
 
-If you need to import all of Gov IE DS components, then run the `initAll` function to initialise them:
+If you need to import all of Gov IE Frontend components, then run the `initAll` function to initialise them:
 
 ```javascript
 import { initAll } from '@ogcio/ogcio-ds';