build: Remove dependency on navikt/ds-icons (#708)

packages/react/package.json

@@ -26,7 +26,6 @@
     "@digdir/design-system-tokens": "^0.2.0",
     "@floating-ui/react": "0.24.1",
     "@navikt/aksel-icons": "^3.2.4",
-    "@navikt/ds-icons": "^2.3.0",
     "react-number-format": "5.2.2"
   }
 }

packages/react/src/components/HelpText/HelpText.tsx

@@ -1,12 +1,12 @@
 import type { ButtonHTMLAttributes } from 'react';
 import React, { useState } from 'react';
 import cn from 'classnames';
-import { HelptextFilled, Helptext } from '@navikt/ds-icons';
 
 import { Popover } from '../Popover';
 import utilClasses from '../../utils/utility.module.css';
 
 import classes from './HelpText.module.css';
+import { HelpTextIcon } from './HelpTextIcon';
 
 export interface HelpTextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
@@ -54,20 +54,19 @@ const HelpText = ({
             onClick?.(event);
           }}
         >
-          <HelptextFilled
+          <HelpTextIcon
+            filled
             className={cn(
               classes.helpTextIcon,
               classes.helpTextIconFilled,
               classes[size],
               className,
             )}
-            data-state={open ? 'open' : 'closed'}
-            aria-hidden={true}
+            openState={open}
           />
-          <Helptext
+          <HelpTextIcon
             className={cn(classes.helpTextIcon, classes[size], className)}
-            data-state={open ? 'open' : 'closed'}
-            aria-hidden={true}
+            openState={open}
           />
           <span className={utilClasses.visuallyHidden}>{title}</span>
         </button>

packages/react/src/components/HelpText/HelpTextIcon.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render as renderRtl, screen } from '@testing-library/react';
+
+import type { HelpTextIconProps } from './HelpTextIcon';
+import { HelpTextIcon } from './HelpTextIcon';
+
+// Test data:
+const className = 'test-class';
+const defaultProps: HelpTextIconProps = {
+  className,
+  openState: true,
+};
+
+describe('HelpTextIcon', () => {
+  it('Renders an icon', () => {
+    render();
+    expect(getIcon()).toBeInTheDocument();
+  });
+
+  it('Renders with correct path when the `filled` property is `true`', () => {
+    render({ filled: true });
+    const path = getIcon().firstChild;
+    expect(path).toHaveAttribute(
+      'd',
+      expect.stringMatching(
+        /^M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16/,
+      ),
+    );
+  });
+
+  it('Renders with correct path when the `filled` property is `false`', () => {
+    render({ filled: false });
+    const path = getIcon().firstChild;
+    expect(path).toHaveAttribute(
+      'd',
+      expect.stringMatching(
+        /^M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C/,
+      ),
+    );
+  });
+
+  it('Renders with given className', () => {
+    render({ className });
+    expect(getIcon()).toHaveClass(className);
+  });
+
+  it('Renders with data-state="open" when `openState` is `true`', () => {
+    render({ openState: true });
+    expect(getIcon()).toHaveAttribute('data-state', 'open');
+  });
+
+  it('Renders with data-state="closed" when `openState` is `false`', () => {
+    render({ openState: false });
+    expect(getIcon()).toHaveAttribute('data-state', 'closed');
+  });
+
+  const getIcon = () => screen.getByRole('img', { hidden: true });
+});
+
+const render = (props: Partial<HelpTextIconProps> = {}) =>
+  renderRtl(
+    <HelpTextIcon
+      {...defaultProps}
+      {...props}
+    />,
+  );

packages/react/src/components/HelpText/HelpTextIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export type HelpTextIconProps = {
+  className: string;
+  filled?: boolean;
+  openState: boolean;
+};
+
+export const HelpTextIcon = ({
+  className,
+  filled = false,
+  openState,
+}: HelpTextIconProps) => {
+  const d = filled
+    ? 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z'
+    : 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z';
+
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      data-state={openState ? 'open' : 'closed'}
+      fill='none'
+      role='img'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        clipRule='evenodd'
+        d={d}
+        fill='currentColor'
+        fillRule='evenodd'
+      />
+    </svg>
+  );
+};

yarn.lock

@@ -3772,7 +3772,6 @@ __metadata:
     "@digdir/design-system-tokens": ^0.2.0
     "@floating-ui/react": 0.24.1
     "@navikt/aksel-icons": ^3.2.4
-    "@navikt/ds-icons": ^2.3.0
     react-number-format: 5.2.2
   peerDependencies:
     react: ">=16.8"
@@ -5432,19 +5431,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-icons@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "@navikt/ds-icons@npm:2.3.0"
-  peerDependencies:
-    "@types/react": ^17.0.30 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 82868de95a0bcb3e4c93d64d3aea754e9d98af5bd8d845cfbcbfd8231cb3501ff7cf2021c989e80a226585c3203c5d1e9a1bc672b19a087a8778e094f28f7317
-  languageName: node
-  linkType: hard
-
 "@ndelangen/get-tarball@npm:^3.0.7":
   version: 3.0.7
   resolution: "@ndelangen/get-tarball@npm:3.0.7"