Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add StudioSearch component #14348

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+105 −38
Open

feat: add StudioSearch component #14348

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
deffcef
add StudioSearch component
standeren Jan 3, 2025
1a85346
use correct pattern for fasade components
standeren Jan 3, 2025
8a92744
use new search component in dashboard
standeren Jan 3, 2025
e87aee2
remove redundant small prop
standeren Jan 3, 2025
f9af409
remove redundant clear button on dashboard
standeren Jan 6, 2025
be02951
fix tests
standeren Jan 6, 2025
78bf413
Merge branch 'main' into add-studio-component-for-search
standeren Jan 6, 2025
2679d7c
add label to studioSearch
standeren Jan 6, 2025
02032b5
Merge branch 'main' into add-studio-component-for-search
TomasEng Jan 7, 2025
f2cc3c9
add htmlFor to connect Label to Search component
standeren Jan 7, 2025
1e25e72
use dynamic id in StudioSearch
standeren Jan 8, 2025
b4058eb
add test with id as prop and include id when showLabel is false
standeren Jan 9, 2025
045c842
Merge branch 'main' into add-studio-component-for-search
TomasEng Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions frontend/libs/studio-components/src/components/StudioSearch/index.ts
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg ser at det er gjort på denne måten enkelte andre steder, men for å følge fasademønsteret, bør vi egentlig lage en egen komponent rundt designsystemkomponenten. Da kan vi også sette size='sm' som standard og ta i bruk WithoutAsChild på prop-typen.

Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export {
Search as StudioSearch,
type SearchProps as StudioSearchProps,
} from '@digdir/designsystemet-react';
1 change: 1 addition & 0 deletions frontend/libs/studio-components/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export * from './StudioProperty';
export * from './StudioRecommendedNextAction';
export * from './StudioRedirectBox';
export * from './StudioResizableLayout';
export * from './StudioSearch';
export * from './StudioSectionHeader';
export * from './StudioSpinner';
export * from './StudioSwitch';
Expand Down
5 changes: 2 additions & 3 deletions ...ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { Search } from '@digdir/designsystemet-react';
import { StudioFileUploader } from '@studio/components';
import { StudioFileUploader, StudioSearch } from '@studio/components';
import classes from './CodeListsActionsBar.module.css';
import { useTranslation } from 'react-i18next';
import type { CodeListWithMetadata } from '../CodeListPage';
Expand Down Expand Up @@ -36,7 +35,7 @@ export function CodeListsActionsBar({

return (
<div className={classes.actionsBar}>
<Search
<StudioSearch
className={classes.searchField}
size='sm'
placeholder={t('app_content_library.code_lists.search_placeholder')}
Expand Down
2 changes: 1 addition & 1 deletion frontend/packages/text-editor/src/TextEditor.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
.filterAndSearch {
display: flex;
flex-direction: row;
align-items: flex-end;
align-items: center;
gap: 1rem;
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/packages/text-editor/src/TextEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,13 +153,13 @@ describe('TextEditor', () => {
renderTextEditor({});

const textEntries = screen.getAllByRole('textbox');
expect(textEntries[1]).toHaveValue(textValue1);
expect(textEntries[0]).toHaveValue(textValue1);

const sortAlphabeticallyButton = screen.getByText(textMock('text_editor.sort_alphabetically'));
await user.click(sortAlphabeticallyButton);

const sortedTranslations = screen.getAllByRole('textbox');
expect(sortedTranslations[1]).toHaveValue(textValue2);
expect(sortedTranslations[0]).toHaveValue(textValue2);
TomasEng marked this conversation as resolved.
Show resolved Hide resolved
});

it('signals correctly when a translation is changed', async () => {
Expand Down
9 changes: 4 additions & 5 deletions frontend/packages/text-editor/src/TextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import classes from './TextEditor.module.css';
import type { LangCode, TextResourceEntryDeletion, TextResourceIdMutation } from './types';
import type { UpsertTextResourceMutation } from 'app-shared/hooks/mutations/useUpsertTextResourceMutation';
import { SearchField } from '@altinn/altinn-design-system';
TomasEng marked this conversation as resolved.
Show resolved Hide resolved
import { Chip } from '@digdir/designsystemet-react';
import { ArrowsUpDownIcon } from '@studio/icons';
import { StudioButton } from '@studio/components';
import { StudioButton, StudioSearch } from '@studio/components';
import { RightMenu } from './RightMenu';
import { getRandNumber, mapResourceFilesToTableRows } from './utils';
import { defaultLangCode } from './constants';
Expand Down Expand Up @@ -108,9 +107,9 @@ export const TextEditor = ({
}
</Chip.Toggle>
<div>
<SearchField
id='text-editor-search'
label={t('text_editor.search_for_text')}
<StudioSearch
size='small'
placeholder={t('text_editor.search_for_text')}
TomasEng marked this conversation as resolved.
Show resolved Hide resolved
value={searchQuery}
onChange={handleSearchChange}
/>
Expand Down
Loading