diff --git a/packages/react/package.json b/packages/react/package.json index f963ee32d3..0eaaef2c7e 100644 --- a/packages/react/package.json +++ b/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" } } diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx index 9fd98e1f6b..2d422d98d9 100644 --- a/packages/react/src/components/HelpText/HelpText.tsx +++ b/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 { children: React.ReactNode; @@ -54,20 +54,19 @@ const HelpText = ({ onClick?.(event); }} > - - {title} diff --git a/packages/react/src/components/HelpText/HelpTextIcon.test.tsx b/packages/react/src/components/HelpText/HelpTextIcon.test.tsx new file mode 100644 index 0000000000..1e51dd0281 --- /dev/null +++ b/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 = {}) => + renderRtl( + , + ); diff --git a/packages/react/src/components/HelpText/HelpTextIcon.tsx b/packages/react/src/components/HelpText/HelpTextIcon.tsx new file mode 100644 index 0000000000..73ee1ef6f5 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/yarn.lock b/yarn.lock index fab9950802..fcf07538d0 100644 --- a/yarn.lock +++ b/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"