docs: remove Link component usage (#221)

Author: hamza14khan

.storybook/preview.jsx

@@ -2,6 +2,7 @@
 /* eslint-disable import/no-webpack-loader-syntax */
 import React, { useEffect } from 'react';
 import { DocsContainer } from '@storybook/addon-docs';
+import { Link } from '../storybook/stories/components/Link';
 // import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'
 
 // import hseTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/themes/hse.css';
@@ -54,11 +55,7 @@ export const parameters = {
       return <DocsContainer context={context}>{children}</DocsContainer>;
     },
     components: {
-      a: ({ children, ...args }) => (
-        <a className="govie-link" {...args}>
-          {children}
-        </a>
-      ),
+      a: ({ children, ...args }) => <Link {...args}>{children}</Link>,
       p: ({ children, ...args }) => (
         <p className="govie-body" {...args}>
           {children}

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

@@ -1,11 +1,10 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Link } from '../components/Link.jsx';
 
 <Meta title="Docs/JavaScript API Reference" />
 
 # JavaScript API Reference
 
-Some of our components can receive configuration options when you create an instance in JavaScript. This page lists the available options for these components. You can find further information on how to <Link href='?path=/docs/docs-configure-components-with-javascript--docs'>configure these options in our guidance</Link>.
+Some of our components can receive configuration options when you create an instance in JavaScript. This page lists the available options for these components. You can find further information on how to [configure these options in our guidance](?path=/docs/docs-configure-components-with-javascript--docs).
 
 You can pass these options in an object either as:
 
@@ -164,7 +163,7 @@ Default: see properties
 
 Type: `object`
 
-Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining characters. This is a <Link href='?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules'>pluralised list of messages</Link>.
+Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining characters. This is a [pluralised list of messages](?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules).
 
 Default:
 
@@ -191,7 +190,7 @@ You have 0 characters remaining
 
 Type: `object`
 
-Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining characters. This is a <Link href='?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules'>pluralised list of messages</Link>.
+Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining characters. This is a [pluralised list of messages](?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules).
 
 Default:
 
@@ -207,7 +206,7 @@ Default:
 Type: `object`
 
 Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder
-with the number of remaining words. This is a <Link href='?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules'>pluralised list of messages</Link>
+with the number of remaining words. This is a [pluralised list of messages](?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules)
 
 Default:
 
@@ -234,7 +233,7 @@ You have 0 words remaining
 
 Type: `object`
 
-Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining words. This is a <Link href='?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules'>pluralised list of messages</Link>.
+Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `{'%{count}'}` placeholder with the number of remaining words. This is a [pluralised list of messages](?path=/story/docs-localise-ogcio-ds--docs#pluralisation-rules).
 
 Default:
 

storybook/stories/components/Link.jsx

@@ -1,11 +1,17 @@
 import packageJson from '../../../package.json';
 import React from 'react';
 
-export const Link = ({ children, href }) => (
-  <a className="govie-link" href={`${import.meta.env.BASE_URL}${href}`}>
-    {children}
-  </a>
-);
+export const Link = ({ children, href }) => {
+  const url = href.startsWith('https://')
+    ? href
+    : `${import.meta.env.BASE_URL}${href}`;
+
+  return (
+    <a className="govie-link" href={url}>
+      {children}
+    </a>
+  );
+};
 
 export const ReleaseLink = ({ children }) => {
   const version = packageJson.version;

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

@@ -1,5 +1,4 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Link } from '../components/Link.jsx';
 
 <Meta title="Docs/Configure components with JavaScript" />
 
@@ -41,7 +40,7 @@ If your configuration contains [quotes or other reserved HTML characters](https:
 
 Configuration is read from data attributes when the component is initialised. Changes to the data attributes made after the component has been initialised will have no effect on the behaviour of the component.
 
-Read the <Link href='?path=/docs/docs-javascript-api-reference--docs'>JavaScript API Reference</Link> for the configuration accepted by each component. You'll need to convert the configuration names into kebab-case.
+Read the [JavaScript API Reference](?path=/docs/docs-javascript-api-reference--docs) for the configuration accepted by each component. You'll need to convert the configuration names into kebab-case.
 
 ## Passing configuration to a new instance of a component in JavaScript
 
@@ -73,7 +72,7 @@ new CharacterCount($element, {
 }).init();
 ```
 
-Read the <Link href='?path=/docs/docs-javascript-api-reference--docs'>JavaScript API Reference</Link> to see what configuration each component accepts.
+Read the [JavaScript API Reference](?path=/docs/docs-javascript-api-reference--docs) to see what configuration each component accepts.
 
 ## Passing configuration using the initAll function
 

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

@@ -1,5 +1,4 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Link } from '../components/Link.jsx';
 
 <Meta title="Docs/Get started" />
 
@@ -17,13 +16,13 @@ You will need to do all the following steps to get your component working.
 
 ## 1. Install Gov IE Frontend package
 
-- You can <Link href="?path=/docs/docs-install-with-npm--docs">install Gov IE Frontend using npm</Link>.
+- You can [install Gov IE Frontend using npm](?path=/docs/docs-install-and-update-with-npm--docs).
 
-- 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>.
+- If you've [installed using precompiled files](?path=/story/docs-install-using-precompiled-files--docs), get started with [a basic page instead](?path=/story/docs-install-using-precompiled-files--docs#basic-example-page).
 
 ## 2. Add the HTML for a component to your application
 
-- Go to the <Link href='?path=/docs/typography-accordion--default'>example accordion component</Link>.
+- Go to the [example accordion component](?path=/docs/typography-accordion--default).
 
 - Paste the HTML into a page or template in your application.
 
@@ -48,7 +47,7 @@ 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 Frontend CSS</Link>.
+There are also different ways you can [import Gov IE Frontend CSS](?path=/docs/docs-import-css-assets-and-javascript--docs).
 
 ## 4. Get the font and images working
 
@@ -61,7 +60,7 @@ Your component will not use the right font or images until you've added Gov IE F
 
 Run your application, then use [the Fonts tab in Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts#The_Fonts_tab) to check the accordion is using the Lato font.
 
-In your live application, we recommend <Link href='?path=/docs/docs-import-css-assets-and-javascript--docs#fonts-and-images-assets'>using an automated task or your build pipeline</Link> instead of copying the files manually.
+In your live application, we recommend [using an automated task or your build pipeline](?path=/docs/docs-import-css-assets-and-javascript--docs#fonts-and-images-assets) instead of copying the files manually.
 
 ## 5. Get the JavaScript working
 
@@ -94,6 +93,6 @@ In your live application:
 
 - 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
+We recommend [using an automated task or your build pipeline](?path=/docs/docs-import-css-assets-and-javascript--docs#import-javascript) instead of copying the files manually
 
 You can now get the full code for page layouts and other components from this website.

storybook/stories/get-started/install-with-files.mdx

@@ -13,7 +13,7 @@ You can install Gov IE Frontend by copying our CSS, JavaScript and asset files i
 
 You'll not be able to:
 
-- Change <Link href='?path=/story/docs-sass-api-reference--docs'>Sass settings</Link>, for example override colours or set your own font
+- Change [Sass settings](?path=/story/docs-sass-api-reference--docs), for example override colours or set your own font
 - Import an individual component's CSS or JavaScript
 - Use Gov IE Frontend colours or mixins in your custom code
 
@@ -26,7 +26,7 @@ You'll not be able to:
 
 ## Check an example page
 
-1. Create a page in your project using the following HTML (in your live application, you should use the <Link href='?path=/docs/templates-basic-page--default'>Design System basic page template</Link> instead):
+1. Create a page in your project using the following HTML (in your live application, you should use the [Design System basic page template](?path=/docs/templates-basic-page--default) instead):
 
 ```html
 <!doctype html>
@@ -58,6 +58,6 @@ You'll not be able to:
 ```
 
 2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you copied from Gov IE Frontend GitHub repo.
-3. Go to the <Link href='?path=/docs/typography-accordion--default'>example accordion component</Link> on the Design System website and copy the HTML from the first example.
+3. Go to the [example accordion component](?path=/docs/typography-accordion--default) on the Design System website and copy the HTML from the first example.
 4. Replace `<!-- component HTML -->` with the accordion HTML you copied.
-5. Run your application - you can check it works the same way as the <Link href="iframe.html?id=typography-accordion--default&viewMode=story">Design System accordion example</Link> by selecting the buttons and checking the accordion 'shows' and 'hides' sections.
+5. Run your application - you can check it works the same way as the [Design System accordion example](iframe.html?id=typography-accordion--default&viewMode=story) by selecting the buttons and checking the accordion 'shows' and 'hides' sections.

storybook/stories/get-started/install-with-npm.mdx

@@ -1,5 +1,4 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Link } from '../components/Link.jsx';
 
 <Meta title="Docs/Install and update with npm" />
 
@@ -22,7 +21,7 @@ npm install @ogcio/ogcio-ds --save
 
 When the installation finishes, the `@ogcio/ogcio-ds` package will be in your `node_modules` folder.
 
-You should now get started by <Link href='?path=/docs/docs-get-started--docs'>getting the CSS, assets and JavaScript working</Link> with one gov.ie Frontend component.
+You should now get started by [getting the CSS, assets and JavaScript working](?path=/docs/docs-get-started--docs) with one gov.ie Frontend component.
 
 ## Update using Node.js package manager (npm)
 

storybook/stories/get-started/localisation.mdx

@@ -1,5 +1,4 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import { Link } from '../components/Link.jsx';
 
 <Meta title="Docs/Localise Gov IE Frontend" />
 
@@ -27,7 +26,7 @@ If you're using the Nunjucks macro, look at the Nunjucks macro options table in
 
 If you're using the HTML directly, you can customise the text used in the JavaScript by passing configuration using data attributes.
 
-Alternatively, you can <Link href='?path=/docs/docs-configure-components-with-javascript--docs'>configure the component with JavaScript</Link> at the point you initialise it or when using `initAll`.
+Alternatively, you can [configure the component with JavaScript](?path=/docs/docs-configure-components-with-javascript--docs) at the point you initialise it or when using `initAll`.
 
 The naming conventions for:
 
@@ -82,7 +81,7 @@ If you're looking to keep English messages and override only one of the plural f
 
 Our components will replace the `{'%{count}'}` placeholder with the number used for picking the plural category.
 
-The following example shows how to provide pluralisation options using the different ways you can <Link href='?path=/docs/docs-configure-components-with-javascript--docs'>configure components with JavaScript</Link>:
+The following example shows how to provide pluralisation options using the different ways you can [configure components with JavaScript](?path=/docs/docs-configure-components-with-javascript--docs):
 
 With data attributes