chore(#33): Remove local components and replace with `@digdir/design-…

…system-react` components (#34) * update designsystem, remove local `Link` and `Heading` * remove local Link from index.ts * remove `Body`, replace with `Paragraph` in story --------- Co-authored-by: Øyvind Thune <oyvlei@gmail.com>
felleslosninger · Sep 20, 2023 · 65461f4 · 65461f4
1 parent 2db03a5
commit 65461f4
Show file tree

Hide file tree

Showing 21 changed files with 12 additions and 453 deletions.
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-
-import { Link } from '../Link';
-import { Body } from '../Typography/Body';
+import { Link, Paragraph } from '@digdir/design-system-react';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -18,12 +16,12 @@ const CHILDREN = [
   >
     Forrige side
   </Link>,
-  <Body
+  <Paragraph
     key={4}
     size='medium'
   >
     Body
-  </Body>,
+  </Paragraph>,
 ];
 
 export default {

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render as renderRtl, screen } from '@testing-library/react';
-
-import { Link } from '../Link';
+import { Link } from '@digdir/design-system-react';
 
 import { Breadcrumb } from './Breadcrumb';
 import type { BreadcrumbProps } from './Breadcrumb';

diff --git a/packages/react/src/components/Header/Header.stories.tsx b/packages/react/src/components/Header/Header.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
+import { Link } from '@digdir/design-system-react';
 
 import myLogo from '../../../../../assets/img/digdir-logo.svg';
-import { Link } from '../Link/Link';
 
 import { Header } from './Header';
 import classes from './HeaderStories.module.css';

diff --git a/packages/react/src/components/Link/Link.module.css b/packages/react/src/components/Link/Link.module.css
diff --git a/packages/react/src/components/Link/Link.stories.tsx b/packages/react/src/components/Link/Link.stories.tsx
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
diff --git a/packages/react/src/components/Link/index.ts b/packages/react/src/components/Link/index.ts
diff --git a/packages/react/src/components/LinkList/LinkList.stories.tsx b/packages/react/src/components/LinkList/LinkList.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { Link } from '../Link/Link';
+import { Link } from '@digdir/design-system-react';
 
 import { LinkList } from './LinkList';
 

diff --git a/packages/react/src/components/LinkList/LinkList.test.tsx b/packages/react/src/components/LinkList/LinkList.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render as renderRtl, screen } from '@testing-library/react';
-
-import { Link } from '../Link/Link';
+import { Link } from '@digdir/design-system-react';
 
 import type { LinkListProps } from './LinkList';
 import { LinkList, ERRORMESSAGE } from './LinkList';
@@ -37,8 +36,9 @@ describe('LinkList', () => {
       inverted: true,
       title: 'title',
     });
-    const list = screen.getByRole('link');
-    expect(list.classList).toContain('inverted');
+    const link = screen.getByRole('link');
+    // check if the link has the inverted class, it may have been scrambled by the css modules
+    expect(JSON.stringify(link.classList)).toContain('inverted');
   });
 
   it('throw error message, if linkTitle is true and url is undefined', () => {

diff --git a/packages/react/src/components/LinkList/LinkList.tsx b/packages/react/src/components/LinkList/LinkList.tsx
@@ -1,9 +1,9 @@
 import React, { createElement, useEffect, useState } from 'react';
 import cn from 'classnames';
+import type { LinkProps } from '@digdir/design-system-react';
+import { Link } from '@digdir/design-system-react';
 
 import { errorMessage } from '../../utils/helperFunctions/ThrowMessageHelper';
-import type { LinkProps } from '../Link/Link';
-import { Link } from '../Link/Link';
 
 import classes from './LinkList.module.css';
 

diff --git a/packages/react/src/components/Typography/Body/Body.module.css b/packages/react/src/components/Typography/Body/Body.module.css
diff --git a/packages/react/src/components/Typography/Body/Body.stories.tsx b/packages/react/src/components/Typography/Body/Body.stories.tsx
diff --git a/packages/react/src/components/Typography/Body/Body.test.tsx b/packages/react/src/components/Typography/Body/Body.test.tsx
diff --git a/packages/react/src/components/Typography/Body/Body.tsx b/packages/react/src/components/Typography/Body/Body.tsx
diff --git a/packages/react/src/components/Typography/Body/index.ts b/packages/react/src/components/Typography/Body/index.ts