docs: Add "edit on github" link to pages (#1388)

Co-authored-by: Marianne Røsvik <marianne.rosvik@digdir.no>

Author: Barsnes

apps/storefront/components/Link/Github/GithubLink.tsx

@@ -0,0 +1,30 @@
+'use client';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import Image from 'next/image';
+import { Link } from '@digdir/design-system-react';
+import { useRouter } from 'next/router';
+
+export const GithubLink = ({ ...rest }: HTMLAttributes<HTMLAnchorElement>) => {
+  const { asPath } = useRouter();
+  const href = `https://github.com/digdir/designsystemet/tree/main/apps/storefront/pages${asPath}.mdx`;
+
+  return (
+    <Link
+      href={href}
+      target='_blank'
+      rel='noopener noreferrer'
+      {...rest}
+    >
+      <Image
+        height={20}
+        width={20}
+        alt='github logo'
+        src='/img/logos/github-logo.svg'
+      />
+      Rediger denne siden på Github
+    </Link>
+  );
+};
+
+export default GithubLink;

apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css

@@ -53,6 +53,10 @@
   padding: var(--fds-spacing-4) var(--fds-spacing-7) 0 var(--fds-spacing-7);
 }
 
+.githubLink {
+  margin-top: var(--fds-spacing-6);
+}
+
 @media (max-width: 576px) {
   .content {
     padding: 0;

apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 
+import GithubLink from 'components/Link/Github/GithubLink';
+
 import { Container, SidebarMenu, MdxContent } from '../../components';
 
 import classes from './MenuPageLayout.module.css';
@@ -38,6 +40,7 @@ const MenuPageLayout = ({ content, data }: PageLayoutProps) => {
             id='content'
           >
             <MdxContent>{content}</MdxContent>
+            <GithubLink className={classes.githubLink} />
           </div>
         </main>
       </Container>

apps/storefront/pages/grunnleggende/introduksjon/designprinsipper.mdx

@@ -74,10 +74,3 @@ Eksempel på opplevelser vi ønsker at innbyggerne skal ha i møte med oss:
 - Interaction Design Foundation: [Design principles](https://www.interaction-design.org/literature/topics/design-principles)
 - Jon Yablonski: [Laws of UX](https://lawsofux.com/)
 - Netlife Blogg: [5 prinsipper for god brukeropplevelse](https://www.netlife.com/blogg/5-prinsipper-for-god-brukeropplevelse-ux)
-
-\
-\
-\
-Bidra til denne oversikten i [Github](https://github.com/digdir/designsystemet/tree/main/apps/storefront/pages/god-praksis/brukerinnsikt/designprinsipper).
-
----