-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
181 changed files
with
5,597 additions
and
3,727 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
...udio-components/src/components/StudioBooleanToggleGroup/StudioBooleanToggleGroup.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import type { RefObject } from 'react'; | ||
| import React, { createRef } from 'react'; | ||
| import { act, render, screen, within } from '@testing-library/react'; | ||
| import type { StudioBooleanToggleGroupProps } from './StudioBooleanToggleGroup'; | ||
| import { StudioBooleanToggleGroup } from './StudioBooleanToggleGroup'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| describe('StudioBooleanToggleGroup', () => { | ||
| it('Renders a toggle group with toggles with the given labels', () => { | ||
| renderBooleanToggle(); | ||
| const withinRadioGroup = () => within(screen.getByRole('radiogroup')); | ||
| expect(withinRadioGroup().getByRole('radio', { name: trueLabel })).toBeInTheDocument(); | ||
| expect(withinRadioGroup().getByRole('radio', { name: falseLabel })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('Renders with the false toggle checked as default', () => { | ||
| renderBooleanToggle(); | ||
| expect(getFalseToggle()).toBeChecked(); | ||
| expect(getTrueToggle()).not.toBeChecked(); | ||
| }); | ||
|
|
||
| it('Renders with the true toggle checked when value is true', () => { | ||
| renderBooleanToggle({ value: true }); | ||
| expect(getTrueToggle()).toBeChecked(); | ||
| expect(getFalseToggle()).not.toBeChecked(); | ||
| }); | ||
|
|
||
| it('Renders with the false toggle checked when value is false', () => { | ||
| renderBooleanToggle({ value: false }); | ||
| expect(getFalseToggle()).toBeChecked(); | ||
| expect(getTrueToggle()).not.toBeChecked(); | ||
| }); | ||
|
|
||
| it('Calls the onChange callback with true when the user checks the true toggle', async () => { | ||
| const user = userEvent.setup(); | ||
| const onChange = jest.fn(); | ||
| renderBooleanToggle({ onChange, value: false }); | ||
| await act(() => user.click(getTrueToggle())); | ||
| expect(onChange).toHaveBeenCalledTimes(1); | ||
| expect(onChange).toHaveBeenCalledWith(true); | ||
| }); | ||
|
|
||
| it('Switches the toggle when the user checks the true toggle', async () => { | ||
| const user = userEvent.setup(); | ||
| renderBooleanToggle({ value: false }); | ||
| await act(() => user.click(getTrueToggle())); | ||
| expect(getTrueToggle()).toBeChecked(); | ||
| expect(getFalseToggle()).not.toBeChecked(); | ||
| }); | ||
|
|
||
| it('Calls the onChange callback with false when the user checks the false toggle', async () => { | ||
| const user = userEvent.setup(); | ||
| const onChange = jest.fn(); | ||
| renderBooleanToggle({ onChange, value: true }); | ||
| await act(() => user.click(getFalseToggle())); | ||
| expect(onChange).toHaveBeenCalledTimes(1); | ||
| expect(onChange).toHaveBeenCalledWith(false); | ||
| }); | ||
|
|
||
| it('Switches the toggle when the user checks the false toggle', async () => { | ||
| const user = userEvent.setup(); | ||
| renderBooleanToggle({ value: true }); | ||
| await act(() => user.click(getFalseToggle())); | ||
| expect(getFalseToggle()).toBeChecked(); | ||
| expect(getTrueToggle()).not.toBeChecked(); | ||
| }); | ||
|
|
||
| it('Updates the value when the value prop changes', () => { | ||
| const { rerender } = renderBooleanToggle({ value: true }); | ||
| expect(getTrueToggle()).toBeChecked(); | ||
| rerender(<StudioBooleanToggleGroup {...defaultProps} value={false} />); | ||
| expect(getFalseToggle()).toBeChecked(); | ||
| rerender(<StudioBooleanToggleGroup {...defaultProps} value={true} />); | ||
| expect(getTrueToggle()).toBeChecked(); | ||
| }); | ||
|
|
||
| it('Forwards the ref object to the toggle group element if given', () => { | ||
| const ref = createRef<HTMLDivElement>(); | ||
| const { container } = renderBooleanToggle({}, ref); | ||
| expect(ref.current).toBe(container.firstChild); // eslint-disable-line testing-library/no-node-access | ||
| }); | ||
|
|
||
| const getTrueToggle = () => screen.getByRole('radio', { name: trueLabel }); | ||
| const getFalseToggle = () => screen.getByRole('radio', { name: falseLabel }); | ||
| }); | ||
|
|
||
| const trueLabel = 'True'; | ||
| const falseLabel = 'False'; | ||
| const defaultProps: StudioBooleanToggleGroupProps = { | ||
| trueLabel, | ||
| falseLabel, | ||
| }; | ||
|
|
||
| const renderBooleanToggle = ( | ||
| props: Partial<StudioBooleanToggleGroupProps> = {}, | ||
| ref?: RefObject<HTMLDivElement>, | ||
| ) => render(<StudioBooleanToggleGroup {...defaultProps} {...props} ref={ref} />); |
37 changes: 37 additions & 0 deletions
37
...bs/studio-components/src/components/StudioBooleanToggleGroup/StudioBooleanToggleGroup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import type { ToggleGroupProps } from '@digdir/design-system-react'; | ||
| import { ToggleGroup } from '@digdir/design-system-react'; | ||
| import React, { forwardRef, useEffect, useState } from 'react'; | ||
|
|
||
| export type StudioBooleanToggleGroupProps = { | ||
| onChange?: (value: boolean) => void; | ||
| value?: boolean; | ||
| trueLabel: string; | ||
| falseLabel: string; | ||
| } & Omit<ToggleGroupProps, 'onChange' | 'value'>; | ||
|
|
||
| const StudioBooleanToggleGroup = forwardRef<HTMLDivElement, StudioBooleanToggleGroupProps>( | ||
| ({ falseLabel, onChange, trueLabel, value: givenValue, ...rest }, ref) => { | ||
| const [value, setValue] = useState<boolean>(givenValue ?? false); | ||
|
|
||
| useEffect(() => { | ||
| setValue(givenValue ?? false); | ||
| }, [givenValue]); | ||
|
|
||
| const handleChange = (stringValue: 'true' | 'false') => { | ||
| const newValue = stringValue === 'true'; | ||
| setValue(newValue); | ||
| onChange?.(newValue); | ||
| }; | ||
|
|
||
| return ( | ||
| <ToggleGroup {...rest} onChange={handleChange} value={value ? 'true' : 'false'} ref={ref}> | ||
| <ToggleGroup.Item value='true'>{trueLabel}</ToggleGroup.Item> | ||
| <ToggleGroup.Item value='false'>{falseLabel}</ToggleGroup.Item> | ||
| </ToggleGroup> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| StudioBooleanToggleGroup.displayName = 'StudioBooleanToggleGroup'; | ||
|
|
||
| export { StudioBooleanToggleGroup }; |
2 changes: 2 additions & 0 deletions
2
frontend/libs/studio-components/src/components/StudioBooleanToggleGroup/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { StudioBooleanToggleGroup } from './StudioBooleanToggleGroup'; | ||
| export type { StudioBooleanToggleGroupProps } from './StudioBooleanToggleGroup'; |
8 changes: 8 additions & 0 deletions
8
...nd/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .code { | ||
| background-color: var(--fds-semantic-surface-neutral-subtle); | ||
| border: 1px solid var(--fds-semantic-border-neutral-subtle); | ||
| border-radius: var(--fds-border_radius-small); | ||
| font-family: 'Courier New', monospace; | ||
| font-size: 0.8em; | ||
| padding: 0 var(--fds-spacing-1); | ||
| } |
35 changes: 35 additions & 0 deletions
35
...tend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React, { createRef } from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { StudioCodeFragment } from './StudioCodeFragment'; | ||
|
|
||
| jest.mock('./StudioCodeFragment.module.css', () => ({ | ||
| code: 'code', | ||
| })); | ||
|
|
||
| /* eslint-disable testing-library/no-node-access */ | ||
| describe('StudioCodeFragment', () => { | ||
| it('Renders the given content', () => { | ||
| const content = 'Test'; | ||
| render(<StudioCodeFragment>{content}</StudioCodeFragment>); | ||
| expect(screen.getByText(content)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('Appends given classname to internal classname', () => { | ||
| const className = 'test-class'; | ||
| const { container } = render(<StudioCodeFragment className={className} />); | ||
| expect(container.firstChild).toHaveClass(className); | ||
| expect(container.firstChild).toHaveClass('code'); | ||
| }); | ||
|
|
||
| it('Adds any additonal props to the element', () => { | ||
| const dataTestId = 'test'; | ||
| render(<StudioCodeFragment data-testid={dataTestId} />); | ||
| expect(screen.getByTestId(dataTestId)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('Forwards the ref object to the code element if given', () => { | ||
| const ref = createRef<HTMLElement>(); | ||
| const { container } = render(<StudioCodeFragment ref={ref} />); | ||
| expect(ref.current).toBe(container.firstChild); | ||
| }); | ||
| }); |
21 changes: 21 additions & 0 deletions
21
frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import type { HTMLAttributes } from 'react'; | ||
| import React, { forwardRef } from 'react'; | ||
| import cn from 'classnames'; | ||
| import classes from './StudioCodeFragment.module.css'; | ||
|
|
||
| export type StudioCodeFragmentProps = HTMLAttributes<HTMLElement>; | ||
|
|
||
| const StudioCodeFragment = forwardRef<HTMLElement, StudioCodeFragmentProps>( | ||
| ({ children, className: givenClass, ...rest }, ref) => { | ||
| const className = cn(classes.code, givenClass); | ||
| return ( | ||
| <code className={className} {...rest} ref={ref}> | ||
| {children} | ||
| </code> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| StudioCodeFragment.displayName = 'StudioCodeFragment'; | ||
|
|
||
| export { StudioCodeFragment }; |
2 changes: 2 additions & 0 deletions
2
frontend/libs/studio-components/src/components/StudioCodeFragment/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { StudioCodeFragment } from './StudioCodeFragment'; | ||
| export type { StudioCodeFragmentProps } from './StudioCodeFragment'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
...bs/studio-components/src/components/StudioExpression/ManualEditor/ManualEditor.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .manualEditor textarea { | ||
| font-family: 'Courier New', monospace; | ||
| font-size: 0.8em; | ||
| } |
Oops, something went wrong.